overflow

语法如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
/* Keyword values */
overflow: visible;   /*内容不能被裁减并且可能渲染到边距盒（padding）的外部*/
overflow: hidden;	//超出就隐藏
overflow: clip;
overflow: scroll;  //无论超出还是不超出都有滚动条
overflow: auto;    //浏览器自动判断
overflow: hidden visible;

/* Global values */
overflow: inherit;
overflow: initial;
overflow: revert;
overflow: revert-layer;
overflow: unset;

这几个属性的具体效果点击这里overflow - CSS：层叠样式表 | MDN (mozilla.org)

text-align

text-align CSS 属性定义行内内容（例如文字）如何相对它的块父元素对齐。text-align 并不控制块元素自己的对齐，只控制它的行内内容的对齐。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
/* Keyword values */
text-align: left;
text-align: right;
text-align: center;
text-align: justify;
text-align: justify-all;
text-align: start;
text-align: end;
text-align: match-parent;

/* Block alignment values (Non-standard syntax) */
text-align: -moz-center;
text-align: -webkit-center;

/* Global values */
text-align: inherit;
text-align: initial;
text-align: unset;

具体效果，点击这里text-align - CSS：层叠样式表 | MDN (mozilla.org)

display

display 属性设置元素是否被视为块或者内联元素以及用于子元素的布局，例如流式布局、网格布局或弹性布局。

形式上，**display** 属性设置元素的内部和外部的显示类型。外部类型设置元素参与流式布局；内部类型设置子元素的布局。一些 display 值在它们自己的单独规范中完整定义；例如，在 CSS 弹性盒模型的规范中，定义了声明 display: 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
30
31
32
33
34
35
36
/* precomposed values */
display: block;
display: inline;
display: inline-block;
display: flex;
display: inline-flex;
display: grid;
display: inline-grid;
display: flow-root;

/* box generation */
display: none;
display: contents;

/* two-value syntax */
display: block flow;
display: inline flow;
display: inline flow-root;
display: block flex;
display: inline flex;
display: block grid;
display: inline grid;
display: block flow-root;

/* other values */
display: table;
display: table-row; /* all table elements have an equivalent CSS display value */
display: list-item;

/* Global values */
display: inherit;
display: initial;
display: revert;
display: revert-layer;
display: unset;

主要注意的是display:none: 在一个元素中使用 display 的值为 none 将会从无障碍树中移除它。这将导致该元素及其所有后代元素不再通过屏幕阅读器技术展示。

选择器

主要有以下选择器：

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
* {
//通配符选择器
}
# id{
    //id选择器
}
. class{
    //类选择器
}
p{
    //标签选择器
}
//以下是后代选择器写法：
div span{
    //选择div下的所有span标签，包括孙子，重重重孙子
}
#qq .yyy{
    //选择id属性为qq下的class=yyy的标签
}
div #qq{
    //选择div下 id=qq的标签
}
div #qq .class{
    //选择div下 id=qq下的class=class的标签
}
//子代选择器（大于号）：
div > span{
    //选择div下的span标签，倘若这个div中还嵌套了一个p标签，这个p标签嵌套了一个span标签，那么这个在p标签的span将不被选中，因为这个已经是div的孙子了，选择的一定是直系后代
}
//其他的子代选择类似上面的后代选择器

//并集选择器（逗号隔开）：
div, p, span {
    //同时选中div，p，span标签
}
//其中div，span这些可以换成id，class选择器这些可以进行嵌套和前面的所有进行嵌套

//条件选择器（遇到标签必须写在最前面）
p.box{
    //选择p标签，且class=box的标签，注意这和前面的后代选择器不同，这个p和box是连着写的，没有空格
}

//伪类选择器
//主要的伪类有：hover，link，visited,active
div:hover{
        color: blue;  //
}

//结构伪类选择器
li:first-child{
	//第一个孩子
}
li:last-child{
    
}
li:nth-child(n){
    //n为数字，即选中对应的标签，话可以写公式：2n，5n，2n+1，2n-1，n+5，-n+5
}

//伪元素选择器(行内显示模式，必须设置content)
标签::before最前面
标签::after最后面
div::before{
    content: xxx   //必须属性
}
div::after{
    content: xxx
}

文字属性

文字主要有以下属性：

image-20230814091806703

主要使用规则如下：

1
2
3
4
5
6
7
8
9
10
#id{
    font-size: 34px;
    font-weight: 400; //400正常，700加粗；等同于normal，bold
    font-style: normal; //normal不倾斜，italic倾斜
    font-family: 楷体; 
    font-family: 楷体, Heiti sc, 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;  //从左到右，选择字体，若楷体没有就往下找，直到找到第一个匹配的为止
    text-decoration: none;  //不显示下划线，主要有：underline（下划线），line-through（删除线），overline（上划线）
    color: 
    
}

line-height(行高):

image-20230814093006980

主要有以下取值：

1
2
3
4
p{
    line-height: 2; //当前字体的倍数，如字体16px，行高就是12px
    line-height: 40px;  //这个直接就是行高
}

行高测量方法：一行文字的最顶端到下一行文字的最底端

text-align(文字对齐方式)：

image-20230814094634448

color(颜色)：

image-20230814100134285

最重要的是最后两种颜色写法

css特性

css主要有：继承性、层叠性、优先级

继承性：自己有特性就不继承父级的特性

层叠性：相同属性会覆盖，后面的覆盖前面的，不同的就会叠加，代码从上往下执行

优先级：选中标签的范围越大，优先级越低，比如body选择器优先级基本上是最低的：

通配符 《《 标签选择器 《《 类选择器 《《 id选择器 《《 行内样式 《《 ！important

背景图

image-20230814111350520

1
2
3
4
5
6
7
8
9
10
11
12
13
background-repeat: no-repeat
//还有这几种方式： repeat、repeat-x、repeat-y
background-position: right bottom
//还可以这样写
background-position: 50px 60px
//还可以这样写
background-postion: right   //默认垂直居中，写一个参数
background-size: contain   //等比例缩放
//还有这几种方式：cover（完全覆盖盒子），百分比写法
bakcground-attchment: fixed //背景图固定，不随内容滚动而滚动
//复合属性：
background: red url(./xxx.jpg) no-repeat center/cover
//格式：背景颜色 背景图 平铺方式 背景图位置/背景图缩放

background-position：

image-20230814111626519

显示模式

块元素：独占一行，加width，height生效，默认宽度是父级的100%

行内元素：内容撑开，加width，height不生效

行内块元素：一行共存多个，由内容撑开，加width，height生效

属性名：display

1
2
display: block（块级）
还有这两种：inline-block（行内块），inline（行内）

盒子模型

image-20230814120314300

image-20230814121127882

1
2
3
4
5
6
7
8
9
10
11
12
13
div{
       width: 200px;
       height: 200px;
       background-color: red;
       padding: 20px;  //可以作为复合属性使用如
    	pading: 20px 30px 40px 50px
       border: 1px solid #000;
               /* 边框粗细 线条样式 颜色 */
    	//margin不会撑大盒子
       margin: 50px;  //可以作为复合属性使用，同padding
    //这里说以下padding有，三值或者两值得情况：从上开始顺时针转一圈，如果当前方向没有值就和对面取值一样
    	box-sizing: border-box   //保持w200++h200不变，即使你加了padding这些整个盒子还是200*200
   }

border拓展：

image-20230814121404512

1
2
3
4
5
6
7
8
9
10
11
12
13
div{
        width: 200px;
        height: 200px;
        background-color: red;
        padding: 20px;
        /* border: 1px solid #000; */
                /* 边框粗细 线条样式 颜色 */
        margin: 50px;
        border-top: 15px solid #000;
        border-bottom: 20px solid red;
        border-right: 10px solid green;
        border-left: 40px solid peru;
    }

padding拓展：

image-20230814121748287

实现版心居中：

1
2
3
4
div{
    width: 500;  
    margin:0 auto;  //带auto时必须带width
}

清楚默认样式：

1
2
3
4
*{
	margin: 0
    padding: 0
}

外边距合并现象：

image-20230814124223363

外边距塌陷问题：

image-20230814124535277

image-20230814124745111