Div+CSS 规则整理 提高效率

2020-05-08 08:40:24易采站长站整理


 


 


十、           定义A标签要注意的小问题


      当我们定义a{color:red;}时,它代表了A的四种状态的样式,如果此时要定义一个鼠标放上的状态只要定义a:hover就可以了,其它三种状态就是A中所定义的样式。


只定义了一个a:link时,一定要记得把其它三种状态定义出来!


 


十一、   禁止内容换行与强制内容换行


   在表格或层中我们可能希望内容不换行或强制换行,我们可以通过一些css属性来达到这些要求。


    禁止换行:white-space:nowrap


强制换行:word-break: break-all; white-space: normal;


 


十二、   区别relative和absolute


Absolute—CSS中的写法是:position:absolute; 他的意思是绝对定位,他是参照浏览器的左上角,配合TOP、RIGHT、BOTTOM、LEFT(下面简称TRBL)进行定位,在没有设定TRBL,默认依据父级的做标原始点为原始点。如果设定TRBL并且父级没有设定position属性,那么当前的absolute则以浏览器左上角为原始点进行定位,位置将由TRBL决定。


Relative—CSS中的写法是:position:relative;  他的意思是绝对相对定位,他是参照父级的原始点为原始点,无父级则以BODY的原始点为原始点,配合TRBL进行定位,当父级内有padding等CSS属性时,当前级的原始点则参照父级内容区的原始点进行定位。


 


 


十三、   区别块级元素block和内联元素inline


块级—可定义宽高,另起独占一行  (如:div  ul)


内联—不可定义宽高,如文本元素  (如a span)


 


十四、   区别display和visibility


display:none和visibility:hidden都可以隐藏一个元素,但visibility:hidden只是隐藏了元素的内容,但其使用的位置空间仍然被保留。而display:none则相当把元素从页面中去除,其占用位置也将被删除。