CSS知识点汇总

# 1.盒子模型

W3C标准盒子模型：width/height = content

IE怪异盒子模型：width/height = content + padding + border

# 2.CSS 选择器

选择器优先级

选择器	计算权重
继承，*（通配符）	0，0，0，0
标签选择器，伪元素选择器	0，0，0，1
类选择器，伪类选择器，属性选择器	0，0，1，0
ID选择器	0，1，0，0
行内样式	1，0，0，0
!important	∞

属性选择器

input[type=a]{
	/*属性值为a*/
}
input[type^=a] /*以a开头*/
input[type$=a] /*以a结尾*/
input[type*=a] /*包含a*/

1
2
3
4
5
6

伪类选择器

ul li:first-child{
    /*ul的第一个子元素*/
}
ul li:last-child /*ul的最后一个子元素*/

ul li:nth-child(odd) /*奇数位*/
ul li:nth-child(even) /*偶数位*/
ul li:nth-child(-n+3) /*前3个子元素*/
ul li:nth-child(5n) /*每5个子元素*/

div span:nth-of-type(1) /*选中第一个span*/
div apan:last-of-type /*匹配元素的最后一个子元素*/

还有适用于表单的伪类选择器

1
2
3
4
5
6
7
8
9
10
11
12
13
14

伪元素选择器

插入文本，适用于字体图标的规范写法，before 在内容前面，after 在内容后面，必须有 content 属性。before 和 after 创建的是一个元素，但是属于行内元素，创建出来的元素在 Dom 中查找不到，所以称为伪元素

p::after{
    content: '\ea50';
    font-family: 'icomoon';
}

1
2
3
4

# 3.关于伪类 LVHA 的解释？

a 标签有四种状态：（对顺序有要求）

:link	:visited	:hover	:active
链接访问前	链接访问后	鼠标滑过	激活

当鼠标滑过a链接时，满足:link和:hover两种状态，要改变a标签的颜色，就必须将:hover伪类在:link伪类后面声明；
当鼠标点击激活a链接时，同时满足:link、:hover、:active三种状态，要显示a标签激活时的样式（:active），必须将:active声明放到:link和:hover之后。因此得出LVHA这个顺序。

# 4.如何实现居中？

水平居中：

最简单方法，元素必须设置宽度

margin: 0 auto;

设置父元素内容居中对齐，子元素不能为块元素

.father{
	text-align: center;
}
.child{
	display: inline-block;
}

1
2
3
4
5
6

水平垂直居中：

绝对定位，先拉开，再平分左右外边距。

在左右内外边距、左右边框和内容宽度中，只有左右外边距和内容宽度可以设置 auto；对于块元素，如果没设置margin: auto，则右外边距强制设为auto，表现为填充剩余空间。

.child{
	position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
}

1
2
3
4
5
6
7
8

绝对定位，先定位至页面中心，再位移自身宽高的一半（translate 中的100%单位，是相对于本身的宽度和高度来进行计算的）

.child{
	position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

1
2
3
4
5
6

flex 布局，在父容器内实现水平垂直居中

.father{
	display: flex;
    justify-content: center;
    align-items: center;
}

1
2
3
4
5

行内元素的水平垂直居中：

<style>
.out {
    width: 200px;
    height: 200px;
    background-color: pink;
    font-size: 0; /*去除行内元素间的空隙*/
    text-align: center; /*水平居中*/
    line-height: 200px; /*方法一，实现垂直居中*/
}
/* 方法二，实现垂直居中
.out::before {
    content: '';
    height: 100%; 使行内元素占全部空间
    display: inline-block;
    vertical-align: middle;
} */

.in {
    display: inline-block;
    width: 100px;
    height: 100px;
    background-color: green;
    vertical-align: middle;
}
</style>
<body>
    <div class="out">
        <div class="in"></div>
    </div>
</body>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

# 5. CSS属性继承

对于继承性的属性，会在没有指定值的时候继承父元素的值；非继承属性则使用默认值。

常见的继承属性有，字体系列属性font-size、color，文本相关属性text-align，表格的一些布局属性，列表属性list-style，光标属性cursor，元素可见性visivility。

对于非继承属性，可以设置它的值为inherit，来强制继承父元素的属性。

使用数值作为父元素属性值，子元素继承的是这个值；如果使用百分比值作为父元素属性值，子元素继承的是最终的计算值，不是百分比值。

《CSS 有哪些属性可以继承？》

# 6.CSS3 transform动画

transform的优势在于不影响其他元素的位置，是相对于原位置进行的变化，仍占用原位置的空间。对行内元素无效。

移动：

transform: translate(0,100px);
transform: translate(0,50%); /*百分比，相对自身*/
transform: translateY(0,100px);

1
2
3

旋转：

transform: rotate(45deg);
/*设置旋转中心点,可选值top、bottom、left、right、center或百分数*/
transform-origin: left top; /*左上角为中心*/

1
2
3

缩放：

/*小于1是缩小，大于1是放大*/
transform: scale(2);
transform: scale(2,2);

1
2
3

简写：

div:hover {
  transform: translate(200px, 0) rotate(360deg) scale(1.2);
}

1
2
3

动画： 1.定义动画；2.使用动画

@keyframes move{
      0% {
        transform: translate(0px)
      }
      100% {
        transform: translate(500px, 0)
}

div:hover {
  animation: move 4s; /*动画名，持续时间*/
}

1
2
3
4
5
6
7
8
9
10
11

# 7.CSS3 弹性盒模型

通过将一个元素的display设置为flex，使它成为一个flex容器，它的所有子元素都会成为它的项目。

容器有两个轴，一个是水平的主轴，另一个是与主轴垂直的交叉轴。

对于容器元素我们可以使用flex-direction来指定主轴的方向；
使用justify-content指定元素在主轴上的排列方式；
使用align-items指定元素在交叉轴的排列方式；
还可以使用flex-wrap来规定换行方式。

对于项目，可以使用order属性来指定项目的排列顺序，
使用flex-grow指定排列空间有剩余时项目的放大比例，使用flex-shrink指定排列空间不足时项目的缩放比例。

# 8.CSS创建三角形的原理

将内容的宽高设置为0，通过边框均分正方形以获得三角形。如下代码是绘制等边三角形，将不需要显示的边宽度设置为0，使三角形充分利用块元素空间。

div{
	width: 0;
	height: 0;
	border-width: 0 10px 17px 10px;
	border-style: solid;
	border-color: transparent transparent red transparent;
}

1
2
3
4
5
6
7

# 9.将溢出的文字用省略号显示？

/*1.先强制一行内显示文本*/  
white-space: nowrap; 
/*2. 超出的部分隐藏*/   
overflow: hidden; 
/*3. 文字用省略号替代超出的部分*/   
text-overflow: ellipsis;

1
2
3
4
5
6

多行文本的溢出省略

没有CSS的属性可以直接控制多行文本的省略显示，这里利用相对定位在最后面加上一个省略号

.container{
    position: relative;
	width: 100px;
	height: 3em; /*容纳两行*/
	line-height: 1.5em;
	overflow: hidden;
}
.container::after{
	content: '...';
	position: absolute;
	bottom: 0;
	right: 0;
	padding: 0 5px; /*美观*/
	background-color: #fff; /*挡住文字*/
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

# 10.多列等高的实现

在父元素高度未知的情况下，希望并列的子元素背景高度等于子元素中最高的高度。

利用padding-bottom/margin-bottom正负值相抵，先扩大子元素的padding-bottom: 9999px;，补全缺失的背景，然后设置margin-bottom: -9999px;让多余的padding溢出，最后给父元素设置overflow: hidden;让溢出的部分隐藏。

《前端应该掌握的 CSS 实现多列等高布局》

# 11.让Chorme浏览器显示小于12px的文字

因为Chrome中文界面下默认会将小于12px的文本强制按照12px显示，所以利用C3变换中的scale(0.5)，但是对于span需要转换为块元素缩放才能生效。

# 12.行内块元素之间的空隙是什么原因？怎么解决？

原因：浏览器会把元素之间的连续多个空白符（空格、换行符、回车符等）转换为一个空格处理。这些元素之间的间距会随着字体大小而变化，当行内元素font-size:16px;时，间距为8px。常见的场景是，

<li>1</li>
<li>2</li>
<li>3</li>

1
2
3

解决办法：

将所有标签写在同一行,
为元素设置float: left;
设置父元素的font-size: 0;，子元素的字体大小需要重新设置。

# 13.包含块的定义

包含块（containing block）就是元素用来计算和定位的一个框。

涉及尺寸百分比相对的对象

MDN包含块的解释

# 14.绝对定位和非绝对定位元素的百分比计算的区别？

绝对定位元素的宽高百分比是相对临近祖先元素中position不为static的padding box来计算的，即content+padding。

非绝对定位元素的宽高百分比是相对父元素的content box来计算的。

# 15.图片使用base64编码的优缺点

base64是一种图片处理格式，可将图片编码成一串长的字符串，在页面上显示的时候，使用该字符串代替图片的url属性。

优点是
可减少一个图片的http请求；

缺点是

使用base64编码后，大小会比源文件大1/3，如果把大图片编码到html/css中，不仅会造成文件体积增加，影响文件的加载速度，还会增加浏览器对html/css文件解析渲染的时间。
使用base64编码的图片无法缓存，要缓存只能缓存包含base64的文件。

# 16.display、position和float的相互关系？

优先级：display>position:absolute/fixed>float

# 17.外边距塌陷的表现和解决办法

情况一：相邻式外边距塌陷，两个兄弟盒子，上面的盒子设置了margin-bottom，下面的盒子设置了margin-top，实际中不是取外边距之和，而是外边距中最大者。有个很好的比喻就是，有两个人在比剑。

解决办法： 只设置一个外边距。

情况二：嵌套式外边距塌陷，父元素的margin-top和子元素的margin-top发生重叠。

解决办法：

给父元素添加上边框；
给父元素添加内边距；
给父元素添加overflow: hidden;
创建BFC

# 18.BFC块级格式化上下文

一个元素形成BFC后，它内部的元素产生的布局不会影响外部元素，同时外部元素的布局也不会影响到BFC中的内部元素。常用来创建BFC解决外边距塌陷和高度塌陷等问题。

创建BFC的方法：浮动和绝对定位，display只设置为inline-block、flex等；overflow值不为visible。

# 19.清除浮动clear

清楚浮动可以让浮动的元素不与前面的浮动元素相邻，（不在同一行显示）也可以解决浮动元素导致的高度塌陷问题。

常用的清楚浮动方法：

.clear::after{
	content:'';
	display:table;/*也可以是'block'，或者是'list-item'*/
	clear:both;
}

1
2
3
4
5

清除浮动文章

# 20. 浏览器如何解析CSS选择器？

浏览器是从右到左匹配 CSS 表达式的，因此右侧的选择器也叫关键选择器，因为从右侧开始，只要发现选择器不匹配，就可以直接舍弃，避免了无用匹配；而如果从左侧开始匹配，到最后（最右）会发现很多元素不再匹配了，耗费性能。

# 21.CSS3 的 all 属性

all 属性是所有 css 属性的简写，不包括 unicode-bidi和direction，支持三个值，initial,inherit,unset。

initial规定所有属性都使用初始默认值；inherit规定所有属性都继承父元素属性值；unset 会忽略用户给当前元素设置的所有 css 样式，然后可继承的样式使用继承值，不可继承的样式使用初始值。

# 22.为什么不建议使用通配符*

使用通配符会把所有标签都遍历一遍，当网站较大时，会加大网站的运行负载；而且使用通配符是通常设置padding,margin为 0 ，但是并不是所有标签都有这两个属性，所有只对常见的元素初始化样式即可。

# 23.rem和em单位

rem是基于html元素的字体大小来决定，比如设置了html{font-size:12px}则之后的1rem就等于12px，2rem就等于24px；

em则根据此元素的font-size大小决定，如果此元素未设置font-size则继承父元素的属性。

# 24.动画的最佳时间间隔是多少？

因为多数显示设备的屏幕刷新率为60Hz，即1秒刷新60次，所以设置时间间隔为 1000ms / 60 = 16.7ms。

# 25.CSSSprites精灵图

精灵图就是将多个小图片合并为一张大图，这样在进行文件请求时只需要发起一次请求就可以了，使用时需要利用background,background-position对目标图片定位，其中左上角为坐标原点，向右向下为负值。缺点是如果更新其中一个图片尺寸，可能对整张图片重新排版，定位。

# 26.创建一个标准表格

//创建的是没有行间距，列间距且有边框的表格
<table border="1" cellpadding="0" cellspacing="0">
<style>
	table {
    	border-collapse: collapse;/*重复边框合并*/
	}
</style>

1
2
3
4
5
6
7
8

# 27.各百分比单位的参照对象

公式：当前元素某CSS属性值 = 基准 * 对应的百分比

元素的 position 为 relative 和 absolute 时，top和bottom、left和right基准分别为包含块的 height、width
元素的 position 为 fixed 时，top和bottom、left和right基准分别为初始包含块（也就是视口）的 height、width，移动设备较为复杂，基准为 Layout viewport 的 height、width
元素的 height 和 width 设置为百分比时，基准分别为包含块的 height 和 width
元素的 margin 和 padding 设置为百分比时，基准为包含块的 width（易错）
元素的 border-width，不支持百分比
元素的 text-indent，基准为包含块的 width
元素的 border-radius，基准为分别为自身的height、width
元素的 background-size，基准为分别为自身的height、width
元素的 translateX、translateY，基准为分别为自身的height、width
元素的 line-height，基准为自身的 font-size
元素的 font-size，基准为父元素字体

# 28.上下固定，中部自适应布局

1. 绝对定位实现

原理：让中部绝对定位撑开剩余空间，此时中部会遮挡底部，所以也需要给上下设置为绝对定位。

body {
  padding: 0;
  margin: 0;
}

header {
  position: absolute;
  top: 0;
  width: 100%; /*设置了绝对定位，宽就必须要写了*/
  height: 100px;
  background-color: yellow;
}

main {
  position: absolute;
  top: 100px;
  bottom: 100px;
  width: 100%;
  background-color: pink;
}

footer {
  position: absolute;
  bottom: 0;
  height: 100px;
  width: 100%;
  background-color: gray;
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

2. flex的grow实现

html,
body {
    height: 100%; /*很重要的一步，html也要写*/
}

body {
    display: flex;
    flex-direction: column;
    margin: 0;
    padding: 0;
}

header {
    height: 100px;
    background-color: yellow;
}

main {
    flex-grow: 1;
    background-color: pink;
}

footer {
    height: 100px;
    background-color: gray;
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

# 29.左固定，右自适应，两栏布局

/*方法一，浮动*/
body {
    padding: 0;
    margin: 0;
}

.left {
    float: left;
    width: 200px;
    height: 500px;
    background-color: pink;
}

.right {
    height: 500px;
    margin-left: 200px;
    background-color: yellow;
}
/*方法二，flex同上，利用flex-grow：1*/
/*方法三，绝对定位，同上，利用left和right撑开剩余空间

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

# 30.左右固定，中间自适应，三栏布局

方法一，左中右绝对定位，左left:0，右right:0，中间设置left和right撑开剩余空间，宽度默认填充。

方法二，同上绝对定位，不同的地方在于，中间不使用绝对定位，使用margin代替left和right。

方法三，flex布局，左右宽度固定，中间设置flex-grow:1;

方法四，浮动布局，左右宽度固定，左设置左浮动，右设置右浮动，中间正常只设置左右margin。需要注意，中间的 HTML 要写在最后，原因是如果在中间则会导致右浮动元素在下一行右浮动，只有先让浮动元素脱离文档流，使得最后写的中间元素上移，被浮动元素覆盖。浮动只会影响当前的或者是后面的标准流盒子，不会影响前面的标准流。

# 31.实现宽高自适应的正方形

/*1.第一种方式是利用vw来实现*/
.square {
  width: 10%;
  height: 10vw;
  background: tomato;
}

/*2.第二种方式是利用元素的margin/padding百分比是相对父元素width的性质来实现*/
.square {
  width: 20%;
  height: 0;
  padding-top: 20%;
  background: orange;
}

/*3.第三种方式是利用子元素的margin-top的值来实现的*/
.square {
  width: 30%;
  overflow: hidden;
  background: yellow;
}

.square::after {
  content: '';
  display: block;
  margin-top: 100%;
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

参考：
CavsZhouyou/Front-End-Interview-Notebook

作为前端复习用的css笔记

# 1.盒子模型

# 2.CSS 选择器

# 3.关于伪类 LVHA 的解释？

# 4.如何实现居中？

# 5. CSS属性继承

# 6.CSS3 transform动画

# 7.CSS3 弹性盒模型

# 8.CSS创建三角形的原理

# 9.将溢出的文字用省略号显示？

# 10.多列等高的实现

# 11.让Chorme浏览器显示小于12px的文字

# 12.行内块元素之间的空隙是什么原因？怎么解决？

# 13.包含块的定义

# 14.绝对定位和非绝对定位元素的百分比计算的区别？

# 15.图片使用base64编码的优缺点

# 16.display、position和float的相互关系？

# 17.外边距塌陷的表现和解决办法

# 18.BFC块级格式化上下文

# 19.清除浮动clear

# 20. 浏览器如何解析CSS选择器？

# 21.CSS3 的 all 属性

# 22.为什么不建议使用通配符*

# 23.rem和em单位

# 24.动画的最佳时间间隔是多少？

# 25.CSSSprites精灵图

# 26.创建一个标准表格

# 27.各百分比单位的参照对象

# 28.上下固定，中部自适应布局

# 29.左固定，右自适应，两栏布局

# 30.左右固定，中间自适应，三栏布局

# 31.实现宽高自适应的正方形