CSS相关 - CSS面试题 - 《前端面试导航》

一、CSS基础
二、页面布局
三、定位与浮动

一、CSS基础

1. CSS选择器及其优先级

选择器	格式	优先级权重
id选择器	#id	100
类选择器	.classname	10
属性选择器	a[ref=“eee”]	10
伪类选择器	li:last-child	10
标签选择器	div	1
伪元素选择器	li:after	1
相邻兄弟选择器	h1+p	0
子选择器	ul>li	0
后代选择器	li a	0
通配符选择器	*	0

对于选择器的优先级：

标签选择器、伪元素选择器：1；
类选择器、伪类选择器、属性选择器：10；
id 选择器：100；
内联样式：1000；
!important 最高

2. CSS中可继承与不可继承属性有哪些

一、无继承性的属性

display：规定元素应该生成的框的类型
文本属性：

vertical-align：垂直文本对齐
text-decoration：规定添加到文本的装饰
text-shadow：文本阴影效果
white-space：空白符的处理
unicode-bidi：设置文本的方向

盒子模型的属性：width、height、margin、border、padding
背景属性：background、background-color、background-image、background-repeat、background-position、background-attachment
定位属性：float、clear、position、top、right、bottom、left、min-width、min-height、max-width、max-height、overflow、clip、z-index
生成内容属性：content、counter-reset、counter-increment
轮廓样式属性：outline-style、outline-width、outline-color、outline
页面样式属性：size、page-break-before、page-break-after
声音样式属性：pause-before、pause-after、pause、cue-before、cue-after、cue、play-during

二、有继承性的属性

字体系列属性

font-family：字体系列
font-weight：字体的粗细
font-size：字体的大小
font-style：字体的风格

文本系列属性

text-indent：文本缩进
text-align：文本水平对齐
line-height：行高
word-spacing：单词之间的间距
letter-spacing：中文或者字母之间的间距
text-transform：控制文本大小写（就是uppercase、lowercase、capitalize这三个）
color：文本颜色

元素可见性

visibility：控制元素显示隐藏

列表布局属性

list-style：列表风格，包括list-style-type、list-style-image等

光标属性

cursor：光标显示为何种形态

3. display 的属性值及其作用

属性值	作用
none	元素不显示，并且会从文档流中移除。
block	块类型。默认宽度为父元素宽度，可设置宽高，换行显示。
inline	行内元素类型。默认宽度为内容宽度，不可设置宽高，同行显示。
inline-block	默认宽度为内容宽度，可以设置宽高，同行显示。
list-item	像块类型元素一样显示，并添加样式列表标记。
table	此元素会作为块级表格来显示。
inherit	规定应该从父元素继承display属性的值。

4. display 的 block 、 inline 和 inline-block 的区别

对于行内元素和块级元素，其特点如下：
（1）行内元素

设置宽高无效；
可以设置水平方向的margin和padding属性，不能设置垂直方向的padding和margin；
不会自动换行；

（2）块级元素

可以设置宽高；
设置margin和padding都有效；
可以自动换行；
多个块状，默认排列从上到下。

5. 隐藏属性的方法

display: none 渲染树不会包含该渲染对象，因此该元素不会在页面中占据位置，也不会响应绑定的监听事件。
visibility: hidden 元素在页面中仍占据空间，但是不会响应绑定的监听事件。
opacity: 0 将元素的透明度设置为 0，以此来实现元素的隐藏。元素在页面中仍然占据空间，并且能够响应元素绑定的监听事件。
position: absolute 通过绝对定位将元素移动到可视范围之外，以此来实现元素的隐藏。
z-index: 负值 让其他元素遮盖住该元素，以此来实现元素的隐藏
transform: scale(0, 0) 将元素缩放为0 ，来实现元素的隐藏，这种方法下，元素仍在页面中占据位置，但是不会响应绑定的监听事件。

6. link 和 `@import` 的区别

两者都是外部引用CSS的方式，它们的区别如下：

link 是 XHTML 的标签，除了加载CSS外，还可以定义RSS等其他业务@import属于CSS范畴，只能加载CSS
link引用CSS时，在页面载入时同时加载；@import需要页面网页完全载入以后加载。
link是XHTML标签，无兼容问题；@import是在CSS2.1提出的，低版本的浏览器不支持。
link支持使用Javascript控制DOM去改变样式；而@import不支持。

7. transition 和 animation 的区别

transition 是过度属性，强调过度，它的实现需要触发一个事件（比如鼠标移动上去，焦点，点击等）才执行动画。它类似于flash的补间动画，设置一个开始关键帧，一个结束关键帧。
animation是动画属性，它的实现不需要触发事件，设定好时间之后可以自己执行，且可以循环一个动画。它也类似于flash的补间动画，但是它可以设置多个关键帧（用@keyframe定义）完成动画。

8. display: none 和 visibility:hidden 的区别

这两个属性都是让元素隐藏，不可见。两者区别如下：

在渲染树中

display: none 会让元素从渲染中消失，渲染时不会占据任何空间
visibility: hidden 不会让元素从渲染树中消失，渲染的元素还会占据相应的空间，只是内容不可见

是否被继承

display:none是非继承属性，子孙节点会随着父节点从渲染树消失，通过修改子孙节点的属性也无法显示；
visibility:hidden是继承属性，子孙节点消失是由于继承了hidden，通过设置visibility:visible可以让子孙节点显示；

9. 伪元素和伪类的区别和作用？

伪元素： p::first-line
伪类： a:hover

伪元素：在内容元素的前后插入额外的元素或样式，但是这些元素实际上并不在文档中生成。它们只在外部显示可见，但不会在文档的源代码中找到它们，因此，称为“伪”元素；例如：

p::before {content:"第一章：";}
p::after {content:"Hot!";}
p::first-line {background:red;}
p::first-letter {font-size:30px;}

伪类：将特殊的效果添加到特定选择器上。它是已有元素添加类别，不会产生新的元素。例如：

a:hover {color: #FF00FF}
p:first-child {color: red}

总结：伪类是通过在元素选择器上加⼊伪类改变元素状态，⽽伪元素通过对元素的操作进⾏对元素的改变。

10 . 对和模型的理解

在CSS3 中的盒子模型有以下两种：标准盒子模型、IE盒子模型

盒模型都是由四个部分组成的，分别是margin、border、padding和content。

标准盒模型和IE盒模型的区别在于设置width和height时，所对应的范围不同：

标准盒模型的width和height属性的范围只包含了content，
IE盒模型的width和height属性的范围包含了border、padding和content。

可以通过修改元素的box-sizing属性来改变元素的盒模型：

box-sizing: content-box表示标准盒模型（默认值）
box-sizing: border-box表示IE盒模型（怪异盒模型）

11. 为什么有时候⽤translate来改变位置⽽不是定位？

translate 是 transform 属性的⼀个值。改变transform或opacity不会触发浏览器重新布局（reflow）或重绘（repaint），只会触发复合（compositions）。⽽改变绝对定位会触发重新布局，进⽽触发重绘和复合。
transform使浏览器为元素创建⼀个 GPU 图层，但改变绝对定位会使⽤到 CPU。因此translate()更⾼效，可以缩短平滑动画的绘制时间。⽽translate改变位置时，元素依然会占据其原始空间，绝对定位就不会发⽣这种情况。

12. CSS3中有哪些新特性

新增的各种CSS选择器 :not(.input)
圆角 border-radius: 10px
多列布局（multi-column layout）
阴影与反射 Shadoweflect
文字特效 text-shadow
文字渲染 text-decoration
线性渐变 gradient
旋转 transform
增加了旋转,缩放,定位,倾斜,动画,多背景

13. li 与 li 之间有看不见的空白间隔是什么引起的？如何解决？

浏览器会把 inline 内联元素间的空白字符（空格，换行，Tab等）渲染成一个空格。为了美观，通常是一个<li>放在一行，这导致<li>换行后产生换行字符，它变成一个空格，占用了一个字符的宽度。

解决办法：

为 <li>设置 float: left 不足：有些容器是不能设置浮动，如左右切换的焦点图等。
将所有的 <li> 写在同一行。不足：代码不美观
将<ul>内的字符尺寸直接设为0，即font-size:0。不足：<ul>中的其他字符尺寸也被设为0，需要额外重新设定其他字符尺寸，且在Safari浏览器依然会出现空白间隔。
消除<ul>的字符间隔 letter-spacing:-8px，不足：这也设置了<li>内的字符间隔，因此需要将<li>内的字符间隔设为默认letter-spacing:normal。

14. 对 CSSSprites 的理解

CSSSprites（精灵图，雪碧图），将一个页面涉及到的所有图片都包含到一张大图中去，然后利用CSS的 background-image，background-repeat，background-position属性的组合进行背景定位。

优点：

利用 CSS Sprites 能够很好地减少网页的 HTTP 请求，从而大大提高了页面的性能，这是 CSS Sprites 最大的优点
CSS Sprites 能够减少图片的字节，把3张图片合并成1张图片的字节总是小于这3张图片的字节总和。

缺点：

合并复杂，难度大
开发麻烦，需要PS
不好维护

15. margin 和 padding 的使用场景

在 border 外侧添加空白，且空白处不需要背景色时，使用 margin
在 boder 内侧添加空白，且空白处需要背景时，使用 padding

16. 对 `line-height` 的理解及其赋值方式

line-heigth概念

line-height 指一行文本的高度，包含了字间距，实际上是下一行基线到上一行基线距离；
如果一个标签没有定义 height 属性，那么其最终表现的高度由 line-height 决定；
一个容器没有设置高度，那么撑开容器高度的是 line-height，而不是容器内的文本内容；
把 line-height 值设置为 height 一样大小的值可以实现单行文字的垂直居中；
line-height 和 height 都能撑开一个高度

line-height 的赋值方式

带单位： px 是固定值，而 em 会参考父元素 font-size 值计算自身的行高
纯数字：会把比例传递给后代。
百分比：将计算后的值传递给后代

17. CSS 优化和提高性能的方法

加载方面

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

选择器方面

关键选择器（key selector）。选择器的最后面的部分为关键选择器（即用来匹配目标元素的部分）。CSS选择符是从右到左进行匹配的。当使用后代选择器的时候，浏览器会遍历所有子元素来确定是否是指定的元素等等；
使用 id 选择器，不用为规则增加标签。过滤无关规则，渲染引擎不会浪费时间进行匹配
避免使用通配规则，例如 * {} ，计算量大，会影响性能
具有相同的样式，使用 class 选择器

渲染性能

慎用使用高性能的属性：浮动、定位
尽量减少使用页面重排、重绘
属性值为 0 时，不加单位
标准化各种浏览器前缀：带浏览器前缀的在前。标准属性在后。
不适用 @import ，会影响新能
选择器的嵌套，尽量避免过深
css雪碧图，同一页面相近部分的小图标，方便使用，减少页面的请求次数，但是同时图片本身会变大，使用时，优劣考虑清楚，再使用。
正确使用display的属性，由于display的作用，某些样式组合会无效，徒增样式体积的同时也影响解析性能。
将相同属性的样式抽离出来，进行整合使用 class在页面中使用，提高性能
样式与内容分离：将css 代码定义到外部css中，容易维护

18. CSS预处理器/后处理器是什么？，为什么要使用它们？

CSS的预处理器： Less / SASS / Stylus 用来预编译 sass / less ，增加了 css代码的复用性，层级， mixin ，变量，循环，函数等对编写以开发 UI 组件极为方便

后处理器， 如： postCss，通常是在完成的样式表中根据css规范处理css，让其更加有效。目前最常做的是给css属性添加浏览器私有前缀，实现跨浏览器兼容性的问题。

使用原因：

结构清晰，便于扩展
可以很方便的屏蔽浏览器私有语法的差异
可以轻松实现多重继承
完美的兼容了CSS代码，可以应用到老项目中

19. `::before` 和 `:after` 的双冒号和单冒号有什么区别

冒号 : 用于 CSS3 伪类，双冒号 :: 用于 CSS3伪元素
::before 就是以一个子元素的存在，定义在元素体内容之间的一个伪元素。并不存在 dom 之中，只存在页面中

注意： :before和 :after 这两个伪元素，是在CSS2.1里新出现的。起初，伪元素的前缀使用的是单冒号语法，但随着Web的进化，在CSS3的规范里，伪元素的语法被修改成使用双冒号，成为::before、::after。

20. 单行、多行文本溢出隐藏

单行文本溢出

overflow: hidden;            // 溢出隐藏
text-overflow: ellipsis;      // 溢出用省略号显示
white-space: nowrap;         // 规定段落中的文本不进行换行

多行文本溢出

overflow: hidden;            // 溢出隐藏
text-overflow: ellipsis;     // 溢出用省略号显示
display:-webkit-box;         // 作为弹性伸缩盒子模型显示。
-webkit-box-orient:vertical; // 设置伸缩盒子的子元素排列方式：从上到下垂直排列
-webkit-line-clamp:3;        // 显示的行数

21. Sass、Less 是什么？为什么要使用他们？

他们都是 CSS 预处理器，是 CSS 上的一种抽象层。他们是一种特殊的语法/语言编译成 CSS。例如 Less 是一种动态样式语言，将 CSS 赋予了动态语言的特性，如变量，继承，运算，函数，LESS 既可以在客户端上运行 (支持 IE 6+, Webkit, Firefox)，也可以在服务端运行 (借助 Node.js)。

为什么要使用它们？

结构清晰，便于扩展。可以方便地屏蔽浏览器私有语法差异。封装对浏览器语法差异的重复处理，减少无意义的机械劳动。
可以轻松实现多重继承。完全兼容 CSS 代码，可以方便地应用到老项目中。LESS 只是在 CSS 语法上做了扩展，所以老的 CSS 代码也可以与 LESS 代码一同编译。

22. 如何判断元素是否到达可视区域

以图片显示为例：

window.innerHeight 是浏览器可视区的高度
document.body.scrollTop || document.documentElement.scrollTop 是浏览器滚动的过的距离；
img.offsetTop 是元素顶部距离文档顶部的高度

23. z-index 属性在什么情况下会失效

通常使用z-index在两个重叠的元素标签，z-index 值越大就越在上层。
z-index元素的position属性需要是relative，absolute或是fixed。

z-index属性在下列情况下会失效

父属性 postition 为 relative 时，子元素的 z-index 失效。解决：父元素 postition 改为 absolute | static
元素没有设置 position属性为非static 属性。设置该元素的position属性为relative，absolute或是fixed中的一种；
元素在设置z-index的同时还设置了float浮动。解决：float去除，改为display：inline-block；

二、页面布局

1. 常见的CSS布局单位

常见的布局单位包括 px % em rem vw/vh

px 页面布局的基础，屏幕能显示的最小区域
百分比 % 对比浏览器的宽高，确定百分比。一般认为子元素的百分比相对于直接父元素。
em / rem 相对于px更具灵活性，它们都是相对长度单位，它们之间的区别：em相对于父元素，rem相对于根元素。
- em 文本相对长度单位。相对于当前对象内文本的字体尺寸。
- rem 相对于根元素（html元素）的font-size的倍数
vh/vw 是与视图窗口有关的单位，vw表示相对于视图窗口的宽度，vh表示相对于视图窗口高度，

vw/vh 和百分比很类似，两者的区别：

百分比（%）：大部分相对于祖先元素，也有相对于自身的情况比如（border-radius、translate等)
vw/vm：相对于视窗的尺寸

2. px 、 em 、 rem 的区别以及使用场景

区别

px 是固定像素，一旦确定了，就无法因为适应页面场景改变
em / rem 是相对单位，长度不是固定的，更使用于响应式布局

使用场景：

对于只需要适配少部分移动设备，且分辨率对页面影响不大的，使用px即可。
对于需要适配各种移动设备，使用rem，例如需要适配iPhone和iPad等分辨率差别比较挺大的设备。

3. 两栏布局的实现

一般两栏布局指的是左边一栏宽度固定，右边一栏宽度自适应，两栏布局的具体实现：

方式一：利用浮动，将左边元素宽度设置为200px，并且设置向左浮动。将右边元素的margin-left设置为200px，宽度设置为auto（默认为auto，撑满整个父元素）。

.outer {
  height: 100px;
}
.left {
  float: left;  // 设置左浮动，和固定宽度
  width: 200px;
  background: tomato;
}
.right {
  margin-left: 200px;  // 抵消左边固定的宽度
  width: auto;   // 设置右边宽度 自动 auto
  background: gold;
}

方式二：利用浮动，左侧元素设置固定大小，并左浮动，右侧元素设置overflow: hidden; 这样右边就触发了BFC，BFC的区域不会与浮动元素发生重叠，所以两侧就不会发生重叠。

    .outer {
      height: 100px;
    }
    .left {
      float: left;  // 设置浮动 
      width: 200px;  // 固定宽度
      height: 100px;
      background-color: red;
    }
    .right {
      height: 100px;
      overflow: hidden;  // 产生 BFC，利用BFC浮动元素不会发生重叠
      background-color: salmon;
    }

方式三：利用flex布局，将左边元素设置为固定宽度200px，将右边的元素设置为flex:1。

    .outer {
      display: flex;  // 使用 flex 布局
      height: 100px;
    }
    .left {
      width: 200px;   // 左边设置固定宽度
      background-color: red;
    }
    .right {
      flex: 1;   //  设置 flex: 1; 占据所有 flex 内容
      background-color: #ccc;
    }

方式四：使用绝对定位，父元素设置相对定位，左边设置固定定位，给定宽高。右边使用 margin-left移出左边的宽度大小

.outer {
  position: relative;  //  父元素相对定位
  height: 200px;
}
.left {
  position: absolute;  // 左边使用 固定定位
  width: 200px;
  height: 200px;
  background-color: red;
}
.right {
  margin-left: 200px;  // 移出 左边的位置 
  background-color: salmon;
  height: 200px;
}

4. 三栏布局的实现

三栏布局：两侧固定，中间自适应

方式一：使用固定定位，父元素相对定位，左右两边固定定位，中间使用 margin-left|right 移出左右的宽度

.outer {
  position: relative;
  height: 200px;
}
.left {
  position: absolute;
  width: 200px;
  height: 200px;
  background-color: red;
}
.right {
  /* 这里需要设置  top | right  */
  top: 0;
  right: 0;
  position: absolute;
  width: 200px;
  height: 200px;
  background-color: #ff22ff;
}
.center {
  margin-left: 200px;
  margin-right: 200px;
  height: 200px;
  background-color: #ccc;
}

方式二：使用 flex 布局，两边固定宽度，中间设置 flex: 1

.outer {
  display: flex;
  height: 200px;
}
.left {
  width: 200px;
  height: 200px;
  background-color: red;
}
.right {
  width: 200px;
  height: 200px;
  background-color: #ff22ff;
}
.center {
  flex: 1;
  height: 200px;
  background-color: #ccc;
}

使用浮动方式实现：左右两边使用 float: left| right 中间使用margin-left|right

/* 使用浮动方式实现 */
.outer {
  height: 200px;
}
.left {
  float: left;
  width: 200px;
  height: 200px;
  background-color: red;
}
.right {
  float: right;
  width: 200px;
  height: 200px;
  background-color: #ff22ff;
}
.center {
  margin-left: 200px;
  margin-right: 200px;
  background-color: #ccc;
  height: 200px;
}

双飞翼布局：左右宽度固定，中间的列宽根据浏览器的窗口大小自适应。
双飞翼布局的优点：

兼容性好，兼容所有的主流浏览器，包括万恶的 IE6
因为在DOM中center_panel 在三列结构的前面，因此可以实现主要的内容优先加载 ```css .container { width: 100%; / 清除浮动 / overflow: hidden; }

.left, .content, .right { / 浮动，占一行 / float: left; }

.content { / 需要中间自适应 content的 width 就是设置成 100% / width: 100%; height: 100px; background-color: #F00; }

.left { width: 200px; height: 100px; background-color: #0F0; / 使用 margin-left 让元素和 content 占一行 / / 使用 margin-left: -100% ，回到最左侧 / margin-left: -100%; }

.right { width: 200px; height: 100px; background-color: #00F; / 让 right 到最右边使用 margin-left: -200px， right 的宽度 / margin-left: -200px; }


圣杯布局  : 由三列组成，两端固定，中间自适应。<br />和双飞翼布局的区别 ：双飞翼布局是左右两边叠加在中间的， 圣杯是将左右两边移动到padding给的值，固定起来了，不会影响到 content的内容
```html
  <style>
    body {
      /* 设置浏览器 最小的值 */
      min-width: 600px;
    }
    .header,
    .footer {
      /* 设置网页的 头部和尾部 */
      width: 100%;
      height: 100px;
      line-height: 100px;
      text-align: center;
      background-color: rgb(15, 240, 187);
      font-size: 30px;
    }
    .container {
      /* padding 设置的 200 是 放置left 和 right 的内容 */
      padding: 0 200px;
      overflow: hidden;
    }
    .content,
    .left,
    .right {
      /* 浮动 */
      float: left;
      height: 200px;
      /* 圣杯布局需要 增加 定位,  然后通过定位移动元素*/
      position: relative;
    }
    .content {
      /* 中间自适应 ，width 设置成 100% */
      width: 100%;
      background-color: #f00;
    }
    .left {
      width: 200px;
      background-color: #0f0;
      /* 使用 margin-left 样元素移动到 center 两边, 和 双飞翼布局一样  */
      margin-left: -100%;
      /* 通过定位的 relative ， 将元素移动到  padding 给的200值  里边 */
      left: -200px;
    }
    .right {
      width: 200px;
      background-color: #00f;
      /* 和双飞翼布局的， 移动元素到 content 的两边  */
      margin-left: -200px;
      /* 通过定位的 relative ， 将元素移动到  padding 给的200值  里边 */
      right: -200px;
    }
  </style>
</head>
<body>
  <!-- 通常网页由三部分组成 -->
  <!-- 1, header 头部 -->
  <div class="header">#Header</div>
  <!-- 2. content 内容部分 -->
  <div class="container">
    <div class="content"></div>
    <div class="left"></div>
    <div class="right"></div>
  </div>
  <!-- 3， footer 尾部 -->
  <div class="footer">#Footer </div>
</body>

5. 水平垂直居中的实现

方式一：使用绝对定位，先将元素的左上角通过top:50%和left:50%定位到页面的中心，然后使用 translate 调整元素到中心

.parent {
  position: relative;
}
.child {
  position: absolute;
  width: 100px;
  height: 100px;
  background-color: red;
  top: 50%;
  left: 50%; 
  transform: translate(-50%, -50%);  // 使用top|left确定中心位置 使用transform设置居中
}

方式二：利用绝对定位，设置四个方向的值都为0，并将margin设置为auto，由于宽高固定，因此对应方向实现平分，可以实现水平和垂直方向上的居中。该方法适用于盒子有宽高的情况：

.parent {
  position: relative;
}
.child {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  width: 100px;
  height: 100px;
  background-color: red;
  margin: auto;    // 设置  margin 为 auto 自动居中
}

方式三：使用绝对定位，先将元素的左上角通过top:50%和left:50%定位到页面的中心，然后再通过margin负值来调整元素的中心点到页面的中心。该方法适用于盒子宽高已知的情况

.parent {
  position: relative;
}
.child {
  position: absolute;
  width: 100px;
  height: 100px;
  background-color: red;
  top: 50%;
  left: 50%;
  margin-left: -50px;  /* 自身 height 的一半 */
  margin-top: -50px; /* 自身 width 的一半 */
}

方式四：使用 flex布局，通过 align-items: center | justify-content: center 设置水平居中对对其，然后它的子元素也实现垂直和水平居中

.parent {
  display: flex;
  justify-content: center;
  align-items: center;
}
.child {
  width: 100px;
  height: 100px;
  background-color: red;
  margin-top: -50px;  
}

6. 如何根据设计稿进行移动端适配

移动端适配主要有两个维度：

适配不同像素密度 ：针对不同的像素密度，使用 CSS 媒体查询，选择不同精度的图片，以保证图片不会失真；
适配不同屏幕大小： 根据移动端屏幕大小，有着逻辑像素的大小之分，如果使用 px 像素会导致不同屏幕显示不同，可能还会失真。

为了让页面尺寸自适应，通常使用的是 rem | em | vw | vh 等相对单位

7. 对 flex 布局的理解

flex 布局，也就是弹性布局，设置 flex 布局后，子元素的 float | clear | vertical-align 属性将失效。
设置flex 的元素叫做 “容器”，而它的子元素叫做 “项目 item”。容器默认存在两根轴：水平的主轴，垂直的交叉轴。

设置在 容器 的6的属性

flex-direction 设置主轴的方向（item的排列方向）
flex-wrap 设置 item , 如果一条轴线排不下，如何换行。
flex-flow flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap
justify-content 设置 item 在主轴上的对其方式
align-items 设置 item 在交叉轴上对其方式
align-content 设置多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用

设置在 项目 item 的属性 6个

order属性定义项目的排列顺序。数值越小，排列越靠前，默认为0。
flex-grow属性定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大。
flex-shrink属性定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。
flex-basis属性定义了在分配多余空间之前，项目占据的主轴空间。浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即项目的本来大小。
flex属性是flex-grow，flex-shrink和flex-basis的简写，默认值为0 1 auto。
align-self属性允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch。

8. 响应式设计的概念及基本原理

响应式网站设计 Responsive Web design ，一个网站能够兼容多个终端，而不是为每一个终端特意做的版本

原理：基本原理是通过媒体查询 @media 查询不同设备屏幕尺寸做处理
兼容：页面头部必须有 meta 声明的 viewport

<meta name="’viewport’" content="”width=device-width," initial-scale="1." maximum-scale="1,user-scalable=no”"/>

9. 品字布局实现

使用 float 浮动布局实现

 div {
   width: 100px;
   height: 100px;
   line-height: 100px;
   font-size: 40px;
   text-align: center;
   color: #000;
 }
 .div1 {
   margin: 0 auto;  //  盒子1 水平居中
   background-color: red;
 }
 .div2 {
   float: left;    //  盒子2 使用float: left 
   margin-left: 50%;   // 移动盒子距离
   background-color: green;
 }
 .div3 {
   float: left;
   margin-left: -200px;
   background-color: blue;
 }

使用 inline-block 实现 ```css div { width: 100px; height: 100px; line-height: 100px; font-size: 40px; text-align: center; color: #000; } .div1 { margin: 0 auto; background-color: red; }

.div2 { display: inline-block; margin-left: 50%; background-color: #ccc; }

.div3 { display: inline-block; background: burlywood; margin-left: -200px; }


<a name="o4m4q"></a>
### 10.  九宫格布局 
```html
<div class="box">
  <ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
    <li>7</li>
    <li>8</li>
    <li>9</li>
  </ul>
</div>

1. flex 布局方法

    ul {
      padding: 0;
      /* 主要设置  换行方式 wrap : 表示超出换行  */
      display: flex;
      flex-wrap: wrap;
      width: 100%;
      height: 100%;
    }
    li {
      list-style-type: none;
      text-align: center;
      border-radius: 5px;
      background-color: skyblue;
      width: 30%;
      height: 30%;
      margin-right: 5%;
      margin-bottom: 5%;
    }
    li:nth-of-type(3n) {
      margin-right: 0;
    }
    li:nth-of-type(n+7) {
      margin-bottom: 0;
    }

2. float 浮动方式

    ul {
      padding: 0;
    }
    li {
      list-style-type: none;
      text-align: center;
      border-radius: 5px;
      background-color: skyblue;
    }
    ul {
      width: 100%;
      height: 100%;
      overflow: hidden;
    }
    li {
      float: left;
      width: 30%;
      height: 30%;
      margin-right: 5%;
      margin-bottom: 5%;
    }
    li:nth-of-type(3n) {
      margin-right: 0;
    }
    li:nth-of-type(n+7) {
      margin-bottom: 0;
    }

3. 使用 grid 方式

    .box {
      width: 100%;
      height: 100%;
    }
    ul {
      padding: 0;
    }
    li {
      list-style-type: none;
      text-align: center;
      border-radius: 5px;
      background-color: skyblue;
    }
    ul {
      display: grid;
      width: 100%;
      height: 100%;
      grid-template-columns: 30% 30% 30%;
      grid-template-rows: 30% 30% 30%;
      grid-gap: 5%;
    }

4. 使用 inline-block 方式

    ul {
      padding: 0;
    }
    li {
      list-style-type: none;
      text-align: center;
      border-radius: 5px;
      background-color: skyblue;
    }
    ul {
      width: 100%;
      height: 100%;
      letter-spacing: -10px;
    }
    li {
      display: inline-block;
      width: 30%;
      height: 30%;
      margin-right: 5%;
      margin-bottom: 5%;
    }
    li:nth-of-type(3n) {
      margin-right: 0;
    }
    li:nth-of-type(n+7) {
      margin-bottom: 0;
    }

三、定位与浮动

1. 浮动的定义，为什么要清除浮动？清除浮动的方式

浮动的定义：在容器不设置高度且子元素浮动时，容器高度不能被内容撑开。此时内容并会溢出到容器外面，从而影响页面的布局。这种现象就是浮动（溢出）

浮动的工作原理：

浮动元素脱离文档流，不占据空间
浮动元素碰到包含它的边框或者其他浮动元素的边框停留

浮动元素引起的问题？

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

清除浮动的方式

给父级 div 定义 height 属性
在浮动元素之后在上一个空的 div 标签，并添加 clean: both 样式
在浮动元素的父级元素添加 overflow: auto | hidden

2. 对BFC的理解，如何创建BFC

先来看两个相关的概念：

Box ： Box 是CSS布局的对象和对象基本单位，一个页面由多个Box组成，这个 Box就是所说的盒子模型
Formatting context : 块级上下⽂格式化，它是页面中的一块渲染区域，并有一套渲染规则，它决定了其子元素将如何定位，以及和其他元素的关系和相互作⽤。

块格式化上下文（Block Formatting Context，BFC）是Web页面的可视化CSS渲染的一部分，是布局过程中生成块级盒子的区域，也是浮动元素与其他元素的交互限定区域。

通俗来讲： BFC是一个独立的布局环境，可以理解为一个容器，在这个容器中按照一定规则进行物品摆放，并且不会影响其他环境中的物品。如果一个元素符合触发BFC的条件，则BFC中元素布局不受外部影响

创建BFC的条件

根元素 : body
元素设置浮动： float 除 none 以外的值
元素设置绝对定位： postition: absolute | fixed
display 的值为： inline-block | table-cell | table-caption | flex 等
overflow 值为： hidden | auto | scroll

BFC 的特定：

垂直方向向上，自上而下排序，和文档流的排列方式一致
在BFC中上下相邻的两个容器的 margin 会重叠
计算BFC的高度时，需要计算浮动元素的高度
BFC区域不会与浮动的容器发生重叠
BFC是独立的容器，容器内部元素不会影响外部元素
每个元素的左 margin 值和容器的左 border 相接触

BFC的作用：

解决 margin 的重叠问题：由BFC是一个独立区域，内部的元素和外部元素互不影响，将两个元素变为两个BFC，就解决了 margin 重叠的问题
解决高度塌陷问题：在对子元素设置浮动后，父元素会发生高度塌陷，也就是父元素的高度变为0。解决这个问题，只需要把父元素变成一个BFC。常用的办法是给父元素设置overflow:hidden。
创建自适应两栏布局：可以用来创建自适应两栏布局：左边的宽度固定，右边的宽度自适应。 ```css .left{ width: 100px; height: 200px; background: red; / 添加 float: left 后 .left 变成独立容器， / float: left; } .right{ height: 300px; background: blue; overflow: hidden; }

左侧设置`float:left`，右侧设置`overflow: hidden`。这样右边就触发了BFC，BFC的区域不会与浮动元素发生重叠，所以两侧就不会发生重叠，实现了自适应两栏布局。
<a name="hdt4u"></a>
### 3. position 的属性有哪些， 区别是什么
`position` 有以下属性值
| 属性值 | 概述 |
| --- | --- |
| absolute | 生成绝对定位的元素，相对于static定位以外的一个父元素进行定位。元素的位置通过left、top、right、bottom属性进行规定。 |
| relative | 生成相对定位的元素，相对于其原来的位置进行定位。元素的位置通过left、top、right、bottom属性进行规定。 |
| fixed | 生成绝对定位的元素，指定元素相对于屏幕视⼝（viewport）的位置来指定元素位置。元素的位置在屏幕滚动时不会改变，⽐如回到顶部的按钮⼀般都是⽤此定位⽅式。 |
| static | 默认值，没有定位，元素出现在正常的文档流中，会忽略 top, bottom, left, right 或者 z-index 声明，块级元素从上往下纵向排布，⾏级元素从左向右排列。 |
| inherit | 规定从父元素继承position属性的值 |
- relative :  元素相对于自身定位，和其他元素没有关系，也不会影响其他元素
- fixed :  元素的定位是相对 window 定位的， 但是它具有破坏性，会导致其他元素位置的变化。
- absolute ：相对于 父元素设置了 `relative`元素进行定位，就以该元素为基准定位，如果没找到，就以浏览器边界定位。
<a name="ckXVU"></a>
### 4.  absolute 与 fixed 共同点与不同点 
<a name="SFTTK"></a>
#### 共同点
- 改变行内元素的呈现方式，将 `display` 设置为 `inline-block`
- 使元素脱离文档流，不再占据文档物理空间
- 覆盖非定位文档元素 
<a name="Ldr1v"></a>
#### 不同点
- `absolute` 与 `fixed` 的根元素不同， `absolute`的根元素可以设置， `fixed`的根元素是 浏览器
- 在具有滚动条时， `absolute`会跟随父元素进行滚动， `fixed`固定在页面的具体位置
<a name="O30xQ"></a>
### 5. 对 sticky 定位的理解
`sticky`粘性的意思， 使用时叫做 粘性定位， 语法： `position: sticky` 基于用户的滚动位置来定位。
粘性定位的元素是依赖于用户的滚动，在 **position:relative** 与 **position:fixed** 定位之间切换。它的行为就像 **position:relative;** 而当页面滚动超出目标区域时，它的表现就像 **position:fixed;**，它会固定在目标位置。元素定位表现为在跨越特定阈值前为相对定位，之后为固定定位。这个特定阈值指的是 top, right, bottom 或 left 之一，换言之，指定 top, right, bottom 或 left 四个阈值其中之一，才可使粘性定位生效。否则其行为与相对定位相同。
<a name="B5Un8"></a>
## 四、 场景应用
<a name="cWldO"></a>
### 1. 实现一个三角形 
CSS绘制三角形主要用到的是border属性，也就是边框。
在CSS中 border 属性是由三角形组成 。 
```css
    div {
      width: 0;
      height: 0;
      border: 100px solid ;
      border-color: orange blue red green;
    }

所以实现三角形，可以这样

div {
    width: 0;
    height: 0;
    border-top: 50px solid red;
    border-right: 50px solid transparent;
    border-left: 50px solid transparent;
}

2. 实现一个扇形

div {
  width: 0;
  height: 0;
  border: 100px solid transparent;
  /* 扇形 需要加上圆角边框 */
  border-radius: 100px;
  border-top-color: red;
}

3. 实现一个⚪ 和半圆

    div {
      width: 100px;
      height: 100px;
      background-color:red;
      border-radius: 50%;
    }

div {
  background-color: red;
  width: 100px;
  height: 50px;
  /* 实现半圆*/
  border-radius: 0px 0px 100px 100px;
}

4. 画一条 0.5px 的线

transform: scale(0.5,0.5);

5. 设置小于 12 px 的字体

在谷歌下css设置字体大小为12px及以下时，显示都是一样大小，都是默认12px。

解决办法

使用 transform: scale(0.5) 收缩整个元素的大小，如果是内联元素，必须将内联元素转为跨级元素

CSS面试题