秋招复习计划-CSS知识点1

  |  

前言

准备字节跳动的面试,开始复习我稀烂的CSS,虽然感觉机会不大,但是还是得好好准备。内容:CSS绘制基本图形,未知高宽元素实现水平垂直居中,CSS定位属性,定位方式及其区别。


48



CSS绘制基本图形

长方形

长方形是最简单的图形了,只要设置宽高就行了

1
2
3
4
5
#square {
width: 100px;
height: 100px;
border: 1px solid black;
}

圆形

圆形主要用到了border-radius属性。该属性可以控制圆角形状。该属性是四个属性的集合

1
2
3
4
5
6
border-radius: 2px;
//等同于
border-top-left-radius: 2px;
border-top-right-radius: 2px;
border-bottom-left-radius: 2px;
border-bottom-right-radius: 2px;

圆形绘制

1
2
3
4
5
6
#circle {
width: 100px;
height: 100px;
border: 1px solid black;
border-radius: 50%;
}

椭圆形

椭圆形也是利用了border-radius属性,只不过,需要div框的宽高不一样

1
2
3
4
5
6
#oval {
width: 150px;
height: 100px;
border: 1px solid black;
border-radius: 50%;
}

三角形

利用transparent设置两条边框为透明,一条有边框,最后一条不设置宽度,就形成了三角形。

1
2
3
4
5
6
7
#transparent1 {
width: 0;
height: 0;
border-left: 75px solid transparent;
border-right: 50px solid transparent;
border-bottom: 50px solid red;
}

通过这种方式我们可以设置各个方向各种形状的三角形,只要设置好三条边框的宽度比例就行。

等边三角形

原有的思路是用三个div来拼成一个三角形,也就是调整左右两个div的旋转角度,然后一个设置右边框,一个设置底边框,一个设置左边框。后来发现可以用伪类来代替另外两个div

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
#box {
border-bottom: 1px solid black;
width: 100px;
height: 100px;
margin: 0 auto;
box-sizing: border-box;
position: relative;
}
#box:before, #box:after {
content: "";
display: block;
width: 100px;
height: 100px;
box-sizing: border-box;
position: absolute;
}
#box:before{
border-left: 1px solid black;
transform-origin: left bottom;
transform: rotate(30deg);
}
#box:after{
border-right: 1px solid black;
transform: rotate(-30deg);
transform-origin: right bottom;
}

平行四边形

本来想试试看用伪类的,发现搞不来,还是用skew属性吧

1
2
3
4
5
6
7
#parallelogram {
margin-left: 50px;
height: 50px;
width: 100px;
border: 1px solid black;
transform: skew(-20deg);
}

心形

还是用伪类就行了

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
.heart {
width: 100px;
height: 90px;
position: relative;
}
.heart:before,
.heart:after {
width: 50px;
height: 80px;
left: 50px;
top: 0;
background-color: coral;
position: absolute;
content: "";
border-radius: 50px 50px 0 0;
transform: rotate(-45deg);
transform-origin: 0 100%;
}
.heart:after {
left: 0;
transform: rotate(45deg);
transform-origin: 100% 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
<!DOCTYPE html>
<html>
<head>
<meta charset='UTF-8'>
<title>未知高宽元素水平垂直居中-表格布局</title>
</head>
<style>
.parent{
display: table;
height: 300px;
width: 300px;
background-color: #FD0C70;
}
.child {
display: table-cell;
vertical-align: middle; /*定义行内元素的基线相对于该元素所在行的基线的垂直对齐*/
text-align: center;
color: #ffffff;
font-size: 16px;
}
</style>
<body>
<div class='parent'>
<div class='child'>Hello World</div>
</div>
</body>
</html>

思路:

显示设置父元素的为块级表格,子元素为表格单元格,这样就可以对子元素使用vertical-align实现垂直居中,使用text-align实现水平居中。

优点:

父元素可以动态的改变高度(table元素的特性)

缺点:

IE8以下不支持(现在不算缺点了,没有哪个网站还会要求兼容IE浏览器了,更不要说8以下了,除非产品经理疯了)

使用行内块元素

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
<!DOCTYPE html>
<html>
<head>
<meta charset='UTF-8'>
<title>行内块元素</title>
</head>
<style>
.parent {
height: 300px;
width: 300px;
text-align: center;
background-color: #fd0c70;
}
.parent span {
display: inline-block;
width: 0;
height: 100%;
vertical-align: middle;
}
.child {
display: inline-block;
color: #ffffff;
}
</style>
<body>
<div class='parent'>
<span></span>
<div class='child'>Hello World</div>
</div>
</body>
</html>

思路:

使用一个空span标签,设置它为行内块元素,它的高度为100%,宽度为0,然后设置它的vertical-align基准线为中间,然后将子元素设置为行内块元素。后来我在尝试中发现,可以将空span标签的高度设置为50%,不需要设置vertical-align,不过这个方式的前提是空span没有设置margin。所以还是使用vertical-algin属性比较可靠。

当然我们可以使用父元素的伪元素来代替空span标签

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
<!DOCTYPE html>
<html>
<head>
<meta charset='UTF-8'>
<title>行内块元素</title>
</head>
<style>
.parent {
height: 300px;
width: 300px;
text-align: center;
background-color: #fd0c70;
}
/* .parent span {
display: inline-block;
width: 0;
height: 100%;
vertical-align: middle;
} */
.child {
display: inline-block;
color: #ffffff;
}
.parent::after {
content: '';
display: inline-block;
width: 0;
height: 100%;
vertical-align: middle;
}
</style>
<body>
<div class='parent'>
<!-- <span></span> -->
<div class='child'>Hello World</div>
</div>
</body>
</html>

这里我一开始是想用子元素的before伪元素来代替空span标签的,写到后面发现不行,因为我们已经将子元素设置为行内块元素了,所以最终只能用父元素的after伪元素。

绝对定位

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
<!DOCTYPE html>
<html>
<head>

<meta charset='UTF-8'>
<title>绝对定位</title>
</head>
<style>
.parent {
position: relative;
height: 400px;
width: 400px;
background-color: #fd0c70;
}
.child {
position: absolute;
top: 50%;
left: 50%;
color: #fff;
transform: translate(-50%, -50%);
}
</style>
<body>
<div class='parent'>
<div class='child'>
Hello World
</div>
</div>
</body>
</html>

思路:

子元素绝对定位,距顶部和左边都为50%,然后使用CSS3 transform: translate在X轴和Y轴上修正

优点:

高大上,可以在webkit内核的浏览器中使用

缺点:

没有缺点,不兼容IE不算缺点,算优点,垃圾IE

弹性盒子Flex

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
<!DOCTYPE html>
<html>
<head>
<meta charset='UTF-8'>
<title>弹性盒子flex</title>
</head>
<style>
.parent {
display: flex;
justify-content: center;
align-items: center;
height: 400px;
width: 400px;
background-color: #fd0c70;
}
.child {
color: #fff;
}
</style>
<body>
<div class='parent'>
<div class='child'>
Hello World
</div>
</div>
</body>
</html>

思路:

使用CSS3 flex布局。flex布局是CSS3提出的一种新的方案,可以简便、完整、响应式的实现各种页面布局

优点: 简单快捷

CSS定位属性

CSS的定位属性,及position属性,所有的主流浏览器都支持。

这个属性用于定义建立元素布局所用的定位机制。

可能的值有

描述
absolute 生成绝对定位的元素,相对于static定位以外的第一个父元素进行定位
fixed 生成绝对定位的元素,相对于浏览器窗口进行定位
relative 生成相对定位的元素,及相对于默认位置进行偏移
static 默认值,没有定位,元素出现在正常的流中
inherit 规定应该从父元素继承position属性的值

定位属性中我们最常用的就是绝对定位absolute和相对定位relative,所以我们这里着重来看看它们之间的区别

定位方式及其区别

relative相对定位

相对定位我们主要需要知道元素相对于谁来进行偏移。其实相对定位就是相对于元素自己本身的位置进行偏移。

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
<!DOCTYPE html>
<html>
<head>
<meta charset='UTF-8'>
<title></title>
<style type='text/css'>
html body {
margin: 0px;
padding: 0px;
}
#parent {
width: 200px;
height: 200px;
border: 5px solid black;
padding: 0px;
position: relative;
background-color: green;
top: 15px;
left: 15px;
}
#sub1 {
width: 100px;
height: 100px;
background-color: blue;
}
#sub2 {
width: 100px;
height: 100px;
background-color: red;
}
</style>
</head>
<body>
<div id='parent'>
<div id='sub1'></div>
<div id='sub2'></div>
</div>
</body>
</html>

relative1

这是一个嵌套的DIV,一个父DIV Parent,嵌套两个子DIV Sub1和Sub2,由于两个子DIV没有设置任何的Position属性,所以他们的定位模式应该是static,及在默认的文档流中。

如果我们修改一下DIV Sub1的样式

1
2
3
4
5
6
7
8
#sub1 {
position: relative;
top: 15px;
left: 15px;
width: 100px;
height: 100px;
background-color: blue;
}

relative2

可以看到Sub1相对于器默认位置发生了偏移,但并不影响Sub2的位置,不过会造成遮挡。

切记偏移并不是相对于Div Parent的,而是相对于Sub原有的位置。

绝对定位absolute

我们将Sub1改成绝对定位

1
2
3
4
5
6
7
8
#sub1 {
position: absolute;
top: 15px;
left: 15px;
width: 100px;
height: 100px;
background-color: blue;
}

absolute1

可以看到Sub1的位置发生了偏移,而同级的Sub2将占据Sub1的位置。

这时,我们如果将父元素的定位属性Position去掉

1
2
3
4
5
6
7
#parent {
width: 200px;
height: 200px;
border: 5px solid black;
padding: 0px;
background-color: green;
}

absolute2

会发现父元素贴边了,但是好像Sub1相对于父元素边框的位置没有改变,其实不然这里定位的相对偏移对象已经发生了改变。

绝对定位分为两种情况:

  • 如果Sub1的父元素或者祖辈元素,有设置Position属性,并且属性值为absolute或relative,那么子元素相对于设置了Position属性的元素进行定位。元素设置了margin、border和padding属性并不影响定位点,这些都在定位点外。
  • 如果Sub1不存在一个设置了Position属性的父对象,那么就按照浏览器窗口,及body定位。
文章目录
  1. 1. CSS绘制基本图形
    1. 1.1. 长方形
    2. 1.2. 圆形
    3. 1.3. 椭圆形
    4. 1.4. 三角形
    5. 1.5. 等边三角形
    6. 1.6. 平行四边形
    7. 1.7. 心形
  2. 2. 未知高宽元素实现水平垂直居中
    1. 2.1. 使用表格布局
    2. 2.2. 使用行内块元素
    3. 2.3. 绝对定位
    4. 2.4. 弹性盒子Flex
  3. 3. CSS定位属性
  4. 4. 定位方式及其区别
    1. 4.1. relative相对定位
    2. 4.2. 绝对定位absolute
|