1、如何理解CSS的盒子模型？
每个HTML元素都是长方形盒子。
（1）盒子模型有两种：IE盒子模型、标准W3C盒子模型；IE的content部分包含了border和pading。
（2）标准W3C盒模型包含：内容(content)、填充(padding)、边界(margin)、边框(border)。
box-sizing：content-box ---->width包含边框和内边距
border-box---->width不包含边框和内边距。
这俩的区别就是盒子的宽度是否包含表框和内边距。
conteng-box:width:100
border-box:width:100
2、link和@import的区别？
（1）link属于XHTML标签，而@import是CSS提供的。
（2）页面被加载时，link会同时被加载，而@import引用的CSS会等到页面被加载完再加载。
（3）import只在IE 5以上才能识别，而link是XHTML标签，无兼容问题。
（4）link方式的样式权重高于@import的权重。
（5）使用dom控制样式时的差别。当使用javascript控制dom去改变样式的时候，只能使用link标签，因为@import不是dom可以控制的。
3、权重：！important>内联>id>类&伪类&属性选择器>伪元素选择器&类型选择器>通配符&子选择器&相邻选择器
4、CSS3新增伪类举例：
div:first-of-type 选择属于其父元素的首个元素的每个元素。
div:last-of-type 选择属于其父元素的最后元素的每个元素。
div:only-of-type 选择属于其父元素唯一的元素的每个元素。
div:only-child 选择属于其父元素的唯一子元素的每个元素。
div:nth-child(2) 选择属于其父元素的第二个子元素的每个元素。
:enabled、:disabled 控制表单控件的禁用状态。
:checked 单选框或复选框被选中。
5、如何居中div？
div{
width:200px;
margin:0 auto;
}
如何居中浮动元素(指定宽高)
.div {
Width:500px ; height:300px;//高度可以不设
Margin: -150px 0 0 -250px;
position:relative;相对定位
left:50%;
top:50%;
}
6、经常遇到的浏览器的兼容性有哪些？原因、解决方法是什么？
（2）浏览器默认的margin和padding不同，解决方案是加一个全局的*{margin:0;padding:0;}来统一。
（4）浮动ie产生的双边距问题：块级元素就加display：inline；行内元素转块级元素display：inline后面再加display：table。
.bb{
background-color:#f1ee18; /*所有识别*/
.background-color:#00deff\9; /*IE6、7、8识别*/
+background-color:#a200ff; /*IE6、7识别*/
_background-color:#1e0bd1; /*IE6识别*/
}
7、常用Hack的技巧
（1）IE下，可以使用获取常规属性的方法来获取自定义属性，也可以使用getAttribute()获取自定义属性；
（2）Firefox下，只能使用getAttribute()获取自定义属性。解决方法：统一通过getAttribute()获取自定义属性。
（3）IE下，even对象有x,y属性，但是没有pageX,pageY属性；
（4）Firefox下，event对象有pageX,pageY属性，但是没有x,y属性。解决方法是条件注释，缺点是在IE浏览器下可能会增加额外的HTTP请求数。
（5）Chrome 中文界面下默认会将小于12px的文本强制按照12px显示，可通过加入 CSS属性-webkit-text-size-adjust: none;来解决。
（6）超链接访问过后hover样式就不出现了 被点击访问过的超链接样式不再具有hover和active了，解决方法是改变CSS属性的排列顺序：
L-V-H-A : a:link {} a:visited {} a:hover {} a:active {}
8、列出display的值，说明它们的作用。position的值里，relative和absolute定位原点是？
display的值：
block 像块类型元素一样显示。
none 缺省值。像行内元素类型一样显示。
inline-block 像行内元素一样显示，但其内容像块类型元素一样显示。
list-item 像块类型元素一样显示，并添加样式列表标记。
relative和absolute定位原点：
absolute：生成绝对定位的元素，相对于static定位以外的第一个父元素进行定位。
relative：生成相对定位的元素，相对于其正常位置进行定位。
9、如何理解表现与内容相分离？
表现与结构相分离简单的说就是HTML中只有标签元素 表现完全是由CSS文件控制的。
10、::before 和 :after中双冒号和单冒号 有什么区别？解释一下这2个伪元素的作用。
单冒号(:)用于CSS3伪类，双冒号(::)用于CSS3伪元素。
伪元素由双冒号和伪元素名称组成。双冒号是在css3规范中引入的，用于区分伪类和伪元素。但是伪类兼容现存样式，浏览器需要同时支持旧的伪类，比如:first-line、:first-letter、:before、:after等。
对于CSS2之前已有的伪元素，比如:before，单冒号和双冒号的写法::before作用是一样的。
提醒，如果你的网站只需要兼容webkit、firefox、opera等浏览器，建议对于伪元素采用双冒号的写法，如果不得不兼容IE浏览器，还是用CSS2的单冒号写法比较安全。
网友评论