当前位置:Gxlcms > html代码 > css文档流中块级非替换元素水平区域的计算规则(1)_html/css_WEB-ITnose

css文档流中块级非替换元素水平区域的计算规则(1)_html/css_WEB-ITnose

时间:2021-07-01 10:21:17 帮助过:40人阅读

  最近在读《Basic Visual Formatting in CSS》,结合以前看的《css权威指南》和css标准。今天就做个笔记。
  以前在遇到一些宽度不明确指明的一些布局的时候,虽然凭感觉能猜出个大概,但是总是有点不是很靠谱。直到最近看到这一本书,觉得总觉得挺好的。

  首先要知道,元素除了通过display来指定block、inline、inline-block这一些属性之外,还有一种能在的特性--替换还是非替换。

    替换元素:像img、video、canvas等稳定种指定的内容只是占位,真正的内容实在后面替换上去的。像img内容是图片加载完成之后替换上去的。
    非替换元素:像div、p、span这一些内容就写在文档中。
  而这里要说到的主要是块级非替换元素既display:block的非替换元素,如p、div;还有就是display:list-item,如li。li虽然看display像是和div、p这一些是两类,但是其实li除了多了前面的标志之外,别的行为基本都是一样的。

  下面进入正题,文档流中块级非替换元素的水平格式化和包含块(containing block)还有七个属性有关(border-left、margin-left、padding-left、width、padding-right、margin-right、border-right)。文档流中块级元素的containing block一般指的是父级块级元素的内容区域(content area)。也就是在box-sizing:content-box时,width指定的区域。下面有一条公式:

  'margin-left' + 'border-left-width' + 'padding-left' + 'width' + 'padding-right' + 'border-right-width' + 'margin-right' = width of containing block

  上面的公式在所有情况下都要成立。但是很快问题就来了,要是我把7个属性的值都设了值,但是加起来不等于containing block的width怎么办;又或者我把值都设置为auto,那又怎么样去计算呢?其实在这七个值中,只有三个值margin-left、margin-right、width能够设置为auto。我们首先看看把这三个属性设置为auto的情况,由于这三个属性可以设置为auto或者是非auto,那么就是说一共有23,8种情况。下面来分别说下:

  1、一个值设置为auto,也就是margin-left、margin-right或者width设置为auto。这三种情况最简单了,直接套上面的公式一算就知道了。

  2、两个值设置为auto。

    2.1、margin-left和margin-right设置为auto,width指定一个非auto的值。这种情况就是我们平时的水平居中,margin-left和margin-right获得相同的值。

    2.2、margin-left和width设置为auto,margin-right指定一个非auto的值。margin-left重设为0,然后就变成了1情况了。

    2.3、margin-right和width设置为auto,margin-left指定一个非auto的值。margin-right重设为0,然后又变成了1情况了。

  3、三个值设置为auto。margin-left和margin-right都重设为0,然后根据1来计算。

  4、假如没有一个设置为auto,在css中叫"over-constrained"(过度约束)。那么在文档流方向为左到右的时候margin-right的值会被忽略,然后还是1情况。这种情况最容易理解错,容易吧"over-constrained"理解成指定了所有的值后使得上面公式左边小于右边。正确的理解应该是"指定了三个值,都没有变通的余地了"。所以只要给margin-left、width和margin-right都指定了auto之外的值(就算是0),也是"over-constrained"了。

  上面的内容似乎已经覆盖了所有的情况了,其实不然,还有一种特殊情况就是margin-left,margin-right设置为auto,width有指定值,但是border-left+padding-left+width+padding-right+border-right> width of containing block。按照上面的说法,margin-left和margin-right获得相同的值,但事实是,margin-left和margin-right重设为0,然后过度约束,然后忽略掉一个。

人气教程排行