CSS

1.1 标准盒模型和IE盒模型两者的区别是什么？

概念

CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括： 外边距（margin） 、 边框

（border） 、 内边距（padding） 、实际内容（content） 四个属性

设置盒子模型

• box-sizing:content-box;(标准)
• box-sizing:border-box;(IE)

区别

• 标准的(W3C)盒模型：元素的实际宽度等于设置的宽高 + border + padding (默认方式)
• IE盒模型： 元素的实际宽度就等于设置的宽高，即使定义有 border 和 padding 也不会改变元素的实际宽度，即 ( Element width = width )

1.2 盒子塌陷是什么？

盒子塌陷

本应该在父盒子内部的元素跑到了外部。

为什么会出现盒子塌陷？

当父元素没设置足够大小的时候，而子元素设置了浮动的属性，子元素就会跳出父元素的边界（脱离文

档流），尤其是当父元素的高度为auto时，而父元素中又没有其它非浮动的可见元素时，父盒子的高度

就会直接塌陷为零， 我们称这是CSS高度塌陷

解决塌陷的方法

1. 设置宽高
2. 设置BFC
3. 清楚浮动
4. 给父盒子添加border
5. 给父盒子设置padding-top

1.3 继承相关

css的继承：就是给父级设置一些属性，子级继承了父级的该属性，这就是我们的css中的继承

常用无继承性的属性

1. display：规定元素应该生成的框的类型

2. 文本属性：

   vertical-align：垂直文本对齐

   text-decoration：规定添加到文本的装饰

   text-shadow：文本阴影效果

   white-space：空白符的处理

   unicode-bidi：设置文本的方向

3. 盒子模型的属性：width、height、margin、padding、border

4. 背景属性：background

5. 定位属性：float、clear、position、top、right、bottom、left、min-width、min-height、max

   width、max-height、overflow、clip、z-index

有继承性的属性

1. font：字体系列属性

2. 文本系列属性：

   text-indent：文本缩进

   text-align：文本水平对齐

   line-height：行高

   word-spacing：增加或减少单词间的空白（即字间隔）

   letter-spacing：增加或减少字符间的空白（字符间距）

   text-transform：控制文本大小写

   direction：规定文本的书写方向

   color：文本颜色 a元素除外

3. 元素可见性：visibility

4. 表格布局属性：caption-side、border-collapse、border-spacing、empty-cells、table-layout

5. 列表布局属性：list-style-type、list-style-image、list-style-position、list-style

6. 生成内容属性：quotes

7. 光标属性：cursor

1.4 行内元素可以设置padding，margin吗？

• 行内元素的margin左右有效，上下无效
• 行内元素的padding左右有效 ，但是由于设置padding上下不占页面空间，无法显示效果，所以无效

1.5 什么是边距重叠？什么情况下会发生边距重叠？如何解决边距重叠？

边距重叠：两个box如果都设置了边距，那么在垂直方向上，两个box的边距会发生重叠，以绝对值大的那个为最终结果显示在页面上

边距重叠分为两种：

同级关系的重叠：

同级元素在垂直方向上外边距会出现重叠情况，最后外边距的大小取两者绝对值大的那个

父子关系的边距重叠：

嵌套崩塌

父子关系，如果子元素设置了外边距，在没有把父元素变成BFC的情况下，父元素也会产生外边距。

给父元素添加overflow：hidden 这样父元素就变为 BFC，不会随子元素产生外边距。

1.6 BFC是什么？

文档有几种流

1. 定位流
   • 绝对定位方案，盒从常规流中被移除，不影响常规流的布局；
   • 它的定位相对于它的包含块，相关CSS属性：top、bottom、left、right；
   • 如果元素的属性position为absolute或fixed，它是绝对定位元素；
   • 对于position: absolute，元素定位将相对于上级元素中最近的一个relative、fixed、
   • absolute，如果没有则相对于body；
2. 浮动流
   • 左浮动元素尽量靠左、靠上，右浮动同理
   • 这导致常规流环绕在它的周边，除非设置 clear 属性
   • 浮动元素不会影响块级元素的布局
   • 但浮动元素会影响行内元素的布局，让其围绕在自己周围，撑大父级元素，从而间接影响块级元素布局
   • 最高点不会超过当前行的最高点、它前面的浮动元素的最高点
   • 不超过它的包含块，除非元素本身已经比包含块更宽
   • 行内元素出现在左浮动元素的右边和右浮动元素的左边，左浮动元素的左边和右浮动元素的
   • 右边是不会摆放浮动元素的
3. 普通流
   • 在常规流中，盒一个接着一个排列;
   • 在块级格式化上下文里面， 它们竖着排列；
   • 在行内格式化上下文里面， 它们横着排列;
   • 当position为static或relative，并且float为none时会触发常规流；
   • 对于静态定位(static positioning)，position: static，盒的位置是常规流布局里的位置；
   • 对于相对定位(relative positioning)，position: relative，盒偏移位置由top、bottom、
   • left、right属性定义。即使有偏移，仍然保留原有的位置，其它常规流不能占用这个位置。

定义

BFC的基本概念–BFC就是“块级格式化上下文”的意思，也有译作“块级格式化范围”。

通俗的讲，就是一个特殊的块，内部有自己的布局方式，不受外边元素的影响。

布局规则

1. 内部的 Box 会在垂直方向，一个接一个地放置
2. 垂直方向上的距离由margin决定。（完整的说法是：属于同一个BFC的两个相邻Box的margin会发生重叠（塌陷），与方向无关。）
3. 每个元素的左外边距与包含块的左边界相接触（从左向右），即使浮动元素也是如此。（这说明BFC中子元素不会超出他的包含块，而position为absolute的元素可以超出他的包含块边界）
4. BFC的区域不会与float的元素区域重叠
5. 计算BFC的高度时，浮动子元素也参与计算
6. BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面元素，反之亦然

哪些元素会创建 BFC

1. 根元素
2. float 属性不为 none
3. position 为 absolute 或 fixed
4. display 为 inline-block， table-cell， table-caption， flex， inline-flex
5. overflow 不为 visible

场景

1. 清除元素内部浮动

   只要把父元素设为BFC就可以清理子元素的浮动了，最常见的用法就是在父元素上设置overflow: hidden样式，对于IE6加上zoom:1就可以了。

   计算BFC的高度时，自然也会检测浮动或者定位的盒子高度。

2. 解决外边距合并问题(嵌套崩塌)

   外边距合并的问题。

   盒子垂直方向的距离由margin决定。属于同一个BFC的两个相邻盒子的margin会发生重叠

   属于同一个BFC的两个相邻盒子的margin会发生重叠，那么我们创建不属于同一个BFC，就不会发生margin重叠了。

3. 制作右侧自适应的盒子问题

   普通流体元素BFC后，为了和浮动元素不产生任何交集，顺着浮动边缘形成自己的封闭上下文

1.7 块元素居中

• 我们可以利用margin:0 auto来实现元素的水平居中。
• 利用绝对定位，设置四个方向的值都为0，并将margin设置为auto，由于宽高固定，因此对应方向实现平分，可以实现水

平和垂直方向上的居中。

• 利用绝对定位，先将元素的左上角通过top:50%和left:50%定位到页面的中心，然后再通过margin负值来调整元素

的中心点到页面的中心。

• 利用绝对定位，先将元素的左上角通过top:50%和left:50%定位到页面的中心，然后再通过translate来调整元素

的中心点到页面的中心。

• 使用flex布局，通过align-items:center和justify-content:center设置容器的垂直和水平方向上为居中对

齐，然后它的子元素也可以实现垂直和水平的居中。

对于宽高不定的元素，后面两种方法，可以实现元素的垂直和水平的居中。

1.8 CSS 优化、提高性能的方法有哪些？

加载性能：

• css压缩：将写好的css进行打包压缩，可以减小文件体积
• css单一样式：当需要下边距和左边距的时候，很多时候会选择使用margin-left:20px;margin-bottom:30px
• 减少使用@import，建议使用link，因为后者在页面加载时一起加载，前者是等待页面加载完成之后再进行加载

选择器性能：

• 关键选择器（key selector）。选择器的最后面的部分为关键选择器（即用来匹配目标元素的部分）。CSS选择符是从右到左进行匹配的。
• 当使用后代选择器的时候，浏览器会遍历所有子元素来确定是否是指定的元素等等
• 如果规则拥有ID选择器作为其关键选择器，则不要为规则增加标签。
• 过滤掉无关的规则（这样样式系统就不会浪费时间去匹配它们了）。
• 尽量少的去对标签进行选择，而是用class。
• 尽量少的去使用后代选择器，降低选择器的权重值。后
• 代选择器的开销是最高的，尽量将选择器的深度降到最低，最高不要超过三层，更多的使用类来关联每一个标签元素。
• 了解哪些属性是可以通过继承而来的，然后避免对这些属性重复指定规则。

渲染性能：

• 属性值为0时，不加单位。
• 可以省略小数点之前的0。
• 标准化各种浏览器前缀：带浏览器前缀的在前。标准属性在后。
• 选择器优化嵌套，尽量避免层级过深。
• css雪碧图，同一页面相近部分的小图标，方便使用，减少页面的请求次数，但是同时图片本身会变大，使用时，优劣考虑清楚，再使用。
• 不滥用web字体。对于中文网站来说WebFonts可能很陌生，国外却很流行。web fonts通常体积庞大，而且一些浏览器在下载web fonts时会阻塞页面渲染损伤性能。

可维护性、健壮性：

• 将具有相同属性的样式抽离出来，整合并通过class在页面中进行使用，提高css的可维护性。
• 样式与内容分离：将css代码定义到外部css中

1.9 行内元素和块级元素什么区别，然后怎么相互转换

块级元素

1. 总是从新的一行开始，即各个块级元素独占一行，默认垂直向下排列

2. 高度、宽度、margin及padding都是可控的，设置有效，有边距效果

3. 宽度没有设置时，默认为100%

4. 块级元素中可以包含块级元素和行内元素

行内元素

1. 和其他元素都在一行，即行内元素和其他行内元素都会在一条水平线上排列

2. 高度、宽度是不可控的，设置无效，由内容决定

3. 根据标签语义化的理念，行内元素最好只包含行内元素，不包含块级元素

转换

1. display:inline;转换为行内元素
2. display:block;转换为块状元素
3. display:inline-block;转换为行内块状元素

1.10 min-width/max-width 和 min-height/max-height 属性间的覆盖规则？

1. max-width 会覆盖 width，即使 width 是行内样式或者设置了 !important。
2. min-width 会覆盖 max-width，此规则发生在 min-width 和 max-width 冲突的时候；