CSS总结---持续更新中 2022.8.4

一、CSS样式

1.引入方式

1. 有标签样式（直接写在标签里）

2. 有内部样式（写在里的style，也包括标签样式，写在html文件内部的样式）

3. 有外部样式（通过 href=“” 引入）

4. 行内样式

   1. 优点：权重高，精准
   2. 缺点：代码冗余，效率低下，不可复用，扩展性差，难以优化

5. 内部样式：

   1. 写在style标签中
   2. 少量样式代码时使用
   3. 优先级整体比外部高

6. 外部样式：

   1. 创建一个.css的文件
   2. 写入的内容：选择器{属性：属性值；。。。}

优先级:行内>内部>外部

使用方式

选择器{

 	属性：属性取值；

}
1
2
3
4
5

2.常用的css属性

• font-size: 40px 字体大小
• color: red; 字体颜色的设置
• background-color：red； 背景颜色的设置
• border：10px blue solid； 边框的设置
• width：100px 设置宽
• height：100px； 设置高
• display：inline-block； 元素类型转化

3.背景属性

• background-image：url(); 背景图
• background-repeat：no-repeat；是否重铺
• background-repeat： repeat-x；在x轴上重铺
• background-repeat：repeat-y；在y轴上重铺
• background-position: 100px 100px; 设置背景图片的位置
• background-size：cover； 设置背景图片的尺寸，取值为cover铺满元素
• background-attachment：scroll；背景图片是否固定

二、选择器

1.基础选择器

例子：

"a" id="b">

1
2

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

2.后代子代选择器

例子：

<div class="a" id="b">
	<span>span>
div>
1
2
3

1
2
3
4
5
6
7
8
9
10

3.伪目标选择器

:first-child

用法：

<div>
        <span>我是长女span>
        <span>我是次子span>
        <span>我是老幺span>
div>
1
2
3
4
5

div span:first-child{
            font-size: 50px;
}
1
2
3

4.伪目标选择器

:nth-child

div :nth-child(7){
            font-size: 40px;
}
div :nth-of-type(3){
            font-size: 40px;
}
1
2
3
4
5
6

5.子代选择器

>

header>div>span{

}
1
2
3

6.后代选择器

空格

header div span{

}
1
2
3

id命名和类名命名时的规范

1. 不能是纯数字
2. 也不能是数字开头
3. 不能有#.
4. 可以有-_
5. 建议用英文，也可以用拼音
6. 可以多个词组合比如：header-left、main_nav、wrapCenterMain

三、盒子模型

1.标准盒子

实际大小=内容大小（设置的宽高）+内边距+边框

属性有以下

border: 10px solid;   边框
padding: 20px;   内边距
margin: 160px;   外边距
1
2
3

margin:

            /* 外边距取一个值：上下左右都是此值 */
            /* margin: 200px; */
            /* 取四个值：上、右、下、左 */
            /* margin: 0 200px 0 200px; */
            /* 取两个值：上下、左右。auto自动分配剩余空间 */
            margin: 0 auto ;
1
2
3
4
5
6

padding 同上

border: 圆角 圆形 三角形

            /* 圆角边框 */
            /* border-radius: 50px; */
            /* 取两个值时，对应左上右下、右上左下*/
1
2
3

当border-radius值等于或大于宽高的一半时，变成圆形，前提是正方形（宽高相等）

三角形：

            width: 0px;height:0px;
            border: 20px solid;
            border-color: transparent transparent red transparent;
1
2
3

嵌套型外边距塌陷的解决方法

1. 设置内边距 padding
2. 设置边框 border
3. 设置溢出隐藏 overflow：hidden