CSS 知识积累

一、关于定位

1.相对定位下，不需要设定块级元素的宽度，只需要设定高度，即可以使该块级元素自适应，如果内有固定高度子元素，可以不设高度。而且可以进行top left定位。

2.相对定位下，如果两个兄弟块级元素，其中一者设置了left，而另一个只要设置的left数值和兄弟不同，left小的那个就不会占满整个横向屏幕，但是二者的自适应宽度一样。

3.绝对定位下，必须要为该元素定义宽高，除非内部包含设定宽高子元素，否则不可见。

4.浮动情况下，该元素的margin会失效，同时需要为该元素设定宽高，除非内部有设定宽高的子元素。

5.浮动情况下，该元素只在自身所处块层级间浮动，不会覆盖上一个未设定浮动的兄弟元素，但会遮盖下一个未设定浮动的兄弟元素，所以该元素的后兄弟需要clear 或者触发 BFC。

二、文本控制

1.li、p面对没有空格的 数字、字母串是不会换行的，因为它认为你这一个单词没有完，所以需要在样式中加入 ： word-wrap : break-word; 就OK了。

2.在支持HTML5的前提下，一般opacity 或filter的透明度会将元素内的文字也置为透明，所以需要引入RGBA 或HSLA，这样透明度就仅局限在该元素上了。

三、块级元素

1.img标签虽然是块级元素，但不会存在margin塌陷问题。

四、行级元素

1.行级元素包含块级元素后，IFC就将不复存在。换句话说：两个行级元素无法同行。

2.块级元素和行级元素不会并排，但是当父容器的高度和子块级元素相同时，如果宽度足够容纳下子行级元素的面积时，块级元素会和行级元素并排，否则还是不并排。