错误之处,欢迎指正,持续更新中。
1. 基础
1. px
、em
、rem
和vw/vh
有什么区别?
-
px
是像素,是一个绝对单位。 -
em
设置在字体上,表示相对于父级元素字体大小的倍数;
设置在宽度、高度等上,表示相对于自身字体大小的倍数。
如果父级没有设置字体大小,那么就继续向上找,如果到html
依然没有设置字体大小,那么就会使用浏览器的基准字号。
/*
<body>
<div class="wrapper">
<div class="container"></div>
</div>
</body>
*/
html{
font-size: 20px;
}
.wrapper{
font-size: 2em; /*相对于父级html字体大小,20px * 2 = 40px */
height: 1em; /*相对于自身字体大小,40px * 1 = 40px*/
}
.container{
font-size: 2em; /*相对于父级wrapper字体大小,40px * 2 = 80px */
height: 1em; /*相对于自身字体大小,80px * 1 = 80px*/
}
-
rem
表示相对于跟元素html
字体大小的倍数。
/*
<body>
<div class="wrapper">
<div class="container"></div>
</div>
</body>
*/
html{
font-size: 20px;
}
.wrapper{
font-size: 2rem; /*相对于html字体大小,20px * 2 = 40px */
height: 1rem; /*相对于html字体大小,20px * 1 = 20px*/
}
.container{
font-size: 2rem; /*相对于html字体大小,20px * 2 = 40px */
height: 1rem; /*相对于html字体大小,20px * 1 = 20px*/
}
-
vw
/vh
1vw
= 视口宽度的1%
1vh
= 视口高度的1%
在pc端,视口就是指浏览器窗口的大小。
在移动端,视口就是Layout Viewport(布局视口,不包含任务栏标题栏操作栏等)的大小。
2. 选择器权重。
- 内联样式
1000
-
id
选择器100
- 类、伪类和属性选择器
10
- 元素选择器和伪元素选择器
1
- 通配符选择器
0
-
!important
优先级最高。
3. display
1. inline
、block
和inline-block
有什么区别?
-
inline
不独占一行,和其他非独占一行元素都在同一行。
元素的宽、高、边距不可设置,宽度为内容的宽度。 -
block
块级元素独占一行。
可以设置元素的宽(默认情况下与父元素宽度一致)、高、边距。 -
inline-block
不独占一行,和其他非独占一行元素都在同一行。
可以设置元素的宽(默认情况下为内容的宽度)、高、边距。
2. display: inline-block;
什么时候会显示间隙,如何消除间隙?
元素被当成行内元素排版的时候,元素之间的空白符(空格、回车、换行等)都会被浏览器处理,在字体不为0
的情况下代码中的空白符就占据了一定宽度,因此出现了间隙。
解决办法:
- 书写时标签不换行。
- 父级标签
font-size: 0;
。 - 设置为浮动元素。
3. flex
属性的三个值分别是什么?
flex: flex-grow flex-shrink flex-basis;
-
flex-grow
当父元素的宽度大于所有子元素宽度之和时,根据这个值来分配父元素剩余的宽度。
/*
<body>
<div class="wrapper">
<div class="box"></div>
</div>
</body>
*/
.wrapper{
width: 100px;
height: 100px;
display: flex;
}
.box{
width: 50px;
height: 50px;
flex-grow: 0.5; /*此时div.box的实际宽度为(100 - 50)* 0.5 + 50 = 75*/
}
-
flex-shrink
当父元素的宽度小于所有子元素的宽度之和时,根据这个值来决定如何缩放子元素。
.wrapper{
width: 300px;
height: 100px;
display: flex;
border: 1px solid black;
}
.box1{
width: 250px;
height: 50px;
background-color: #ccc;
flex-shrink: 1;
}
.box2{
width: 250px;
height: 50px;
background-color: #f40;
flex-shrink: 3;
}
总宽度: 250
+ 250
= 500
超出宽度:500
- 300
= 200
宽度*缩放比相加: 1
* 250
+ 3
* 250
= 1000
div.box1
占比: 1
* 250
/ 1000
= 0.25
div.box1
缩小宽度: 0.25
* 200
= 50
div.box1
实际宽度: 250
- 50
= 200
div.box2
占比: 3
* 250
/ 1000
= 0.75
div.box2
缩小宽度: 0.75
* 200
= 150
div.box2
实际宽度: 250
- 150
= 100
-
flex-basis
用于设置子元素的占用空间(也就是宽度,并且会覆盖宽度的值。)
.wrapper{
width: 100px;
height: 100px;
display: flex;
}
.box{
width: 50px;
height: 50px;
flex-basis: 70px; /*此时div.box的实际宽度为70*/
}
4. 简单介绍弹性盒子布局中的换行和排序。
- 换行
默认情况下,弹性盒子布局中,如果一行放不下所有子元素,将不会换行,而是对子元素进行缩放。有a
b
c
三个元素,那么:
a
的新宽度 = (a
的原始宽度 /a
+b
+c
的宽度之和)* 父盒子的宽度
flex-wrap: wrap;
如果换行之后,某个元素的宽度大于父盒子宽度,那么默认情况下,该元素的宽度等于父盒子的宽度。
- 排序
通过给子元素设置order
属性来进行排序,order
值越小,越靠前。
4. 简要描述position
四种定位分别是什么,有什么区别。
-
static
默认值,没有定位,元素出现在正常的流中(即使设置top
、bottom
、left
或right
位置也不会发生改变) -
absolute
绝对定位,设置top
、bottom
、left
和right
会相对于父元素(非static
定位)进行定位,如果父元素是static
定位,会继续向上找,一直到body
。 -
relative
相对定位,设置top
、bottom
、left
和right
会相对于元素初始位置进行定位。 -
fixed
绝对定位,设置top
、bottom
、left
和right
会相对于浏览器窗口进行定位。
5. 简要说明两种盒模型。
- IE盒模型
.box{
width: 100px;
height: 100px;
padding: 10px;
border: 5px solid black;
box-sizing: border-box; /* 设置盒子为IE盒模型 */
}
盒子的总体宽、高均为100px
(content
+ padding
+ border
)
- 标准(W3C)盒模型
.box{
width: 100px;
height: 100px;
padding: 10px;
border: 5px solid black;
box-sizing: content-box;
}
盒子的content
区域宽、高均为100px
。
6. 列举实现div
居中的几种方式。
- 定位
.box{
width: 200px;
height: 100px;
background-color: #aaa;
position: absolute; /*设置div元素定位为position*/
top: calc(50% - 50px); /*设置top值为50% - 自身高度的一半*/
left: calc(50% - 100px); /*设置left值为50% - 自身宽度的一半*/
/* 或者使用margin */
/* top: 50%;
left: 50%;
margin-top: -50px;
margin-left: -100px; */
/* 或者使用transform */
/* top: 50%;
left: 50%;
transform: translate(-50%, -50%); */
}
- 弹性盒子
通过设置父元素的flex样式,来使子元素居中。
.container{
width: 500px;
height: 300px;
background-color: #cfcfcf;
display: flex;
justify-content: center;
align-items: center;
}
7. 如何实现九宫格布局?
- 弹性盒子
.container{
width: 350px;
height: 350px;
display: flex; /*主要代码*/
flex-wrap: wrap; /*主要代码*/
justify-content: center; /*主要代码*/
align-content: center; /*主要代码*/
border: 1px solid black;
}
.box{
width: 100px;
height: 100px;
background-color: #000;
margin: 1px;
}
- 浮动
.container{
width: 306px;
height: 306px;
border: 1px solid black;
}
.box{
width: 100px;
height: 100px;
margin: 1px;
background-color: #000;
float: left; /*主要代码*/
}
8. 如何实现三个盒子平分浏览器?
- 浮动
设置盒子宽度为33.3%,然后设置左浮动。
.box1{
width: 33.3%;
height: 200px;
background-color: #000;
float: left;
}
.box2{
width: 33.3%;
height: 200px;
background-color: #f0f;
float: left;
}
.box3{
width: 33.3%;
height: 200px;
background-color: #ff0;
float: left;
}
- 弹性盒子
设置盒子宽度为33.3%,然后设置父级body为弹性盒子布局。
body{
display: flex;
}
.box1{
width: 33.3%;
height: 200px;
background-color: #000;
}
.box2{
width: 33.3%;
height: 200px;
background-color: #f0f;
}
.box3{
width: 33.3%;
height: 200px;
background-color: #ff0;
}
9. 如何使用css
画一个三角形。
.box{
width: 0;
height: 0;
border-top: 10px solid black;
border-left: 10px solid black;
border-bottom: 10px solid transparent;
border-right: 10px solid transparent;
}
10. 如何清除浮动?
清除浮动就是让浮动元素的父元素高度撑开,那么之后的元素就都会避开这一区域进行排列。
-
clear
属性
/*
<div class="box1"></div>
<div class="clear-box"></div>
<div class="box2"></div>
*/
.box1{
width: 100px;
height: 100px;
background-color: #f40;
float: left;
}
.clear-box{
clear: both;
}
.box2{
width: 100px;
height: 100px;
background-color: #000;
}
当设置clear: both;
时,意为该元素的左右都不可以有浮动元素,所以该元素会下移直至换行,而为了让该元素换行,那么浮动元素的父元素就要进行空间的计算,这样父元素的高度就被撑起来了。
-
overflow
属性
通过给浮动元素的父元素设置overflow: hidden;
属性设置盒子为BFC
,从而使父元素的高度撑开。
/*
<div class="father">
<div class="div1"></div>
</div>
<div class="div2"></div>
*/
.father{
overflow: hidden;
}
.div1{
width: 100px;
height: 100px;
float: left;
}
.div2{
width: 100px;
height: 100px;
}
-
after
伪元素
.father::after{
content: "";
display: block;
clear:both;
}
.div1{
width: 100px;
height: 100px;
float: left;
}
.div2{
width: 100px;
height: 100px;
}
-
height
通过给浮动元素的父元素设置高度来清除浮动,比较局限性,只适合固定高度的布局。
11. 如何消除图片间隙?
-
display: block;
这种方法的不足之处就是会让图片独占一行,带来换行。 vertical-align
vertical-align: bottom; /*设置为top也可以*/
这种方法不足之处就是只能消除上下的间隙。
- 浮动
这种方法会改变文档流,会导致块级元素不换行,可能会需要清除浮动。 - 消除换行
图片左右间隙的产生是因为换行,可以通过标签不换行的方式来清除左右间隙。
12. 列举css
隐藏元素的几种方式和区别。
display
display: none; /*元素不在占据浏览器中的页面空间*/
opacity
opacity: 0; /*元素还在,但是已经透明了,看不到*/
visibility
visibility: hidden; /*元素还在,但是设置为不可见了,看不到*/
13. 如何旋转一张图片?
img{
width: 100px;
transform: rotate(90deg); /* 顺时针旋转90度 */
}
14. animation
和transform
的区别是什么?
-
animation
的可控性更高,可以定义多个关键帧,但是transition
只能设置初始状态和结束状态。 -
animation
更应该称之为动画,而transition
就是平滑的改变css
。 -
animation
能自动触发,但transition
需要一些动作,例如:hover
才能触发。 -
animation
可以循环执行,transition
只能触发一次。
15. 如何实现两栏布局?
- 浮动
这种写法是基于常规流不会避开浮动流的概念。
/*
<div class="box1"></div>
<div class="box2"></div>
*/
.box1{
width: 200px;
height: 20px;
float: left;
background-color: #f40;
}
.box2{
width: auto;
margin-left: 200px;
height: 20px;
background-color: #000;
}
- 定位
.box1{
width: 200px;
height: 20px;
position: absolute;
top: 0;
left: 0;
background-color: #f40;
}
.box2{
width: auto;
margin-left: 200px;
height: 20px;
background-color: #000;
}
- 弹性盒子
这种方法是使用flex-grow
属性,让第二个盒子占满剩余宽度。
/*
<div class="wrapper">
<div class="box1"></div>
<div class="box2"></div>
</div>
*/
.wrapper{
width: 100%;
height: 20px;
display: flex;
}
.box1{
width: 200px;
height: 20px;
background-color: #f40;
}
.box2{
width: auto;
height: 20px;
background-color: #000;
flex-grow: 1;
}
16. transform: translateZ(0);
有什么作用?
在使用transform
做动画时,会把元素提升为一个复合层,变成3D效果,因而使用GPU进行渲染;但是在使用JavaScript
操作css
属性做动画时,并不会将元素提升为复合层,因而使用translateZ(0)
来将元素提升为复合层,使用GPU进行渲染。
17. 介绍下auto
单位。
- 当一个块盒的宽度设置为
auto
时,代表着这个块盒的宽度要将独占这一行的剩余空间都吸收掉。高度设置为auto
,代表着适应文本的高度,让文本撑起来。 - 在水平方向上,
margin
(margin-left
、margin-right
)也可以吸收剩余空间,使用margin: 0 auto;
来实现居中就是运用了这一特点,margin-left
和margin-right
平分剩余的空间。
在一个块盒中,margin的吸收能力低于width的吸收能力 - 在垂直方向上,
margin-top
和margin-bottom
的取值为auto
时,表示0
。
18. 介绍下百分比单位。
-
width
、margin
、padding
的百分比都是相对于父元素的宽度。 -
height
如果父级的height
为auto
或者0
,那么子级高度为0
;
如果父级的height
为给出的一个值,那么子级的高度百分比是相对于父元素的高度进行计算。
.container{
width: 300px;
height: 200px;
}
.box{
width: 50%; /* 150px */
height: 50%; /* 100px */
padding: 10%; /* 30px */
margin: 20%; /* 60px */
}
19. 介绍下浮动以及相关的影响。
- 浮动的元素一定是一个块盒。
- 浮动中的
auto
浮动盒子宽度设置为auto
时,宽度适应内容(自适应),
margin
为auto
时,相当于为0。 - 常规流(块盒)和浮动流:
常规流影响浮动流,但是浮动流不能影响常规流(常规流会无视浮动流的存在)。
/*
<body>
<div class="box1"></div>
<div class="box2"></div>
</body>
*/
.box1{
width: 100px;
height: 100px;
background-color: #f40;
}
.box2{
width: 100px;
height: 100px;
float: left;
background-color: #000;
}
.box1{
width: 100px;
height: 100px;
float: left;
background-color: #000;
}
.box2{
width: 200px;
height: 100px;
background-color: #f40;
}
- 文字环绕(行盒)
- 行盒在排列时,会避开浮动流。
/*
<body>
<div class="box1"></div>
<span>Lorem ipsum dolor sit amet consectetur adipisicing elit. Nesciunt optio, rem mollitia nostrum tempore nemo? Reprehenderit perferendis aliquam repellendus! Quisquam?</span>
</body>
*/
.box1{
width: 100px;
height: 100px;
float: left;
background-color: #000;
}
- 神奇的现象
/*
<body>
<div class="box1"></div>
<div class="box2">Lorem ipsum dolor sit amet consectetur adipisicing elit. Nesciunt optio, rem mollitia nostrum tempore nemo? Reprehenderit perferendis aliquam repellendus! Quisquam?</div>
</body>
*/
.box1{
width: 100px;
height: 100px;
float: left;
background-color: #000;
}
.box2{
width: auto;
height: auto;
border: 1px solid black;
}
此时,常规流块盒确实没有避开浮动流,但是文字却避开了,那是因为如果文字没有处于行盒中,浏览器会生成一个匿名行盒对文字进行包裹。
- 高度坍塌
容器盒子设置高为auto
时,如果内容盒子是浮动流,那么容器盒子不会被撑起高度。
20. 什么是BFC
?
BFC
指块级格式化上下文,是一个独立存在和外界隔离的容器。可以通过为盒子添加:
position: absolute;
overflow: hidden;
float: left;
任一个属性,来设置盒子为BFC
。
<div class="container"> <!--处于根元素的BFC中 -->
<div class="box"></div> <!--处于根元素的BFC中 -->
</div>
<div class="wrapper" style="position: absolute;"> <!--处于根元素的BFC中 -->
<div class="box2"></div> <!--处于wrapper元素的BFC中 -->
</div>
-
BFC
盒子会计算内部浮动元素的高度,以此可以避免高度坍塌。 - 处于同一个
BFC
的盒子,重叠外边距会合并。 - 一个常规流的
BFC
盒子不会无视浮动流,会避开浮动流进行排列。
2. 进阶
1. 如何动态加载外部css
文件?
const styleSheets = document.createElement('link');
styleSheets.href = "./index.css";
styleSheets.rel = "stylesheet";
styleSheets.type = "text/css";
document.getElementsByTagName("head")[0].appendChild(styleSheets);
2. link
和@import
引入css
样式的区别是什么?
-
link
引入的css
在加载页面时同时加载,而@import
引入的css
要在页面加载完毕后加载。 -
link
是HTML
提供的标签,而@import
是css
的语法规则。 -
link
支持javascript
控制DOM
改变样式,而@import
不支持。(未能测试出该点,知道这点的详细测试方法的请告知下) -
@import
只有在IE5
以上的版本才能识别,而link
无此问题。
3. less
对比css
有什么优势?
-
less
是css
预处理语言,需要编译后才能转换为浏览器可识别的css
。 -
less
在css
的基础上,提供了嵌套、变量以及函数等功能,更方便编写。