面试宝典-CSS

秋招季，总结一下CSS部分面经~

一. CSS3盒子模型

• 盒子模型
  IE 盒子模型和标准 W3C 盒子模型的范围包括 margin、border、padding、content
  使用“标准 W3C 盒子模型”：在网页顶部加上Doctype声明。
• 在不同标准里width的区别
  在标准 W3C 盒子模型中，width指content部分的宽度
  在 IE 盒子模型中，width表示（content+padding+border）这三个部分的宽度

• box-sizing
  box-sizing: content-box 是 W3C 盒子模型;content-box动态大小 | 受 “边框” “边距” 等属性影响
  box-sizing: border-box 是 IE 盒子模型;border-box固定大小 | 不受 “边框” “边距” 等属性影响

  

• margin和padding可以为负么？
  margin可以为负，而且经常用于布局。
  padding不能为负，即使为负，也会调整为0.

• margin塌陷解决办法:
  https://www.cnblogs.com/syp172654682/p/7671830.html

二. 对BFC规范的理解？

BFC，块级格式化上下文，一个创建了新的BFC的盒子是独立布局的，盒子里面的子元素的样式不会影响到外面的元素。在同一个BFC中的两个毗邻的块级盒在垂直方向（和布局方向有关系）的margin会发生折叠。

BFC 的原理/BFC的布局规则

BFC 的原理，其实也就是 BFC 的渲染规则（能说出以下四点就够了）。包括：
（1）BFC 内部的子元素，在垂直方向，边距会发生重叠。
（2）BFC在页面中是独立的容器，外面的元素不会影响里面的元素，反之亦然。（稍后看举例1）
（3）BFC区域不与旁边的float box区域重叠。（可以用来清除浮动带来的影响）。（稍后看举例2）
（4）计算BFC的高度时，浮动的子元素也参与计算。（稍后看举例3）

如何生成BFC有以下几种方法：

方法1：overflow: 不为visible，可以让属性是 hidden、auto、scroll。【最常用】
方法2：浮动中：float的属性值不为none。意思是，只要设置了浮动，当前元素就创建了BFC。
方法3：定位中：只要posiiton的值不是 static或者是relative即可，可以是absolute或fixed，也就生成了一个BFC。
方法4：display为inline-block, table-cell, table-caption, flex, inline-flex

BFC 原理解释说明

(1)解决 margin 重叠
当父元素和子元素发生 margin 重叠时，解决办法：给子元素或父元素创建BFC。
(2)清除浮动
儿子浮动了，但由于父亲没有设置高度，导致看不到父亲的背景色（此时父亲的高度为0）。正所谓有高度的盒子，才能关住浮动。如果想要清除浮动带来的影响，方法一是给父亲设置高度，然后采用隔墙法。方法二是 BFC：给父亲增加 overflow=hidden属性即可

三. 块级元素、行内元素、块级行内元素

列举display的值：

1. 行内元素：display:inline

• 行内元素：a、b、span、img、input、strong、select、label、em、button、textarea（字体、input类、span）等；
• 特性：
  (1) 设置宽高无效；
  (2) margin仅设置左右方向有效，上下无效；padding设置上下左右都有效，即会撑大空间；
  (3) 不会自动进行换行；
• 水平居中：通过给父元素设置 text-align:center
• 垂直居中：
  (1) 子元素line-height:父元素的height；
  (2) 父元素display 为 table-cell（设置为表格单元显示）， vertical-align：middle属性

2. 块状元素：display:block

• 块状元素：div、p、nav、aside、header、footer、section、article、ul-li、address、h1-h6、blockquote、dl、dt、dd；
• 特性 ：
  (1) 能够识别宽高；
  (2) margin和padding的上下左右均对其有效；
  (3) 可以自动换行；
  (4) 多个块状元素标签写在一起，默认排列方式为从上至下；
• 水平居中：
  (1) margin:0 auto；
  (2) 使用position:relative或absolute 和 left:50%
• 垂直居中：
  (1) 父元素添加display设为flex，再通过align-items:center;
  (2) 父元素：position：relative; 子元素：position: absolute; top: 50%; margin-top=-height（子）/2;
  (3) 父元素：position:relative 子元素：position:absolute; top:0; bottom:0;margin:auto;
• 水平垂直居中：
  (1)父元素：position：relative; 子元素：position: absolute; top: 50%; left: 50%; margin-top=-height（子）/2; margin-right=-width/2;(已知块级元素的宽和高)
  (2)父元素：position:relative 子元素：position:absolute; top:0; left:0; bottom:0; right:0; margin:auto;
  (3)父元素样式属性display:flex; 子元素使用margin:auto;
• 溢出处理：当内容大于容器
  overflow: hidden;隐藏溢出内容
  overflow: auto;当内容溢出时，显示滚动条
  overflow-y: auto; 只显示上下滚动条
  overflow: scroll;无论是否溢出，都显示滚动条占位：隐藏了元素内容，但空间仍然保持
  visibility: hidden;
  width&height：(min-width max-width用于响应式布局、width:auto与父容器等宽)

3. 行内块状元素：display:inline-block

• 特征：
  (1) 不自动换行
  (2) 能够识别宽高
  (3) 默认排列方式为从左到右；(行内元素和块状元素都使用)

4. 垂直水平居中方法

• 已知宽高（4种方法）

<div class="wrapper">
    <div class="content"></div>
</div>

• 未知宽高(考虑flex布局和transform)

四. css相对定位、绝对定位

• 静态定位(position：static)不脱离标准文档流
  这个是元素的默认定位方式，元素出现在正常的文档流中，会占用页面空间。不能使用top?bottom??left??right??z-index???

• 相对定位(position: relative)不脱离标准文档流
  相对定位完成的过程是首先按static(float)方式生成一个元素(并且元素像层一样浮动了起来)，然后相对于以前的位置移动，移动的方向和幅度由left、right、top、bottom属性确定，偏移前的位置保留不动.

• 绝对定位(position: absolute)脱离标准文档流
  这条语句的作用将元素从文档流中拖出来，然后使用left、right、top、bottom属性相对于其最接近的一个具有定位属性的父包含块进行绝对定位。如果不存在这样的包含块，则相对于body元素，即相对于浏览器窗口。

• 固定定位(position: fixed)脱离标准文档流
  绝对定位方式，直接以浏览器窗口作为参考进行定位。其它特性同absolute定位。

• inherit 规定从父元素继承 position 属性的值。

• 嵌套使用：子容器在父容器底部居中：
  父容器：position：relative；子容器：position：absolute；bottom：0；left：0；right：0；margin: auto

五. Flex布局

容器的属性以下6个属性设置在容器上：

• flex-direction：决定主轴的方向
• flex-wrap：定义如果一条轴线排不下，如何换行
• flex-flow：是flex-direction属性和flex-wrap属性的简写形式
• justify-content：定义了项目在主轴上的对齐方式
• align-items：定义项目在交叉轴上如何对齐
• align-content：定义了多根轴线的对齐方式。

项目的属性以下6个属性设置在项目上：

• order：定义项目的排列顺序
• flex-grow：定义项目的放大比例
• flex-shrink：定义了项目的缩小比例
• flex-basis：定义了在分配多余空间之前，项目占据的主轴空间（main size）
• flex：是flex-grow, flex-shrink 和 flex-basis的简写
• align-self：允许单个项目有与其他项目不一样的对齐方式

设为Flex布局以后，子元素的float、clear和vertical-align属性将失效。

六. CSS 选择符有哪些？哪些属性可以继承？优先级算法如何计算？

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)

可继承的样式：

1. font-size
2. font-family
3. color
4. text-indent

不可继承的样式：

1. border
2. padding
3. margin
4. width
5. height

优先级算法：

1. 优先级就近原则，同权重情况下样式定义最近者为准;
2. 载入样式以最后载入的定位为准;
3. !important > 内联> id > class > tag

权值：

1. 内联样式表的权值最高 1000；
2. ID 选择器的权值为 100
3. Class 类选择器的权值为 10
4. HTML 标签选择器的权值为 1
5. 多个进行累加，比较总和

七. CSS伪类

1. CSS 伪类用于向某些选择器添加特殊的效果。

伪类选择元素基于的是当前元素处于的状态，或者说元素当前所具有的特性，而不是元素的id、class、属性等静态的标志。由于状态是动态变化的，所以一个元素达到一个特定状态时，它可能得到一个伪类的样式；由此可以看出，它的功能和class有些类似，但它是基于文档之外的抽象，所以叫伪类。

注意：first-child和last-child都得用于子元素，而不是父元素。

2. 语法

selector : pseudo-class {property: value}
selector.class : pseudo-class {property: value}

3. 锚伪类

4. CSS3新增伪类举例：

八. CSS伪元素

1. CSS 伪元素用于向某些选择器设置特殊效果。

与伪类针对特殊状态的元素不同的是，伪元素是对元素中的特定内容进行操作，它所操作的层次比伪类更深了一层，也因此它的动态性比伪类要低得多。实际上，设计伪元素的目的就是去选取诸如元素内容第一个字（母）、第一行，选取某些内容前面或后面这种普通的选择器无法完成的工作。它控制的内容实际上和元素是相同的，但是它本身只是基于元素的抽象，并不存在于文档中，所以叫伪元素。

注意：:first-line和:first-letter伪元素只能用于块级元素。

2. 语法：

selector:pseudo-element {property:value;}
selector.class:pseudo-element {property:value;}

九. css3动画

• 先创建动画：
  @keyframes规则是创建动画。 @keyframes规则内指定一个CSS样式和动画将逐步从目前的样式更改为新的样式。

@keyframes myfirst
{ 
from {background: red;}
to {background: yellow;}
}

• 绑定选择器：
  当在 @keyframes 创建动画，把它绑定到一个选择器，否则动画不会有任何效果。
  指定至少这两个CSS3的动画属性绑定向一个选择器：
  规定动画的名称
规定动画的时长

div
{
animation: myfirst 5s;
-webkit-animation: myfirst 5s; /* Safari 与 Chrome */
}

十. CSS3新增内容

• 边框border-radius（圆角边框）box-shadow（边框阴影）border-image
• 背景background-size:宽高 background-origin(content-box,padding-box,border-box)
• 文本效果 text-shadow word-wrap(break-word)text-wrap?s
• 字体 @font-face {font-family:ddd;src:url(‘.ttf’)}定义自己的字体
• 字体描述符：font-family，src，font-sketch，font-style…
• 2D转换 translate(向左移动距离，向下移动)\ratate(度数)
• 3D转换ratateX() ratateY()
• 过渡 transition
• 动画 @keyframes{from,to} animation
• 多列 column-count:数字创建多列文本
• 用户界面resize（用户可改变大小），box-sizing（border-box，content-box）

十一. 什么是CSS Hack?

CSS hack是通过在CSS样式中加入一些特殊的符号，让不同的浏览器识别不同的符号，以达到应用不同的CSS样式的目的。(不同浏览器识别不同css样式)
CSS Hack常见的有三种形式：
CSS属性Hack、CSS选择符Hack以及IE条件注释Hack， Hack主要针对IE浏览器。
1、属性级Hack：比如IE6能识别下划线“_”和星号“*”，IE7能识别星号“*”，但不能识别下划线”_ ”，而firefox两个都不能认识。
2、选择符级Hack：比如IE6能识别*html .class{}，IE7能识别*+html .class{}或者*:first-child+html .class{}。
3、IE条件注释Hack：IE条件注释是微软IE5开始就提供的一种非标准逻辑语句。比如针对所有IE：<!-[if IE]><!-您的代码-><![endif]>，针对IE6及以下版本：<!-[if it IE 7]><!-您的代码-><![endif]->，这类Hack不仅对CSS生效，对写在判断语句里面的所有代码都会生效。https://blog.csdn.net/qq_31635733/article/details/81660897

十二. 浏览器的内核分别是什么?经常遇到的浏览器的兼容性有哪些？原因，解决方法是什么，常用hack的技巧 ？

常见的浏览器内核可以分四种：Trident、Gecko、Blink、Webkit

浏览器常见的兼容性问题：

1. 不同浏览器的标签默认的外补丁( margin )和内补丁(padding)不同
   解决方案： css 里增加通配符 * { margin: 0; padding: 0; }

2. IE6双边距问题；在 IE6中设置了float , 同时又设置margin , 就会出现边距问题
   解决方案：设置display:inline;

3. 当标签的高度设置小于10px，在IE6、IE7中会超出自己设置的高度
   解决方案：超出高度的标签设置overflow:hidden,或者设置line-height的值小于你的设置高度

4. 图片默认有间距
   解决方案：使用float 为img 布局

5. IE9一下浏览器不能使用opacity
   解决方案：
   opacity: 0.5;filter: alpha(opacity = 50);filter: progid:DXImageTransform.Microsoft.Alpha(style = 0, opacity = 50);

6. 边距重叠问题；当相邻两个元素都设置了margin 边距时，margin 将取最大值，舍弃最小值；
   解决方案：为了不让边重叠，可以给子元素增加一个父级元素，并设置父级元素为overflow:hidden；

7. cursor:hand 显示手型在safari 上不支持
   解决方案：统一使用 cursor:pointer

8. 两个块级元素，父元素设置了overflow:auto；子元素设置了position:relative ;且高度大于父元素，在IE6、IE7会被隐藏而不是溢出；
   解决方案：父级元素设置position:relative
   https://blog.csdn.net/qq_38892819/article/details/75426133

十三. display:none、visibility:hidden、visibility:collapse和opacity:0的区别

Collapse:是否折叠（即是否不占据文档流位置）；
event：是否还能触发事件；
taborder：是否还可以通过tab键选择到。其中，visibility:collapse在表格元素中yes，即不占据文档流位置，在其他元素占据位置

行内元素display:inline对应不显示为display:none
块状元素display:block对应不显示为visibility: hidden

• display：none设置该样式的元素（对象）的宽度、高度等各种属性值都将“丢失”，其元素不占据文档空间。不会触发事件
• visibility: hidden设置该样式的元素（对象）仅仅是视觉上看不见（完全透明），而它所占据的空间位置仍然存在，也就是它仍具有高度、宽度等属性值。不会触发事件
• opacity:0opacity是CSS3的属性，0（完全透明），1（完全不透明），inherit设置此样式的元素（对象）仍然占据空间，并且能触发事件。
• visibility:collapse在表格元素的tr中使用时，会删除一行或者一列，但是不会影响表格布局。若在td上使用，仅隐藏此单元格内容，仍然占据位置。应用与除表格外的其他元素，则仍然会为其保留位置，不会触发事件，也不会通过tab键选择到。

十四. visibility的值

十五. Float影响，清除浮动几种方法

• 浮动影响的主要是设置浮动元素之后的元素，对之前没有浮动的元素不产生影响。
  不管是设置浮动还是未设置浮动，其垂直位置不变，紧紧跟在未设置浮动元素之后，上边距与上一个元素的下边距对齐。
• 如果父元素没有设置高度，在子块没有浮动的情况下，父块会被撑开，但是内部子块浮动的话，就会产生以下影响：
  1. 父元素的背景不能显示
  2. 父元素的边框不能撑开，导致父元素之后的兄弟元素布局乱掉。
  3. margin、padding值不能正确显示

十六. 清除浮动的几种方法：

1. 设置父元素的高度为子元素的最高高度加上父元素的上下边框宽度。
2. 给父元素结束标签之前添加一个div标签，将此标签的css设置为：clear:both或者是clear:left;(clear规定哪一侧不允许有浮动元素)
3. 给父元素添加overflow：hidden。
4. :after作用于浮动元素的父元素将其设置为display:block

其中:
clear:both;指清除所有浮动；
content: ‘.’; display:block;对于FF/chrome/opera/IE8不能缺少，其中content（）可以取值也可以为空。visibility:hidden;的作用是允许浏览器渲染它，但是不显示出来，这样才能实现清除浮动。

十七. 为什么要初始化CSS样式。

因为浏览器的兼容问题，不同浏览器对有些标签的默认值是不同的，如果没对CSS初始化往往会出现浏览器之间的页面显示差异。

当然，初始化样式会对SEO有一定的影响，但鱼和熊掌不可兼得，但力求影响最小的情况下初始化。

最简单的初始化方法就是： * {padding: 0; margin: 0;} （不建议）

十八. link 和@import 的区别是？

1. link属于HTML标签，而@import是CSS提供的;
2. 页面被加载的时，link会同时被加载，而@import引用的CSS会等到页面被加载完再加载;
3. import只在IE5以上才能识别，而link是HTML标签，无兼容问题;
4. link方式的样式的权重 高于@import的权重.

十九. 解释下 CSS sprites，以及你要如何在页面或网站中使用它。

CSS Sprites其实就是把网页中一些背景图片整合到一张图片文件中，再利用CSS的“background-image”，“background- repeat”，“background-position”的组合进行背景定位，background-position可以用数字能精确的定位出背景图片的位置。这样可以减少很多图片请求的开销，因为请求耗时比较长；请求虽然可以并发，但是也有限制，一般浏览器都是6个。对于未来而言，就不需要这样做了，因为有了http2。

二十. 圣杯布局、双飞翼布局

两边固定，中间自适应。

• 与圣杯布局相比，双飞翼HTML中为main添加了一个子元素main-wrap,这个小小的改动是为了之后处理main中内容被遮盖的问题，这也是两者实现方式最大的不同点。
• 与圣杯布局一样，一开始三个col都设置float: left,为了把left和right定位到左右部分，采用负边距，left部分margin-left: -100%，right部分margin-right: -190px。之后就是处理main中内容的遮盖问题，只需设置main-wrap的左右外边距即可解决。
• 相比圣杯布局，双飞翼不必设置左右栏的position: relative，也不必设置左右left、right值，只需多添加一个子元素包含，相应的padding换成margin。总的说来简单不少。
• 双飞翼布局的好处：主要的内容先加载的优化；兼容目前所有的主流浏览器，包括IE6在内；
  衍生布局：http://www.cnblogs.com/lyzg/p/5160570.html
  CSS布局面试：http://developer.51cto.com/art/201504/473284.htm

css经典布局——双飞翼布局

https://blog.csdn.net/qq_38128179/article/details/86542447

css经典布局——圣杯布局

https://blog.csdn.net/qq_38128179/article/details/86533976

• 圣杯布局和双飞翼布局达到的效果基本相同，都是侧边两栏宽度固定，中间栏宽度自适应。 主要的不同之处就是在解决中间部分被挡住的问题时，采取的解决办法不一样。
• 圣杯布局是在父元素上设置了padding-left和padding-right，在给左右两边的内容设置position为relative，通过左移和右移来使得左右两边的内容得以很好的展现
• 而双飞翼则是在center这个div中再加了一个div来放置内容，在给这个新的div设置margin-left和margin-right 。

双飞翼布局要求

• header和footer各自占领屏幕所有宽度，高度固定。
• 中间的container是一个三栏布局。
• 三栏布局两侧宽度固定不变，中间部分自动填充整个区域。
• 中间部分的高度是三栏中最高的区域的高度。

  双飞翼布局的实现

• left、center、right三种都设置左浮动
• 设置center宽度为100%
• 设置负边距，left设置负边距为100%，right设置负边距为自身宽度
• 设置content的margin值为左右两个侧栏留出空间，margin值大小为left和right宽度

圣杯布局要求

• header和footer各自占领屏幕所有宽度，高度固定。
• 中间的container是一个三栏布局。
• 三栏布局两侧宽度固定不变，中间部分自动填充整个区域。
• 中间部分的高度是三栏中最高的区域的高度。

  圣杯布局的三种实现

  （1）浮动

• 先定义好header和footer的样式，使之横向撑满。
• 在container中的三列设为浮动和相对定位(后面会用到)，center要放在最前面，footer清除浮动。
• 三列的左右两列分别定宽200px和150px，中间部分center设置100%撑满
• 这样因为浮动的关系，center会占据整个container，左右两块区域被挤下去了
• 接下来设置left的 margin-left: -100%;，让left回到上一行最左侧
• 但这会把center给遮住了，所以这时给外层的container设置 padding-left: 200px;padding-right: 150px;，给left和right空出位置
• 这时left并没有在最左侧，因为之前已经设置过相对定位，所以通过 left: -200px; 把left拉回最左侧
• 同样的，对于right区域，设置 margin-right: -150px; 把right拉回第一行
• 这时右侧空出了150px的空间，所以最后设置 right: -150px;把right区域拉到最右侧就行了。

（2）flex弹性盒子

• header和footer设置样式，横向撑满。
• container中的left、center、right依次排布即可
• 给container设置弹性布局 display: flex;
• left和right区域定宽，center设置 flex: 1; 即可

（3）grid布局

如上图所示，我们把body划分成三行四列的网格，其中有5条列网格线

• 给body元素添加display: grid;属性变成一个grid(网格)
• 给header元素设置grid-row: 1; 和 grid-column: 1/5; 意思是占据第一行网格的从第一条列网格线开始到第五条列网格线结束
• 给footer元素设置grid-row: 1; 和 grid-column: 1/5; 意思是占据第三行网格的从第一条列网格线开始到第五条列网格线结束
• 给left元素设置grid-row: 2; 和 grid-column: 1/2; 意思是占据第二行网格的从第一条列网格线开始到第二条列网格线结束
• 给center元素设置grid-row: 2; 和 grid-column: 2/4; 意思是占据第二行网格的从第二条列网格线开始到第四条列网格线结束
• 给right元素设置grid-row: 2; 和 grid-column: 4/5; 意思是占据第二行网格的从第四条列网格线开始到第五条列网格线结束