😂这只是个人笔记……我没想到居然有人看到……

题目来源: 前端开发面试题

答案基本是自己整理的。并不是全部题目都有。

会有很多自己的啰嗦，还有很多乱七八糟的补充，请见谅。

介绍一下标准的CSS的盒子模型？低版本IE的盒子模型有什么不同的？

盒子模型有两种：IE 盒子模型(IE5.5及以下)，W3C标准盒子模型。

盒子模型(box model)：

内容(content)、填充(padding)、边框(border)、边界(margin) 。
不同：

W3C标准盒子模型的width和height，是content的宽高；

IE盒模型的width和height，是content、padding、border三部分合起来的宽高。

附加：

outline（轮廓）绘制在元素框之上，其不占据空间（不影响元素大小和定位）【所以如果轮廓线很粗，会遮住其他内容demo，不是很懂轮廓的覆盖顺序，它居然可以盖住下一个元素的内容？轮廓本身是另一次元的吗？会覆盖内容，但后一个轮廓会覆盖前一个轮廓】。

兼容性：IE8以上。

其他参考：关于外边距的一些实践上的细节, 解决盒模型的兼容性问题

如何居中div？

水平居中

已知宽度, block元素：

添加margin:0 auto属性。
```
div{
	width:200px;
	margin:0 auto;
 }
```

已知宽度, 绝对定位的div居中：

div {
	position: absolute;
	width: 300px;
	height: 300px;
	margin: auto; /* 这一步很关键 */
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
	background-color: pink;	/* 方便看效果 */
}

未知宽度，fit-content：

兼容性很差。

div {
    width: fit-content;
    margin: auto;
    background-color: pink;	/* 方便看效果 */
}

未知宽度，inline-block：

.parent {
    text-align: center;
}
div {
    display: inline-block;
    background-color: pink;	/* 方便看效果 */
}

未知宽度/已知宽度，relative：

参考：三、浮动实现水平居中的方法
- 优点：兼容性强，扩展性强；
- 缺点：实现原理较复杂。
需要两个div，外层left 50%，内层left -50%。

用float或inline-block，使容器大小为内容大小，而非默认的100%。
```
.outter {
    display: inline-block; /* or float: left; */
    position: relative;
    left: 50%;
}
.inner {
    position: relative;
    left: -50%;
}
```
- left的值为百分比时，为父容器的宽度的百分比(MDN)。

水平垂直居中

确定容器宽高：

相对或绝对定位, 设置外边距margin。

div {
	position: relative / fixed; /* 相对定位或绝对定位均可 */
	width:500px;
	height:300px;
	top: 50%;
	left: 50%;
	margin: -150px 0 0 -250px;  /* 外边距为自身宽高的一半 */
	background-color: pink; /* 方便看效果 */
 }

不确定容器宽高：

绝对定位，利用 transform 属性。

div {
	position: absolute/fixed; /* relative会让width变成100%，
                                 所以不行
                               */
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	background-color: pink; /* 方便看效果 */
}

flex 布局：

宽高可以确定，也可以不确定。

实际使用时应考虑兼容性。

.container {
	display: flex;
	align-items: center; 		/* 垂直居中 */
	justify-content: center;	/* 水平居中 */

}
.container div {
	width: 100px; /* 可省 */
	height: 100px; /* 可省 */
	background-color: pink;	/* 方便看效果 */
}

inline-block：

宽高可以确定，也可以不确定。

水平居中：text-align。

垂直居中：父元素line-height与height同值，子元素 vertical-align。

缺点：内层高度超出外层，无法垂直居中，会和父层同顶部(参见demo)。

.container {
    height: 200px; /* 垂直居中 */
    line-height: 200px; /* 垂直居中 */
    text-align: center; /* 水平居中 */
}
.container div {
    display: inline-block; /* 核心：宽度自适应，高度可居中 */
    line-height: 20px; /* 会自动继承，必须设置不同的值来覆盖 */
    vertical-align: middle; /* 垂直居中 */
}

CSS选择符有哪些？

id选择器（ #myid）
类选择器（.myclassname）
标签选择器（div, h1, p）
紧邻同胞选择器 h1 + p（选的是h1后紧跟的那个p）
一般同胞选择器 h1 ~ p（选择所有跟在h1后的p）[css3]
子选择器（ul > li）
后代选择器（li a）
通配符选择器（ * ）
属性选择器（a[rel = "external"]）
伪类选择器（a:hover, li:nth-child）

伪元素 & 伪类：

所有伪元素:

::after
::before
::first-letter
::first-line
::selection

伪类:

:active, :hover, :visited
:any
:any-link
:checked
:default
:defined
:dir()
:disabled
:empty
:enabled
:first
:first-child
:first-of-type
:fullscreen
:focus
:focus-visible
:host
:host()
:host-context()
:indeterminate
:in-range
:invalid
:lang()
:last-child
:last-of-type
:left
:link
:not()
:nth-child()
:nth-last-child()
:nth-last-of-type()
:nth-of-type()
:only-child
:only-of-type
:optional
:out-of-range
:read-only
:read-write
:required
:right
:root
:scope
:target
:valid

通配符选择器有一个非常有意思的用法，即用它构成非子选择符，比如：
section * a {font-size:1.3em;}
任何是 section 孙子元素，而非子元素的 a 标签都会被选中。至于 a 的父元素是什么，没有关系。

哪些属性可以继承？

所有元素可继承
```
visibility

cursor
```

内联元素可继承：

letter-spacing word-spacing

white-space

line-height

color

font font-family font-size font-style font-variant font-weight

text-decoration text-transform

direction

font-variant：把段落设置为小型大写字母字体。

text-transform: 控制文本中的字母的大小写。

块状元素可继承：

//文本块中首行文本的缩进
text-indent 

text-align

列表元素可继承：

list-style
list-style-type
list-style-position
list-style-image

表格元素可继承：

/*
    1. separate	默认值。边框会被分开。
      不会忽略 border-spacing 和 empty-cells 属性。
    2. collapse	如果可能，边框会合并为一个单一的边框。
      会忽略 border-spacing 和 empty-cells 属性。
    3. inherit	规定应该从父元素继承 border-collapse 属性的值。
*/
border-collapse

不可继承的样式：

display

position left right top  bottom z-index

height min-height max-height
width min-width max-width

padding border margin

background

overflow

float clear

vertical-align

/*下面几个都没见过*/

table-layout /*表格宽度是否自适应。值：automatic，fixed，inherit*/

page-break-after page-break-before /*打印时强制分页*/

unicode-bidi /*与direction合用，控制文字方向*/

CSS优先级算法如何计算？

优先级就近原则，同权重情况下样式定义最近者为准;
载入样式以最后载入的定位为准。

优先级为:

// 同权重下，权限由高到低: 
1.元素标签里（行内样式/内联样式）
2.写在<style>标签里（嵌入样式）
3.写在单独的 CSS 样式表中（链接样式）
4.在样式表中链接其他样式表：@import url(css/styles2.css)

// 不同权重计算
!important >  id > class > tag

// !important优先于一切
!important 比 内联优先级高

权重计算方法：

// 选择器的特殊性值表述为4个部分，用0,0,0,0表示。

行间样式的特殊性是1,0,0,0

ID选择器的特殊性值，加0,1,0,0。

类选择器、属性选择器或伪类，加0,0,1,0。

元素和伪元素，加0,0,0,1。

通配选择器 * 对特殊性没有贡献，即0,0,0,0。

!important，它没有特殊性值，但它的优先级是最高的。
为了方便记忆，可以认为它的特殊性值为1,0,0,0,0。

more: 详细的优先级计算方法

CSS3新增伪类有哪些？

参考：MDN - CSS新特性

伪类	说明
`:last-child`	父元素的最后一个子元素。
`:nth-child(an+b)`	找到所有当前元素的子元素；按照位置先后顺序从1开始排序，选择的结果为第 an+b 个元素的集合(n = 0, 1, 2, ...)。
`:nth-last-child(an+b)`	与`:nth-child(an+b)`类似，只是它从结尾处逆序计数，而不是从开头处。↪ MDN
`:only-child`	属于某个父元素的唯一一个子元素，即选择没有同胞的所有元素。

`:first-of-type`	父元素下，每个元素类型中，最靠前的那个。
`:last-of-type`	父元素下，每个元素类型中，最靠后的那个。
`:nth-of-type(an+b)`	父元素下，每个元素类型中，第n个。找到当前元素下，同元素类型的所有子元素的集合，对每个集合按照位置先后顺序排序，选择的结果为第 an+b 个元素的集合。
`:nth-last-of-type(an+b)`	基本上和 `:nth-of-type` 一样，只是它从结尾处逆序计数，而不是从开头处。
`:only-of-type`	选择不同于其他同胞元素的tag类型的元素，就是说，这个元素类型的元素在其父元素下，同一级只有这一个。（类比家庭中的男孩和女孩）

`:enabled`	每个启用的的元素（主要用于表单元素）。
`:disabled`	禁用的元素（主要用于控制表单控件的禁用状态）。

`:checked`	单选框或复选框被选中。
`:indeterminate`	表示不确定状态。 1.`<input type="checkbox">` 元素，其 indeterminate 属性被 JavaScript设置为 true; 2.`<input type="radio">` 元素, 表单中拥有相同 name值的所有单选按钮都未被选中时; 3.处于不确定状态的 `<progress>` 元素

`:target`	`<a>`跳转`#`锚点，可设置锚点目标的样式。MDN

`:root`	匹配文档树的根元素。对于 HTML 来说，`:root` 表示 `<html>` 元素，除了优先级更高之外，与 html 选择器相同。
`:empty`	没有子元素的元素。子元素只可以是元素节点或文本（包括空格）。MDN 注释不算在内，但注释周围有空格就算。
`:not(X)`	匹配不符合参数选择器`X`描述的元素。 `X`不能包含另外一个否定选择器。 `:not`伪类的优先级即为它参数选择器的优先级。 `:not`伪类不像其它伪类，它不会增加选择器的优先级。 `:not(p)` 将匹配任何非p元素，包括`html`和`body`。(所以用的时候千万小心，如果设置了什么color，可能会出现非自己预料的情况，比如全成一样的颜色。↪ bug demo)

display有哪些值？说明他们的作用。

display	说明
css1
none	元素不显示，并从文档流中移除。
inherit	从父元素继承 display 属性的值。
block	块类型。默认宽度为父元素宽度，可设置宽高，换行显示。
inline	行内元素类型。默认宽度为内容宽度，不可设置宽高，同行显示。
list-item	像块类型元素一样显示，并添加样式列表标记。

css2
inline-block	默认宽度为内容宽度，可以设置宽高，同行显示。
table	作为块级表格来显示。

flex	弹性元素如何伸长或缩短以适应flex容器中的可用空间。
grid	网格布局

position的值relative和absolute定位原点是？

position	说明
static	默认值。没有定位，元素出现在正常的流中（忽略 top, bottom, left, right, z-index 声明）。
inherit	从父元素继承 position 属性的值。
absolute	绝对定位。不为元素预留空间，相对于最近的非 static 定位的祖先元素进行定位。
fixed （老IE不支持）	绝对定位。不为元素预留空间，相对于浏览器窗口进行定位。元素的位置在屏幕滚动时不会改变。
relative	相对定位。相对于其正常位置进行定位。该关键字下，元素先放置在未添加定位时的位置，再在不改变页面布局的前提下调整元素位置（因此会在此元素未添加定位时所在位置留下空白）。

相对定位的元素并未脱离文档流，而绝对定位的元素则脱离了文档流。

CSS3有哪些新特性？

圆角（border-radius:8px）
新增各种CSS选择器、伪类（经常用到 :nth-child）
文字渲染（Text-decoration）

转化为简写属性，可设置text-decoration-color, text-decoration-style, text-decoration-line三个属性，默认值为currentcolor solid none。
透明色 & 透明度（opacity）
旋转（transform）

旋转 rotate，缩放 scale，倾斜 skew，平移 translate
动画(animation) & 过渡效果(transition)

阴影（box-shadow, text-shadow）

box-shadow: x-offset y-offset blur-radius spread-radius color;

text-shadow: x-offset y-offset blur-radius color;

新的布局方式，如多列布局 multi-columns 、弹性布局 flexible box 与网格布局 grid layouts
线性渐变（gradient）
多背景（background-image可以设置多个url或linear-gradient）
媒体查询(@media MDN) (可以看看这个)
边框可以设置图片（border-image）

请解释一下CSS3的Flexbox（弹性盒布局模型）,以及适用场景？

MDN

什么是flexbox

CSS3新增布局。

Flexbox可以把列表放在同一个方向（从上到下排列，从左到右），并让列表能延伸到占用可用的空间。

较为复杂的布局还可以通过嵌套一个伸缩容器（flex container）来实现。

采用Flex布局的元素，称为Flex容器（flex container），简称"容器"。
它的所有子元素自动成为容器成员，称为Flex项目（flex item），简称"项目"。

常规布局是基于块和内联流方向，而Flex布局是基于flex-flow流可以很方便的用来做局中，能对不同屏幕大小自适应。

在布局上有了比以前更加灵活的空间。

具体：http://www.w3cplus.com/css3/flexbox-basics.html

应用场景

水平垂直居中
一边定宽，一边自适应
多列等分布局
圣杯布局
sticky footer

我在项目中的应用

sticky footer (demo)

如果页面内容不够长的时候，footer固定在视窗底部；如果内容足够长时，footer会被内容向下推。

<div class="detail-flex">
    <div class="detail-content">detail-content</div>
    <div class="detail-footer">detail-footer</div>
</div>

.detail-flex
    display: flex
    flex-direction: column
    position: fixed
    z-index: 100
    top: 0
    left: 0
    width: 100%
    height: 100%
    overflow: auto
    
    .detail-content
        flex: 1 0 auto
        
    .detail-footer
        flex: 0 0 auto

用纯CSS创建一个三角形的原理是什么？

不同宽高下的border：详情请戳demo

基础

把上、左、右三条边隐藏掉（颜色设为 transparent）。

div {
  width: 0;
  height: 0; /* div里没内容，可不写 */
  border-width: 20px;
  border-style: solid;
  border-color: transparent transparent red transparent;
}

/* 或者这样写 */
div {
  width: 0;
  border: 100px solid transparent;
  border-bottom-color: #343434;
}

等边三角形

显示部分的宽度 = transparent部分的宽度 * √3

√3 ≈ 1.732

div {
  width: 0;
  border: 100px solid transparent;
  border-bottom: 173px solid #343434;
}

直角三角形

设置两边的宽度为0。

/* 填充右下角的三角形 */
div {
  width: 0
  border: 0 solid transparent
  border-left: 100px solid transparent
  border-bottom: 100px solid #343434
}

带边框的三角形

pen demo

两个重叠。(但是不够智能)

<div id="col1"></div>
<div id="col2"></div>

body, html
  margin: 0
  background-color: #333
#col1, #col2
  width: 0
  border: 100px solid transparent
  border-bottom: 173px solid #fff
#col2
  position: absolute
  left: 0
  top: 2px
  border-bottom-color: #222
  transform: scale(0.98)

css多列等高如何实现？

参考：八种创建等高列布局

1. 背景图

优点：

实现方法简单，兼容性强，不需要太多的css样式就可以轻松实现。
缺点：

使用这种方法不适合流体布局等高列的布局；

需要更换背景色或实现其他列数的等高列时，都需要重新制作过背景图。

2. div嵌套+position

demo

原理图：

优点：

不需要借助其他东西（javascript,背景图等）,而是纯CSS和HTML实现的等高列布局；

兼容所有浏览器（包括IE6），并且可以很容易创建任意列数。
缺点：

不像其他方法一样简单明了，给你理解会带来一定难度；

复杂的div嵌套，html语义不清晰（你有多少列就需要多少个容器）。

3. 正padding和负margin正负值相抵

demo

原理：

利用padding-bottom|margin-bottom正负值相抵；

设置父容器设置超出隐藏（overflow:hidden），这样子父容器的高度就还是它里面的列没有设定padding-bottom时的高度，当它里面的任一列高度增加了，则父容器的高度被撑到里面最高那列的高度，其他比这列矮的列会用它们的padding-bottom补偿这部分高度差。
优点：

可实现多列等高布局；

能实现列与列之间分隔线效果；

结构简单；

兼容所有浏览器。
缺点：

若希望每列四周有边框，则底部（或顶部）边框无法显示。
缺点解决办法：
1. 用和边框一致的背景图（我不喜欢这种类型的方法，后续更改很麻烦）
2. 使用div来模仿列的边框
  
  demo
  
  每列中添加一个div（可以直接用::after伪元素代替），设置定位为absolute；
  
  在列的上一级的wrapper中，定位relative；
  
  这样，就能让absolute根据wrapper的大小和位置进行定位了。

4. 边框 + 绝对定位/float “模拟”

绝对定位 demo， float demo

感觉思路上其实与“2. div嵌套+position”类似，都是在底部设置背景层，再在上面铺文字层。（我自己改了以下，这样也行 ↪ demo）

优点：

结构简单，兼容各浏览器，容易掌握。
缺点：

受限于边框+内容最多三栏，所以无法实现三栏以上的效果。

5. 模拟表格布局

demo

优点：

这是一种非常简单，易于实现的方法。
缺点：

兼容性不好，在ie6-7无法正常运行。

6. flex布局

优点：

简单易用，适用于移动端。
缺点：

CSS3新功能，不兼容老的浏览器。