CSS知识点小结-CSDN博客

本文链接：https://blog.csdn.net/2301_81935264/article/details/140032990

一.基础概念

CSS：Cascading Style Sheets(层叠样式表)
控制网页的样式和布局，实现结构与样式的分离。

二.CSS引入方式 (形式：名:值;)

1.行内样式（不推荐）

写在标签的style的属性中

语法：

<h1 style="color : red; font-size: 50px;">标题</h1>

不推荐大量使用：样式太多时，结构与样式混在一起，不便于维护；且不能复用。

2.内部样式

写在style标签中（可写在页面任何位置，但通常约定写在head标签中）
语法：

<head>
    ......
    <style>
        h1{
            color:green;
            font-size:40px;
        }
    </style>
</head>
<body>
    <h1>Life is too colorful , you need 前端</h1>
</body>

样式可以复用，代码结构清晰，未实现结构与样式完全分离。

3.外部样式（最推荐）

写在单独的.css文件中（需要通过link标签在html文件中引入）
语法：

1.新建扩展名为.css文件，写入CSS代码

h1{
    background-color:green;
    font-size:40px;
}

2.在html文件中引入.css文件

<link rel="stylesheet" href="./xxx.css">

<link>标签写在<head>标签中

herf：引入的文档来自哪里

rel：说明引入的文件与当前文件之间的关系

样式可以分离，实现了结构与样式的完全分离。

4.样式表优先级

优先级规则：行内样式 > 内部样式 = 外部样式

内部样式、外部样式优先级相同，后者覆盖前者

同一个样式表中，后者覆盖前者

分类	作用范围
行内样式	当前标签
内部样式	当前页面
外部样式	多个页面

三.CSS基本选择器

1.通配选择器

作用：可以选中所有的HTML元素
语法：

* {
    属性名: 属性值;
  }

清除样式时，帮助较大。

2.元素选择器

作用：为页面中某种元素统一设置样式
语法：

标签名 {
    属性名: 属性值;
}

无法实现差异化设置。

3.类选择器（使用频率高）

作用：根据元素的class值来选中某些元素
语法：

<head>
    ......
    <style>
    .类名 {
        属性名: 属性值;
    }
    </style>
</head>
<body>
    ......
    <h1 class="类名">来日方长</h1>
    ...... 
</body>

类名自定义，要求：不使用纯数字、不使用中文、尽量使用英文与数字的组合，若由多个单词组成，使用 - 连接。
一个元素不能写多个class属性。

错误示例：
<h1 class="speak" class="answer">hello world</h1>

一个元素的class属性可以写多个值，用空格隔开。

<h1 class="speak answer">hello world</h1>

4.ID选择器

作用：根据元素的id属性值精准的选中某个元素
语法：

<head>
    ......
    <style>
    #id值 {
        属性名: 属性值;
    }
    </style>
</head>
<body>
    ......
    <h1 id="nbnb">来日方长</h1>
    ......
</body>

id属性值：由字母、数字、_ 、- 组成，最好由字母开头，不要包含空格，区分大小写。
一个元素只能有一个id属性，多个元素的id属性值不能相同。
一个元素可以同时拥有id和class属性。

四.CSS复合选择器

1.交集选择器

作用：选中同时符合多个条件的元素
语法：

选择器1选择器2选择器3...选择器n {
   属性名: 属性值；
}

有标签名，标签名必须写在前面
不能出现两个元素选择器
常用：元素选择器+类选择器

2.并集选择器

作用：选中多个选择器对应的元素（分组选择器）
语法：

选择器1,
选择器2,
选择器3,
...
选择器n {
   属性名: 属性值；
}

通常用于集体声明，可缩小样式表体积。

3.HTML元素间的关系

父元素：直接包裹某个元素的元素
子元素：被父元素直接包含的元素
祖先元素：父亲的父亲...，一直往外找，都是祖先
后代元素：儿子的儿子...，一直往里找，都是后代
兄弟元素：具有相同父元素的元素

4.后代选择器

作用：选中指定元素中符合要求的后代元素
语法：

选择器1 选择器2 选择器3 ... 选择器n {
   属性名: 属性值；
}
/*先写祖先 再写后代*/

举例：

/*选中ul中的所有li*/
ul li {
    color: red;
}
/*选中ul中的所有li中的a*/
ul li a {
    color: green;
}
/*选中类名为sub元素中的所有li*/
.sub li {
    color: orange;
}
/*选中类名为sub元素中的所有类名为obj的li*/
.sub li .obj{
    color: blue;
}

结构要符合HTML嵌套要求，例如：不能p中写h1~h6。

5.子代选择器

作用：选中指定元素中，符合要求的子元素（先写夫，再写子）
语法：

选择器1>选择器2>选择器3>......选择器n{
    属性名: 属性值；
}

子代选择器最终选择的是子代，子就是指儿子。

6.兄弟选择器

（1）相邻兄弟选择器

作用：选中指定元素后，符合条件的相邻兄弟元素（仅向下相邻）
语法：

选择器1+选择器2 {
    属性名: 属性值;
}

（3）通用兄弟选择器

作用：选中指定元素后，符合条件的所有兄弟元素（仅向下所有）
语法：

选择器1~选择器2{
    属性名: 属性值;
}

7.属性选择器

作用：选中属性值符合一定要求的元素
语法：

[属性名] 选中具有某个属性的元素
[属性名="值"] 选中包含某个属性的元素，且属性值等于指定值
[属性名^="值"] 选中包含某个属性，且属性值以指定值开头的元素
[属性名$="值"] 选中包含某个属性，且属性值以指定值结尾的元素
[属性名*="值"] 选中包含某个属性，且属性值包含指定值的元素

/*第一种写法：选中具有title属性的元素*/
[title]{
    color: red;
}
/*第二种写法：选中具有title属性的元素，且属性值为xxx的元素*/
[title="xxx"]{
    color: red;
}
/*第三种写法：选中具有title属性的元素，且属性值以a开头的元素*/
[title^="a"]{
    color: red;
}
/*第四种写法：选中具有title属性的元素，且属性值以y开头的元素*/
[title$="a"]{
    color: red;
}
/*第五种写法：选中具有title属性的元素，且属性值中包含字母a的元素*/
[title*="a"]{
    color: red;
}

8.伪类选择器

（1）作用

选中特殊状态的元素

（2）动态伪类

:link 超链接未被访问的状态
:visited 超链接访问过的状态
:hover 鼠标悬停在元素上的状态
:active 元素激活的状态（激活：按下鼠标不松开）
:focus 获取焦点的元素（表单类元素才能使用）

<style>
        /*选中的是没有访问过的a元素*/
        a:link{
            color: brown;
        }
        /*选中的是访问过的a元素*/
        a:visited{
            color: blue;
        }
        /*选中的是鼠标悬浮状态的元素*/
        a:hover{
            color: coral;
        }
        /*选中的是激活状态的a元素*/
        a:active{
            color: darkcyan;
        }
    </style>
</head>
<body>
    <a href="https://www.baidu.com">去百度</a>
    <a href="https://www.jd.com">去京东</a>
</body>

（3）结构伪类

:first-child 所有兄弟元素中的第1个元素
:last-child 所有兄弟元素中的倒数第1个
:nth-child(an+b) 所有兄弟元素的从n=0开始代入得到的第an+b的元素 (前5个：-n+5)
（偶数2n/even 奇数2n+1/odd) (0或不写：什么都选不中) (n：选中所有子元素)
:nth-last-child(n) 所有兄弟元素中的倒数第n个
:nth-first-of-type(n) 所有同类型兄弟元素中的正数第n个
:nth-last-of-type(n) 所有同类型兄弟元素中的倒数第n个
:only-child 选中没有兄弟的元素
:only-of-type 选择没有同类型兄弟的元素
:root 根元素
:empty 内容为空元素（空格也算内容）

（4）否定伪类

作用：排除满足括号中条件的元素
语法： :not(选择器)

div>p:not(.类名){
    属性名: 属性值;
}
div>p:not(title^="xx"){
    属性名: 属性值;
}
div>p:not(:first-child){
    属性名: 属性值;
}

（5）UI伪类

:checked 被选中的复选框或单选按钮
:enable 可用的表单元素（没有disabled属性）
:disabled 不可用的表单元素（有disabled属性）

<head>
    <style>
        input:checked{
            width:80px;
            height:80px;
        }
    </style>
</head>
<body>
    <input type="checkbox">
</body>

（6）目标伪类

作用：选中锚点指定的元素
语法： :target

div:target{
    background-color:green;
}

（7）语言伪类

作用：根据指定的语言选择元素（本质是看lang属性的值）
语法： :lang()

<head>
    <style>
        div:lang(en){
            属性名: 属性值;
        }
        div:lang(zh-CN){
            属性名: 属性值;
        }
    </style>
</head>
<body>
    <div>你好</div>
    <div lang="en">hello</div>
</body>

9.伪元素选择器

伪元素不是元素，是元素中的一些特殊位置
作用：选中元素中的一些特殊位置
语法：

::first-letter 选中元素中的第一个文字
::first-line 选中元素中的第一行文字
::selection 选中被鼠标选中的内容
::placeholder 选中输入框的提示文字
::before 在元素最开始的位置，创建一个子元素（必须用content属性指定内容）
::after 在元素最后的位置，创建一个子元素（必须用content属性指定内容）

<head>
    <style>
        /*选中的是div中的第一个文字*/
        div:first-letter{
            color: aqua;
            font-size: 40px;
        }
        /*选中的是div中的第一行文字*/
        div:first-line{
            color: blue;
        }
        /*选中的是div中被鼠标选择的文字*/
        div::selection{
            background-color: darkkhaki;
            color:darkred
        }
        /*选中的是input元素中的提示文字*/
        input::placeholder{
            color: aquamarine;
        }
        /*选中的是p元素最开始的位置，随后创建一个子元素*/
        p::before{
            content:"￥"
        }
        /*选中的是p元素最开始的位置，随后创建一个子元素*/
        p::after{
            content:".00"
        }
    </style>
</head>
<body>
    <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Totam rem eos facilis ex sint aspernatur veniam illo. Laudantium, ex, recusandae ea dolor laborum facilis eaque non aliquid, quaerat magni quis.</div>
    <br>
    <input type="text" placeholder="请输入用户名">
    <p>199</p>
    <p>299</p>
    <p>399</p>
    <p>499</p>
</body>

10.选择器优先级

通过不同的选择器，选中相同的元素，并为相同的样式名设置不同的值是，会发生样式冲突
行内样式 > ID选择器 > 类选择器 > 元素选择器 > 通配选择器
格式：（a,b,c） 比较权重 从左到右依次比较大小，前位胜出后，后面不再比较

a：ID选择器的个数

b：类、伪类、属性选择器的个数

c：元素、伪元素选择器的个数

!important; 优先级最高！比行内样式还高！

.seek{
    color: red; !important;
    font-size: 40px;
}

五.CSS三大特性

1.层叠性

发生样式冲突时根据一定的规则（选择器优先级），进行样式的层叠（覆盖）。
比较权重时无法决定优先，此时按照顺序。

2.继承性

元素会自动拥有其父元素、或其祖先元素上所设置的某些样式。
规则：优先继承离得近的。
常见的可继承属性：text-?? font-?? line-?? color ......
参照MDN网站，可查询属性是否可以被继承。
background-color不能被继承

3.优先级

!important > 行内样式 > ID选择器 > 类选择器 > 元素选择器 > 通配选择器 > 继承的样式
计算权重需注意：并集选择器的每一个部分时分开算的

六.颜色表示

1.颜色名

red green blue yellow ......

2.rgb与rgba

红绿蓝三原色，每项取值范围0~255，也可使用百分比表示
红色rgb(255,0,0)，绿色rgb(0,255,0)，蓝色rgb(0,0,255), 黑色rgb(0,0,0)，白色rgb(255,255,255)
若三种颜色值相同，呈现的是灰色，值越大，灰色越浅
获取颜色：取色器
rgba：a表示透明度，rgb(x,x,x,x)

3.十六进制表示法——HEX与HEXA

#开头，将数字转换成十六进制表示(0~9+a~f)，最小值00，最大值ff
红色#ff0000（#f00），绿色#00ff00（#0f0），蓝色#0000ff（#00f），黑色#000000（#000），白色#ffffff（#fff）
如果每种颜色的两位都是相同的，可简写成三位
HEXA：A表示透明度（IE浏览器不支持HEXA）

4.HSL与HSLA（用的不多）

hsl(色相,饱和度,亮度)；
色相：0~360度，表示：xdeg(度)或x
饱和度：0%~100%（或小数形式）（0%全灰，100%没有灰）
亮度：0%~100%（或小数形式）（0%黑色，100%白色）
HSLA：A表示透明度，hsl(色相,饱和度,亮度，透明度)；

七.常见字体属性

1.字体大小

语法：

div{
    font-size: 40px;
}

通常给body设置font-size属性，这样body的其他元素就都可以继承了。
借助控制台看样式F12

2.字体族

语法：

div{
    font-family:"微软雅黑"；
}
div{
    font-family:"微软雅黑","华文彩云","华文琥珀"；
}
/*按照顺序对应，如果设备在没有前面这个字体，继续向后对应*/
/*类型要相同，全是衬线，或全是非衬线*/
div{
    font-family:"Microsoft YaHei"；
}
div{
    font-family:"Microsoft YaHei","STCaiyun","STHupo",sans-serif；
}

设置多个字体时通常在最后写上serif（衬线字体）或sans-serif（非衬线字体）
windows系统中默认字体是微软雅黑。

3.字体风格

语法：

div{
    font-size: normal;  /*正常 默认值*/
}
div{
    font-size: italic;  /*倾斜，使用字体自带的斜体效果（推荐使用）*/
}
div{
    font-size: oblique;  /*倾斜，强制倾斜产生的斜体效果*/
}

4.字体粗细

语法：

div{
    font-weight: lighter;   /*细*/
}
div{
    font-weight: normal;   /*正常*/
}
div{
    font-weight: bold;   /*粗*/
}
div{
    font-weight: bolder;   /*很粗，多数字体不支持*/ 
}
div{
    font-weight: 100;   /*数字表示：范围100~1000，无单位*/
}                       /*100~300等同于lighter，400~500等同于normal，600及以上等同于bold*/

5.字体复合属性（更推荐）

语法：font，把字体样式合并成一个属性
编写规则：

字体大小、字体族必须都写上：字体族放倒数第一位，字体大小倒数第二位
各个属性之间用空格隔开

示例：

div{
    font: bold italic 100px "STCaiyun","STHupo",sans-serif;
}

6.iconfont字体图标

iconfont是阿里旗下的一套图标库，可下载项目图标，并在项目中使用。

原理：将很多 icon 做成字体库，通过样式或者字体对应的字符集来显示这个 icon

使用：

新建项目，添加图标，点击添加入库，点击右上角购物车图标添加刚才使用的项目
引入：将字体库下载到本地，将iconfont.css引入到项目中

Unicode方式

@font-face {
    font-family: 'iconfont';  /*Project id 4437639*/
    src: url('//at.alicdn.com/t/c/font_4437639_40vegiywx36.woff2?t=17083216910009') format('woff2'),
    url('//at.alicdn.com/t/c/font_4437639_40vegiywx36.woff?t=17083216910009') format('woff'),
    url('//at.alicdn.com/t/c/font_4437639_40vegiywx36.ttf?t=17083216910009') format('truetype');
}

<link rel="stylesheet" href="./iconfont/iconfont.css">
<body>
  <i class="iconfont">&#xe642;</i>
</body>

特点：兼容性最好，支持ie6+及所有现代浏览器；按字体的方式去动态调整图标大小，颜色等；

不支持多色图标，只能使用平台里单色的图标，就算项目里有多色图标也会自动去色。

Font class方式--解决unicode书写不直观，语意不明确的问题

同Unicode一样，在图标上复制对应的代码即可

<link rel="stylesheet" href="./iconfont/iconfont.css">
<body>
  <i class="iconfont icon-dingwei1"></i>
</body>

特点：兼容性好，支持IE8+及所有现代浏览器；相比于Unicode语意明确，书写更直观；替换图标时，使用class定义图标，只需要修改class里面的Unicode引用；不支持多色图标。

Symbol方式

直接在图标上复制对应的代码即可

<script src="./iconfont/iconfont.js"></script>
<body>
  <svg class="icon" aria-hidden="true">
    <use xlink:href="#icon-dingwei1"></use>
  </svg>
</body>

特点：支持多色图标，不再受单色限制；支持通过 font-size, color 来调整样式；兼容性较差，支持 IE9+及现代浏览器；浏览器渲染 SVG 的性能一般，不如 png。

7.SVG图标

使用：

1.新建项目，添加图标，点击添加入库，点击右上角购物车图标添加刚才使用的项目

2.引入：引入到html里

3.获取该svg的path的TotalLength：

在控制台元素页找到path并点击
打开控制台输入$0.getTotalLength()获取当前元素的长度，如果结果是小数点就加1
获取svg，给它添加css动画

.a{
        stroke:black;        //边的颜色
        stroke-width: 10;    //边的宽度
        stroke-dashoffset: 3339;    //获取的长度值
        stroke-dasharray: 3339;    //二者数值一样
    }

如果元素自带填充就fill设为none，如果没有stroke就给它加一个stroke,看情况进行调整

4.定义一个动画，直接复制

@keyframes stroke{
        to{
            stroke-dashoffset: 0;
        }
    }

5.添加动画

.a{
        stroke:black;
        stroke-width: 10;
        stroke-dashoffset: 3339;
        stroke-dasharray: 3339;
        animation: stroke 1s infinite;
    }

通过描边修改svg粗细
给svg里的path加一个stroke（描边颜色）和stroke-width（描边粗细）即可

<svg t="..." class="icon" ...>
    <path ..." fill="black" p-id="10093" stroke="black" stroke-width="30"></path>
</svg>

八.常用文本属性

1.文本颜色

第六部分颜色表示已作出介绍

2.文本间距

语法：属性值为像素px，正值增大间距，负值缩小间距。

div{
    letter-spacing: 20px;  /*字母间距，对英文字母和汉字都起作用*/
}
div{
    word-spacing: 20px;  /*仅对单词间的间距起作用，通过空格识别词*/
}

3.文本修饰

语法：

div{
    text-decoration: none;  /*没有线*/
}
div{
    text-decoration: overline;  /*上划线*/
}
div{
    text-decoration: line-through;  /*线从中间穿过，即删除线*/
}
div{
    text-decoration: underline;  /*下划线*/
}
div{
    text-decoration: underline wavy rgb(255,0,0);  /*下划红色波浪线*/
}
/*wavy波浪线，dotted点线，dashed虚线，double双实线*/
/*三者没有顺序限制，但最好顺序为：线的位置 线的样式 线的颜色，中间加空格*/
<ins>测试1</ins>  /*下划线*/
<del>测试2</del>  /*删除线*/

4.文本缩进

语法：

div{
    font-size: 40px;
    text-indent: 80px;  /*80=40*2,首行缩进两格*/
}

5.文本对齐-水平

语法：

div{
    text-align: left;  /*左对齐（默认值）*/
}
div{
    text-align: center;  /*居中对齐*/
}
div{
    text-align: right;  /*右对齐*/
}

6.font-size

由于字体设计原因，文字最终呈现的大小并不一定与font-size的值一致。
通常情况下，文字相对字体设计框，并不是垂直居中的，通常都靠下一些。

7.行高

属性名：line-height
语法：

div{
    line-height: 40px;  /*写法1：值为像素*/
}
div{
    line-height: normal;  /*写法2：值为normal*/
}
div{
    line-height: 1.5;  /*常用 写法3：值为数值：字体像素倍数*/
}
div{
    line-height: 150%;  /*写法4：值为百分比*/
}

行高过小：文字重叠，行高最小值是0，不能为负数。
line-height可继承，且为了能更好呈现文字，最好写数值。
line-height和height的关系：

设置了height，高度就是height的值
没有设置height，高度=line-height*行数

应用场景：

调整多行文字的间距
单行文字的垂直居中

div{
    font-size: 40px;
    background-color: red;
    height: 300px;
    line-height: 300px;
}

8.文本对齐-垂直

顶部：无需任何属性，默认顶部对齐
居中：单行文字——让height = line-height即可；多行文字——定位
底部：单行文字——让line-height = (height*2) - font-size - x(x根据字体族动态决定)；更好的方法——定位

9.vertical

作用：指定同一行元素之间，或表格单元格内文字的垂直对齐方式。
语法：不能控制块元素

.cls{
    font-size: 40px;
    color: red;
    vertical-align: top;   /*顶部*/
}
.cls{
    font-size: 40px;
    color: red;
    vertical-align: middle;   /*使元素的中部与父元素的基线加上父元素字母x的一半对齐*/
}
.cls{
    font-size: 40px;
    color: red;
    vertical-align: baseline;   /*默认,使元素的基线与父元素的基线对齐*/
}
.cls{
    font-size: 40px;
    color: red;
    vertical-align: bottom;   /*底部*/
}

九.常用属性

1.列表相关属性

可以作用在 ul、ol、li 元素上

CSS属性名	功能	属性值
list-style-type	设置列表符号	none：不显示前面的标识(常用) square：实心方块 disc：圆形 decimal：数字 lower-roman：小写罗马字 upper-roman：大写罗马字 lower-alpha：小写字母 upper-alpha：大写字母
list-style-position	设置列表符号的位置	inside：在 li 的里面 outside：在 li 的外面
list-style-image	自定义列表符号	url(图片地址)
list-style	复合属性	没有数量、顺序的要求

2.表格相关属性

（1）边框相关属性（其他元素也能用）

CSS属性名	功能	属性值
border-width	边框宽度	CSS中可用的长度值
border-color	边框颜色	CSS中可用的颜色值
border-style	边框风格	none：默认值 solid：实线 dashed：虚线 dotted：点线 double：双实线
border	边框复合属性	没有数量、顺序的要求

（2）表格独有属性

CSS属性名	功能	属性值
table-layout	设置列宽度	auto：自动，列宽根据内容计算（默认值） fixed：固定列宽，平均分
border-spacing	单元格间距	CSS中可用的长度值生效的前提：单元格边框不能合并
border-collapse	合并单元格边框	collapse：合并 separate：不合并（默认值）
empty-cells	隐藏没有内容的单元格	show：显示，默认 hide：隐藏生效的前提：单元格不能合并
caption-side	设置表格标题位置	top：上面（默认值） bottom：在表格下面

3.背景相关属性

CSS属性值	功能	属性值
background-color	设置背景颜色	符合CSS中颜色规范的值默认背景颜色是transparent
background-image	设置背景图片	url(图片地址)
background-repeat	设置背景重复方式	repeat：重复，铺满整个元素，默认值 repeat-x：只在水平方向重复 repeat-y：只在垂直方向重复 no-repeat：不重复
background-position	设置背景图位置	通过关键字设置：写两个值，用空格隔开水平：left、center、right 垂直：top、center、bottom 如果只写一个值，另一个方向的值取center 如果只写一个center，则水平垂直都是center 通过长度指定坐标位置：以元素左上角为坐标原点，设置图片左上角的位置，分别是x坐标、y坐标。只写一个值，会被当作x坐标，y坐标取center
background	复合属性	没有数量、顺序要求

4.鼠标相关属性

CSS属性名	功能	属性值
cursor	设置鼠标光标的格式	pointer：小手 move：移动图标 text：文字选择器 crosshair：十字架 wait：等待 help：帮助自定义鼠标图标： url(鼠标图片地址),上述属性值

CSS属性名

功能

属性值

cursor

设置鼠标光标的格式

pointer：小手

move：移动图标

text：文字选择器

crosshair：十字架

wait：等待

help：帮助

自定义鼠标图标：

url(鼠标图片地址),上述属性值

十.CSS盒子模型

1.常用长度单位

px：像素
em：相对元素font-size的倍数
rem：相对根字体大小，html标签就是根
%：相对父元素计算
注意：CSS中设置长度必须加单位，否则样式无效

2.元素的显示模式

（1）块元素 block（块级元素）

在页面中独占一行，不会与任何元素共用一行，从上到下排列
默认宽度：撑满父元素
默认高度：由内容撑开
可以通过CSS设置宽高
显示模式：

主体结构标签：<html> <body>
排版标签：<h1>~<h6> <hr> <p> <pre> <div>
列表标签：<ul> <ol> <li> <dl> <dt> <dd>
表格相关标签：<table> <tbody> <thead> <troof> <tr> <caption>
<form> <option>

（2）行内元素 inline（内嵌元素）

在页面中不独占一行，一行中不能容纳下的行内元素会在下一行从左到右排列
默认宽度：由内容撑开
默认高度：由内容撑开
无法通过CSS设置宽高
显示模式：

文本标签：<br> <em> <strong> <sup> <del> <ins> <span>
<a> <label>

（3）行内块元素 inline-block（内联块元素）

在页面中不独占一行，一行中不能容纳下的行内元素会在下一行从左到右排列
默认宽度：由内容撑开
默认高度：由内容撑开
可以通过CSS设置宽高
显示模式：

图片：<img>
单元格：<td> <th>
表单控件：<input> <textarea> <select> <button>
框架标签：<iframe>

3.修改元素的显示模式

通过CSS中的display属性可以修改元素的默认显示模式

属性名	值	描述
display	none	元素会被隐藏
	block	元素将作为块级元素显示
	inline	元素将作为行内元素显示
	inline-block	元素将作为行内块元素显示

4.组成部分

margin（外边距）：盒子与外界的距离
border（边框）：盒子的边界
padding（内边距）：紧贴内容的补白区域
content（内容）：元素中的文本或后代元素都是它的内容

盒子大小 = content + 左右padding + 左右border
margin不会影响盒子大小，但会影响盒子位置。
默认宽度：

总宽度 = 父的content - 自身的左右margin

内容区的宽度 = 父的content - 自身的左右border - 自身的左右padding

（1）内容区-content

CSS属性名	功能	属性值
width	设置内容区域宽度	长度
max-width	设置内容区域的最大宽度	长度
min-width	设置内容区域的最小宽度	长度
height	设置内容区域高度	长度
max-height	设置内容区域最大高度	长度
min-height	设置内容区域最小高度	长度

（2）内边距-padding

CSS属性名	功能	属性值
padding-top	上内边距	长度
padding-right	右内边距	长度
padding-bottom	下内边距	长度
padding-left	左内边距	长度
padding	复合属性	长度，可以设置1~4个值

padding复合属性的使用规则

padding: 10px; 上下左右内边距都是10px
padding: 10px 20px; 上下10px，左右20px
padding: 10px 20px 30px; 上10px，左右20px，下30px
padding: 10px 20px 30px 40px; 上10px，右20px，下30px，左40px（顺时针）

padding的值不能为负数
行内元素的左右内边距是没问题的，上下内边距不能完美设置
块级元素、行内块元素，四个方向内边距都可以完美设置

（3）边框-border

CSS属性名	功能	属性值
border-style	边框线风格复合了四个方向的边框风格	none：默认值 solid：实线 dashed：虚线 dotted：点线 double：双实线
border-width	边框线宽度复合了四个方向的边框宽度	长度，默认3px
border-color	边框线颜色复合了四个方向的边框颜色	颜色，默认黑色
border	复合属性	没有顺序和数量要求
border-left border-left-style border-left-width border-left-color border-right border-right-style border-right-width border-right-color	分别设置各个方向的边框	同上

（4）外边距-margin

CSS属性值	功能	属性值
margin-left	左外边距	css中的长度值
margin-right	外右边距	css中的长度值
margin-top	上外边距	css中的长度值
margin-bottom	下外边距	css中的长度值
margin	复合属性，可写1~4个值，规律如padding	css中的长度值

（1）注意事项：

子元素的margin是参考父元素的content计算的（父亲的content中承载着子元素）
上margin、左margin：影响自己的位置；
下margin、右margin：影响后面兄弟元素的位置；
块级元素、行内块元素，均可以完美地设置四个方向的margin；
行内元素，左右margin可以完美设置，上下margin设置无效
margin的值可以是负值
块级元素左右margin都设置成auto，则在其父元素内水平方向居中；
块级元素若上下margin都设置auto,不会在其父元素内垂直方向居中；

（2）塌陷问题：

第一个子元素的上margin会作用在父元素上，最后一个子元素的下margin会作用在父元素上
解决margin塌陷：

给父元素设置不为0的padding
给父元素设置宽度不为0的border
给父元素设置css样式overflow:hidden

（3）合并问题

上面兄弟元素的下外边距和下面兄弟元素的上外边距会合并，取一个最大的值，而不是相加
解决margin合并:

无需解决，布局的时候上下的兄弟元素，只给一个设置上下外边距就可以了

5.处理内容溢出

CSS属性名	功能	属性值
overflow	溢出内容的处理方式	visible：显示，默认值 hidden：隐藏（常用） scroll：显示滚动条，不论内容是否溢出 auto：自动显示滚动条，内容不溢出不显示（常用）
overflow-x	水平方向溢出内容的处理方式	同overflow
overflow-y	垂直方向溢出内容的处理方式	同overflow

CSS属性名

功能

属性值

overflow

溢出内容的处理方式

visible：显示，默认值

hidden：隐藏（常用）

scroll：显示滚动条，不论内容是否溢出

auto：自动显示滚动条，内容不溢出不显示（常用）

overflow-x

水平方向溢出内容的处理方式

同overflow

overflow-y

垂直方向溢出内容的处理方式

同overflow

overflow-x、overflow-y不能一个是hidden，一个是visible，是实验性属性，不建议使用

6.隐藏元素的两种方式

（1）visibility属性

默认值是show，将属性值设置为hidden，隐藏元素

元素看不见了，但还占有原来的位置（元素大小依然保持）

（2）display属性

设置display:none，隐藏元素

彻底的隐藏，看不见也不占用任何位置，没有大小宽高

7.样式的继承

有些样式会继承，元素如果本身设置了某个样式，就使用本身设置的样式；

但如果本身没有设置某个样式，会从父元素开始一级一级继承（优先继承离得近的祖先元素）

会继承的CSS属性

字体属性、文本属性（除了vertical-align）、文字颜色等

不会继承的CSS属性

边框、背景、内边框、外边距、宽高、溢出方式等

能继承的属性都是不影响布局的，即和盒子模型没关系

8.默认样式

优先级：元素的默认样式 > 继承的样式

所以如果要重置元素的默认样式，选择器一定要直接选择到该元素

<a>：下划线、字体颜色、鼠标小手
<h1>~<h6>：文字加粗、文字大小、上下外边距
<p>：上下外边距
<ul> <ol>：左内边距
<body>：8px外边距（四个方向）

9.布局小技巧

行内元素、行内块元素，可以被父元素当作文本处理，即可以像处理文本对齐一样，去处理行内、行内块元素在父元素中的对齐。如：text-align、line-height、text-indent
如何让子元素在父亲中水平居中

子元素为块元素：给父元素加上 margin: 0 auto;
子元素为行内元素、行内块元素：给父元素加上 text-align: center;

如何让子元素在父亲中垂直居中

子元素为块元素：给子元素加上 margin:-top，值为（父元素content - 子元素盒子总高）/ 2
子元素为行内元素、行内块元素：让父元素的height = lint-height，每个子元素都加上：vertical-align:middle; 若想绝对垂直居中，父元素font-size设置为0

元素之间的空白问题

产生原因：行内元素、行内块元素，彼此之间的换行会被浏览器解析为一个空白字符

解决方案：

去掉换行和空格（不推荐）
给父元素设置font-size: 0，再给需要显示文字的元素，单独设置字体大小（推荐）

行内块的幽灵空白问题

产生原因：行内块元素与文本的基线对齐，而文本的基线与文本最底端之间是有一定距离的

解决方案：

给行内块设置vertical，值不为baseline即可，设置为middle、bottom、top均可
若父元素中只有一张图片，设置图片为display: block
给父元素设置font-size: 0，如果该行内块内部还有文本，则需单独设置font-size

十一.浮动

主流的页面布局方式之一

语法：float: left; float: right;

1.元素浮动后的特点

脱离文档流
不管浮动前是什么元素，浮动后默认宽与默认高都是被内容撑开（尽可能小），而且可以设置宽高
不会独占一行，可以与其他元素共用一行
不会margin合并，也不会margin塌陷，能够完美地设置四个方向的margin和padding
不会像行内块一样被当作文本处理（没有行内块的空白问题）

2.浮动后的影响

对兄弟元素的影响：后面的兄弟元素，会占据浮动元素之前的位置，在浮动元素的下面：对前面的兄弟无影响
对父元素的影响：不能撑起父元素的高度，导致父元素高度塌陷；但父元素的宽度依然舒服浮动的元素

3.解决浮动产生的影响（清除浮动）

给父元素指定高度
给父元素也设置浮动，带来其他影响
给父元素设置overflow: hidden
在所有浮动元素的最后面，添加一个块级元素，并给该块级元素设置clear: both;
给浮动元素的父元素，设置伪元素，通过伪元素清除浮动，原理与上一个相同（推荐使用）

.parent::after{
    content: " ";
    display: block;
    clear:both;
}

布局原则：设置浮动时，兄弟元素要么全部浮动，要么全部不浮动
clear: left; 清除所有左浮动效果
clear: right; 清除所有右浮动效果

十二.定位

1.相对定位

（1）设置相对定位

给元素设置position:relative即可实现相对定位
使用 left、right、top、bottom四个属性调整位置，属性值可为负值

.box{
    position:relative;
    left:100px;
}

（2）相对定位的参考点

相对自己原来的位置

（3）相对定位的特点

不会脱离文档流，元素位置的变化，只是视觉效果上的变化，不会对其他元素产生任何影响。
定位元素的显示层级比普通元素高，无论什么定位，显示层级都是一样的。
默认规则：定位的元素会盖在普通元素之上；都发生定位的两个元素，后写的元素会盖在先写的元素之上。
left不能和right一起设置，top和bottom不能一起设置。若同时设置，right、bottom失效。
相对定位的元素，也能继续浮动，但不推荐这样做。
相对行为的元素，也能通过margin调整位置，但不推荐这样做。

注意：绝大多数情况下，相对定位，会与绝对定位配合使用。

2.绝对定位

（1）设置绝对定位

给元素设置position:absolute即可实现相对定位
使用 left、right、top、bottom四个属性调整位置，属性值可为负值

（2）绝对定位的参考点

参考它的包含块

包含块：

对于没有脱离文档流的元素:包含块就是父元素。
对于脱离文档流的元素:包含块是第一个拥有定位属性的祖先元素(如果所有祖先都没定位，那包含块就是整个页面)。

（3）绝对定位的特点

脱离文档流，会对后面的兄弟元素、父元素有影响。
left不能和right一起设置，top和bottom不能一起设置。若同时设置，right、bottom失效。
绝对定位、浮动不能同时设置，如果同时设置，浮动失效，以定位为主。
绝对定位的元素，也能通过margin调整位置，但不推荐这样做。
无论是什么元素(行内、行内块、块级)设置为绝对定位之后，都变成了定位元素。

定位元素：默认宽、高都被内容所撑开，且能自由设置宽高。

3.固定定位

（1）设置为固定定位

给元素设置 position:fixed 即可实现固定定位。
使用left、right、top、bottom 四个属性调整位置。

（2）固定定位的参考点

参考它的视口
视口：对于PC浏览器来说，视口就是我们看网页的那扇“窗户”。

（3）固定定位的特点

脱离文档流，会对后面的兄弟元素、父元素有影响。
left不能和right一起设置，top和bottom不能一起设置。若同时设置，right、bottom失效。
固定定位、浮动不能同时设置，如果同时设置，浮动失效，以固定定位为主。
固定定位的元素，也能通过margin调整位置，但不推荐这样做。
无论是什么元素(行内、行内块、块级)设置为固定定位之后，都变成了定位元素。

4.粘性定位

（1）设置粘性定位

给元素设置 position:sticky 即可实现固定定位。
使用left、right、top、bottom 四个属性调整位置，最常用的是top 值。

.first{
    position: sticky;
    top: 10px;
}

（2）粘性定位的参考点

离它最近的一个拥有“滚动机制”的祖先元素，即便这个祖先不是最近的真实可滚动祖先。

（3）粘性定位的特点

不会脱离文档流，它是一种专门用于窗口滚动时的新的定位方式。最常用的值是top值。
粘性定位和浮动可以同时设置，但不推荐这样做。
固定定位的元素，也能通过margin调整位置，但不推荐这样做。
粘性定位和相对定位的特点基本一致，不同的是:粘性定位可以在元素到达某个位置时将其固定。

5.定位的层级

定位元素的显示层级比普通元素高，无论什么定位，显示层级都是一样的。
如果位置发生重叠，默认情况是:后面的元素会显示在前面元素之上。
可以通过 css 属性 z-index调整元素的显示层级。
z-index 的属性值是数字，没有单位，值越大显示层级越高。
只有定位的元素设置 z-index才有效。
如果z-index值大的元素，依然没有覆盖掉 z-index 值小的元素，那么请检查其包含块的层级。

6.定位的特殊应用

发生固定定位、绝对定位后，元素都变成了定位元素，默认宽高被内容撑开，且依然可以设置宽高。
发生相对定位后，元素依然是之前的显示模式。
以下所说的特殊应用，只针对绝对定位和固定定位的元素，不包括相对定位的元素。

（1）让定位元素的宽充满包含块

块宽想与包含块一致，可以给定位元素同时设置left 和right为e。
高度想与包含块一致，top 和 bottom设置为0。

（2）让定位元素在包含块中居中

/*方案一*/
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: auto;

/*方案二*/
left: 550%;
top: 50;
margin-left: 负的宽度一半;
margin-top: 负的高度一半;
/*注意：该定位的元素必须设置宽高*/

十三.动画

1.transform

属性名	功能	属性值
transform	水平方向平移apx	translate(apx);
	水平方向平移xpx 垂直方向平移ypx	translate(xpx,ypx); translate(a%,b%) (参照自身宽高)
	旋转a度（正数顺时针旋转，负数逆时针旋转）	rotate(adeg) 默认以元素中心为原点旋转修改旋转原点： transform-origin: center; transform-origin: top left; transform-origin: 50px 50px; transform-origin: bottom right 60px;
	实现缩放效果	scale(x); 宽和高都缩放到x倍数
		scale(x,y); 宽缩放到x倍数，高缩放到y倍数
		默认元素中心点为缩放基点修改缩放基点： transform-origin: center; transform-origin: top left; transform-origin: 50px 50px; transform-origin: bottom right 60px;
	倾斜	skew(adeg)；倾斜a度
		skew(xdeg,ydeg); 水平倾斜x度，垂直倾斜y度
		默认元素中心点为倾斜基点修改倾斜基点： transform-origin: center; transform-origin: top left; transform-origin: 50px 50px; transform-origin: bottom right 60px;
	实现多种效果	matrix(a,b,c,d,e,f); a d：缩放 b c：倾斜或斜切 e f：平移

2.transition

语法：transition: property duration timing-function delay;

property：需要过渡的属性

duration：过渡的时长

delay：开始延迟时间

timing-function：缓动函数

贝塞尔缓动函数

函数	变化趋势	实际函数
ease	缓慢开始，陡然加速，再逐渐减速至结束	cubic-bezier(0.25,0.1,0.25,1.0)
ease-in	缓慢开始，再逐渐加速至结束，最终突然停止	cubic-bezier(0.42,0.0,1.0,1.0)
ease-out	突然开始，再逐渐减速至结束	cubic-bezier(0.0,0.0,0.58,1.0)
ease-in-out	缓慢开始，然后加速，再减速至结束	cubic-bezier(0.42,0.0,0.58,1.0)

线性缓动函数

linear 从开始到结束都是固定的速度，实际函数是linear(0,1)
linear(0,0.25,1) 开始较慢的速度均匀变化，后面速度突然变快

阶跃缓动函数

steps(<number-of-steps>, <direction>);

3.animation & keyframes

@keyframes name {
    keyframe-selector {
        css-styles;
    }
    ...
}
/*
name：关键帧列表的名字
keyframe-selector：关键帧选择器
css-styles：关键帧的样式
*/

animation(将关键帧列表和元素关联起来，可指定动画的一些行为和细节):

infinite 无限循环

方向： normal、reverse反向执行、alternate交替执行、alternate-reverse

动画前后样式应用的规则 fill-mode

none：默认值，在动画开始前和开始后，关键帧列表中定义的样式对元素没任何影响
forwards ：动画结束后会让元素保留动画最后一帧的样式
backwards：在动画开始之前会让元素使用动画第一帧的样式
both：同时拥有forwards和backwards的特点

动画播放的状态play-state——控制动画是暂停还是播放

paused 暂停状态
running 播放状态

从暂停——播放，动画会从暂停的位置继续播放，可用于技能优化

十四.响应式设计

1.媒体查询

根据指定的条件，针对不同的媒体类型（screen print）定义不同的 CSS 样式，让使用不同设备的用户都能得到最佳的体验。

实现

直接在CSS文件中使用

@media screen and (max-width: 960px){
 body{
 background-color:#black
 }
}


@media screen and (max-width: 320px) {
    /*0~320*/
    body {
        background: pink;
    }
}


@media screen and (min-width: 376px) and (max-width: 425px) {
    /*376~425*/
    body {
        background: yellow;
    }
}


@media screen and (min-width: 769px) {
    /*769~+∞*/
    body {
        background: green;
    }
}

使用@import导入

@import 'index01.css' screen and (max-width:1024px) and (min-width:720px)
 
@import 'index02.css' screen and (max-width:720px)

在link标签中使用

<link rel="stylesheet" type="text/css" href="index01.css" media="screen and (max-width:1024px) and (min-width:720px)"/>
 
<link rel="stylesheet" type="text/css" href="index02.css" media="screen and (max-width:720px)"/>

2.视口设置——设置meta标签

让视口（网页的可视区域）的宽度等于设备的宽度，并禁止用户对页面的缩放

视口就是网页可见区域的尺寸，设置视口时只设置宽度就行，具体高度由网页内容自动撑开。

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

initial-sacle：初始缩放比例
maximum-scale：表示允许用户缩放的最大比例， 0~10.0；
minimum-scale：表示允许用户缩放到最小比例， 0~10.0；
user-scalable：表示用户是否可以手动缩放，“yes”表示允许缩放，“no”表示禁止缩放。

十五.优化与性能

1.CSS 文件的合并和压缩

（1）合并(mini-css-extract-plugin)

 yarn add -D mini-css-extract-plugin
 
const MiniCssExtractPlugin = require("mini-css-extract-plugin"); // 合并css
  // 装载器配置
  module:{
    rules: [
      {
        test: /\.css$/,
        use: [MiniCssExtractPlugin.loader,'css-loader'] // css顺序是从右到左，从下到上
      },
      {
        test: /\.less$/,
        use: [MiniCssExtractPlugin.loader,'css-loader','less-loader'] // less顺序是从右到左，从下到上
      },
      {
        test: /\.scss$/,
        use: [MiniCssExtractPlugin.loader,'css-loader','sass-loader'] // sass顺序是从右到左，从下到上
      },
    ]
  },
  
    // mini-css-extract-plugin
	plugins: [
          new MiniCssExtractPlugin({ // 抽取css放在公共文件夹
		      filename: 'index.css' // 合并css的公共文件
		    })
   ]

（2）压缩

optimize-css-assets-webpack-plugin

 yarn add -D  optimize-css-assets-webpack-plugin
 const OptimizeCssAssetsWebpackPlugin = require("optimize-css-assets-webpack-plugin") // 压缩css
   // 压缩css
  optimization: {
    minimizer: [new OptimizeCssAssetsWebpackPlugin]
  },

css-minimizer-webpack-plugin（推荐使用）

 yarn add -D css-minimizer-webpack-plugin
 const CssMinimizerWebpackPlugin = require("css-minimizer-webpack-plugin") // 最新压缩css
 plugins: [
      // css-minimizer-webpack-plugin
    new CssMinimizerWebpackPlugin() // 压缩css
 ]

2.使用外部样式表以便浏览器缓存样式

外部样式表可以解决多页面重复问题。
有助于浏览器缓存，从而提高页面响应速度。
有利于代码分离（html和css），有利于代码阅读和维护。

3.避免使用过多的嵌套和复杂的选择器

会导致更高的计算成本，需要权衡代码的简洁性和可读性。

十六.预处理器

1.功能

嵌套：允许在样式规则中嵌套其他样式规则，反映层级与约束关系。
变量和计算：引入变量，可用于存储颜色、尺寸等信息，同时支持数学运算，减少代码重复。
Extend和Mixin：代码片段的复用，Extend用于共享样式规则，Mixin用于在样式表中进行样式复用并可进行传参操作。
循环：支持在样式表中使用循环结构，适用于生成复杂但有规律的样式。
Import：模块化，允许在样式表中导入其他样式文件，有助于提高可维护性和代码复用。

2.Sass

支持的数据类型：数字、、字符串、颜色、布尔值、空值、列表、映射

语法：

普通变量声明：直接用$，$变量名:变量值；
默认变量再后面添加 !default
在局部变量后添加 !global，局部变量作用域为全局变量
插值：

$key:margin;
$value:1;
$number:11px;
box${value}{
    ${key}:$number;
    ${key}:auto;
}

/*运行结果*/
box1{
    margin:11px;
    margin:auto;
}

作用域：.sass文件中，先取值，在定义新变量之前，使用之前的值，定义新变量之后会只用更改的值，即作用域有顺序
map-同属性多档值：

//语法
map-get($外层变量名，内层变量名)

//举例
$font:{
	s: 12px,
	m: 14px,
	l: 16px
};
.m1 {
	font-size: map-get($font,s);//获得变量s
}

@mixin多个属性形成组合

//语法
@include 变量组合名;

//举例1：不带参数
@mixin n {//定义一个属性组合n
	color: red;
	font-size: map-get($font,l);
	border: 1px solid skyblue;
}
.n1 {
	@include n;//引入属性组合
	border-radius: 2px;
}

//举例2：带参数
@mixin n($color) {//定义一个属性组合n
	color: $color;
	font-size: map-get($font,l);
	border: 1px solid skyblue;
}
.n1 {
	@include n(green);//引入属性组合，传参数
	border-radius: 2px;
}

嵌套：{ }
伪类选择器：

//语法：
&:伪类选择器{
	属性名:属性值;
}

//举例
&:hover {
	background-color:tomato;
}

伪元素选择器：

//语法：
&::伪元素选择器{
	属性名:属性值;
}

//举例
&::after {
	content: ""
}

运算：.sass文件中，不同的单位不能进行计算，默认/是分割，而在.less中/是除号
函数：sass和less有的函数可以通用，但有的不可以。

round()取整，precentage()小数点换成百分数，可以自定义函数，用function定义

媒体查询@media

//语法：
@media screen and (max-width:500px) { xxx }

//举例：窗口宽度<=600px时，选择器的背景颜色改变
@media screen and (max-width:600px) {
	background-color: yellow;
}

3.Less

变量：@变量名:变量值
嵌套：{ }
伪类选择器：

//语法：
&:伪类选择器{
	属性名:属性值;
}

//举例
&:hover {
	background-color:tomato;
}

伪元素选择器

//语法：
&::伪元素选择器{
	属性名:属性值;
}

//举例
&::after {
	content: ""
}

媒体查询@media

//语法：
@media screen and (max-width:500px) { xxx }

//举例：窗口宽度<=600px时，选择器的背景颜色改变
@media screen and (max-width:600px) {
	background-color: yellow;
}

在html文件中引入生成的style.css文件

十七.布局

1.版心

在PC端网页中，一般都会有一个固定宽度且水平居中的盒子，来显示网页的主要内容，这是网页的版心。
版心的宽度一般是960~1200px之间。
版心可以是一个，也可以是多个。

2.常用类名

位置
顶部导航条	topbar
页头	header、page-header
导航	nav、navigator、navbar
搜索框	search、search-box
横幅、广告、宣传图	banner
主要内容	content、main
侧边框	aside、sidebar
页脚	footer、page-footer

3.重置默认样式

很多元素都有默认样式，如：

<p>：默认上下margin

<h1>~<h6>：默认上下margin，且字体加粗

<body>：默认8px外边距

超链接：默认文字颜色和下划线

<ul>：默认左padding

（1）使用全局选择器

* {
    margin: 0;
    padding: 0;
    ......
}

在简单案例可以应用，实际开发中不会使用

（2）reset.css

选择到具有默认样式的元素，清空其默认的样式

（3）Normalize.css

官网地址：https://necolas.github.io/normalize.css/
相对于reset.css：

保护了有价值的默认样式，不是完全去掉。
为大部分HTML元素提供一般化的样式。
新增对HTML5元素的设置。
对并集选择器的使用比较谨慎，有效避免调试工具杂乱。

4.Flexbox布局

为盒子模型提供最大灵活性，任何一个容器都可以指定为flex布局
原理：通过给父盒子添加flex属性来控制盒子的位置和排列方式
父盒子设为flex布局以后，子元素的float、clear和vertical-align属性将失效
采用Flex布局的元素成为Flex容器，它的所有子元素自动成为容器成员，成为Flex项目
子容器可以横向排列也可纵向排列
父项常见属性

属性名	功能	属性值
flex-direction	设置主轴（行、x轴）方向	row：默认值从左到右 row-reverse：从右到左 column：从上到下 column-reverse：从下到上
justify-content	设置主轴上的子元素排列方式（使用前确定主轴是哪个）	flex-start：默认值从头部开始，若主轴是x轴，则从左到右 flex-end：从尾部开始排列 center：在主轴居中对齐（若主轴是x轴则水平居中） space-around：平分剩余空间 space-between：先两边贴，再平分剩余空间
flex-wrap	设置子元素是否换行	nowrap：默认不换行，如果装不开会缩小子元素的宽度 wrap：换行
align-content	设置侧轴（列、y轴）上的子元素排列方式（多行）	flex-start：默认值，在侧轴的头部开始排列 flex-end：从侧轴的尾部开始排列 center：在侧轴中间显示 space-around：子项在侧轴平分剩余空间 space-between：子项在侧轴先分布在两头，再平分剩余空间 stretch：拉伸
align-items	设置侧轴上的子元素排列方式（单行）	flex-start：默认值，从上到下 flex-end：从下到上 center：挤在一起居中（垂直居中） stretch：拉伸
flex-flow	复合属性，相当于同时设置了direction和wrap	flex-flow: row wrap;

默认主轴方向：x轴方向，水平向右
默认侧轴方向：y轴方向，垂直向下
子项常见属性

属性名	功能	属性值
flex	定义子项目分配剩余空间，表示占多少份数	<number>
align-self	控制子项自己在侧轴上的排列方式,允许单个项目与其他项目有不一样的对齐方式	auto：默认值，表示继承父元素的align-itens属性，如果没有父元素，则等同于stretch flex-start：从上到下 flex-end：从下到上 center：挤在一起居中（垂直居中） stretch：拉伸
order	定义项目的排列顺序	数值越小，排列越靠前，默认为0

属性名

功能

属性值

flex

定义子项目分配剩余空间，表示占多少份数

align-self

控制子项自己在侧轴上的排列方式,允许单个项目与其他项目有不一样的对齐方式

auto：默认值，表示继承父元素的align-itens属性，如果没有父元素，则等同于stretch

flex-start：从上到下

flex-end：从下到上

center：挤在一起居中（垂直居中）

stretch：拉伸

order

定义项目的排列顺序

数值越小，排列越靠前，默认为0

5.Gird布局

同时控制行和列的排布和对齐方式
开启grid布局

.cls {
    display: grid;
}

属性名	功能	属性值
grid-template-columns	指定每列宽度可以是固定宽度，也可用fr指定浮动宽度	xfr yfr zfr
column-gap	设置列间距	xpx
row-gap	设置行间距	xpx
gap	统一设置行列间距	xpx ypx
grid-template-areas	指定对应区域格式	"header header header" "sidebar content content" "footer footer footer"
grid-area	指定对应区域格式	header：header头部 content：main内容 sidebar：aside侧边栏 footer：footer底部
align-items	子元素垂直方向对齐	flex-start：默认值，从上到下 flex-end：从下到上 center：挤在一起居中（垂直居中） stretch：拉伸
justify-content	子元素、轨道水平方向对齐	flex-start：默认值从头部开始，若主轴是x轴，则从左到右 flex-end：从尾部开始排列 center：在主轴居中对齐（若主轴是x轴则水平居中） space-around：平分剩余空间 space-between：先两边贴，再平分剩余空间
align-content	轨道垂直方向对齐	flex-start：默认值，在侧轴的头部开始排列 flex-end：从侧轴的尾部开始排列 center：在侧轴中间显示 space-around：子项在侧轴平分剩余空间 space-between：子项在侧轴先分布在两头，再平分剩余空间 stretch：拉伸