CSS开发中应该注意的问题
在CSS开发中,要特别注意选择器的运用,如此才能使文档结构更清晰,更易于阅读。
1.某一块的文档结构中包含多层标签嵌套,则应在其祖先元素上面加类或者ID,然后用后代选择器来选择不同的子元素;
2.CSS2.1和CSS3有许多新的特性,如果IE6及更低版本不支持,浏览器会忽略整个规则,以保证向后兼容性;
3.在用类或者ID来为元素添加样式时,遵循特殊性原则,即ID的特殊性大于类的特殊性,类的特殊性大于元素的特殊性,而元素的特殊性大于元素内置样式(如h1-h6标签)的特殊性。如此,如果同时用ID,类,元素选择器为内容添加样式,则浏览器会优先选择ID选择器所置的样式来渲染;
4.块级元素可以通过padding、margin、border设置元素的水平及垂直的内边距、外边距和边框。行内元素则可以通过padding、margin来设置元素的水平内边距和外边距。可以通过设置行高来设置行内元素的高度;
5.假设div1为一个具有固定高宽的浮动元素(float:left;),div2为非浮动元素,在div2上面应用clear:left;则可为div2清除左边浮动(表示div2框的左边不应该挨着浮动框);
6.在清除浮动时,可以选择在父元素下加一个空标签来清除。但最好的解决方法是利用伪类:after来进行清除。如,.clearfix:after{content:".";height:0;visibility:hidden;display:block;clear:both;};
7.背景图像的设置,如果使用百分比设置背景图像(假设为background-position:20% 20%;),那么实际上是将图像上距离左上角20%的点定位到父元素距离左上角20%的位置(比较拗口);
8.CSS精灵:多个服务器请求会对站点的性能造成显著的影响,将多个按钮状态图像包含在一个图像中,从而减少http请求。最终,通过设置background-position来设置按钮状态;
相关推荐
background-color: blue;background-color: yellow;<input type="button" value="变蓝" @click="changeColorT