目前大概只看了width,height这一部分的介绍,感觉明悟了一点之前关于布局的疑惑.
1. 关于display:block
block属性具有最具代表性的流动性,天生默认宽度为父盒子的100%.流动性,当设置了宽度的时候,会打断流动性,所以张鑫旭建议布局无宽度.(当子盒子浮动或者定位,就会失去这个流动性);
2. 关于display:inline-block
与block的流动性不同,inline-block具有包裹性,也就是宽度由内部元素决定
3. 宽度
其实流动性和包裹性也是他提到的宽度的一部分内容,同时还设计了宽度百分比的计算依据.
未脱离文档流的,如果是block或者inline-block计算以父元素为基准,脱离文档流的float,以父元素为基准;position脱离文档流的也是父元素为基准,只是父元素是的选择情况不定
4. 高度
这个东西也是构建盒子的基础,和宽度一样作用域content box上,要是设置了box-sizing当我没说.
但是height的auto并不会随着父盒子一样打,除非父盒子设置了具体的高度,那么子盒子设置百分比啊什么的才能起作用
5. 文字和图片最优原则
就是你哪怕设置了父盒子的宽度为零,文字和图片依旧会显示的.如果设置了overflowhidden,就可以隐藏起来,这是改变了渲染的规则.
6. min/max width/height
IE7之后就支持了,我之前在做布局的时候,一直以为IE不支持这两个属性,结果被打了脸,看个书纠正了我一直以来的认知错误,很好
7. 顺便提一嘴~ 和 +
~ : 如 p~div,前面有个p的div
+ : p+div,必须是p后边紧接着的div
例如:
<p>开始<p>
<div>
1
<div>3</div>
</div>
<div>2</div>
p+div {color:red} // 颜色变成红色的是1,3
p~div {color:red} // 123都变红
