期待那一天，我可以用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 ∞

属性选择器

1
2
3
4
5
6
input[type=a]{
	/*属性值为a*/
}
input[type^=a] /*以a开头*/
input[type$=a] /*以a结尾*/
input[type*=a] /*包含a*/

伪类选择器

1
2
3
4
5
6
7
8
9
10
11
12
13
14
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 /*匹配元素的最后一个子元素*/

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

伪元素选择器

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

1
2
3
4
p::after{
    content: '\ea50';
    font-family: 'icomoon';
}

3.关于伪类 LVHA 的解释？

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

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

4.如何实现居中？

水平居中：

  1. 最简单方法，元素必须设置宽度
1
margin: 0 auto;
  1. 设置父元素内容居中对齐，子元素不能为块元素
1
2
3
4
5
6
.father{
	text-align: center;
}
.child{
	display: inline-block;
}

水平垂直居中：

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

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

1
2
3
4
5
6
7
8
.child{
	position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
}
  1. 绝对定位，先定位至页面中心，再位移自身宽高的一半（translate 中的100%单位，是相对于本身的宽度和高度来进行计算的）
1
2
3
4
5
6
.child{
	position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
  1. flex 布局，在父容器内实现水平垂直居中
1
2
3
4
5
.father{
	display: flex;
    justify-content: center;
    align-items: center;
}

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

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
<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>

5. CSS属性继承

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

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

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

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

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

6.CSS3 transform动画

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

移动：

1
2
3
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.使用动画

1
2
3
4
5
6
7
8
9
10
11
@keyframes move{
      0% {
        transform: translate(0px)
      }
      100% {
        transform: translate(500px, 0)
}

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

7.CSS3 弹性盒模型

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

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

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

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

8.CSS创建三角形的原理

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

1
2
3
4
5
6
7
div{
	width: 0;
	height: 0;
	border-width: 0 10px 17px 10px;
	border-style: solid;
	border-color: transparent transparent red transparent;
}

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

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

多行文本的溢出省略

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
.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; /*挡住文字*/
}

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。常见的场景是，

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

​解决办法：

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

13.包含块的定义

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

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

MDN包含块的解释

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

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

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

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

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

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

缺点是

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

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

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

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

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

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

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

​解决办法：

  1. 给父元素添加上边框；
  2. 给父元素添加内边距；
  3. 给父元素添加overflow: hidden;
  4. 创建BFC

18.BFC块级格式化上下文

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

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

19.清除浮动clear

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

​常用的清楚浮动方法：

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

清除浮动文章

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.创建一个标准表格

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

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，基准为父元素字体

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