一、CSS引入方式

1.1、行内样式表

行内样式表（内联样式表）是在元素标签内部的style属性中设定 CSS 样式，适合于修改简单样式；
style其实就是标签的属性；
在双引号中间，写法要符合 CSS 规范；
可以控制当前的标签设置样式；
由于书写繁琐，并且没有体现出结构与样式相分离的思想，所以不推荐大量使用，只有对当前元素添加简单样式的时候，可以考虑使用。

html 复制代码

<div style="color: red; font-size: 12px;">青春不常在，抓紧谈恋爱</div>

1.2、内部样式表

内部样式表（内嵌样式表）是写到HTML页面内部，是将所有的CSS代码抽取出来，单独放到一个style标签中；
style标签理论上可以放在HTML文档的任何地方，但一般会放在文档的head标签中；
通过此种方式，可以方便控制当前整个页面中的元素样式设置；
代码结构清晰，但是并没有实现结构与样式完全分离；
使用内部样式表设定 CSS，通常也被称为嵌入式引入。

html 复制代码

<style>
    div {
        color: red;
        font-size: 12px;
    }
</style>

1.3、外部样式表

实际开发都是外部样式表，适合于样式比较多的情况，核心是：样式单独写到CSS文件中，之后把CSS文件引入到HTML页面中使用；

引入外部样式表分为两种：

在HTML页面中，使用link标签引入这个文件。

html 复制代码

<link rel="stylesheet" href="css文件路径">

属性	作用
rel	定义当前文档与被来链接文档之间的关系，在这里需要指定为"stylesheet"，表示被链接的文档是一个样式表文件
href	定义所链接外部样式表文件的url，可以是相对路径，也可以是绝对路径

@import 指令，导入外部样式文件

html 复制代码

<style>
    @import "css文件路径";
    @import url("css文件路径");
</style>

二、选择器

2.1、基础选择器

id选择器：可以为标有特定id的HTML元素指定特定的样式，HTML元素以id属性来设置id选择器，CSS 中id选择器以"#" 来定义；
类选择器：可以差异化选择不同的标签，单独选一个或者某几个标签，命名时不能以数字开头；
标签选择器（元素选择器）：用HTML标签名称作为选择器，按标签名称分类，为页面中某一类标签指定统一的CSS样式；
通配符选择器使用"*"定义，它表示选取页面中所有元素（标签）。

2.2、复杂选择器

复合选择器：
- 后代选择器之间空格隔开；
- 子代选择器之间>隔开；
- 并集选择器之间,隔开；
- 交集选择器紧挨着；
- 伪类选择器用冒号表示，如:hover，:first-child；
伪类选择器
- 链接伪类选择器
  
  需要按照顺序书写：:link -> :visited -> :hover -> :active
- 表单伪类选择器
  - input:focus -> 获取表单焦点；
  - input:blur -> 失去表单焦点；
伪元素选择器
- :first-letter为第一个字符的样式；
- :first-line为第一行添加样式；
- :before在元素内容的最前面添加的内容，需要配合content属性使用；
- :after在元素内容的最后面添加的内容，需要配合content属性使用。

2.3、选择器优先级

优先级：行内样式 > ID选择器 > 类选择器 > 标签选择器；

原因：首先加载标签选择器,再加载类选择器，然后加载ID选择器，最后加载行内样式，后加载会覆盖先加载的同名样式。
内外部样式加载顺序：就近原则；

原因：按照书写顺序依次加载，在同优先级的前提下，后加载的会覆盖先加载的同名样式，所以离的越近越优先。
!important：可以使用!important使某个样式有最高的优先级。
网页布局基本顺序
- 从外到内，从上到下；
- CSS美化
  - 宽度，高度，背景色（便于调整位置）
  - 放内容->调整内容位置->调整细节（文字样式等）
CSS书写顺序（浏览器执行效率更高）
- 布局定位属性：display、position、float、clear、visibility、overflow；
- 自身属性：margin、padding、border、width、height、background；
- 文本属性：color、font、text-decoration、text-align、vertical-align、white-space、break-word；
- 其他属性（CSS3）：content、cursor、border-radius、box-shadow、text-shadow、background:linear-gradient。

三、常用CSS属性

3.1、字体属性

属性	含义
font-size	大小、尺寸（可以使用多种单位）
font-weight	粗细
font-style	样式
font-family	字体
font	简写

font-size：谷歌浏览器的默认大小是16px；各个浏览器的默认字号不一；需要设置单位，否则无效。
font-weight
- 正常字体：normal或者400；
- 加粗：bold或者700；
- 不是所有字体都提供了九种粗细（100~900整百数），因此部分取值页面中可能无变化。
font-style
- 正常（默认值）：normal；
- 倾斜：italic。
font-family
- 常见取值：具体字体1，具体字体2...，字体系列；
- 具体字体：Microsoft YaHei、微软雅黑、黑体、宋体、楷体等；
- 字体系列：sans-serif（无衬线字体）、serif（衬线字体）、monospace（等宽字体）；
- Tip：字体名称中存在多个单词，用引号包裹，最后的一项字体系列不需要引号包裹。
font（复合属性）：font: font-style font-weight font-size/line-height font-family;
- 使用font属性时，必须按上面语法格式中的顺序书写，不能更换顺序，并且各个属性间以空格隔开；
- 不需要设置的属性可以省略（取默认值），但必须保留 font-size 和 font-family属性，否则 font 属性将不起作用。

3.2、文本属性

属性	含义	说明
color	颜色
line-height	行高	行之间的高度
text-align	水平对齐方式	取值：left、center、right
vertical-align	垂直对齐方式	取值：top、middle、bottom（可以用于图片和文字的对齐方式）
text-indent	首行缩进
text-decoration	文本修饰	取值：none、underline、overline、line-through
text-transform	字母大小写转换	取值：lowercase、uppercase、capitalize（首字母大写）
letter-spacing	字符间距
word-spacing	单词间距	只对英文有效
white-space	空白的处理方式	文本超出后是否换行，取值：nowrap

color（四种写法）
- 颜色名称，使用英文单词；
- 16进制的RGB值：#999999；
- rgb函数：rgb(red, green, blue)，每种颜色的取值范围，0~255；
- rgba函数：rbga(red, green, blue, alpha)，可以设置透明度，alpha取值范围0~1，0表示完全透明，1表示完全不透明。
line-heigh：数字+px 或者倍数（当前标签font-size的倍数）
- 让单行文本垂直居中可以设置line-height: 文字父元素高度；
- 网页精准布局时，会设置line-heigh: 1可以取消上下间距。
text-align（文本水平对齐方式）：有left、center、right属性。
- center能让文本、span标签、a标签、input标签、img标签居中；
- Tip：若让文本以及以上标签水平居中，text-align: center需要给以上元素的父元素设置。

3.3、背景属性

属性	含义
background-color	背景颜色
background-image	背景图片
background-repeat	背景图片的重复方式
background-position	背景图片的显示位置
background-attachment	背景图片是否跟随滚动
background	简写

background-color
- 取值：transparent透明。
background-image
- 必须使用url()方式指定图片的路径；
- 如果是在CSS样式文件中使用相对路径，此时是相对于CSS文件，不是相对HTML文件。
background-repeat
- 取值：repeat（默认）、repeat-x、repeat-y、no-repeat。
background-position
- 默认背景图显示在左上角；
- 取值：top、bottom、left、right、center；
- 坐标：左上角为(0,0)坐标，向右为x正方向，向下为y正方向；
雪碧图，即CSS Sprites，也称为CSS精灵，一种CSS图像合并技术
- 含义：将网页中许多非常小的图标或者图片整合到一张大图中，当访问面面时只需要下载一次，可以减少访问服务器的次数，提高性能；
- 原理：使用background-position进行背景定位，使用坐标精确地定位出背景图片的位置。
background-attachment
- 取值：scroll（默认）、fixed固定不动。
background
- 简写属性：background: background-color background-image background-repeat background-position；
- 以空格隔开，书写顺序没有要求。

3.4、列表属性

属性	含义	说明
list-style-type	设置列表前的标记
list-style-image	将图像作为列表前的标记
list-style-position	设置标记的位置	取值：outside(默认)、inside
list-style	简写

list-style-type
- 取值：none、disc、circle、square、decimal；
- 此时不再区分有序列表还是无序列表，只要设置列表前的标记就可以了。
list-style
- 简写属性：list-style: list-style-type list-style-image list-style-position；
- 书写顺序没有要求。

3.5、表格属性

border-collapse：表格中相邻的边框是否合并（折叠）为单一边框
- 取值：separated（默认）、collapse。

四、其他CSS属性

4.1、浮动

1、概念：

通过float属性来实现元素的浮动，可以让块级元素脱离常规的文档流，向左或向右移动，在同一行显示，如果一行显示不下，则会换行显示；

2、清除浮动

设置float属性后，元素会浮在页面上层，此时父容器无法计算自己尺寸，如果我们还想显示父容器，则需要清除浮动
- 将父容器设置为BFC；
- 在父容器末尾添加一个清除了float属性的空的div（不推荐直接添加），通常在父容器末尾添加一个伪元素（:after）来清除右浮动，反之添加:before伪元素来清除左浮动，通常来讲会添加双伪元素来清除浮动；

4.2、元素的显示隐藏

1、元素显示

display：inline、inline-block、block；
visibility：visible。

2、元素隐藏

方法	说明	特点
`display:none`	1、元素在页面上将彻底消失； 2、元素本身占有的空间会被其他元素占有，也就是说它会导致浏览器的重排和重绘； 3、消失后，自身绑定的事件不会触发，也不会有过渡效果。	元素不可见，不占据空间，无法响应点击事件
`visibility:hidden`	1、从页面上仅仅是隐藏该元素，DOM结果均会存在，只是当时在一个不可见的状态，不会触发重排，但是会触发重绘； 2、给人的效果是隐藏了，所以他自身的事件不会触发。	元素不可见，占据页面空间，无法响应点击事件
`opacity:0`	1、透明度为0，元素隐藏，不会引发重排重绘； 2、由于其仍然是存在于页面上的，所以他自身的的事件仍然是可以触发的，但被他遮挡的元素是不能触发其事件的； 3、其子元素不能设置opacity来达到显示的效果。	元素不可见，占据页面空间，可响应点击事件
设置宽高为0	1、将元素的`margin`，`border`，`padding`，`height`和`width`等影响元素盒模型的属性设置成0，如果元素内有子元素或内容，还应该设置其`overflow:hidden`来隐藏其子元素	元素不可见，不占据页面空间，无法响应点击事件
`position:absolute`	将元素移出可视区域	元素不可见，不影响页面布局
`clip-path`	1、通过裁剪的形式； 2、`clip-path: polygon(0px 0px,0px 0px,0px 0px,0px 0px);`	元素不可见，占据页面空间，无法响应点击事件

最常用的还是display:none和visibility:hidden，其他的方式只能认为是奇招，它们的真正用途并不是用于隐藏元素。

4.3、轮廓属性

1、简介

轮廓outline，用于在元素周围绘制一个轮廓，位于border外围，可以突出显示元素；
常表现在input表单输入框。

2、常用属性

outline-width：轮廓宽度
outline-color：轮廓颜色
outline-style：轮廓样式
outline：简写

3、表现

在浏览器中，当鼠标单击或使用TAB键让一个表单或链接获得焦点时，该元素会有一个轮廓outline；
优点：可以提高使用表单的用户体验；
缺点：有时会影响美观。

4、outline和border的区别

border可以应用于所有HTML元素，而outline主要用于表单元素、超链接元素；
当元素获得焦点时会自动出现outline轮廓效果，当失去焦点时会自动消失，这是浏览器默认行为；
outline不影响元素的尺寸和位置，而border会影响。

4.4、宽高相关

max-width：设置元素的最大宽度；
max-height：设置元素的最大高度；
min-width：设置元素的最小宽度；
min-height：设置元素的最小高度。

4.5、overflow属性

visible：溢出时可见，显示在元素外，默认值；
hidden：溢出的部分不可见（常用）；
scroll：无论是否出现溢出始终出现滚动条；
auto：溢出时自动出现滚动条。

4.6、cursor属性

default：默认光标，一般为箭头；
pointer：手形，光标移动超链接上时一般显示为手形；
move：表示可移动；
text：表示文本；
wait：表示程序正忙，需要等待；
hep：表示帮助。

五、盒子模型

5.1、是什么

当对一个文档进行布局的时候，浏览器的渲染引擎会根据标准之一的CSS基础框盒模型，将所有元素表示为一个个矩形的盒子。
一个盒子由四个部分组成：content、padding、border、margin
- content，即实际内容，显示文本和图像；
- boreder，即边框，围绕元素内容的内边距的一条或多条线，由粗细、样式、颜色三部分组成；
- padding，即内边距，清除内容周围的区域，内边距是透明的，取值不能为负，受盒子的background属性影响；
- margin，即外边距，在元素外创建额外的空白，空白通常指不能放其他元素的区域。

5.2、标准盒子模型

标准盒子模型，是浏览器默认的盒子模型

盒子总宽度 = width + padding + border + margin
盒子总高度 = height + padding + border + margin

也就是，width、height 只是内容高度，不包含 padding 和 border值，若设置width为200px，但由于存在padding，但实际上盒子的宽度有240px。

5.3、IE怪异盒子模型

盒子总宽度 = width + margin
盒子总高度 = height + margin

也就是，width、height 包含了 padding和 border值。

5.4、box-sizing

CSS中的box-sizing属性定义了引擎应该如何计算一个元素的总宽度和总高度
css 复制代码
```
box-sizing: content-box | border-box | inherit;
```
- content-box默认值，元素的width、height不包含padding，border，与标准盒子模型表现一致；
- border-box元素的width、height包含 padding，border，与怪异盒子模型表现一致；
- inherit指定box-sizing属性的值，应该从父元素继承。

5.5、BFC

1、概念

BFC即块级格式化上下文，它是页面中的一块渲染区域，并且有一套属于自己的渲染规则

内部的盒子会在垂直方向上一个接一个的放置；
对于同一个BFC的俩个相邻的盒子的margin会发生重叠，与方向无关；
每个元素的左外边距与包含块的左边界相接触（从左到右），即使浮动元素也是如此；
BFC的区域不会与float的元素区域重叠；
计算BFC的高度时，浮动子元素也参与计算；
BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素，反之亦然。

目的：BFC的目的是形成一个相对于外界完全独立的空间，让内部的子元素不会影响到外部的元素。

2、触发条件

根元素，即HTML元素；
浮动元素：float值为left、right；
overflow值不为visible，为auto、scroll、hidden；
display的值为inline-block、inltable-cell、table-caption、table、inline-table、flex、inline-flex、grid、inline-grid；
position的值为absolute、fixed。

3、应用场景

防止margin重叠（塌陷）

html 复制代码

<style>
    p {
        color: #f55;
        background: #fcc;
        width: 200px;
        line-height: 100px;
        text-align:center;
        margin: 100px;
    }
</style>
<body>
    <p>Haha</p >
    <p>Hehe</p >
</body>

两个p元素之间的距离为100px，发生了margin重叠（塌陷），以最大的为准，如果第一个P的margin为80的话，两个P之间的距离还是100，以最大的为准；
同一个BFC的俩个相邻的盒子的margin会发生重叠可以在第二个p外面包裹一层容器，并触发这个容器生成一个BFC，那么两个p就不属于同一个BFC，则不会出现margin重叠。

html 复制代码

<style>
    .wrap {
        overflow: hidden;// 新的BFC
    }
    p {
        color: #f55;
        background: #fcc;
        width: 200px;
        line-height: 100px;
        text-align:center;
        margin: 100px;
    }
</style>
<body>
    <p>Haha</p >
    <div class="wrap">
        <p>Hehe</p >
    </div>
</body>

清除内部浮动

html 复制代码

<style>
    .par {
        overflow: hidden; // 为par盒子创建一个BFC
        border: 5px solid #fcc;
        width: 300px;
    }
    .child {
        border: 5px solid #f66;
        width:100px;
        height: 100px;
        float: left;
    }
</style>
<body>
    <div class="par">
        <div class="child"></div>
        <div class="child"></div>
    </div>
</body>

自适应多栏布局

这里举个两栏布局的示例

html 复制代码

<style>
    body {
        width: 300px;
        position: relative;
    }
 
    .aside {
        width: 100px;
        height: 150px;
        float: left;
        background: #f66;
    }
 
    .main {
        overflow: hidden; // 为main盒子生成一个BFC
        height: 200px;
        background: #fcc;
    }
</style>
<body>
    <div class="aside"></div>
    <div class="main"></div>
</body>

每个元素的左外边距与包含块的左边界相接触，虽然.aslide为浮动元素，但是main的左边依然会与包含块的左边相接触，而BFC的区域不会与浮动盒子重叠，所以我们可以通过触发main生成BFC，以此适应两栏布局。

六、定位方式

取值	含义	说明
static	默认值	按照常规文档流进行显示
relative	相对定位	相对于标签原来的位置进行的定位
absolute	绝对定位	相对于第一个非static定位的父标签的定位
fixed	固定定位	相对于浏览器窗品进行定位

设置定位方式后，还要设置定位属性（偏移量）：top、bottom、left、right。

1、相对定位

先设置元素的position属性为relative，然后再设置偏移量。

2、绝对定位

先设置父标签为非static定位，然后设置元素的position属性为absolute，最后再设置偏移量；
注意：
- 一般来说都会将父标签设置为非static定位；
- 如果父标签不是非static定位，则会相对于浏览器窗口进行定位；
- 设置元素为绝对定位后，元素会浮到页面上方。

3、固定定位

先设置元素的position属性为fixed，然后再设置偏移量；
设置元素为固定定位后，元素会浮动在面面上方。

4、z-index

设置元素定位方式后，元素会浮在页面上方，此时可以通过z-index属性设置优先级，控制元素的堆叠顺序；
取值为数字，值越大优先级越高，默认为auto（大多数浏览器默认为0）；
注意：只能给非static定位的元素设置z-index属性。

七、布局

7.1、div布局

1、简介

结构部分使用HTML5的语义化标签来进行语义化构建；
样式部分使用css中的margin、padding、position、float来进行精确定位。

7.2、table布局

1、简介

不适用于复杂布局，仅用于简单、有规则的结构；
定位相对准确，与浏览器基本无关，适用于简单分隔。

2、用法

table常用样式的属性
- border在表格外围设置边框；
- border-spacing设置单元格之间的距离（相当于table标签中的cellspacing属性，即间距）；
- border-collapse表格中相邻边框是否合并，取值：seprate、collapse。
th/td常用样式属性
- border为单元格设置边框；
- padding设置单元格的内边距（相当于table标签中的cellpadding属性，边距）。

3、优缺点

优点
- 兼容性高，简单。
缺点
- table所占的字节比起其他的html标签来说更多，并且占用服务器资源更多，下载更慢；
- table布局一旦形成，后期就很难用css改变；
- 阻挡浏览器渲染引擎的渲染顺序，延迟页面生成速度；
- 不利于搜索引擎抓取信息，影响网站排名。

7.3、flex布局

1、容器属性

flex-direction：决定主轴（横轴）的方向（即项目的排列方向）
- row（默认值）：主轴为水平方向，起点在左端；
- row-reverse：主轴为水平方向，起点在右端；
- column：主轴为垂直方向，起点在上沿；
- column-reverse：主轴为垂直方向，起点在下沿。
flex-wrap：弹性元素永远沿主轴排列，那么如果主轴排不下，通过flex-wrap决定容器内项目是否可换行
- nowrap（默认值）：不换行；
- wrap：换行，第一行在下方；
- wrap-reverse：换行，第一行在上方。
默认情况是不换行，但也不会任由元素直接溢出容器，会涉及到元素的弹性伸缩
justify-content：定义了项目在主轴上的对齐方式
- flex-start（默认值）：左对齐；
- flex-end：右对齐；
- center：居中；
- space-between：两端对齐，项目之间的间隔都相等；
- space-around：两个项目两侧间隔相等。
align-items：定义单个项目在交叉轴（纵轴）上如何对齐
- stretch（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度；
- flex-start：交叉轴的起点对齐；
- flex-end：交叉轴的终点对齐；
- center：交叉轴的中点对齐；
- baseline: 项目的第一行文字的基线对齐。
align-content：定义了多个项目在交叉轴（纵轴）的对齐方式。如果项目只有一根轴线，该属性不起作用
- stretch（默认值）：轴线占满整个交叉轴；
- flex-start：与交叉轴的起点对齐；
- flex-end：与交叉轴的终点对齐；
- center：与交叉轴的中点对齐；
- space-between：与交叉轴两端对齐，轴线之间的间隔平均分布；
- space-around：每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍。

2、容器成员属性

order：定义项目的排列顺序。数值越小，排列越靠前，默认为0
flex-grow：定义对一行内的剩余空间如何分配的规则，默认为0，即如果存在剩余空间，也不放大
- 如果所有项目的flex-grow属性都为1，则它们将等分剩余空间（如果有的话）
- 如果一个项目的flex-grow属性为2，其他项目都为1，则前者占据的剩余空间将比其他项多一倍
弹性容器的宽度正好等于元素宽度总和，无多余宽度，此时无论flex-grow是什么值都不会生效
flex-shrink：定义了项目的缩小比例（容器宽度<元素总宽度时如何收缩），默认为1，即如果空间不足，该项目将缩小
- 如果所有项目的flex-shrink属性都为1，当空间不足时，都将等比例缩小；
- 如果一个项目的flex-shrink属性为0，其他项目都为1，则空间不足时，前者不缩小；
在容器宽度有剩余时，flex-shrink也是不会生效的
flex-basis：设置的是元素在主轴上的初始尺寸，所谓的初始尺寸就是元素在flex-grow和flex-shrink生效前的尺寸
- 浏览器根据这个属性，计算主轴是否有多余空间，默认值为auto，即项目的本来大小，如设置了width则元素尺寸由width决定（主轴方向），没有设置则由内容决定；
- 当设置为0的是，会根据内容撑开，它可以设为跟width或height属性一样的值（比如350 px），则项目将占据固定空间。
flex：该属性是flex-grow，flex-shrink，flex-basis的简写，默认值为0 1 auto，也是比较难懂的一个复合属性
- 属性组合
  - flex: 1 = flex: 1 1 0%；
  - flex: 2 = flex: 2 1 0%；
  - flex: auto = flex: 1 1 auto；
  - flex: none = flex: 0 0 auto，常用于固定尺寸不伸缩。
- flex: 1 和 flex: auto 的区别，可以归结于flex-basis: 0和flex-basis: auto的区别
  - 当设置为0时（绝对弹性元素），此时相当于告诉flex-grow和flex-shrink在伸缩的时候不需要考虑我的尺寸；
  - 当设置为auto时（相对弹性元素），此时则需要在伸缩时将元素尺寸纳入考虑。
注意：建议优先使用这个属性，而不是单独写三个分离的属性，因为浏览器会推算相关值
align-self：允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性
- 默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch

7.4、grid布局

1、容器属性

grid-template-columns：设置列宽，grid-template-rows ：设置行宽。
- 写法1
  css 复制代码
```
.wrapper {
  display: grid;
  /*  声明了三列，宽度分别为 200px 200px 200px */
  grid-template-columns: 200px 200px 200px;
  /*  声明了两行，行高分别为 50px 50px  */
  grid-template-rows: 50px 50px;
}
```
- 写法2
  css 复制代码
```
.wrapper {
  display: grid;
  grid-template-columns: repeat(3, 200px);
  grid-template-rows: repeat(2, 50px);
}
```
  repeat()函数介绍
  - auto-fill：表示自动填充，让一行（或者一列）中尽可能的容纳更多的单元格；
    
    grid-template-columns: repeat(auto-fill, 200px) 表示列宽是 200 px，但列的数量是不固定的，只要浏览器能够容纳得下，就可以放置元素。
  - fr：片段，为了方便表示比例关系；
    
    grid-template-columns: 200px 1fr 2fr 表示第一个列宽设置为 200 px，后面剩余的宽度分为两部分，宽度分别为剩余宽度的 1/3 和 2/3。
  - minmax：产生一个长度范围，表示长度就在这个范围之中都可以应用到网格项目中。第一个参数就是最小值，第二个参数就是最大值；
    
    grid-template-columns: 1fr 1fr minmax(300px, 2fr)表示第三列列宽不小于100px，不大于1fr。
  - auto：由浏览器自己决定长度。
    
    grid-template-columns: 100px auto 100px 表示第一第三列为 100 px，中间由浏览器决定长度。
grid-row-gap：设置行间距， grid-column-gap：设置列间距，grid-gap：设置行列间距。
grid-row-gap: 10px 表示行间距是 10 px；
grid-column-gap: 20px 表示列间距是 20 px；
grid-gap: 10px 20px 等同上述两个属性。
grid-template-areas：用于定义区域，一个区域由一个或者多个单元格组成。
css 复制代码
```
.container {
  display: grid;
  grid-template-columns: 100px 100px 100px;
  grid-template-rows: 100px 100px 100px;
  grid-template-areas: 'a b c'
                       'd e f'
                       'g h i';
}
```
上面代码先划分出9个单元格，然后将其定名为a到i的九个区域，分别对应这九个单元格。
- 多个单元格合并成一个区域的写法如下：
  css 复制代码
```
grid-template-areas: 'a a a'
                     'b b b'
                     'c c c';
```
  上面代码将9个单元格分成a、b、c三个区域。
- 如果某些区域不需要利用，则使用"点"（.）表示。
grid-auto-flow：决定网格的排放顺序（默认先行后列顺序排放）
- 设置grid-auto-flow: column;则网格的排放顺序为先列后行。
justify-content：设置整个内容区域 的水平位置（左中右）， align-content：设置整个内容区域 的垂直位置（上中下）， place-content：前两者的简写形式
- start：对齐容器的起始边框；
- end：对齐容器的结束边框；
- center：容器内部居中；
- space-around：每个项目两侧的间隔相等。所以，项目之间的间隔比项目与容器边框的间隔大一倍；
- space-between：项目与项目的间隔相等，项目与容器边框之间没有间隔；
- space-evenly：项目与项目的间隔相等，项目与容器边框之间也是同样长度的间隔；
- stretch：项目大小没有指定时，拉伸占据整个网格容器。
grid-auto-columns：指定隐式网格的宽，grid-auto-rows：指定隐式网格的高
- 显示网格：在grid-template定义的网格；
- 隐式网格：不在grid-template定义的网格，若项目内容>定义的网格，浏览器会自动生成多余的网格，以便放置项目。而超出的部分就是隐式网格。

2、容器成员属性

grid-area ：指定项目放在哪一个区域
css 复制代码
```
.item-1 {
  grid-area: e;
}
```
意思为将1号项目位于e区域与grid-template-areas搭配使用。
justify-items：设置单元格内容 的水平位置（左中右）， align-items：设置单元格的垂直位置（上中下）， place-items：前两者的简写形式
- stretch：拉伸，占满单元格的整个宽度（默认值）；
- start：对齐单元格的起始边缘；
- end：对齐单元格的结束边缘；
- center：单元格内部居中。
grid-column-start、grid-column-end、grid-row-start、grid-row-end：指定网格项目所在的四个边框，分别定位在哪根网格线，从而指定项目的位置
- grid-column-start属性：左边框所在的垂直网格线；
- grid-column-end属性：右边框所在的垂直网格线；
- grid-row-start属性：上边框所在的水平网格线；
- grid-row-end属性：下边框所在的水平网格线。
举个例子：
html 复制代码
```
<style>
    #container{
        display: grid;
        grid-template-columns: 100px 100px 100px;
        grid-template-rows: 100px 100px 100px;
    }
    .item-1 {
        grid-column-start: 2;
        grid-column-end: 4;
    }
</style>

<div id="container">
    <div class="item item-1">1</div>
    <div class="item item-2">2</div>
    <div class="item item-3">3</div>
</div>
```
通过设置grid-column属性，指定1号项目的左边框是第二根垂直网格线，右边框是第四根垂直网格线

八、CSS3新特性

8.1、选择器

CSS 选择器参考手册 (w3school.com.cn)

8.2、样式

1、边框

css3新增了三个边框属性，分别是：
- border-radius：创建圆角边框；
- box-shadow：为元素添加阴影；
- border-image：使用图片来绘制边框。
box-shadow
- 设置元素阴影，设置属性如下：
  - 水平阴影
  - 垂直阴影
  - 模糊距离(虚实)
  - 阴影尺寸(影子大小)
  - 阴影颜色
  - 内/外阴影
    
    其中水平阴影和垂直阴影是必须设置的

2、背景

background-clip
- 用于确定背景画区，有以下几种可能的属性：
  - background-clip: border-box;背景从border开始显示；
  - background-clip: padding-box;背景从padding开始显示；
  - background-clip: content-box;背景显content区域开始显示；
  - background-clip: no-clip;默认属性，等同于border-box。
    
    通常情况，背景都是覆盖整个元素的，利用这个属性可以设定背景颜色或图片的覆盖范围
background-origin
- background-origin 属性规定background-position属性相对于什么位置来定位
  - background-origin: border-box;从border开始计算background-position；
  - background-origin: padding-box;从padding开始计算background-position；
  - background-origin: content-box;从content开始计算background-position。
    
    默认情况是padding-box，即以padding的左上角为原点
background-size
- background-size属性常用来调整背景图片的大小，主要用于设定图片本身
  - background-size: contain;缩小图片以适合元素（维持像素长宽比）；
  - background-size: cover;扩展元素以填补元素（维持像素长宽比）；
  - background-size: 100px 100px;缩小图片至指定的大小；
  - background-size: 50% 100%;缩小图片至指定的大小，百分比是相对包含元素的尺寸。
background-break
- 元素可以被分成几个独立的盒子（如使内联元素span跨越多行），background-break 属性用来控制背景怎样在这些不同的盒子中显示
  - background-break: continuous;默认值。忽略盒之间的距离（也就是像元素没有分成多个盒子，依然是一个整体一样）;
  - background-break: bounding-box;把盒之间的距离计算在内；
  - background-break: each-box;为每个盒子单独重绘背景。

3、文字

word-wrap
- 语法：word-wrap: normal|break-word
  - normal：使用浏览器默认的换行；
  - break-all：允许在单词内换行。
text-overflow
- text-overflow设置或检索当当前行超过指定容器的边界时如何显示，属性有两个值选择：
  - clip：修剪文本；
  - ellipsis：显示省略符号来代表被修剪的文本。
text-shadow
- text-shadow可向文本应用阴影。能够规定水平阴影、垂直阴影、模糊距离，以及阴影的颜色。

4、颜色

css3新增了新的颜色表示方式rgba与hsla；
- rgba分为两部分，rgb为颜色值，a为透明度；
- hsla分为四部分，h为色相，s为饱和度，l为亮度，a为透明度。

5、transition

transition属性可以被指定为一个或多个CSS属性的过渡效果，多个属性之间用逗号进行分隔，必须规定两项内容：

过度效果
持续时间

css 复制代码

/** transition: CSS属性, 花费时间, 效果曲线（默认ease）, 延迟时间（默认0）; **/
.button {
  width: 100px;
  height: 30px;
  background-color: blue;
  transition: width 0.5s ease-in-out 0s;
}

.button:hover {
  width: 150px;
}
/** 当鼠标悬停在按钮上时，按钮的宽度将在0.5秒内从100px平滑过渡到150px，动画效果由`ease-in-out`控制 **/

属性也可以分开写

CSS 复制代码

.btn {
    transition-property: width; 
    transition-duration: 0.5s;
    transition-timing-function: ease-in-out;
    transition-delay: 0s;
}

6、transform

transform属性允许你旋转，缩放，倾斜或平移给定元素。
transform-origin：转换元素的位置（围绕那个点进行转换），默认值为(x,y,z):(50%,50%,0)。
- transform: translate(120px, 50%)：位移；
- transform: scale(2, 0.5)：缩放；
- transform: rotate(0.5turn)：旋转；
- transform: skew(30deg, 20deg)：倾斜。

7、animation

动画这个平常用的也很多，主要是做一个预设的动画。和一些页面交互的动画效果，结果和过渡应该一样，让页面不会那么生硬。
animation也有很多的属性
- animation-name：动画名称；
- animation-duration：动画持续时间；
- animation-timing-function：动画时间函数；
- animation-delay：动画延迟时间；
- animation-iteration-count：动画执行次数，可以设置为一个整数，也可以设置为infinite，意思是无限循环；
- animation-direction：动画执行方向；
- animation-play-state：动画播放状态；
- animation-fill-mode：动画填充模式。

8、gradient

颜色渐变是指在两个颜色之间平稳的过渡，css3渐变包括
- linear-gradient：线性渐变
  - background-image: linear-gradient(direction, color-stop1, color-stop2, ...);
- radial-gradient：径向渐变
  - linear-gradient(0deg, red, green);

9、其他

弹性布局；
网格布局；
Filter（滤镜）；
媒体查询；
混合模式。

CSS3学习笔记

一、CSS引入方式

1.1、行内样式表

1.2、内部样式表

1.3、外部样式表

二、选择器

2.1、基础选择器

2.2、复杂选择器

2.3、选择器优先级

三、常用CSS属性

3.1、字体属性

3.2、文本属性

3.3、背景属性

3.4、列表属性

3.5、表格属性

四、其他CSS属性

4.1、浮动

4.2、元素的显示隐藏

4.3、轮廓属性

4.4、宽高相关

4.5、overflow属性

4.6、cursor属性

五、盒子模型

5.1、是什么

5.2、标准盒子模型

5.3、IE怪异盒子模型

5.4、box-sizing

5.5、BFC

1、概念

2、触发条件

3、应用场景

六、定位方式

七、布局

7.1、div布局

7.2、table布局

7.3、flex布局

1、容器属性

2、容器成员属性

7.4、grid布局

1、容器属性

2、容器成员属性

八、CSS3新特性

8.1、选择器

8.2、样式

1、边框

2、背景

3、文字

4、颜色

5、transition

6、transform

7、animation

8、gradient

9、其他