版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
1、使元素消失的方法
a：opacity:0 ，该元素隐藏起来，不会改变页面布局，并且，如果该元素已经绑定了一些事件也是可以触发的
b：visibility:hidden，该元素隐藏起来，不改变页面布局，但不会触发已经绑定的事件；
c：display：none，把元素隐藏起来，改变页面布局，可以理解为在页面中吧该元素删掉；
d：z-index：-1，延z轴把元素隐藏在body下面。
2、margin和padding分别适合什么场景使用
margin：需要在border外侧添加空白，空白处不需要背景色；
padding：需要在border内侧添加空白，空白处不需要背景色。
3、display的值，说明它们的作用。
block：像块状元素一样显示，此元素前后会带有换行符；
none：像行内样式一样显示；
inline：默认，此元素会被现实为内联元素，元素前后没有换行符；
inline-block：像行内样式一样显示，但其内容像块状类型元素一样显示；
list-item：像块类型元素一样显示，并添加样式列表标记；
relative和absolute定位原点：
table：此元素回座位块级表格显示，表格前后带有换行符；
absolute：生成绝对定位的元素，相对于static定位以外的第一个父元素进行定位；
relative：生成相对定位的元素，相对于其正常位置进行定位。
4、position跟display、overflow、float这些特性相互叠加后会怎么样？
display属性规定元素应该生成的框的类型；position属性规定元素的定位类型；float属性是一种布局方式，定义元素在哪个方向浮动。
优先级机制：position：absolute/fixed优先级最高，有他们再时，float不起作用，display值需要调整。float或者absolute定位的元素只能是块元素或者表格
5、overflow属性
scroll：必回出现滚动条；
auto：子元素内容大于父元素时出现滚动条；
visible：溢出的内容出现在父元素之外；
hidden：溢出时隐藏。
6、CSS优化、提高性能的方法：
a、避免过度约束；b、避免后代选择符；c、避免链式选择符；d、使用紧凑的语法；f、避免不必要的命名空间；g、避免不必要的重复；h、最好使用语义的名字；i、避免important，可以选择其他选择器；j、尽可能的精简规则，你可以合并不同类里的重复规则；k、正确使用display属性==
7、你对line-height是如何理解的
行高指一行文字的高度，具体说李阿航文字间基线的距离，css中起高度作用的是height和line-height，没有定义height属性，最终表现作用一定是line-height
单行文本垂直居中：把line-height值设置为height一样大小的值可以实现单行文字的垂直居中，其实也可以吧height删除
多行文本垂直居中：需要设置display属性为inline-block
8、li与li之间又看不见的空白间隙是什么原因引起的？
行框的排列会受到中间空白（回车空格）等的影响，因为空格也属于字符，这些空白也会被应用于样式，占据空间，所会有间隙，把字符大小设为0，就没有空格了。
解决方法：
a、可以将<li>代码全部写在一排；
b、浮动li中的float：left；
c、在ul中用font-size：0（谷歌不支持）
d、可以将ul{letter-spacing：-4px；}；li{letter-spacing:normal;}
9、display：inline-block什么时候会显示间隙
a、有空格时候会有间隙 解决：s除空格；
b、margin正值的时候 解决：margin使用负值
c、使用font-size时候 解决：font-size:0、letter-spacing、word-spacing
10、png、jpg、gif、webp这些图片 格式解释：
png：便携式网络图片，是一种无损数据压缩位图文件格式
优点：压缩比高，色彩好。大多数地方可以用。
jpg：是一种针对相片使用的一种失真压缩方法，是一种破坏性的压缩，在色调和颜色平滑变化做的不错。在www上，被用来储存和传输照片的格式；
gif：是一种位图文件格式，以8位色重现真色彩的图像。可以实现动画效果。
webp：是谷歌在2010年推出的图片格式，压缩率只有jpg的2/3，大小比png小45%。
缺点：压缩的时间更久了，兼容性不好，目前只有谷歌和opera支持。
11、强制换行的css
Word-break:break-all；
12、如何设置水平并且垂直居中的一张背景图
设置background-position：center
13、清除所有的默认边距：padding：0；margin：0；
14、解决img图片自带边距的问题
图片底部的空隙实际上涉及行内元素的布局模型，图片偶人的垂直对齐方式是基线，而基线的位置是与字体相关的，所以在某些时候，图片底部的空隙可能是2px，而有可能是4px或者更多。不同的font-size应该也会影响空隙的大小。
解决方法：
最优的解决方法是定义vertical-align
1、转换成（行级）块元素
display：block
2、浮动，浮动后的元素默认可以转化为块元素（可以随意设置宽高属性）
float：left
3、给img定义vertical-align：（消除底部边距）
img{
border: 0;
vertical-align: bottom;
}
4、将其父容器的font-size设为0；
5、给父标签设置与图片相同的高度
15、文字如何加下划线，上划线，删除线
text-decoration:underline|overline|line-through
16、居中的三个方法
1. margin-left: auto; margin-right:auto; text-align: center;必须设置text-align，否则在IE中会居左。
2.居中就是要先找到中间的位置，再偏移一定的像素。假设宽度为900，设置如下：left: 50%; margin-left: -450px;
3.采用浏览器宽度调整定位：left:expression_r((body.clientWidth-900)/2);
这个不如第二个办法好。并且在IE中不灵光。如果用jquery的话是可以的。
17、浏览器及内核
1.IE-trident
2.chrome-blink
3.opera-blink
4.Safari-webkit
5.Firefox-gecko
18、有哪项方式可以设置dom的css样式
1.行内； 2.内嵌；3.外嵌
19、css样式语句构成：
选择器{属性：值}
20、前端界面有哪三层构成?
html(结构）CSS（样式）JS（交互）
21、CSS中link和@import的区别
1.link是HTML标签，@import是css中提供
2.link页面加载时同时加载，@import是css提供的
3.@import存在兼容性问题，IE5以上
4.@import权重低
22、简述其作用
<!DOCTYPE>声明位于文档中的最前面的位置，处于<html>之前
它是用来告知web浏览器页面使用了那种html版本