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.块级元素和行级元素不会并排,但是当父容器的高度和子块级元素相同时,如果宽度足够容纳下子行级元素的面积时,块级元素会和行级元素并排,否则还是不并排。

原文地址:https://www.cnblogs.com/JhoneLee/p/3316393.html