CSS面试题整理

😂这只是我的笔记……我没想到竟然有人看到……javascript

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

答案基本是本身整理的。并非所有题目都有。html

会有不少本身的啰嗦，还有不少乱七八糟的补充，请见谅。前端

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

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

盒子模型(box model)：css3

内容(content)、填充(padding)、边框(border)、边界(margin) 。git
不一样：github

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：

参考：3、浮动实现水平居中的方法
- 优势：兼容性强，扩展性强；
- 缺点：实现原理较复杂。
须要两个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流能够很方便的用来作局中，能对不一样屏幕大小自适应。

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

具体：www.w3cplus.com/css3/flexbo…

应用场景

水平垂直居中
一边定宽，一边自适应
多列等分布局
圣杯布局
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新功能，不兼容老的浏览器。