本篇文章作为对CSS知识点的统筹，囊括了目前大部分在面试当中常见的内容，包括一些易踩雷的知识点。文章篇幅较长，建议收藏慢慢细品。文中篇概念性的内容也蛮多，小编一如既往的做了分割线，记忆力好的童鞋请自行忽略。

1.标准的CSS盒子模型及其和低版本的IE盒子模型的区别？

标准（WC）盒子模型：width=内容宽度（contnt）+bordr+padding+margin

低版本IE盒子模型：width=内容宽度（contnt+bordr+padding）+margin

区别：标准盒子模型盒子的hight和width是contnt（内容）的宽高，而IE盒子模型盒子的宽高则包括contnt+padding+bordr部分。

2.几种解决IE6存在的bug的方法由float引起的双边距的问题，使用display解决；由float引起的像素问题，使用display:inlin-px;使用正确的书写顺序linkvisitdhovractiv，解决超链接hovr点击失效问题；对于IE的z-indx问题，通过给父元素增加position:lativ解决；使用!important解决Min-hight最小高度问题；使用ifram解决slct在IE6下的覆盖问题；使用ovr:hiddn,zoom:0.08,lin-hight:1px解决定义1px左右的容器宽度问题；

注意：有关IE6支不支持!important的问题，对于单个类是支持的。例如：

.contnt{color:pink!importnt};.contnt{color:orang};//这里IE6及以上，FF，googl等都将显示粉红色复制代码

但是，当一个样式内部有多个相同属性的时候。例如：

.contnt{color:pink!importnt;color:orang};//IE7及以上，FF,googl显示粉红色，而IE6将显示橙色（原因是一个样式内重复设置了属性，后面的就会覆盖掉之前的）复制代码

.CSS选择符有哪些？哪些属性可以继承？

常见的选择符有一下：

id选择器（#contnt），类选择器（.contnt）,标签选择器（div,p,span等）,相邻选择器（h1+p）,子选择器（ulli）,后代选择器（li,a），通配符选择器（*）,属性选择器（a[l="xtrnal"]），伪类选择器（a:hovr,li:nth-child）

可继承的样式：font-siz,font-family,color,ul,li,dl,dd,dt;

不可继承的样式属性：bordr,padding,margin,width,hight；

.CSS优先级算法如何计算？考虑到就近原则，同权重情况下样式定义以最近者为准载入的样式按照最后的定位为准

优先级排序：

同权重情况下：内联样式表（标签内部）嵌入样式表（当前文件中）外部样式表（外部文件中）

!important#.tag

注意：!important比内联优先级高

5.CSS新增伪类有那些？:root选择文档的根元素，等同于html元素:mpty选择没有子元素的元素:targt选取当前活动的目标元素:not(slctor)选择除slctor元素意外的元素:nabld选择可用的表单元素:disabld选择禁用的表单元素:chckd选择被选中的表单元素:aftr在元素内部最前添加内容:bfo在元素内部最后添加内容:nth-child(n)匹配父元素下指定子元素，在所有子元素中排序第nnth-last-child(n)匹配父元素下指定子元素，在所有子元素中排序第n，从后向前数:nth-child(odd):nth-child(vn):nth-child(n+1):first-child:last-child:only-child:nth-of-typ(n)匹配父元素下指定子元素，在同类子元素中排序第n:nth-last-of-typ(n)匹配父元素下指定子元素，在同类子元素中排序第n，从后向前数:nth-of-typ(odd):nth-of-typ(vn):nth-of-typ(n+1):first-of-typ:last-of-typ:only-of-typ::slction选择被用户选取的元素部分:first-lin选择元素中的第一行:first-lttr选择元素中的第一个字符6.如何居中div？如何居中一个浮动元素？如何让绝对定位的div居中？水平居中

css:*{margin:0;padding:0;}.contnt{margin:0auto;　　width:px;　　hight:px;background:pink;}html:divclass="contnt"/div

垂直居中

css:*{margin:0;padding:0;}.contnt{　　width:px;　　hight:px;background:pink;position:absolut;top:50%;lft:50%;transform:translat(-50%,-50%);//更新：此处感谢小伙伴留言指出}html:divclass="contnt"/div

居中浮动元素

css:*{margin:0;padding:0;}.contnt{　　width:px;　　hight:px;background:pink;position:lativ;top:50%;lft:50%;margin:-px00-px;}html:divclass="contnt"/div

如何让绝对定位的div居中

css:*{margin:0;padding:0;}.contnt{margin:0auto;position:absolut;width:0px;background:pink;top:0;lft:0;bottom:0;right:0;}html:divclass="contnt"/div

7.display有哪些值？他们的作用是什么？

其中，常用的有：block，inlin-block，non，tabl，lin。

8.position的值lativ和absolut定位原点？

首先，使用position的时候，应该记住一个规律是‘子绝父相’。

lativ（相对定位）：生成相对定位的元素，定位原点是元素本身所在的位置；

absolut（绝对定位）：生成绝对定位的元素，定位原点是离自己这一级元素最近的一级position设置为absolut或者lativ的父元素的左上角为原点的。

fixd（老IE不支持）：生成绝对定位的元素，相对于浏览器窗口进行定位。

static：默认值。没有定位，元素出现在正常的流中（忽略top,bottom,lft,right、z-indx声明）。

inhrit：规定从父元素继承position属性的值。

9.CSS有哪些新特性？

关于CSS新增的特性，有以下：

选择器;圆角（bordr-raduis）;多列布局（multi-columnlayout）;阴影（shadow）和反射（flct）;文字特效（txt-shadow）;文字渲染（txt-dcoration）;线性渐变（gradint）;旋转（rotat）/缩放（scal）/倾斜（skw）/移动（translat）;媒体查询（

mdia）;RGBA和透明度;

font-fac属性;多背景图;盒子大小;语音;

大致想到这么多，有遗漏的可以留言指出，小编看到会加上。

10.用纯CSS创建一个三角形的原理是什么？方法一：隐藏上，左，右三条边，颜色设定为（transpant）

css:*{margin:0;padding:0;}.contnt{width:0;hight:0;margin:0auto;bordr-width:20px;bordr-styl:solid;bordr-color:transpanttranspantpinktranspant;//对应上右下左，此处为下粉色}html:divclass="contnt"/div

方法二：采用的是均分原理

实现步骤：1.首先保证元素是块级元素；2.设置元素的边框；.不需要显示的边框使用透明色。

css:*{margin:0;padding:0;}.contnt{width:0;hight:0;margin:0auto;bordr:50pxsolidtranspant;bordr-top:50pxsolidpink;}html:divclass="contnt"/div

11.什么是响应式设计？响应式设计的基本原理是什么？如何兼容低版本的IE？

响应式网站设计（RsponsivWbdsign）是一个网站能够兼容多个终端，而不是为每一个终端做一个特定的版本。

关于原理：基本原理是通过媒体查询（

mdia）查询检测不同的设备屏幕尺寸做处理。

关于兼容：页面头部必须有mat声明的viwport。

mtanam="’viwport’"contnt="”width=dvic-width,"initial-scal="1."maximum-scal="1,usr-scalabl=no”"/复制代码

12.为什么要初始化CSS样式？

因为浏览器的兼容问题，不同浏览器对标签的默认值是不同的，如果没有对浏览器的CSS初始化，会造成相同页面在不同浏览器的显示存在差异。

1.浮动原理以及为什么会出现浮动和什么时候需要清除浮动？清除浮动的方式？

非IE浏览器下，容器不设定高度且子元素浮动时，容器高度不能被内容撑开。此时，内容会溢出到容器外面而影响布局。此类现象被称为浮动（溢出）。

原理：

浮动元素脱离文档流，不占据空间（引起“高度塌陷”现象）；浮动元素碰到包含它的边框或其他浮动元素的边框停留。

浮动元素碰到包含他的边框或者浮动元素的边框停留。由于浮动元素不在文档流之中，文档流的块级框会表现的就像浮动框不存在一样。浮动元素会漂浮在文档流的块级框之上。

浮动会带来的问题：

父级元素的高度将会无法被撑开，会影响与父级元素同级的元素与浮动元素同级的非浮动元素（内联元素）会跟随其后若浮动的元素不是第一个元素，则该元素之前的元素也要浮动，否则会影响页面的显示结构

清除方式：

父级盒子定义高度（hight）;最后一个浮动元素后面加一个div空标签，并且添加样式clar:both;包含浮动元素的父级标签添加样式ovrflow为hiddn/both;父级div定义zoom;1.CSS优化、提高性能的方法有哪些？多个css可合并，并尽量减少

转载请注明:http://www.aideyishus.com/lkyy/6733.html