写代码啦
CSS盒模型
回复数(1) 浏览数(27)
Paula hu 2020-第二期 03月24日 22:02 最后回复来自: 可一可再 学霸评比参赛博客
{{topic.upvote_count || 0}} 编辑 回复

盒模型是CSS中很重要的一个概念。只有真正的理解好盒模型,才能正确的使用盒模型进行页面布局。在这篇文章中,我们将深入地探讨CSS盒模型的原理和机制。

盒模型基本概念

所有HTML元素,在页面的呈现过程中,都遵循CSS制定的盒模型。盒模型的几个要素是bordermarginpaddingcontent,如下图,


)

  • content:真正包含元素内容的区域
  • padding(内边距):内容和边框之间的一段间距,属于标签内部
  • border(边框):包含边框的区域,扩展了内边距区域。它位于边框边界内部。大小为border-box宽和border-box高
  • margin(外边距):该标签和其他标签之间的间距,设置此内容,不会影响标签的大小

当一个元素既有margin,又有padding,还有边框时,在普通流中所占的空间就是这些值的总和。即横向空间为:marginLeft + borderLeftWidth + paddingLeft + width + paddingRight + borderRightWidth + marginRight,纵向的同理。

盒模型的分类及不同盒模型之间的区别

盒模型分为IE盒模型和W3C标准的盒模型。它们之间的区别在于IE盒模型和W3C标准盒模型计算高度和宽度的方式不同。具体不同表现在以下方面:

** W3C标准盒模型(高度的计算类似):** 

  • 一个元素的宽度=content
  • 盒子的总宽度=margin-left+border-left+padding-left+width+padding-right+border-right+margin-right

** IE怪异盒模型(高度的计算类似):** 

  • 一个元素的宽度=content+padding+border
  • 盒子的总宽度=margin-left+width+margin-right

如何通过CSS设置IE盒模型和W3C标准盒模型

//W3C标准盒模型(浏览器默认)
box-sizing:content-box;

//IE怪异盒模型
box-sizing:border-box;

box-sizing是CSS3的新属性,为了避免在不同的浏览器中表现不同的情况产生,我们可以这样使用

Element {
     -moz-box-sizing: border-box;  
     -webkit-box-sizing: border-box; 
     -o-box-sizing: border-box; 
     -ms-box-sizing: border-box; 
     box-sizing: border-box; 
  }

因此,根据我们的需要,我们每次在新建一个项目时应实现确定使用哪种盒模型。一般来说,大多数人会选择IE盒模型,因为这比较符合大多数人的理解方式。

盒模型是CSS中很重要的一个概念。只有真正的理解好盒模型,才能正确的使用盒模型进行页面布局。在这篇文章中,我们将深入地探讨CSS盒模型的原理和机制。

盒模型基本概念

所有HTML元素,在页面的呈现过程中,都遵循CSS制定的盒模型。盒模型的几个要素是bordermarginpaddingcontent,如下图,


)

  • content:真正包含元素内容的区域
  • padding(内边距):内容和边框之间的一段间距,属于标签内部
  • border(边框):包含边框的区域,扩展了内边距区域。它位于边框边界内部。大小为border-box宽和border-box高
  • margin(外边距):该标签和其他标签之间的间距,设置此内容,不会影响标签的大小

当一个元素既有margin,又有padding,还有边框时,在普通流中所占的空间就是这些值的总和。即横向空间为:marginLeft + borderLeftWidth + paddingLeft + width + paddingRight + borderRightWidth + marginRight,纵向的同理。

盒模型的分类及不同盒模型之间的区别

盒模型分为IE盒模型和W3C标准的盒模型。它们之间的区别在于IE盒模型和W3C标准盒模型计算高度和宽度的方式不同。具体不同表现在以下方面:

** W3C标准盒模型(高度的计算类似):** 

  • 一个元素的宽度=content
  • 盒子的总宽度=margin-left+border-left+padding-left+width+padding-right+border-right+margin-right

** IE怪异盒模型(高度的计算类似):** 

  • 一个元素的宽度=content+padding+border
  • 盒子的总宽度=margin-left+width+margin-right

如何通过CSS设置IE盒模型和W3C标准盒模型

//W3C标准盒模型(浏览器默认)
box-sizing:content-box;

//IE怪异盒模型
box-sizing:border-box;

box-sizing是CSS3的新属性,为了避免在不同的浏览器中表现不同的情况产生,我们可以这样使用

Element {
     -moz-box-sizing: border-box;  
     -webkit-box-sizing: border-box; 
     -o-box-sizing: border-box; 
     -ms-box-sizing: border-box; 
     box-sizing: border-box; 
  }

因此,根据我们的需要,我们每次在新建一个项目时应实现确定使用哪种盒模型。一般来说,大多数人会选择IE盒模型,因为这比较符合大多数人的理解方式。

27
回复 编辑