CSS | BaoTao的前端日志

CSS常见面试题总结

1.水平居中

(1)文本/行内/行内块
text-align:center
(2)单个块级
width:100px;
margin: 0 auto;
(3)多个块级
父: text-align:center;
子: display:inline-block;
(4)绝对定位
position:absolute;
left: 50%;
transform: translate(-50%);
(5)flex
display:flex;
justify-content:center;

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

2.垂直居中

单行文本
line-height: 20px;//和父盒子高度一样即可
(1)
.father {
    width: 200px;
    height:200px;
    border:1px solid #000;
    line-height: 200px;
}
.son {
    display:inline-block;
    // 重新设置line-height不继承
    line-height: 20px;
    vertical-align:middle:
}
(2)
.father {
    display: table-cell;
    vertical-align: middle;
}
(3)
position: absolute;
top: 0;
bottom: 0;
margin: 0 auto;
(4)
display:flex;
align-items: center;
(5)绝对定位+transform...

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

3.水平垂直居中

(1)行内/行内块/图片
父: text-align:center;
子:vartival-align:middle;display:inline-block;
（3）已知高度宽度元素的水平垂直居中

利用绝对定位和负边距实现
.container{
    width: 600px;
    height: 600px;
    position: relative;
}
.center{
    width: 300px;
    height: 300px;
    position: absolute;
    left: 50%;
    top: 50%;
    margin: -150px 0 0 -150px;
}
利用绝对定位和margin
.container{
    width: 600px;
    height: 600px;
    position: relative;
}
.center{
    width: 300px;
    height: 300px;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
}
（4）未知高度和宽度元素的水平垂直居中
被居中的元素是inline或者inline-block元素
.container{
    width: 600px;
    height: 600px;
    display: table-cell;
    text-align: center;
    vertical-align: middle;
}
css3的transform属性
.container{
    width: 100%;
    height: 600px;
    position: relative;
}
.center{
    position:absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
flex布局
.container{
    width: 100%;
    height: 600px;
    display: flex;
    justify-content: center;
    align-items: center;
}
最简单的写法：
.container{
    display: flex;
    height: 600px;
}
.center{
    margin : auto;
}

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
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72

4.等高布局

1.flex实现
{
  display: flex;
  align-items: stretch;
}
2.使用border实现
.box { 
    border-left: 150px solid #333;
    background-color: #f0f3f9;
}
/* 清除浮动影响，不能使用overflow:hidden */
.box:after {
    content: "";
    display: block;
    clear: both;
}
/* 布局主结构 */
.box > nav {
    width: 150px;
    margin-left: -150px;
    float: left;
}
.box > section {
    overflow: hidden;
}
3.使用margin负值
.container {
    margin: auto;
    max-width: 600px;
    overflow: hidden;
}
.column-left,
.column-right {
    width: 50%;
    float: left;
    margin-bottom: -9999px;
    padding-bottom: 9999px;
}
.column-left {
    background-color: #34538b;
}
.column-right {
    background-color: #cd0000;
}
4.使用table-cell

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
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45

5.三栏布局

双飞翼布局

html：
	<div id="header"></div>
	<!--中间栏需要放在前面-->
	<div id="parent">
		<div id="center">
			<div id="center_inbox">中间自适应</div>
			<hr>
			<!--方便观察原理-->
		</div>
		<div id="left">左列定宽</div>
		<div id="right">右列定宽</div>
	</div>
	<div id="footer"></div>
css: 
#header {
    height: 60px;
    background-color: #ccc;
}

#left {
    float: left;
    width: 200px;
    height: 500px;
    margin-left: -100%;
    background-color: skyblue;
}

#right {
    float: left;
    width: 200px;
    margin-left: -200px;
    height: 500px;
    background-color: skyblue;
}

#center {
    height: 500px;
    float: left;
    width: 100%;
    background-color: pink;
}

#center_inbox {
    height: 480px;
    border: 1px solid #000;
    margin: 0 220px 0 220px;
    /*关键!!!左右边界等于左右盒子的宽度,多出来的为盒子间隔*/
}

#parent {
    width: 100%;
    height: 500px;
}

#parent:after {
    clear: both;
    display: table;
    *zoom: 1;
}

#footer {
    height: 60px;
    background-color: #ccc;
}

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
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64

双飞翼布局重点：左中右均浮动，中间内容使用margin腾出空间，左边采用margin-left：-100%，而右边采用margin-left：-200px(自身宽度)

圣杯布局

html：
	<div id="header"></div>
	<div id="parent">
		<!--#center需要放在前面-->
		<div id="center">中间自适应
			<hr>
		</div>
		<div id="left">左列定宽</div>
		<div id="right">右列定宽</div>
	</div>
	<div id="footer"></div>
css：
#header {
    height: 60px;
    background-color: #ccc;
}

#left {
    position: relative;
    left: -220px;
    float: left;
    width: 200px;
    height: 500px;
    margin-left: -100%;
    background-color: skyblue;
}

#center {
    float: left;
    height: 500px;
    width: 100%;
    background-color: pink;
}

#right {
    position: relative;
    left: 220px;
    float: left;
    width: 200px;
    margin-left: -200px;
    height: 500px;
    background-color: skyblue;
}

#parent {
    box-sizing: border-box;
    height: 500px;
    padding: 0 220px 0 220px;
}

#parent:after {
    clear: both;
    display: table;
    *zoom: 1;
}

#footer {
    height: 60px;
    background-color: #ccc;
}

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
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61

圣杯布局是通过整体（包括左中右）设置padding腾出空间，左右两块采用相对定位偏移到左右两侧，margin-left则同上。

flex布局，绝对定位加margin，table

flex实现时可以只设定宽度，同时order属性是越小越靠前
绝对定位不要忘记加top：0

6.双栏布局

1.flex布局(可以不定宽)
左 flex-basis: 200px 
右: flex: 1 
父容器: display: flex
2.绝对定位 
左: display:absolute top:0 left:0 width: 200px
右: margin-left: 200px
3.浮动+margin
左: float:left width: 200px
右: margin-left: 200px
父盒子: overflow: hidden
4.BFC+margin(可以不定宽)
左: float:left
右: overflow: hidden
父盒子: overflow: hidden

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

7.瀑布流布局

section {
    display: flex;
    flex-wrap: wrap;
    padding: 15px;
    // 用于最后一行最后的位置显示空白
    &::after {
        content: "";
        flex-grow: 999;
    }
    .img-wrapper {
        flex: 1; // 等分剩余空间
        margin: 5px;
        .img {
            height: 170px;
            min-width: 100%;
            object-fit: cover;
        }
    }
}

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

8.清除浮动的三种方式

1.在末尾添加新的元素<div class="clear"></div>，应用 clear：both；
.clear{clear:both; height: 0; line-height: 0; font-size: 0}
2.父级div定义 overflow: auto/hidden
3.利用::after 方法
.outer {zoom:1;}    /*==for IE6/7 Maxthon2==*/
.outer::after {clear:both;content:'.';display:block;width: 0;height: 0;visibility:hidden;}   /*==for FF/chrome/opera/IE8==*/

1
2
3
4
5
6

9.三角形实现

.box
{
    width:0px;
    height:0px;
    border-top:50px solid red;
    border-right:50px solid yellow;
    border-bottom:50px solid green;
    border-left:50px solid pink; // 只要把上、右、左 方向边框的颜色设置为透明，只剩下向上的小三角
}

1
2
3
4
5
6
7
8
9

10.BFC

BFC 生成了一套封闭的布局空间，内部子元素无论怎么布局，都不会影响到外部的元素。BFC 可以用来清除浮动，防止 margin 重叠，去除 float 文字环绕，第一个子元素 margin-top 和父元素重叠等。

以下几种元素会生成 BFC：

html 元素。
float 不是 none 的元素。
overflow: auto/hidden/scroll 的元素。
display: table-cell/inline-block 的元素。
position 不是 static 和 relative 的元素。

11.CSS 选择器的优先级是什么

每一个选择器都有一个权重，被匹配的元素可能受到多个选择器的影响，就会进行权重叠加，权重最高的选择器中的 css 代码会被优先使用。

内联样式权重：1000
id 选择器权重：0100
类选择器，属性选择器，伪类选择器权重：0010
元素选择器，伪元素选择器权重：0001
通配选择器 *，子选择器 >，相邻选择器 +。权重：0000
伪类：a标签的:link,:visited,:hover,:active; 以及:first-child,:last-child。
伪元素：::before,::after,::first-letter,::first-line（是html中不存在的元素）

12.CSS属性继承

字体相关：line-height, font-size, font-weight, font
文本相关：letter-spacing, text-align, text-transform, word-spacing
列表相关：list-style
颜色：color

13.CSS3相关属性介绍

1）边框：

border-radius：圆角边框，border-radius:25px;
box-shadow：边框阴影，box-shadow: 10px 10px 5px #888888;

2）背景：

background-size：规定背景图片的尺寸，background-size:63px 100px;

3）文本效果：

text-shadow：向文本应用阴影，可以规定水平阴影、垂直阴影、模糊距离，以及阴影的颜色。text-shadow: 5px 5px 5px #FF0000;
word-wrap：允许文本进行换行。word-wrap:break-word;

4）2D 转换（transform）

skew()：元素翻转给定的角度，根据给定的水平线（X 轴）和垂直线（Y 轴）参数。transform: skew(30deg,20deg);
matrix()：把所有 2D 转换方法组合在一起，需要六个参数，包含数学函数，允许您：旋转、缩放、移动以及倾斜元素。transform:matrix(0.866,0.5,-0.5,0.866,0,0);

transform: matrix(a,b,c,d,e,f);
x' = ax + cy +  e   // 即：x坐标
y' = bx + dy + f    // 即：y坐标

1
2
3

5）transition：过渡效果（属性过渡时间过渡函数过渡延迟多长时间执行）

transition: [ || || || ];

6）animation：动画（动画名称持续时长过渡函数延迟时间播放次数）

使用CSS3 @keyframes 规则。

animation-direction: normal | alternate：指定元素动画播放的方向，其只有两个值，默认值为normal，如果设置为normal时，动画的每次循环都是向前播放；另一个值是alternate，他的作用是，动画播放在第偶数次向前播放，第奇数次向反方向播放。
animation-play-state:running | paused：控制元素动画的播放状态。

简写为：animation:[ || || || || || ]

14.SCSS不同于CSS的地方

定义变量，可以把反复使用的css属性值定义成变量，通过变量名来引用它们，无需重复书写这一属性值；
嵌套写法，父子关系一目了然；
使用运算符，可以进行样式的计算；
继承：为多个元素定义相同样式的时候，我们可以考虑使用继承的做法；
Mixins （混入）：有点像是函数或者是宏，当某段 CSS经常需要在多个元素中使用时，可以为这些共用的 CSS 定义一个Mixin，然后只需要在需要引用这些 CSS 地方调用该 Mixin 即可。

15.移动端适配

一、 meta viewport 在head标签内部加上这段代码

<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">

该meta标签的作用是让当前viewport的宽度等于设备的宽度，同时不允许用户手动缩放。

二、媒体查询（响应式)--针对横屏处理

@media （）and（）{}
//满足（）里的条件，就执行大括号里css的样式

1
2

三、动态 rem 方案 1rem等于根元素html的font-size的值。在<script>标签加入这段代码：

<script>
    var pageWidth = window.innerWidth
    document.write('<style>html{font-size:' + pageWidth + 'px;}</style>')
</script>

1
2
3
4

根元素 html 的 font-size 的大小为页面的宽度 pageWidth 。1 rem === html 的 font-size === pageWidth。

16.常见块级元素和行内元素

块级元素：div,p,h1,form,ul,li

（1）各占一行，垂直方向排列；

（2）可以包含其他块级或者行内元素；

（3）高度、行高以及外边距和内边距都可控制；

（4）默认宽度是它本身父容器的100%（和父元素的宽度一致），与内容无关。

行内元素：span,a,label,input,img,strong,em

（1）水平方向排列，不会自动换行；

（2）不可以包含块级元素，但是可以包含其他行内元素或者文本；

（3）行内元素设置width、height无效(可以设置line-height)，margin和padding上下无效；

（4）宽度就是它的文字和图片的宽度，不可改变。

17.flex布局

（1）设置在容器上的属性

flex-direction：row | row-reverse | column | column-reverse 项目的排列方向
flex-wrap：nowrap | wrap | wrap-reverse 是否换行
flex-flow：<flex-direction> || <flex-wrap> flex-direction和 flex-wrap的简写
justify-content：flex-start | flex-end | center | space-between | space-around 在水平方向上的对齐方式
align-items: flex-start | flex-end | center | baseline | stretch 定义在垂直方向上的对齐方式
align-content: flex-start | flex-end | center | space-between | space-around | stretch 定义了多根轴线的对齐方式，如果项目只有一根轴线，那么该属性将不起作用(item有多行时)

（2）设置在项目上的属性

order：<number> 定义项目在容器中的排列顺序，数值越小，排列越靠前，默认值为 0
flex-basis：<length> | auto 定义了在分配多余空间之前，项目占据的主轴空间，浏览器根据这个属性，计算主轴是否有多余空间
flex-grow: <number> 定义项目的放大比例。默认值为 0，即如果存在剩余空间，也不放大
flex-shrink: <number> 定义项目的缩小比例。默认值: 1，即如果空间不足，该项目将缩小，负值对该属性无效。
flex：none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]flex-grow, flex-shrink 和 flex-basis的简写默认值：0 1 auto，即不放大，可缩小，大小就是项目本身的大小。
align-self：auto | flex-start | flex-end | center | baseline | stretch 允许单个项目有与其他项目不一样的对齐方式

18.CSS盒模型

IE盒模型 box-sizing:border-box;（怪异模式）；
W3C标准盒模型 box-sizing:content-box;（标准模式）。

应用场景：

（1）表单：表单中有一些input元素其实还是展现的是传统IE盒模型，带有一些默认的样式，而且在不同平台或者浏览器下的表现不一，造成了表单展现的差异。此时我们可以通过box-sizing属性来构建一个风格统一的表单元素。

（2）设置子类元素的margin或者border时，可能会撑破父层元素的尺寸，这时我就需要使用box-sizing: border-box来将border包含进元素的尺寸中，这样就不会存在撑破父层元素的情况了。

← Html js →

# CSS常见面试题总结

# 1.水平居中

# 2.垂直居中

# 3.水平垂直居中

# 4.等高布局

# 5.三栏布局

# 双飞翼布局

# 圣杯布局

# flex布局，绝对定位加margin，table

# 6.双栏布局

# 7.瀑布流布局

# 8.清除浮动的三种方式

# 9.三角形实现

# 10.BFC

# 11.CSS 选择器的优先级是什么

# 12.CSS属性继承

# 13.CSS3相关属性介绍

# 14.SCSS不同于CSS的地方

# 15.移动端适配

# 16.常见块级元素和行内元素

# 17.flex布局

# 18.CSS盒模型