css中的注意项，可能会帮助到大家哦！-原创手记-慕课网

CSS样式层叠表

1、link与@import的区别（5点）

（1）、link为XHTML的标签，可以引进CSS样式表，除了引进CSS文件还可以引进其他的文件如.js或.rss文件;@import为CSS中的标签，只能引进CSS文件。

（2）、加载顺序不同：link引进的CSS时同时也被加载，而@import引进的CSS要下载完才加载。

（3）、兼容性问题：@import是CSS2.1才出来的不被老的浏览器支持，而link没有此问题。

（4）、使用JavaScript操作DOM改变样式只能由link引进CSS文件才能实现。

（5）、@import可在CSS内再次引进CSS其他文件

<style>

@import xx.css;

</style>

2、display和visibility的区别

（1）、display：none;是元素没有框，即是没有宽高，不占文档的位置；

　　　display：inline;可以使像<p>这样的块级元素变为像<a>一样的行内元素

　　　display：block;可以使像<a>一样的行内元素变为像<p>一样的块级元素

　　　display：inline-block；行内块元素

（2）、visibility：hidden；不显示，透明，但是有宽高，在文档中占有位置，只是隐藏

3、定位机制

除了默认的流定位方式，还有：浮动定位，相对定位，绝对定位，和固定定位

浮动定位：将元素排除在普通流之外，将它放置到边框的左边或右边

相对定位：将元素相对于普通流中的位置定位

绝对定位：将元素内容完全从普通流中完全移除，可以偏移属性在固定元素的位置

固定定位：将元素固定在页面的一个某个位置

4、标签语义化

在HTML5的新标签，开始了标签语义化，直观的认识标签和属性的用途和作用。如<header>、<aside>、<footer>

语义化可让页面显得结构化，便于浏览器解析，便于引擎搜索解析，并提高代码的可读性，可维护性和可重用性。

5、为什么简易设置背景图片时，需要设置背景颜色？

一般我们在设置background-image时都会设置background-color，并设置与图片相应的颜色。如果在加载页面的，突发状况，图片无法显示，页面可以使用背景颜色充当。

6、CSS中content的作用

content属性与：before和：after伪元素配合使用来插入生成的内容，在元素之前或者元素之后，可以插入文本、图像、引号及计数器生成的编号

eg、body{counter-reset:chapter}

　　h1:before{content:"第"chapter(chapter)"章"}

　　h1{counter-increment:chaptr}

7、CSS sprite是什么，优缺点？

CSS精灵，是一种网页图片应用处理方式，把网页中的一些背景图片整合在一张图片文件中，在利用background-image、background-repeat、background-position组合进行背景定位。

优点：（1）、减少HTTP请求，提高性能

　　　　（2）、减少图片字节

　　　　（3）、减少命名困扰

　　　　（4）、更换风格方便

缺点：图片合成麻烦，设置时必须精确定位，维护时最好是添加图片，不更改已有的图片

8、过渡与动画的区别

过渡属性transition可以在一定时间内实现元素的状态过渡到另一个状态，模拟动画效果，但功能有限。而动画属性animation则可以实现比较复杂的动画，通过关键帧控制动画的每一步控制更为精准，可以实现复杂动画。

9、CSS reset

CSS reset叫CSS重写或CSS重置

用于改写HTML标签的默认样式，如p元素有上下边距，li 有列表标识符。这些默认样式在不同的浏览器会有不同的效果，如ul默认有缩进的样式，在IE中使用margin实现，在Firefox中是用padding实现，这必然会有兼容性问题。

因此在CSS样式中去掉这些默认样式，重新定义标签样式覆盖默认样式，即为CSS reset。

注意，样式重写不建议用*{}来重置，影响性能

p,b,ul{margin:0;padding:0}

10、浏览器兼容性

由于浏览器的版本及类型不同导致CSS的样式也不尽相同因此需要考虑到浏览器的兼容性书写不同的CSS样式。

首先，各主流的浏览器对W3C的标准支持较好，所以要保证代码符合W3C的标准。

其次，对于某些支持受限的属性，针对不同的浏览器添加不同的前缀，如-webkit- -o- -moz-.

还有，对于IE的低版本可带前缀书写特定的代码，实现版本识别

eg .bg{

　　　　background-color:#333;/所有都能识别/

　　　　background-color:#00deff\9;/IE 6 7 8能识别*/

　　　　+background-color:#a200ff;/IE6 7能识别/

　　　　_background-color:#l10bd1;/IE6/

　　　　}

另外，特殊情况特殊处理

（1）CSS reset改变默认的样式效果

（2）IE低版本中auto不能实现居中，用text-align

（3）子元素设置外边距时，父元素设置外边距或border

（4）外边距合并问题

最后的清除浮动元素带来的影响

　　由于浮动的元素不在文档的普通流中，所以元素浮动之后其原有的位置不在保留，其他的元素位置也会受到影响。

（1）清除左右带来的浮动影响，用clear属性来设置，如果在包含框内，是父元素显示其宽高使用overflow:hidden来设置。

推荐方法（2）父元素添加后置内容生成

　　　　　　parent：after{

　　　　　　　　　　　　content:" ";

　　　　　　　　　　　　display:table;

　　　　　　　　　　　　clear:both;

　　　　　　　　　　}

还有我们经常遇到的小问题，<div>

　　　　　　　　　　　　<div>

　　　　　　　　　　　　<style>

　　　　　　　　　　　　　　.s1{margin-top:10px;}

　　　　　　　　　　　　</style>

margin-top是不是把父元素也带下来了呢？第一个子元素的margin-top与最后一个子元素的margin-bottom的越界问题

解决（1）、给父元素加border

　　（2）、给父元素加padding

　　（3）、给父元素加overflow：hidden；

　　（4）、推荐方法：为父元素添加前置内容生成

　　　　.parent:before{

　　　　　　　　ｃｏｎｔｅｎｔ：＂＂；

　　　　　　　　ｄｉｓｐｌａｙ：ｔａｂｌｅ；

　　　　　　　　　　}