张鑫旭css世界学习心得一

目前大概只看了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都变红