2018.9.27始记--CSS/CSS3手册知识点摘录

      手册地址

• css定位 Positioning

1. z-index，适用于定位元素（position），和left、top、right、bottom一样。
2. clip，适用于绝对定位元素。

3. （position的包裹性）一旦给元素加上absolute或float就相当于给元素加上了display:block;。什么意思呢？比如内联元素span默认宽度是自适应的，你给其加上width是不起作用的。要想width定宽，你需要将span设成display:block。但如果你给span加上absolute或float，那span的display属性自动就变成block，就可以指定width了。因此如果看到CSS里absolute/float和display:block同时出现，那display:block就是多余的CSS代码。绝对定位详解

4. overflow | position:absolute | float:left/right也同样具有包裹性。

5. （position的高度欺骗）float是欺骗父元素，让其父元素误以为其高度塌陷了，但float元素本身仍处于文档流中，文字会环绕着float元素，不会被遮蔽。但absolute其实已经不能算是欺骗父元素了，而是出现了层级关系。

• css布局 layout

1. display ：none；和visibility：hidden；的区别，一个隐藏对象，一个保留物理空间。
2. float在绝对定位和 dispaly为none时不生效。
3. 非替代(non-Replaced)行内元素可以使用margin属性设置左、右两边的外补丁；若要设置上、下两边的外补丁，必须先使该对象表现为块级或内联块级。
4. margin折叠：  在常规文档流中，2个或以上的块级盒模型相邻的垂直margin会被折叠。  margin折叠只发生在块级元素上；浮动元素、绝对定位元素、根元素的margin不与任何margin发生折叠；设置了属性overflow且值不为visible的块级元素，将不与它的子元素发生margin折叠；
5. img、input 属于行内替换元素。height/width/padding/margin均可用。效果等于块元素。
6. 非替代(non-Replaced)行内元素可以使用padding属性设置左、右两边的内补丁。

• 练习中的经验总结

1. 需要自适应宽（一般高度可以定死）的div，不设宽度（百分比也不设），利用块元素自动填满整行的特性，只需要设置左右的margin值，其宽度就会自适应屏幕大小，而且左右margin设置一样可以使块元素居中。
2. 上面一点需要注意的是，input就算给了dispaly：block；也不会自动填满整行。
3. p标签本身就带有1.2em的行间距。