佳宸学习和分享笔记的地方

0%

复习CSS的笔记

复习CSS的笔记

水平垂直居中

html

1
2
3
<div class="container">
<div class="child"></div>
</div>
  • 使用flex方法
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
.container {
margin: 0 auto;
width: 300px;
height: 200px;
background: deepskyblue;
display: flex;
/* 实现元素水平居中 */
justify-content: center;
/* 实现元素垂直居中 */
align-items: center;
}
.child {
width: 100px;
height: 100px;
background: #fff;
}
  • CSS 移动外边距方法

1571047255135

使用absolute百分比移动时,是按左上角点移动的,修正宽高的一半

1
2
3
4
5
6
7
8
9
10
11
12
.child {
position: absolute;
width: 100px;
height: 100px;
top: 50%;
left: 50%;
/* 下面两种方式均可 */
/* margin-top: -50px;
margin-left: -50px; */
transform: translate(-50%, -50%);
background: #fff;
}

得到正确图形

1571047448336

引用CSS方式

  • 行内样式

直接对 HTML 的标记使用 style 属性,然后将 CSS 代码直接写进去:

1
<p style="color: #fff; backgournd: deepskyblue;"></p>
  • 内嵌式

将 CSS 写 <head></head> 之间,并且用 <style></style> 标记进行声明:

1
2
3
4
5
6
7
8
<head>
<style>
p {
color: #fff;
background: deepskyblue;
}
</style>
</head>
  • 链接式

通过将 <style> 上的 CSS 提起到指定的 CSS 文件上,然后通过 <link> 的方式在 HTML 上链接起来。

1
2
3
<head>
<link href="reset.css" type="text/css" rel="stylesheet">
</head>
  • 导入样式
1
2
3
4
5
<head>
<style>
@import url(reset.css);
</style>
</head>
  • 各种方式的优先级

在优先级上,行内样式 > 链接式 > 内嵌式 > @import 导入式

CSS选择器

  • CSS 解析顺序

在 CSS 的选择器中,它会按照优先级 从右向左解析,因为这样匹配元素的时候,能尽量少地查找,所以选择器最好写地简洁一点。

  • CSS 常用选择器
  1. 通配符:*
  2. ID 选择器:#ID
  3. 类选择器:.class
  4. 元素选择器:pa 等……
  5. 后代选择器:p spandiv a 等……
  6. 子选择器: ul>li
  7. 伪类选择器:a:hover li:nth-child 等……
  8. 属性选择器:input[type="text"] 等……
  9. 子元素选择器:li:firth-childp:nth-child(1) 等……
  • CSS 选择器权重

!important -> 行内样式 -> #id -> .class -> 元素和伪元素 -> * -> 继承 -> 默认

两列布局

  • 优先使用flex
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<style>
body{
display: flex;
justify-content: flex-end;
}
.left{
flex: 1;
background: green;
height: 200px;
}
.right{
width:300px;
background: red;
height: 200px;
}
</style>
<body>
<div class="left">自适应自适应自适应自适应</div>

<div class="right">固定固定固定固定固定固定</div>
</body>

1571126095796

  • 左侧浮动,右侧设置margin-left 空出左侧宽度
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<style>
.left{
float: left;
width: 200px;
background: green;
height: 200px;
}
.right{
margin-left:200px;
background: red;
height: 200px;
}
</style>
<body>
<div class="left">左边</div>

<div class="right">右边</div>
</body>

1571126444923

三列布局

  • 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
28
29
<style>
body{
display: flex;
justify-content: space-between;
}
.left{
width:200px;
background: green;
height: 200px;
}

.right{
width:100px;
background: red;
height: 200px;
}
.center{
flex: 1;
background: yellow;
height: 200px;
}
</style>
<body>
<div class="left">固定</div>

<div class="center">自适应</div>

<div class="right">固定</div>
</body>
  • 普通版同两列一样,左右浮动,中间板块margin出左右的宽度

圣杯布局

margin负一下,左右两边顶上来,中间设个padding

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
<style>
header{
background: cadetblue;
}
footer{
background: antiquewhite;
}
.center{
width: 100%;
background: coral;
height: 200px;
}
.main{
float: left;
width: 100%;
background: yellow;
}
.mianChild{
padding: 0 100px 0 200px;
background: yellow;
height:200px;
}
.left{
float: left;
margin-left: -100%;
width:200px;
background: green;
height:100%;
}
.right{
float: left;
margin-left: -100px;
width:100px;
background: red;
height:100%;
}
</style>
<body>
<header>我是头部</header>

<div class="center">
<div class="main"><div class="mianChild">我是中间</div></div>
<div class="left">左边</div>
<div class="right">右边</div>
</div>

<footer>我是底部</footer>
</body>

1571127881156

  • 使用flex布局跟上面一样justify-content: space-between;
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
<style>
header{
background: cadetblue;
}
footer{
background: antiquewhite;
}
.center{
background: coral;
height: 200px;
display:flex;
justify-content: space-between;
}
.main{
width: 100%;
background: yellow;
flex: 1;
height: 200px;
}

.left{
width:200px;
background: green;
height:100%;
}
.right{
width:100px;
background: red;
height:100%;
}
</style>
<body>
<header>我是头部</header>

<div class="center">

<div class="left">左边</div>
<div class="main"><div class="mianChild">我是中间</div></div>
<div class="right">右边</div>
</div>

<footer>我是底部</footer>
</body>

em 和 rem

  • em相对容器字体大小,容器没设置大小往父元素找

CSS继承:字体样式通常可以继承,尺寸相关样式不能继承

  • rem相对根元素(html元素)字体大小

行内元素和行内块元素

都是同行显示,

  • 行内元素 display:inline不可设置宽高
  • 行内块元素display:inline-block可以设置宽高

BFC(Block Formatting Context 块级格式化上下文)

在BFC中,每一个盒子(子元素)的左外边缘(margin-left)会触碰到容器的左边缘(border-left)(对于从右到左的格式来说,则触碰到右边缘)。浮动也是如此(尽管盒子里的行盒子 Line Box 可能由于浮动而变窄)。

BFC的特征

(1)所有子元素(包含浮动元素)与容器(父元素)左边对齐

(2)属于同一个BFC的父元素和子元素,相邻的父子或者兄弟间margin垂直方向会重叠,若2个元素属于不同的BFC,则垂直方向不会重叠

(3)可以自动撑开容器(若子元素是float的,父元素设置overflow:hidden,父元素就形成一个BFC)

创建BFC,满足下列的任意一个或多个条件即可:

1、float的值不是none。(float:left 或者float:right)

2、position的值不是static或者relative。(position:absolute或者position:fixed)

3、display的值是inline-block、table-cell、flex、table-caption或者inline-flex

4、overflow的值不是visible(overflow:hidden、overflow:scroll)

5、父元素与正常文件流的子元素(非浮动子元素)自动形成一个BFC

box-sizing的属性

  • content-box W3C标准盒模型 设置width/height属性是指content部分
  • border-box IE传统盒模型 设置width/height属性包括了content+padding+border

1571130210731

CSS过渡

1
transition: width 1s linear 2s;
transition-property规定应用过渡的 CSS 属性的名称。
transition-duration定义过渡效果花费的时间。默认是 0。
transition-timing-function规定过渡效果的时间曲线。默认是 “ease”。
transition-delay规定过渡效果何时开始。默认是 0。

分别对标四个属性 解释:过渡宽度 过程一秒 匀速 延迟两米奥

CSS动画

https://www.runoob.com/cssref/css-animatable.html

1
2
3
4
5
6
7
8
9
animation:myfirst 5s;

@keyframes myfirst
{
0% {background:red;}
25% {background:yellow;}
50% {background:blue;}
100% {background:green;}
}

@keyframes 加一个动画名, 前边百分号表示时间节点

超出宽度的文字省略号

1
2
3
4
5
6
.list-item-name{
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
width:X em;
}

多少em就是多少个字

1571132042889