前端面试之CSS部分
1、介绍一下CSS的盒子模型，低版本IE的盒子模型有什么不同？如何设置这两种模型？
（1）有两种， IE 盒子模型、W3C 盒子模型；
（2）盒模型： 内容(content)、填充(padding)、边界(margin)、 边框(border)；
（3）区 别： 这两种盒子模型最主要的区别就是width的包含范围，在标准的盒子模型中，width指content部分的宽度，在IE盒子模型中，width表示content+padding+border这三个部分的宽度，故这使得在计算整个盒子的宽度时存在着差异。
（4）标准盒模型box-sizing：content-box；IE盒模型box-sizing：border-box
2、CSS 选择符有哪些？哪些属性可以继承？优先级算法如何计算？
选择符：
（1）id选择器（ # myid）
（2）类选择器（.myclassname）
（3）标签选择器（div, h1, p）
（4）相邻选择器（h1 + p）
（5）子选择器（ul > li）
（6）后代选择器（li a）
（7）通配符选择器（ * ）
（8）属性选择器（a[rel = "external"]）
（9）伪类选择器（a:hover, li:nth-child）
可继承的样式： font-size font-family color, ul li dl dd dt;
不可继承的样式：border padding margin width height ;
优先级就近原则，同权重情况下样式定义最近者为准;
载入样式以最后载入的定位为准;
（1）同权重：内联样式表（标签内部）> 嵌入样式表（当前文件中）> 外部样式表（外部文件中）
（2）不同权重：!important > id > class > tag，其中important 比 内联优先级高
3、CSS3新增伪类有哪些？
（1）p:first-of-type 选择属于其父元素的首个 元素的每个元素。
（2）p:last-of-type 选择属于其父元素的最后 元素的每个元素。
（3）p:only-of-type 选择属于其父元素唯一的 元素的每个 元素。
（4）p:only-child 选择属于其父元素的唯一子元素的每个元素。
（5）p:nth-child(2) 选择属于其父元素的第二个子元素的每个 元素。
（6）:checked 单选框或复选框被选中。
（7）:disabled 控制表单控件的禁用状态。
4、列出display的值，说明他们的作用。
（1）block 块类型。默认宽度为父元素宽度，可设置宽高，换行显示。
（2）none 缺省值。象行内元素类型一样显示。
（3）inline 行内元素类型。默认宽度为内容宽度，不可设置宽高，同行显示。
（4）inline-block 默认宽度为内容宽度，可以设置宽高，同行显示。
（5）list-item 象块类型元素一样显示，并添加样式列表标记。
（6）table 此元素会作为块级表格来显示。
（7）inherit 规定应该从父元素继承 display 属性的值。
5、position的值， relative和absolute定位原点是？
定位原点：
6、CSS3有哪些新特性
- absolute：生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。
- fixed （老IE不支持）：生成绝对定位的元素，相对于浏览器窗口进行定位。
- relative：生成相对定位的元素，相对于其正常位置进行定位。
- static：默认值。没有定位，元素出现在正常的流中（忽略 top, bottom, left, right z-index 声明）。
- inherit： 规定从父元素继承 position 属性的值。
（1）新增各种CSS选择器 （: not(.input)：所有 class 不是“input”的节点）
（2）圆角 （border-radius:8px）
（3）多列布局 （multi-column layout）
（4）阴影和反射 （Shadow\Reflect）
（5）文字特效 （text-shadow、）
（6）文字渲染 （Text-decoration）
（7）线性渐变 （gradient）
（8）旋转 （transform）
（9）缩放,定位,倾斜,动画,多背景
例如:transform:\scale(0.85,0.90)\ translate(0px,-30px)\ skew(-9deg,0deg)\Animation:
7、请解释一下CSS3的Flexbox（弹性盒布局模型）,以及适用场景？
（1）一个用于页面布局的全新CSS3功能，Flexbox可以把列表放在同一个方向（从上到下排列，从左到右），并让列表能延伸到占用可用的空间。
（2）较为复杂的布局还可以通过嵌套一个伸缩容器（flex container）来实现。
（3）采用Flex布局的元素，称为Flex容器（flex container），简称"容器"。
（4）它的所有子元素自动成为容器成员，称为Flex项目（flex item），简称"项目"。
（5）常规布局是基于块和内联流方向，而Flex布局是基于flex-flow流可以很方便的用来做局中，能对不同屏幕大小自适应。
（6）在布局上有了比以前更加灵活的空间。
8、用纯CSS创建一个三角形的原理是什么？
把上、左、右三条边框隐藏掉（颜色设为 transparent）
div {
height: 0;
width: 0;
display: block;
border: transparent solid 20px;
border-left: #005AA0 solid 20px;
}
9、 一个满屏 品 字布局 如何设计?
简单的方式：上面的div宽100%，下面的两个div分别宽50%，然后用float或者inline使其不换行即可
10、css多列等高如何实现？
利用padding-bottom|margin-bottom正负值相抵；设置父容器设置超出隐藏（overflow:hidden），这样子父容器的高度就还是它里面的列没有设定padding-bottom时的高度，当它里面的任 一列高度增加了，则父容器的高度被撑到里面最高那列的高度，其他比这列矮的列会用它们的padding-bottom补偿这部分高度差。
CSS - 锐客网 * {
margin: 0;
padding: 0;
font-size: 12px;
}
#wrap {
overflow: hidden;
width: 670px;
margin: 10px auto;
padding-bottom: 10px;
position: relative;
}
.box {
float: left;
display: inline;
margin-top: 10px;
width: 190px;
background: #c8c8c8;
margin-left: 10px;
padding: 10px;
padding-bottom: 820px;
margin-bottom: -800px;
}CSS实现三列DIV等高布局这确实是个很简单的问题，也许你也已经相当熟悉，但很多人还不知道。 下面介绍的技术是一个简捷的小技巧，它一定可以帮助你解决这个头痛的问题。
三列DIV等高
CSS实现
11、 li与li之间有看不见的空白间隔是什么原因引起的？有什么解决办法？
行框的排列会受到中间空白（回车\空格）等的影响，因为空格也属于字符,这些空白也会被应用样式，占据空间，所以会有间隔，把字符大小设为0，就没有空格了。
Document - 锐客网 ul {
list-style: none;
/*解决空格问题*/
font-size: 0;
}
li {
display: inline-block;
height: 70px;
width: 150px;
line-height: 70px;
text-align: center;
border: #005AA0 solid 2px;
/*解决空格问题*/
font-size: 16px;
}
- li标签
- li标签
- li标签
12、为什么要初始化CSS样式。
因为浏览器的兼容问题，不同浏览器对有些标签的默认值是不同的，如果没对CSS初始化往往会出现浏览器之间的页面显示差异。
13、请解释一下为什么需要清除浮动？
清除浮动是为了清除使用浮动元素产生的影响。浮动的元素，高度会塌陷，而高度的塌陷使我们页面后面的布局不能正常显示。
Document - 锐客网 .box {
width: 510px;
border: #0000FF solid 1px;
}
.box:after {
content: "";
visibility: hidden;
display: block;
height: 0;
clear: both;
}
.left {
float: left;
width: 250px;
height: 100px;
background-color: green;
}
.right {
float: left;
width: 250px;
height: 100px;
background-color: red;
}解析原理：
（1） display:block使生成的元素以块级元素显示,占满剩余空间
（2）height:0避免生成内容破坏原有布局的高度
（3）visibility:hidden 使生成的内容不可见，并允许可能被生成内容盖住的内容可以进行点击和交互
（4）通过 content:"."生成内容作为最后一个元素，至于content里面是点还是其他都是可以的，例如oocss里面就有经典的content:"."有些版本可能content 里面内容为空,一丝冰凉是不推荐这样做的
（5）zoom：1触发IE hasLayout。
14、清除浮动有几种方法?
1）给父级元素定义高度；
2）给父级元素添加overflow:hidden属性；
3）在浮动元素最后添加一个空的块级元素,并给该块级元素添加{clear:both; }；
4）给父级元素添加伪元素
#parent:after {
content: ".";
height: 0;
visibility: hidden;
display: block;
clear: both;
}
15、 浮动元素引起的问题
（1）父元素的高度无法被撑开，影响与父元素同级的元素
（2）与浮动元素同级的非浮动元素（内联元素）会跟随其后
（3）若非第一个元素浮动，则该元素之前的元素也需要浮动，否则会影响页面显示的结构
16、CSS优化、提高性能的方法有哪些？
（1）关键选择器（key selector），选择器的最后面的部分为关键选择器（即用来匹配目标元素的部分）；
（2）如果规则拥有 ID 选择器作为其关键选择器，则不要为规则增加标签，过滤掉无关的规则（这样样式系统就不会浪费时间去匹配它们了）；
（3）提取项目的通用公有样式，增强可复用性，按模块编写组件；
（4）增强项目的协同开发性、可维护性和可扩展性;
（5）使用预处理工具或构建工具（gulp对css进行语法检查、自动补前缀、打包压缩、自动优雅降级）；
17、浏览器是怎样解析CSS选择器的？
样式系统从关键选择器开始匹配，然后左移查找规则选择器的祖先元素。只要选择器的子树一直在工作，样式系统就会持续左移，直到和规则匹配，或者是因为不匹配而放弃该规则。
18、设置元素浮动后，该元素的display值是多少？
【前端面试之CSS部分】自动变成了 display:block
19、让页面里的字体变清晰，变细用CSS怎么做？
-webkit-font-smoothing: antialiased;
20、什么是CSS 预处理器 / 后处理器？
（1）预处理器：LESS、Sass、Stylus，用来预编译Sass或less，增强了css代码的复用性，还有层级、mixin、变量、循环、函数等，具有很方便的UI组件模块化开发能力，极大的提高工作效率。
（2）后处理器：PostCSS，通常被视为在完成的样式表中根据CSS规范处理CSS，让其更有效；目前最常做的是给CSS属性添加浏览器私有前缀，实现跨浏览器兼容性的问题。
21、 em和rem的区别在哪里？
（1）em是相对长度单位，相对于当前对象内文本的字体尺寸；
（2）rem是CSS3新增的一个相对单位（root em，根em），区别在于使用rem为元素设定字体大小时，仍然是相对大小，但相对的是HTML根元素。
22、什么是BFC？它的渲染规则是什么？如何创建BFC？它的使用场景有哪些？
（1）概念：
BFC是Block Formatting Context （块级格式化上下文）的缩写，它是W3C CSS 2.1 规范中的一个概念，是一个独立的渲染区域，只有Block-level box参与， 它规定了内部的Block-level Box如何布局，并且与这个区域外部毫不相干。
（2）渲染规则：
- 内部的box会在垂直方向，一个接一个的放置；
- box垂直方向的距离由margin决定，属于同一个BFC的两个相邻box的margin会发生重叠；
- 每个元素的margin box的左边，与包含块border box的左边相接触，即使存在浮动也是如此；
- BFC的区域不会与float box重叠；
- BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素；
- 计算BFC的高度时，浮动元素也参与计算。
- float属性不为none；
- position属性值为absolute或fixed；
- display属性值为inline-block，table-cell,table-caption,flex,inline-flex；
- overflow属性值不为visible。
- 解决垂直方向边距重叠；
- 解决和浮动元素的重叠；
- 清除浮动
普通流就是正常的文档流，在HTML里面的写法就是从上到下，从左到右的排版布局。其中涉及到了块状元素和内联元素。脱离文档流的几个属性：绝对定位(absolute)、固定定位(fixed)、浮动(float)。
24、CSS中的伪类
（1）概念：伪类存在的意义是为了通过选择器找到那些不存在与DOM树中的信息以及不能被常规CSS选择器获取到的信息。
（2）拓展：伪类由一个冒号:开头，冒号后面是伪类的名称和包含在圆括号中的可选参数。任何常规选择器可以再任何位置使用伪类。伪类语法不区别大小写。一些伪类的作用会互斥，另外一些伪类可以同时被同一个元素使用。并且，为了满足用户在操作DOM时产生的DOM结构改变，伪类也可以是动态的。
25、CSS中的伪元素
（1）概念：伪元素在DOM树中创建了一些抽象元素，这些抽象元素是不存在于文档语言里的（可以理解为html源码）。比如：document接口不提供访问元素内容的第一个字或者第一行的机制，而伪元素可以使开发者可以提取到这些信息。并且，一些伪元素可以使开发者获取到不存在于源文档中的内容（比如常见的::before,::after）。
（2）拓展：伪元素的由两个冒号::开头，然后是伪元素的名称。使用两个冒号::是为了区别伪类和伪元素（CSS2中并没有区别）。当然，考虑到兼容性，CSS2中已存的伪元素仍然可以使用一个冒号:的语法，但是CSS3中新增的伪元素必须使用两个冒号::。一个选择器只能使用一个伪元素，并且伪元素必须处于选择器语句的最后。
（3）分类：::first-letter；::first-line；::before；::after；::selection；（对用户所选取的部分样式改变）
26、伪元素和伪类的区别
（1）CSS伪类：用于向某些选择器添加特殊的效果。
（2）CSS伪元素：用于将特殊的效果添加到某些选择器。伪元素代表了某个元素的子元素，这个子元素虽然在逻辑上存在，但却并不实际存在于文档树中。
（3）总结：
伪类本质上是为了弥补常规CSS选择器的不足，以便获取到更多信息；
伪元素本质上是创建了一个有内容的虚拟容器；
CSS3中伪类和伪元素的语法不同；
可以同时使用多个伪类，而只能同时使用一个伪元素。
27、float和display:inline-block; 的区别
（1）文档流（Document flow）:
浮动元素会脱离文档流，并使得周围元素环绕这个元素。而inline-block元素仍在文档流内。因此设置inline-block不需要清除浮动。当然，周围元素不会环绕这个元素，你也不可能通过清除inline-block就让一个元素跑到下面去。
（2）水平位置（Horizontal position）：
很明显你不能通过给父元素设置text- align:center让浮动元素居中。事实上定位类属性设置到父元素上，均不会影响父元素内浮动的元素。但是父元素内元素如果设置了 display：inline-block，则对父元素设置一些定位属性会影响到子元素。（这还是因为浮动元素脱离文档流的关系）。
（3）垂直对齐（Vertical alignment）：
inline-block元素沿着默认的基线对齐。浮动元素紧贴顶部。你可以通过vertical属性设置这个默认基线，但对浮动元素这种方法就不行了。这也是我倾向于inline-block的主要原因。
（4）空白（Whitespace）：
inline-block包含html空白节点。如果你的html中一系列元素每个元素之间都换行了，当你对这些元素设置inline-block时，这些元素之间就会出现空白。而浮动元素会忽略空白节点，互相紧贴。
28、关于空白节点的解决方案
（1）删除html中的空白：
不要让元素之间换行，这可能比较蛋疼，但也是一种方法，特别是你元素不多的时候。
（2）使用负边距：
你可以用负边距来补齐空白。但你需要调整font-size，因为空白的宽度与这个属性有关系。
（3）给父元素设置font-size:0：
不管空白多大，由于空白跟font-size的关系，设置这个属性即可把空白的宽度设置为0.在实际使用的时候，你还需要给子元素重新设置font-size。
29、如何解决图片与文字的不对齐
（1）vertical-align：最有效的一种方式；
（2）margin： 需要不断调试图片的高度，精确度难以保证；
（3）position：同样是需要不断调试图片的高度，精确度难以保证。
30、position有哪些常用定位属性？定位原点是基于哪个位置？
（1）relative ：相对定位，没有脱离文档流，依然占有文档空间，它是根据自身原本在文档流中的位置进行偏移；
（2）absolute：绝对定位，脱离文档流，根据祖先类元素(父类以上)进行定位，而这个祖先类还必须是以position非static方式定位的，如果无父级是position非static定位时是以html作为原点定位。
（3）fixed：固定定位，脱离文档流，根据浏览器窗口进行定位。
31、介绍一下box-sizing属性
（1）box-sizing属性主要用来控制元素的盒模型的解析模式。默认值是content-box。
（2）content-box：让元素维持W3C的标准盒模型。元素的宽度/高度由border + padding + content的宽度/高度决定，设置width/height属性指的是content部分的宽/高
（3）border-box：让元素维持IE传统盒模型（IE6以下版本和IE6~7的怪异模式）。设置width/height属性指的是border + padding + content
32、 什么是外边距合并？
外边距合并指的是，当两个垂直外边距相遇时，它们将形成一个外边距。
合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。
w3school介绍网址：w3school介绍网址
33、img的白边是因为什么
原因在于，img标签默认情况下display:inline-block; img在div中的白边就是因为inline-block；造成的，所以此时将img的display设置为block；白边就消失了
34、px、pt和em、rem的区别是什么？
（1）px(pixel)指的是像素，是屏幕上显示数据的最基本的点，表示相对大小。不同分辨率下相同长度的px元素显示会不一样，比如同样是14px大小的字，在1366768显示屏下会显示的小，在1024768尺寸的显示器下会相对大点。
（2）pt(point)是印刷行业常用的单位，等于1/72英寸，表示绝对长度。
（3）em是相对长度单位，相对于当前对象内文本的字体尺寸，即em的计算是基于父级元素font-size的。
我这里的字体显示大小是28px(14px*2)
我这里显示字体大小是36px(18px*2),而不是上面计算的28px
（4）rem是css3新增的一个相对单位，与em的区别在于，它是相对于html根元素的。
我这里的字体显示大小是28px(14px*2)
我这里显示字体大小是28px(14px*2),因为我是根据html根元素的font-size大小进行计算的
35、谈谈nth-of-type() 选择器
:nth-of-type(n) 选择器匹配属于父元素的特定类型的第 N 个子元素的每个元素，n 可以是数字、关键词或公式。其中，Odd 和 even 是可用于匹配下标是奇数或偶数的子元素的关键词（第一个子元素的下标是 1）。
36、 css定义的权重
以下是权重的规则：标签的权重为1，class的权重为10，id的权重为100，以下例子是演示各种定义的权重值：
/*权重为1*/
div{
}
/*权重为10*/
.class1{
}
/*权重为100*/
#id1{
}
/*权重为100+1=101*/
#id1 div{
}
/*权重为10+1=11*/
.class1 div{
}
/*权重为10+10+1=21*/
.class1 .class2 div{
}
如果权重相同，则最后定义的样式会起作用，但是应该避免这种情况出现
37、实现不使用 border 画出1px高的线，在不同浏览器的标准模式与怪异模式下都能保持一致的效果。
38、描述一下CSS中的渐进增强, 优雅降级之间的区别?
39、如何居中div？
- 优雅降级指为现代浏览器制作网站,然后保证为某些老版本的浏览器提供基于可用的体验.新特性在老版本浏览器中会降级, 且一般会有一个分界点, 声明不支持哪些老版本的浏览器. 有些时候也会警告用户更换其浏览器.
- 渐进增强与优雅降级相反. 渐进增强一开始就针对低版本浏览器构建页面,然后再针对高级浏览器增加特效和其他交互效果.渐进增强关注内容本身.
（1）水平居中：给div设置一个宽度，然后添加margin:0 auto属性
div {
width: 200px;
margin: 0 auto;
}
（2）让绝对定位的div居中
div {
position: absolute;
width: 300px;
height: 300px;
margin: auto;
top: 0;
left: 0;
bottom: 0;
right: 0;
/* 方便看效果 */
background-color: pink;
}
（3）水平垂直居中一
div {
/* 相对定位或绝对定位均可 */
position: relative;
width: 500px;
height: 300px;
top: 50%;
left: 50%;
/* 外边距为自身宽高的一半 */
margin: -150px 0 0 -250px;
/* 方便看效果 */
background-color: pink;
}
（4）水平垂直居中二
div {
/* 相对定位或绝对定位均可 */
position: absolute;
width: 500px;
height: 300px;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
/* 方便看效果 */
background-color: pink;
}
（5）水平垂直居中三
.container {
display: flex;
height: 500px;
width: 500px;
border: 1px solid #ccc;
/* 垂直居中 */
align-items: center;
/* 水平居中 */
justify-content: center;
}
.container div {
width: 100px;
height: 100px;
/* 方便看效果 */
background-color: pink;
}
30、margin和padding分别适合什么场景使用？
margin是用来隔开元素与元素的间距；padding是用来隔开元素与内容的间隔。
margin用于布局分开元素使元素与元素互不相干；
padding用于元素与内容之间的间隔，让内容（文字）与（包裹）元素之间有一段距离
31、::before 和 :after中双冒号和单冒号 有什么区别？解释一下这2个伪元素的作用。
单冒号(:)用于CSS3伪类，双冒号(::)用于CSS3伪元素。
双冒号是在当前规范中引入的，用于区分伪类和伪元素。新的在CSS3中引入的伪元素不允许再支持旧的单冒号的写法。
32、假设高度已知，请写出三栏布局，其中左栏和右栏宽度各为300px，中间自适应
（1）利用浮动
Layout - 锐客网 html * {
margin: 0;
padding: 0;
}
.layout article div {
min-height: 100px;
}
.layout.float .left {
float: left;
width: 300px;
background: red;
}
.layout.float .right {
float: right;
width: 300px;
background: blue;
}
.layout.float .center {
background: yellow;
}浮动解决方案这是三栏布局中间部分 这是三栏布局中间部分 这是三栏布局中间部分 这是三栏布局中间部分
（2）利用绝对定位
Layout - 锐客网 html * {
margin: 0;
padding: 0;
}
.layout article div {
min-height: 100px;
}
.layout.absolute .left-center-right>div {
position: absolute;
}
.layout.absolute .left {
left: 0;
width: 300px;
background: red;
}
.layout.absolute .center {
left: 310px;
right: 310px;
background: yellow;
}
.layout.absolute .right {
right: 0;
width: 300px;
background: blue;
}绝对定位解决方案这是三栏布局中间部分 这是三栏布局中间部分 这是三栏布局中间部分 这是三栏布局中间部分
（3）利用flexbox布局
Layout - 锐客网 html * {
margin: 0;
padding: 0;
}
.layout article div {
min-height: 100px;
}
.layout.flexbox .left-center-right {
display: flex;
}
.layout.flexbox .left {
width: 300px;
background: red;
}
.layout.flexbox .center {
flex: 1;
background: green;
}
.layout.flexbox .right {
width: 300px;
background: yellow;
}flexbox解决方案这是三栏布局中间部分 这是三栏布局中间部分 这是三栏布局中间部分 这是三栏布局中间部分
（4）表格布局法
Layout - 锐客网 html * {
margin: 0;
padding: 0;
}
.layout article div {
min-height: 100px;
}
.layout.table .left-center-right {
width: 100%;
display: table;
height: 100px;
}
.layout.table .left-center-right>div {
display: table-cell;
}
.layout.table .left {
width: 300px;
background: black;
}
.layout.table .center {
background: green;
}
.layout.table .right {
width: 300px;
background: burlywood;
}表格布局解决方案这是三栏布局中间部分 这是三栏布局中间部分 这是三栏布局中间部分 这是三栏布局中间部分
