CSS

概述

样式引入

html

<标签 style="属性名:值; 属性名:值; ..."></标签>

<!--style 标签放在页面的任意位置都可以生效，建议放在 head 中！-->
<style>
</style>

<!--link 标签放在页面的任意位置都可以生效，建议放在 head 中！-->
<link rel="stylesheet" href="CSS文件地址">

样式继承与自带样式

直接设置的样式 > 自带的样式 > 继承的样式

部分样式可以被后代元素继承，如font-size、font-weight
部分标签存在自带样式（用户代理样式），如p 自带上下外边距，strong 自带 font-weight

基本参数

长度单位

px：像素
em：字体大小的倍数
%：百分比
rem：根元素字体大小的倍数
vw：将视口宽度分成100份，设置占多少份
vh：将视口高度分成100份，设置占多少份
vmax：将视口宽高中较大的一个分成100份，设置占多少份
vmin：将视口宽高中较小的一个分成100份，设置占多少份

颜色设置

颜色名方式

red、orange、yellow

rgb

css

/*
    计算机三元色
    red         0~255   0%~100%
    green       0~255   0%~100%
    blue        0~255   0%~100%
*/

/* 三个元色 取相同的数值  灰色 */
/* 数值越大颜色越浅，全是255是白色，数值越小颜色越深，全是0是黑色 */
/* 由三种颜色混合 */
background: rgb(255, 255, 255);

/* 使用百分比 */
background: rgb(45%, 80%, 74%);

hex

css

/* 两位十六进制数可以表示0-255的值 */

/* 使用6位十六进制的数字表示颜色 每两位表示一个元色 */
background: #4fa8bb;

/* 表示一种元色的两个数字是相同的，且三组元色各自都是相同， 可以简写为3位十六进制数字 */
background: #a8c;  /* #aa88cc */

rgba

r	red
g   green
b   blue
a   opacity 不透明度，取值0~1之间的小数，值越大越不透明，0表示完全透明，1表示完全不透明

hsl

h	色相	取值0~360
s	饱和度 取值0%~100%
l	亮度 取值0%~100%

hsla

h	色相	取值0~360
s	饱和度 取值0%~100%
l	亮度 取值0%~100%
a   opacity 不透明度，取值0~1之间的小数，值越大越不透明，0表示完全透明，1表示完全不透明

浏览器私有前缀

-webkit-：chrome浏览器、 Safari浏览器
-moz-：Firefox
-ms-：IE
-o-：Opearn

基本样式

文本设置

字体样式

样式参数

属性名	作用	属性值
font-size	字体大小	长度
font-weight	字体粗细	normal：正常。<br>lighter：细。<br>bold：粗。<br>100~900数字：100~300是细体，400、500正常，600以及以上粗体
font-style	斜体字	normal：正常。<br>italic：斜体字。
font-family	字体族科	字体名称、字体列表
font	设置多种字体样式	多个值，使用空格分隔
color	设置文字颜色	颜色

使用案例

css

/* 如果字体名称中有空格,建议使用引号包裹 指定多个字体，按次序寻找可用字体*/
/*  serif 表示衬线字体，笔画粗细不一致，如宋体等
	sans-serif 表示非衬线字体，笔画粗细一致，如微软雅黑等*/
font-family: "Microsoft YaHei", 微软雅黑, 宋体, sans-serif;


/* 又粗又斜 字体大小 字体族科  */
/*  1. 复合属性写在子属性的后面，前面的子属性全部失效，复合属性即使没写对应的值也会用默认值覆盖掉子属性
	2. 子属性写在复合属性的后面，子属性会覆盖掉复合属性中与之对应的样式 */
font: 800 italic 16px "Microsoft YaHei",微软雅黑,宋体,sans-serif;

文本样式

下列参数使用于行内元素和行内块元素

样式参数

属性名	作用	属性值
letter-spacing	字间距	长度
word-spacing	词间距（中文无效果）	长度
text-decoration	文本修饰线	none：无修饰线。<br>underline：下划线。<br>overline：上划线。<br>line-throuth：删除线
text-indent	首行缩进	长度
text-align	文本水平对齐方式	left：左对齐。<br>right：右对齐。<br>center：居中对齐
vertical-align	与同行文本如何对齐	baseline：基线对齐。<br>top：顶线对齐。<br>middle：中线对齐。<br>bottom：底线对齐。<br>sub：下标字。<br>super：上标字。<br>长度：元素底部与基线的距离
line-height	行高	长度
text-align-last	最后一行文本水平对齐方式	start：靠文字起始方向对齐，默认自。<br>end：靠文字结束方向对齐。<br>left：靠左对齐。<br>right：靠右对齐。<br>center：居中对齐。<br>justify：两端对齐。
text-decoration-line	文本修饰线的类型	none：无。<br>underline：下划线。<br>overline：上划线。<br>line-throuth：删除线。
text-decoration-style	文本修饰线风格	solid：实线。<br>dashed：虚线。<br>dotted：点线。<br>double：双实线。<br>wavy：波浪线。
text-decoration-color	文本修饰线颜色	颜色
text-decoration	文本修饰线复合属性	多个值使用空格分隔
word-wrap / overflow-wrap	是否允许单词内部断行	normal：不允许。<br>break-wrod：允许。
white-space	文本显示格式	normal：默认值。<br>pre：原格式显示。<br>pre-wrap：pre基础上+自动换行。<br>pre-line：normal基础上+识别换行符。<br>nowrap：强制显示成一行
text-overflow	溢出文本显示省略号	clip：默认值。<br>ellipsis：显示省略号。
text-shadow	文本阴影	阴影偏移、模糊值、颜色

使用案例

vertical-align

baseline：元素的底部对齐文本的基线（默认,所以image和其他元素排列时会有空白间隙，将vertical-align修改为其他任意值即可解决）
top：元素的顶部对齐文本的顶部
middle：元素的中间对齐文本的中线
bottom：元素的底部对齐文本的底部

1. 设置行内元素或行内块元素与同行文本如何对齐，如 基线对齐、顶线对齐、中线对齐、底线对齐等
2. 设置上标字和下标字
3. 设置单元格中内容的纵向对齐方式，只能用于 td、th

line-height

第一行文字中线与元素顶部距离是行高一半，最后一行文字中线与元素底部距离是行高一半！

css

使用行高实现元素中的一行文字垂直居中，需要：
	1. 只有一行文字
	2. 设置行高与高度一致
	
font 复合line-height
	font: bold 14px/30px 'Microsoft YaHei'; /* 行高30px */
	font: bold 14px/3 'Microsoft YaHei';  /* 3 表示字体大小的倍数，相当于em */

单行长文本显示省略号：

强制将文字显示在一行中
设置溢出部分隐藏
设置溢出文本显示成省略号

css

 /* 将文本强制显示到一行 */
white-space: nowrap;
/* 溢出部分隐藏 */
overflow: hidden;
/* 显示省略号 */
text-overflow: ellipsis;

text-shadow

css

/* 阴影偏移 */
text-shadow: 3px 3px; 
/* 阴影偏移 颜色 */
text-shadow: 4px 4px #999;
text-shadow: #900 4px 4px;
/* 阴影模糊值 */
text-shadow: 3px 3px 5px;
text-shadow: 3px 3px 15px rgba(0,0,0,.5);

/* 多阴影 */
text-shadow: 1px 1px #bbb, 
            2px 2px #aaa, 
            3px 3px #999,
            4px 4px #888,
            5px 5px #777,
            6px 6px #666;

背景设置

样式参数

属性名	作用	属性值
background-color	背景颜色	颜色，默认值是 transparent（透明）<br>给 body 设置背景色就是给整个页面设置背景色
background-image	设置背景图像地址	url(地址)
background-repeat	设置背景图像重复方式	repeat：重复。<br>repeat-x：横向重复。<br>repeat-y：纵向重复。<br>no-repeat：不重复。
background-position	设置背景图像位置	关键字。<br>两个长度表示的坐标。<br>百分比
background-attachment	背景图像固定	scroll<br>fixed<br/>local
background	背景复合属性	多个值使用空格分隔
background-origin	设置背景图像定位的原点	padding-box：原点在内边距上左上角，默认值<br/>border-box：原点在边框上左上角<br/>content-box：原点在内容上左上角
background-clip	设置背景图像的显示区域	border-box：显示在边框以及以内，默认值<br/>padding-box：显示在内边距以及以内<br/>content-box：显示在内容区域<br/>text：指显示在文本上，chrome浏览器需要私有前缀
background-size	设置背景图像的尺寸	设置两个长度，分别表示背景图像的宽度和高度<br/>设置一个长度，表示背景图像的宽度，高度根据比例自动计<br/> contain：背景图像自动适配元素，优先保证背景图像显示<br/>cover：背景图像自动适配元素，优先保证元素上铺满该背景图

使用案例

background-position

使用关键字设置属性值：

css

/* 
    x轴位置：left right center
    y轴位置：top bottom center
*/

/* 使用两个值 */
background-position: left top;

/* 使用一个值  另一个值默认center*/
background-position: left;

通过指定坐标设置属性值：

css

/* 背景图片的左上角会被定位到元素的 (Xpx, Ypx) 位置。整数是距离元素顶部和左边，负数是距离元素右边或底部。 */
background-position: 0 0;

/* 只设置一个长度， 被认为是x坐标 y轴位置默认取center */
background-position: 100px;

/* 长度表示的坐标和关键字混搭 */
background-position: right -50px;
background-position: 100px bottom;

使用百分比设置属性值：

css

/* 
    背景图片的左上角会被定位到元素的 (X%, Y%)
*/

/* 两个百分比 */
background-position: 0% 0%;

/* 百分比和其他混搭 */
background-position: 100% 100px;
background-position: left 100%;

/* 值使用一个百分比 被认为x方向位置，另一个方向默认center */
background-position: 10%;

background-position 的两个子属性：

background-position-x：设置x位置
background-position-y：设置y位置

background-attachment

上图中三个窗口与外部整体窗口都可以滚动

scroll：无论滚动内部或者外部窗口，背景都不会变化。
fixed：无论滚动内部或者外部窗口，背景都会变化。
local：图片会跟随内部窗口滚动

多背景图

css

background-color: #ccc;
background-image: url(../images/bg-tl.png), url(../images/bg-tr.png);
background-repeat: no-repeat;
background-position: left top, right top;

background: url(../images/bg-tl.png) no-repeat left top, 
            url(../images/bg-tr.png) no-repeat right top,
            url(../images/bg-bl.png) no-repeat left bottom,
            url(../images/bg-br.png) no-repeat right bottom,
            url(../images/bg05.jpg) center/cover;

如果位置重合，先写的背景图像会显示在上层！

光标设置

属性名	作用	属性值
cursor	设置鼠标光标	pointer：小手<br>move：移动图标<br>…………

css

/* 自定义鼠标光标 */
cursor: url(../images/arrow03.png),pointer;

列表样式

注意：只有 ul、ol、li 这些标签设置列表样式才有效果！

属性名	作用	属性值
list-style-type	设置列表项图标	none：无
list-style-position	设置列表项图标位置	outside：在li外面。<br>inside：在li里面。
list-style-image	自定义列表项图标	url(图片地址)
list-style	复合属性	多个值使用空格分隔

表格样式

注意： 表格相关的属性只能设置到 table 标签上才生效！

属性名	作用	属性值
table-layout	设置列宽固定	auto：默认值。<br>fixed：固定。
border-spacing	设置单元格之间的距离	长度
border-collapse	合并单元格边框	separate：默认值。<br>collapse：合并
caption-side	标题位置	top：表格上面。<br>bottom：表格下面
empty-cells	没有内容的单元格显示还是隐藏	show：显示，默认值。<br>hide：隐藏

样式选择器

基本选择器

行内样式 > ID选择器 > 类选择器、伪类选择器、属性选择器 > 标签名选择器、伪元素选择器 > 全局选择器
!important > 行内式 > 任何选择器，!important 可以无限提高某个属性的权重

标签选择器

标签名 {}

类名选择器

css

.类名 {}

ID 选择器

css

#ID名（必须唯一） {}

全局选择器

css

* {}

交集选择器

css

选择器1选择器2 {}

/* 同时拥有class1和class2类的元素,才会被选中 */
.class1.class2 {
    background-color: yellow;
}

并集选择器

css

选择器1, 选择器2 {}

/* 匹配所有class1和class*/
.class1,.class2 {
    color: red;
}

组合选择器

两个组合选择器，先比较ID的数量，数量多者权重高，比较结束
ID数量无法分胜负，比较类、伪类的数量，数量多者权重高，比较结束
类、伪类的数量无法分胜负，比较标签名的数量，数量多者权重高，比较结束
两个选择器权重一致，后面覆盖前面

**组合： ** 并集选择器的组合，各自计算各自的权重，不会放在一起计算。

后代元素选择器

css

选择器1 选择器2 {}

/* 选择 .parent 元素内部的所有 p 元素，包括 .child 和 .grandchild */
.parent p {
    color: blue;
}

子元素选择器

css

选择器1 > 选择器2 {}

/* 只选择 .parent 元素的直接子元素 .child，不包括 .grandchild */
.parent > p {
    background-color: yellow;
}

相邻兄弟元素选择器

css

选择器1 + 选择器2 {}

/* 匹配紧随div，并且两者共享同一个父元素的p元素。 */
div + p {
    color: red;
}

通用兄弟元素选择器

css

选择器1 ~ 选择器2 {}

/* 匹配所有在div后面，且两者共享同一个父元素的元素*/
div ~ p {
    color: blue;
}

伪类选择器

动态伪类选择器

多个伪类选择器一起使用，使用link、:visited、:hover、:active 顺序。

:link：选择未访问过的超链接
:visited：选择已访问过的超链接
:hover：鼠标悬停在元素上
:active：鼠标悬停在元素上且鼠标按键按下不抬起
:focus：选择获取到焦点的元素

css

/* 选择所有未被访问的链接，将其文本颜色设置为蓝色 */
a:link {
    color: blue;
}

/* 选择所有已被访问的链接，将其文本颜色设置为紫色 */
a:visited {
    color: purple;
}

/* 选择鼠标悬停在其上的元素，将其背景颜色设置为黄色 */
div:hover {
    background-color: yellow;
}

/* 选择被用户激活的元素，例如鼠标按下不放的链接，将其文本颜色设置为红色 */
a:active {
    color: red;
}

/* 选择当前获取焦点的元素，例如用户正在输入的文本框，将其边框设置为2像素宽，颜色为绿色的实线 */
input:focus {
    border: 2px solid green;
}

目标伪类选择器

:target：选择到当前锚点所对应的元素

css

:target {
    background-color: yellow;
}

/* 添加一个带有ID的元素 */
<div id="section1">This is Section 1</div>
<div id="section2">This is Section 2</div>

/* 添加一个链接，当点击时会跳转到上面的元素 */
/* 当点击#section1，对应的This is Section 1会变为黄色*/
<a href="#section1">Go to Section 1</a>
/* 当点击#section2，对应的This is Section 2会变为黄色*/
<a href="#section2">Go to Section 2</a>

语言伪类选择器

:lang(语言)

css

p:lang(en){
    color: blue;
}

<p lang="fr">Bonjour le monde!</p>
/* Hello, world!将会被设为红色 */
<p lang="en">Hello, world!</p>

lang(zh-CN）：所选择到的元素中可以自己不设置 lang 属性，会继承祖先元素的语言设置
[lang="zh-CN"]：所选择到元素，必须元素自身设置了 lang 属性。

UI元素伪类选择器

:enabled 可用的表单控件
:disabled 不可用的表单控件
:checked 被选中的表单控件（单选框、复选框、下拉选项）

css

/* 可用的表单控件 */
input:enabled {
    border: 2px solid green;
}

/* 不可用的表单控件 */
input:disabled {
    border: 2px solid red;
}

/* 被选中的表单控件（单选框、复选框、下拉选项） */
input:checked,
option:checked {
    background-color: yellow;
}

<label for="enabled-input">可用的输入框:</label>
<input type="text" id="enabled-input" name="enabled-input">

<label for="disabled-input">不可用的输入框:</label>
<input type="text" id="disabled-input" name="disabled-input" disabled>

<label for="select">下拉选项:</label>
<select id="select" name="select">
    <option value="option1">选项1</option>
    <option value="option2" selected>选项2</option>
    <option value="option3">选项3</option>
</select>

结构伪类选择器

:frist-child：在兄弟元素中排名第一
:last-child：在兄弟元素汇总的排名最后
:nth-child(n)：在兄弟元素中排名第n个
:nth-last-child(n)：在兄弟元素中排名倒数第n个
:only-child：没有兄弟元素
:first-of-type：在同标签名的兄弟元素中排名第一
:last-of-type：在同标签名的兄弟元素中排名最后
:nth-of-type(n)：在同标签名的兄弟元素中排名第n个
:nth-last-of-type(n)：在同标签名的兄弟元素中排名倒数第n个
:only-of-type：没有同标签名的兄弟元素
:root：根元素
:empty：没有文本内容也没有后代元素

css

:nth-child(odd)        奇数行
:nth-child(even)       偶数行
:nth-of-type(2n-1)	   奇数行
:nth-of-type(2n)	   偶数行
:nth-of-type(3n)	   排号是3的倍数

否定伪类选择器

:not(选择器)：选择不满足括号中选择器的元素

属性选择器

[attr]：选择包含属性名attr的元素
[attr=“val”]：选择属性attr的值是val的元素
[attr^="val"]：选择属性attr的值以val开头的元素
[attr$="val"]：选择属性attr的值以val结尾的元素
[attr*="val"]：选择属性attr的值包含val的元素

属性选择器如果与其他选择器进行交集组合，通常写在其他选择器的后面
css
img[alt] {}
.item[title] {}

伪元素选择器

::first-letter / :first-letter：选择元素中的第一个文字
::first-line / :first-line：选择元素中的第一行文字
::before / :before：给元素动态添加子元素，放在第一个位置
::after / :after：给元素动态添加子元素，放在最后一个位置
::placeholder：选择输入框、文本域中placeholder中的文字
::selction：选择被鼠标选中的文字

::before和::after 选择器后面的声明块中必须设置 content 属性！

盒子模型

元素的显示模式

使用CSS属性 display 可以设置元素的显示模式：

inline
block
inline-block

块级元素 block

在页面中是一个块，能够独占一行，不能并排
可以设置宽度和高度
可以设置上下左右边距

排版标签： h1~h6、p、pre、hr、div
列表标签： ul、ol、li、dl、dt、dd
表单标签： form、option

行内元素 inline

显示在行内，不能独占一行，可以并排
无法设置宽度和高度，靠内部元素撑开。
只能设置左右边距，无法设置上下边距

文本标签： em、strong、del、ins、sub、sup、span
超链接标签： a
表单标签： label

行内块元素 inline-block

和块级元素一样可以设置宽高和上下左右边距
和行内元素一样可以排列在一行上。

图片标签： img
表单标签： input、button、textarea、select
框架标签： iframe

盒子模型的构造

盒子的总宽度 = 内容宽度 + 左右内边距 + 左右边框

盒子的总高度 = 内容高度 + 上下内边距 + 上下边框

内容（content）： 内容是元素的核心区域，元素中的文本内容和后代元素都显示在内容上。
内边距（padding）： 内容与元素边界的距离。
边框（border）： 位于元素的边界上。
外边距（margin）： 在元素边界之外，是与相邻元素的距离。

CSS设置区域宽高

注意： 最大最小宽高一般不与固定宽高一同设置！

CSS 属性名	功能	属性值
width	宽度	长度
max-width	最大宽度	长度
min-width	最小宽度	长度
height	高度	长度
max-height	最大高度	长度
min-height	最小高度	长度

元素的默认宽高

行内元素：

默认宽度被内容撑开，没有内容就没有宽度
默认高度被内容撑开，没有内容也会有一个文字的高度

行内块元素：

默认宽度被内容撑开，没有内容就没有宽度
默认高度被内容撑开，没有内容就没有高度

块级元素：

默认高度被内容撑开，没有内容就没有高度
默认总宽度 = 父元素内容宽度 - 自身的左右外边距
默认内容宽度 = 父元素内容宽度 - 自身的左右外边距 - 自身的左右内边距 - 自身的左右边框

盒子内边距

CSS 属性

不能是负值
使用百分比，上下左右内边距都参照父元素内容宽度

CSS 属性名	功能
padding-left	左内边距
padding-right	右内边距
padding-top	上内边距
padding-bottom	下内边距
padding	上下左右内边距

使用案例

css

/* 1个值: 上下左右 */
padding: 20px;
/* 2个值： 上下 左右*/
padding: 40px 30px;
/* 3个值： 上 左右 下*/
padding: 10px 20px 30px;
/* 4个值： 上 右 下 左*/
padding: 15px 25px 35px 45px;

盒子边框

样式参数

CSS 属性名	功能	属性值
border-style	边框风格	none：无风格。<br>solid：实线。<br>dashed：虚线。<br>dotted：点线。<br>double：双实线。
border-color	边框颜色	颜色，默认值是文字颜色
border-width	边框宽度	长度，默认值是3px
border	同时设置风格、颜色、宽度	多个值使用空格分隔
border-left-style<br>border-left-color<br>border-left-width<br>border-left<br><br>border-right-style<br/>border-right-color<br/>border-right-width<br/>border-right<br><br>border-top-style<br/>border-top-color<br/>border-top-width<br/>border-top<br/><br/>border-bottom-style<br/>border-bottom-color<br/>border-bottom-width<br/>border-bottom	单独设置某一边的边框
border-radius	边框圆角	数字
border-top-left-radius<br/>border-top-right-radius<br/>border-bottom-left-radius<br/>border-bottom-right-radius	单独设置某一边圆角边框	数字

举例说明

border-top-left-radius等

设置一个长度，同时设置 x 半径和 y 半径
设置两个长度，第一个是 x 半径，第二个是 y 半径

border-radius

css

/* 每个角x半径和y半径一致 */
/* 同时设置4个角 */
border-radius: 20px;
/* 左上和右下  左下和右上 */
border-radius: 10px 100px;
/* 左上 左下和右上 右下 */
border-radius: 10px 100px 50px;
/* 左上 右上 右下 左下 */
border-radius: 10px 30px 50px 80px;

css

/* 
	/ 左边都是 x 半径，可以写 1 ~ 4 个长度， 
	/ 右边都是 y 半径，可以写 1 ~ 4 个长度， 
*/

/*左上和右下x半径:100px; 左下和右上x半径:30px /  左上y半径:10px; 左下和右上y半径:40px; 右下y半径:50px  */
/* 左上:100px 10px;  右上:30px 40px;  右下:100px 50px; 左下:30px 40px */
border-radius: 100px 30px / 10px 40px 50px;

盒子外轮廓

外轮廓与边框的区别：外轮廓不是盒子的一部分，不影响元素的尺寸和位置！

CSS 属性名	含义	值
outline-style	外轮廓风格	同border-style
outline-width	外轮廓宽度	长度
outline-color	外轮廓颜色	颜色
outline	复合属性	多个值使用空格分隔
outline-offset	与边框的距离<br>不是 outline 的子属性	长度，可以是负值

盒子外边距

外边距是元素与相邻兄弟元素的距离，如果没有相邻兄弟元素就是与父元素内容边界的距离

使用百分比，上下左右内边距都参照父元素内容宽度
外边距可以是负值
块级元素左右外边距都设置为 auto，该元素在父元素中横向居中

css 属性

CSS 属性名	功能	属性值
margin-left	左外边距	长度
margin-right	右外边距	长度
margin-top	上外边距	长度
margin-bottom	下外边距	长度
margin	外边距复合属性	多个长度空格分隔

使用案例

margin 复合属性的设置规则：

1个值： 上下左右
2个值： 上下 左右
3个置： 上 左右 下
4个值： 上 右 下 左

margin 塌陷

最上面元素的上外边距、最下面元素的下外边距会塌陷到父元素，设置上、下外边距时将父元素顶开。
外边距塌陷只会发生在块级元素上

- 方案一： 父元素设置边框
- 方案二： 父元素设置内边距
- 方案三： 父元素开启BFC，设置 overflow:hidden;

margin 合并

上面兄弟元素的下外边距会与下面兄弟元素的上外边距合并，两者之间距离取较大的外边距
外边距合并只会发生在块级元素上

其他属性

内容溢出

CSS 属性名	功能	属性值
overflow	设置溢出内容的显示方式	visible：显示，默认值。<br>hidden：隐藏。<br>scroll：滚动条（不论内容是否会溢出，都有滚动条）。<br>auto：自动（只有内容溢出才会显示滚动条）。
overflow-x	x轴方向溢出内容的显示方式	同上
overflow-y	y轴方向溢出内容的显示方式	同上

隐藏元素

设置 visibility:hidden; 元素隐藏但是占据位置。
设置 display:none; 元素彻底隐藏，不占据位置。

盒子大小

box-sizing: content-box：设置的宽高仅包含元素内容区的宽高，默认值。
box-sizing: border-box：设置的宽高包含了元素内容区，内边距，边框等。

盒子阴影

css

box-shadow: x偏移 y偏移 模糊值 外延值 颜色 内阴影;

css

/* 设置阴影的偏移位置 x方向 y方向 */
box-shadow: 10px 5px;

/* 设置阴影的 偏移位置 颜色 */
box-shadow: -5px 10px #ccc;
box-shadow: #099 -5px -10px;

 /* 设置阴影的模糊值 */
box-shadow: 5px 5px 10px;
/* 设置阴影的模糊值 颜色 */
box-shadow: 5px 5px 10px #ccc;
box-shadow: rgba(0,0,0,.3) 5px 5px 10px;
/* 阴影不偏移 靠模糊值向四周扩散 */
box-shadow: 0 0 15px #000;

/* 设置外延值 */
box-shadow: 3px 3px 5px 1px #080;

/* 设置内阴影 */
box-shadow: 10px 10px inset;
box-shadow: -10px 10px inset;
box-shadow: inset -10px -10px #000;

/* 多阴影 */
box-shadow: 5px 0 5px #f00,
            0 5px 5px #080,
            -5px 0 5px #088,
            0 -5px 5px #880;

不透明度 opacity

给元素设置 opacity 属性可以让元素整体半透明，该属性的值取 0 到 1之间的小数，数字越大越不透明，1表示完全不透明，0表示完全透明。

页面布局

浮动

CSS 属性	功能	属性值
float	设置浮动	left、right、none
clear	清除浮动的影响	left、right、both

特点

浮动元素脱离文档流，可以理解为浮动元素将会浮动到新图层上
- 文档流：在HTML中文档流即为元素从上至下排列的顺序或自左向右的排列
- 脱离文档流：元素从正常的排列顺序中被抽离
水平排列，自动换行，不存在外边距的塌陷和合并，设置左右外边距auto不会居中（与块级区别）
设置宽高、内外边距都没有问题（与行内区别）
不会被父元素作为文本去处理（与行内块和行内区别）

产生的影响

对后面兄弟元素的影响

后面兄弟元素会占据浮动元素原来的位置，可能造成位置的重叠，浮动元素显示在上

方案一：给紧邻这浮动元素的后面的兄弟元素设置 clear:both。
方案二：兄弟元素全部设置浮动。

对父元素的影响

子元素浮动之后，不能撑起父元素高度，造成高度塌陷

方案一：父元素设置固定高度
方案二：父元素设置浮动
方案三：父元素设置 overflow, 值只要不是 visible 都可以
方案四：给父元素添加个子元素，放在所有浮动元素的后面，该元素要求是块级元素，设置 clear:both
方案五：原理同方案四相同，使用伪元素给父元素添加子元素，设置 clear:both (推挤)

css

父元素::after {
    content: "";
    display: block;
    clear:both;
}

行内/行内块布局

居中

行内块元素在父元素中水平居中：

给父元素设置 text-align:center

让行内块元素在父元素中纵向居中：

给父元素设置行高
给行内块元素设置 vertical-align:middle

空白问题

元素之间的空白（左右）

行内元素、行内块元素，彼此之间的换行会被浏览器解析成为一个空白的字符，所以会占用一个位置

方案一：代码中，元素之间不写换行（不推荐）
方案二：父元素设置字体大小为0；如果行内块元素中还有文字单独设置字体大小。

html

span {
	background-color: #8c8d90;
}
<span id="d1">春江潮水连海平</span>
<span id="d2">海上明月共潮声</span>
<span id="d3">人生代代无穷已</span>
<span id="d4">江月年年望相似</span>

底部的空白（图片的幽灵空白）

行内块元素与文字基线对齐，底部的空白就是基线与底线的距离

方案一：父元素设置字体大小 0
方案二：给行内块元素设置 vertical-align:bottom (推荐)
方案三：经典解决方案，针对图片，将图片设置成块级元素

文字内容个数不同的行内块元素水平排列无法对齐

如果行内块元素中没有文字，该元素的底部与基线对齐
如果行内块元素中有一行文字，文字与外面的基线对齐，进而影响行内块元素的位置
如果行内块元素中有多行文字，最后一行文字与外面的基线对齐，进而影响行内块元素的位置

为行内块元素设置 vertical-align, 值不是 baseline

定位

CSS 属性名	功能	属性值
position	设置定位	static：不定位，默认值。<br>relative：相对定位。<br>absolute：绝对定位。<br>fixed：固定定位<br/>sticky：粘连定位
left	与参照点左侧距离	长度
right	与参照点右侧距离	长度
top	与参照点上侧距离	长度
bottom	与参照点下侧距离	长度
z-index	显示层级	纯数字

相对定位

相对于自己原来的位置，不脱离文档流，相邻元素仍然按照其原来的位置进行排列
相对定位不会改变元素原有的显示模式，可以与浮动一起设置

绝对定位

相对于其第一个定位的祖先元素（不包括static定位），如果没有定位的祖先元素，包含块就是整个页面
脱离文档流，同时设置浮动和绝对定位，浮动不生效。
绝对定位元素显示特点

默认宽高都是被内容撑开，不存在外边距的塌陷和合并
宽高内外边距都可以设置
不会被父元素作为文本

固定定位

相对于整个视口进行定位
脱离文档流，同时设置浮动和固定定位，浮动不生效
固定定位元素显示特点
1. 默认宽高都是被内容撑开，不存在外边距的塌陷和合并
2. 宽高内外边距都可以设置
3. 不会被父元素作为文本

粘连定位

当页面滚动，该元素顶部触碰到视口顶部的时候，会固定定位在那个位置。

定位显示层级

定位的元素默认显示层级是相同的，不论进行哪一种定位，后面的元素显示在上层；定位元素的显示层级比不定位高。
定位元素通过z-index 设置显示层级，值越大显示层级越高（可为负）；不定位的元素设置 z-index 无效。

默认宽高计算规则

宽高由width或height属性决定，如果未设置宽高将根据其内容自动调整
未设置width和height，或其值为auto
- 宽度：定位父元素的对应尺寸减去left和right属性值
- 高度：定位父元素的对应尺寸减去top和bottom属性值

水平垂直居中

根据定位方式，相对于定位元素居中

方案一：

css

position: absolute/fixed;
left: 50%;
top:50%;
margin-left: -自身总宽度/2;
margin-top:-自身总高度/2;

方案二：

css

position: absolute/fixed;
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: auto;

其他

精灵图

把小的图片合并到一张大的图片上。多个元素使用相同的图片作为背景图像，但是设置不同的图像位置，实现各自元素显示的图案不同。

减少图片的请求次数，提高网页加载速度。

精灵图(CSS Sprites)生成器 - bejson在线工具

重置样式表

reset.css

重置浏览器的默认样式

css

/* Box sizing rules */
*,
*::before,
*::after {
  box-sizing: border-box;
}

/* Remove default margin */
body,
h1,
h2,
h3,
h4,
p,
figure,
blockquote,
dl,
dd {
  margin: 0;
}

/* Remove list styles on ul, ol elements with a list role, which suggests default styling will be removed */
ul[role='list'],
ol[role='list'] {
  list-style: none;
}

/* Set core root defaults */
html:focus-within {
  scroll-behavior: smooth;
}

/* Set core body defaults */
body {
  min-height: 100vh;
  text-rendering: optimizeSpeed;
  line-height: 1.5;
}

/* A elements that don't have a class get default styles */
a:not([class]) {
  text-decoration-skip-ink: auto;
}

/* Make images easier to work with */
img,
picture {
  max-width: 100%;
  display: block;
}

/* Inherit fonts for inputs and buttons */
input,
button,
textarea,
select {
  font: inherit;
}

/* Remove all animations, transitions and smooth scroll for people that prefer not to see them */
@media (prefers-reduced-motion: reduce) {
  html:focus-within {
   scroll-behavior: auto;
  }
  
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

normalize.css

重置掉该重置的样式，保留有用的 user agent 样式

css

/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */

/* Document
   ========================================================================== */

/**
 * 1. Correct the line height in all browsers.
 * 2. Prevent adjustments of font size after orientation changes in iOS.
 */

 html {
    line-height: 1.15; /* 1 */
    -webkit-text-size-adjust: 100%; /* 2 */
  }
  
  /* Sections
     ========================================================================== */
  
  /**
   * Remove the margin in all browsers.
   */
  
  body {
    margin: 0;
  }
  
  /**
   * Render the `main` element consistently in IE.
   */
  
  main {
    display: block;
  }
  
  /**
   * Correct the font size and margin on `h1` elements within `section` and
   * `article` contexts in Chrome, Firefox, and Safari.
   */
  
  h1 {
    font-size: 2em;
    margin: 0.67em 0;
  }
  
  /* Grouping content
     ========================================================================== */
  
  /**
   * 1. Add the correct box sizing in Firefox.
   * 2. Show the overflow in Edge and IE.
   */
  
  hr {
    box-sizing: content-box; /* 1 */
    height: 0; /* 1 */
    overflow: visible; /* 2 */
  }
  
  /**
   * 1. Correct the inheritance and scaling of font size in all browsers.
   * 2. Correct the odd `em` font sizing in all browsers.
   */
  
  pre {
    font-family: monospace, monospace; /* 1 */
    font-size: 1em; /* 2 */
  }
  
  /* Text-level semantics
     ========================================================================== */
  
  /**
   * Remove the gray background on active links in IE 10.
   */
  
  a {
    background-color: transparent;
  }
  
  /**
   * 1. Remove the bottom border in Chrome 57-
   * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
   */
  
  abbr[title] {
    border-bottom: none; /* 1 */
    text-decoration: underline; /* 2 */
    text-decoration: underline dotted; /* 2 */
  }
  
  /**
   * Add the correct font weight in Chrome, Edge, and Safari.
   */
  
  b,
  strong {
    font-weight: bolder;
  }
  
  /**
   * 1. Correct the inheritance and scaling of font size in all browsers.
   * 2. Correct the odd `em` font sizing in all browsers.
   */
  
  code,
  kbd,
  samp {
    font-family: monospace, monospace; /* 1 */
    font-size: 1em; /* 2 */
  }
  
  /**
   * Add the correct font size in all browsers.
   */
  
  small {
    font-size: 80%;
  }
  
  /**
   * Prevent `sub` and `sup` elements from affecting the line height in
   * all browsers.
   */
  
  sub,
  sup {
    font-size: 75%;
    line-height: 0;
    position: relative;
    vertical-align: baseline;
  }
  
  sub {
    bottom: -0.25em;
  }
  
  sup {
    top: -0.5em;
  }
  
  /* Embedded content
     ========================================================================== */
  
  /**
   * Remove the border on images inside links in IE 10.
   */
  
  img {
    border-style: none;
  }
  
  /* Forms
     ========================================================================== */
  
  /**
   * 1. Change the font styles in all browsers.
   * 2. Remove the margin in Firefox and Safari.
   */
  
  button,
  input,
  optgroup,
  select,
  textarea {
    font-family: inherit; /* 1 */
    font-size: 100%; /* 1 */
    line-height: 1.15; /* 1 */
    margin: 0; /* 2 */
  }
  
  /**
   * Show the overflow in IE.
   * 1. Show the overflow in Edge.
   */
  
  button,
  input { /* 1 */
    overflow: visible;
  }
  
  /**
   * Remove the inheritance of text transform in Edge, Firefox, and IE.
   * 1. Remove the inheritance of text transform in Firefox.
   */
  
  button,
  select { /* 1 */
    text-transform: none;
  }
  
  /**
   * Correct the inability to style clickable types in iOS and Safari.
   */
  
  button,
  [type="button"],
  [type="reset"],
  [type="submit"] {
    -webkit-appearance: button;
  }
  
  /**
   * Remove the inner border and padding in Firefox.
   */
  
  button::-moz-focus-inner,
  [type="button"]::-moz-focus-inner,
  [type="reset"]::-moz-focus-inner,
  [type="submit"]::-moz-focus-inner {
    border-style: none;
    padding: 0;
  }
  
  /**
   * Restore the focus styles unset by the previous rule.
   */
  
  button:-moz-focusring,
  [type="button"]:-moz-focusring,
  [type="reset"]:-moz-focusring,
  [type="submit"]:-moz-focusring {
    outline: 1px dotted ButtonText;
  }
  
  /**
   * Correct the padding in Firefox.
   */
  
  fieldset {
    padding: 0.35em 0.75em 0.625em;
  }
  
  /**
   * 1. Correct the text wrapping in Edge and IE.
   * 2. Correct the color inheritance from `fieldset` elements in IE.
   * 3. Remove the padding so developers are not caught out when they zero out
   *    `fieldset` elements in all browsers.
   */
  
  legend {
    box-sizing: border-box; /* 1 */
    color: inherit; /* 2 */
    display: table; /* 1 */
    max-width: 100%; /* 1 */
    padding: 0; /* 3 */
    white-space: normal; /* 1 */
  }
  
  /**
   * Add the correct vertical alignment in Chrome, Firefox, and Opera.
   */
  
  progress {
    vertical-align: baseline;
  }
  
  /**
   * Remove the default vertical scrollbar in IE 10+.
   */
  
  textarea {
    overflow: auto;
  }
  
  /**
   * 1. Add the correct box sizing in IE 10.
   * 2. Remove the padding in IE 10.
   */
  
  [type="checkbox"],
  [type="radio"] {
    box-sizing: border-box; /* 1 */
    padding: 0; /* 2 */
  }
  
  /**
   * Correct the cursor style of increment and decrement buttons in Chrome.
   */
  
  [type="number"]::-webkit-inner-spin-button,
  [type="number"]::-webkit-outer-spin-button {
    height: auto;
  }
  
  /**
   * 1. Correct the odd appearance in Chrome and Safari.
   * 2. Correct the outline style in Safari.
   */
  
  [type="search"] {
    -webkit-appearance: textfield; /* 1 */
    outline-offset: -2px; /* 2 */
  }
  
  /**
   * Remove the inner padding in Chrome and Safari on macOS.
   */
  
  [type="search"]::-webkit-search-decoration {
    -webkit-appearance: none;
  }
  
  /**
   * 1. Correct the inability to style clickable types in iOS and Safari.
   * 2. Change font properties to `inherit` in Safari.
   */
  
  ::-webkit-file-upload-button {
    -webkit-appearance: button; /* 1 */
    font: inherit; /* 2 */
  }
  
  /* Interactive
     ========================================================================== */
  
  /*
   * Add the correct display in Edge, IE 10+, and Firefox.
   */
  
  details {
    display: block;
  }
  
  /*
   * Add the correct display in all browsers.
   */
  
  summary {
    display: list-item;
  }
  
  /* Misc
     ========================================================================== */
  
  /**
   * Add the correct display in IE 10+.
   */
  
  template {
    display: none;
  }
  
  /**
   * Add the correct display in IE 10.
   */
  
  [hidden] {
    display: none;
  }

网站标题图标

使用方法一：把 ico 图标文件命名为 favicon.ico ,放在网站根目录下，网页会自动获取 ico 图标。

使用方法二：在网页中使用 link 标签自行引入 ico 文件。

html

<link rel="shortcut icon" type="images/x-icon" href="favicon.ico">

② favicon 图标的制作

在线工具 http://www.ico51.cn/
在线工具 http://www.bitbug.net/

版心

固定宽度
水平居中

css

.container {
    margin-left: auto;
    margin-right: auto;
    width: 1190px;
}

7 WEB 字体

7.1 web 字体基本语法

css

/* 声明 web 字体 */
@font-face {
    font-family: 'diyfont';
    src: url('diyfont.eot'); /* IE9兼容模式 */
    src: url('diyfont.eot?#iefix') format('embedded-opentype'), /* IE9 - */
         url('diyfont.woff') format('woff'), /* chrome、firefox opera  safari  IE9+ 最佳格式 */
         url('diyfont.ttf') format('truetype'), /* chrome、firefox、opera、Safari, Android, iOS 4.2+ IE9+*/
         url('diyfont.svg#fontname') format('svg'); /* iOS 4.1- */
}


/* 使用 web 字体 */
.box {
    font-family: "diyfont";
}

字体格式的转换工具：

https://www.fontsquirrel.com/tools/webfont-generator FontSquirrel在线工具
https://www.fontke.com/tool/fontface/ 字客网

字体定制工具：

https://www.iconfont.cn/webfont?spm=a313x.7781068.0.d81ec59f2#!/webfont/index 阿里Web字体
http://www.youziku.com/ 字体库网站
https://www.ziti163.com/webfont/create.aspx 字体网

7.2 字体图标

2 多列布局

① 设置给包裹元素的 CSS 属性（共 8 个属性）

CSS 属性名	含义	值
column-count	列数	数字
column-width	列宽	长度
columns	同时设置列数和列宽	空格分隔两个值
column-gap	列间距	长度
column-rule-style	列分隔线风格	同 border-style
column-rule-color	列分隔线颜色	颜色
column-rule-width	列分隔线宽度	长度
column-rule	列分隔线复合属性	空格分隔两个值

column-count 和 column-width：

哪个属性分出来的列数少，就按照哪一个。

② 设置给子元素的 CSS 属性（共 4 个属性）

CSS 属性名	含义	值
column-span	跨列	none：不跨列，默认值。<br>all：跨所有列
-webkit-column-break-before（了解）	设置元素前面是否断列	auto：自动，默认值。<br>always：必须断列。<br>avoid：必须不断列。
-webkit-column-break-after（了解）	设置元素后面是否断列	auto：自动，默认值。<br/>always：必须断列。<br/>avoid：必须不断列。
-webkit-column-break-inside（了解）	设置元素内部是否断列	auto：自动，默认值。<br/>avoid：必须不断列。

3 伸缩盒布局 Flex

3.1 伸缩容器和伸缩项目

① 概念定义

伸缩容器： 元素设置 display:flex或者display:inline-flex，该元素就称为伸缩容器。

伸缩项目： 伸缩容器的子元素称为伸缩项目。

② 伸缩项目的特点

1. 伸缩项目沿主轴排列（主轴默认横向），不会脱离文档流
2. 不论元素原来的显示模式是什么，变为伸缩项目之后，具有自己的显示特点：
   ① 不存在外边距的塌陷和合并，默认宽高被内容撑开
   ② 宽高内外边距都可以设置，不会被父元素当成文本

3.2 设置主轴方向和换行方式

主轴： 伸缩项目沿着主轴排列，主轴的默认方向是从左到右。

侧轴： 与主轴垂直的是侧轴。

① 设置主轴方向

给伸缩容器设置CSS属性 flex-direction 可以修改主轴方向，该属性的值如下：

row				水平从左到右
row-reverse		水平从右到左
column			竖直从上到下
column-reverse	竖直从下到上

② 设置换行方式

给伸缩容器设置CSS属性flex-wrap 可以修改换行方式，该属性值如下：

nowrap			不换行
wrap			自动换行
wrap-reverse	换行并翻转

③ 同时设置主轴方向和换行方式

flex-flow 可以同时设置主轴方向和换行方式，是 flex-direction 和 flex-wrap 的复合属性。

3.3 设置伸缩项目在主轴上的对齐方式

给伸缩容器设置CSS属justify-content，可以调整伸缩项目在主轴上的对齐方式，该属性的值如下：

flex-start				主轴起点对齐，默认值
flex-end				主轴终点对齐
center					居中对齐
space-between			两端对齐，两端无间距
space-around			两端间距是中间间距一半
space-evenly			两端间距与中间间距相等

3.4 设置伸缩项目在侧轴上的对齐方式

① 一条主轴线（伸缩项目在主轴上不换行）

给伸缩容器设置CSS属性 align-items，该属性的值如下：

stretch		伸缩项目在侧轴方向拉伸（前提：不设置侧轴方向对应的长度）
flex-start	侧轴起点
flex-end	侧轴终点
center		居中
baseline	基线

② 多条主轴线（伸缩项目在主轴上发生换行）

给伸缩容器设置CSS属性 align-content，该属性的值如下：

stretch					伸缩项目在侧轴方向拉伸,默认
flex-start				侧轴起点对齐，默认值
flex-end				侧轴终点对齐
center					居中对齐
space-between			两端对齐，两端无间距
space-around			两端间距是中间间距一半
space-evenly			两端间距与中间间距相等

3.5 伸缩项目的伸缩性

① 伸缩项目在主轴上的长度 flex-basis

如果设置了 flex-basis，伸缩项目在主轴上的长度就按照 flex-basis，与主轴方向对应的 width 或者 heihgt 将不生效。

flex-basis 的默认值是 auto，表示 flex-basis 不起作用，主轴方向的长度仍然按照 width 或者 height 的设置。

② 扩展比率 flex-grow

伸缩项目扩展的前提：

1. 伸缩容器在主轴方向有富余的空间
2. 伸缩项目的扩展比率flex-grow不能是0

伸缩项目扩展的规则：

css

			  原来的主轴长度  扩展比率    瓜分比重
.item01         100            1        1/10     100+400*1/10即100+40
.item02         200            6        6/10     100+400*6/10即200+240
.item03         300            3        3/10     100+400*3/10即300+120

富余空间： 400
分母： 1+6+3=10

③ 收缩比率 flex-shrink

伸缩项目收缩的前提：

1. 伸缩容器在主轴上的长度不够，小于所有伸缩项目的主轴长度和
2. 不能换行
3. 伸缩项目的收缩比率不能是0，默认值是 1

伸缩项目收缩的规则：

css

			原来的主轴长度    收缩比率    瓜分比重
.item01         100            5        500/1700     100-100*5/17
.item02         200            3        600/1700     200-100*6/17
.item03         300            2        600/1700     300-100*6/17

亏空长度： 100
分母：    100*5 + 200*3 + 300*2 = 1700

④ flex 复合属性

css

flex: grow shrink basis

css

flex: 1 1 0;
flex: 0 0 auto;
flex: 0 1 auto;

如果缩写为 flex: 1 , 则其计算值为 1 1 0%
如果缩写 flex: auto , 则其计算值为 1 1 auto
如果flex: none , 则其计算值为0 0 auto
如果 flex: 0 auto 或者 flex: initial , 则其计算值为0 1 auto，即 flex 初始值

3.6 伸缩项目排序

给伸缩项目设置 order 属性，属性值是数字，值越大排序越靠后，可以是负值。

3.7 单独设置伸缩项目在侧轴上的对齐方式

给伸缩项目设置 align-self ，该属性的值：

auto： 	   按照伸缩容器 align-items 的设置,默认值
stretch		伸缩项目在侧轴方向拉伸
flex-start	侧轴起点
flex-end	侧轴终点
center		居中
baseline	基线

3.8 伸缩盒相关 CSS 属性总结

① 设置给伸缩容器的属性

CSS 属性名	含义	值
display	设置伸缩容器	flex<br>inline-flex
flex-direction	主轴方向	row<br>row-reverse<br>column<br>column-reverse
flex-wrap	换行方式	nowrap<br>wrap<br>wrap-reverse
flex-flow	同时设置主轴方向和换行方式
justify-content	主轴上的对齐方式	flex-start<br>flex-end<br>center<br>space-between<br>space-around<br>space-evenly
align-items	侧轴上的对齐方式	stretch<br>flex-start<br>flex-end<br>center<br>baseline
align-content	侧轴上的对齐方式（发生换行）	stretch<br>flex-start<br/>flex-end<br/>center<br/>space-between<br/>space-around<br/>space-evenly

② 设置给伸缩项目的属性

CSS 属性名	含义	值
flex-basis	伸缩项目的主轴长度	auto，长度
flex-grow	扩展比率	数字，默认值0
flex-shrink	收缩比率	数字，默认值1
flex	复合属性
order	排序	数字
align-self	单独设置侧轴对齐

作业

1. 等分布局
2. Flex布局页面

Day16 CSS3 课堂笔记

1 回顾

1. 多列布局
   1.1 设置给多列容器（包裹元素）
       column-count
       column-width
       columns
       column-gap
       column-rule-style
       column-rule-color
       column-rule-width
       column-rule
   1.2 设置给子元素
       column-span
       -webkit-column-break-before
       -webkit-column-break-after
       -webkit-column-break-inside
       
 2 伸缩盒布局（弹性盒、Flex）
   2.1 伸缩容器和伸缩项目
   2.2 主轴方向和换行方式
   2.3 主轴对齐
   2.4 侧轴对齐
       一行
       多行
   2.5 伸缩项目伸缩性
   2.6 伸缩项目排序
   2.7 伸缩项目单独设置侧轴对齐
   2.8 属性总结
       设置给伸缩容器：
       	display
       	flex-direction
       	flex-wrap
       	flex-flow
       	justify-content
       	align-items
       	align-content
       设置给伸缩项目
        flex-basis
        flex-grow
        flex-shrink
        flex: grow shrink basis
        order
        align-self

2 媒体查询和响应式布局

2.1 视口 viewport

① 什么是视口

1. 视口是浏览器的可视区域
2. 视口是根元素的包含块

② 移动端视口和PC端视口

PC端视口： 视口宽度默认等于屏幕宽度，不会进行缩放
移动端视口： 默认会进行缩放，视口宽度会缩放为980px

③ 完美视口设置

什么是完美视口：

视口宽度等于屏幕宽度不进行缩放就是完美视口！

如何设置为完美视口：

html

PC端浏览器视口默认就是完美视口
移动端浏览器可以在网页中设置meta元信息实现完美视口

html

<meta name="viewport" contnet="width=device-width,initical-scale=1.0">

2.2 媒体查询基本语法

① 媒体类型

all
screen
print
speech

css

@media screen {
     h1 {
         text-align: center;
     }

     body {
         background: #099;
     }
}

② 媒体特性

width			视口宽度
max-width		最大视口宽度
min-width		最小视口宽度

device-width		屏幕宽度
max-device-width	最大屏幕宽度
min-device-width	最小屏幕宽度

css

@media (device-width:800px) {
      body {
          background: #900;
      }
}

③ 运算符

only		仅仅，用于媒体特性
not			否定，用于媒体特性
and			并且
,			或者

css

@media (min-width:600px) and (max-width:800px) {
     body {
         background: #900;
     }
}

@media (max-width:400px),(min-width:1000px) {
    body {
        background: #009;
    }
}

2.3 媒体查询在 CSS 中使用

① 第一种使用方式：媒体查询与CSS代码写在一起(推荐使用)

css

body {
    margin: 0;
    background: #333;
}

h1 {
    text-align: center;
    font-size: 4em;
    color: #fff;
}

/* 视口宽度大于等于 1000px */
@media (min-width: 1000px) {
    body {
        background: #090;
    }
}

@media (min-width: 1000px) {
    h1 {
        text-decoration: wavy underline;
    }
}

② 第二种使用方式: link 标签的 media 属性 (不推荐)

html

<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="min1000.css" media="(min-width:1000px)">

2.4 响应式布局

① 阈值（断点）

常见方案一：

640px
1080px

常见方案二：

768px
992px
1200px

② 移动优先方案（媒体查询的设置）

css

.container {
    width: 100%;
    height: 200px;
    background: #900;
}

/* 小屏幕 */
@media (min-width:768px) {
    .container {
        margin-left: auto;
        margin-right: auto;
        width: 750px;
        background: #090;
    }
}

/* 中等屏幕 */
@media (min-width: 992px) {
    .container {
        width: 970px;
        background: #099;
    }
}

/* 大屏幕 */
@media (min-width: 1200px) {
    .container {
        width: 1170px;
        background: #990;
    }
}

③ 响应式图片

方案一：多个图片控制隐藏显示

css

<!--html样式-->
.small-logo {
     display: block;
}

.middle-logo {
    display: none;
}

.large-logo {
    display: none;
}

@media (min-width: 640px) {
     .small-logo {
         display: none;
     }

     .middle-logo {
         display: block;
     }

     .large-logo {
         display: none;
     }
}

@media (min-width: 1024px) {
    .small-logo {
        display: none;
    }

    .middle-logo {
        display: none;
    }

    .large-logo {
        display: block;
    }
}

方案二：背景图

css

/*css样式*/
.logo {        
    background-image: url(./images/Brand-S.png);
}

@media (min-width: 640px) {
    .logo {
        background-image: url(./images/Brand-M.png);
    }
}

@media (min-width: 1024px) {
     .logo {
         background-image: url(./images/Brand-L.png);
     }
}

方案三使用 picture 标签

html

<!-- （html样式）哪个source先满足条件就先加载哪个图片，后面的将不再加载 -->
<picture>
    <source srcset="./images/Banner-S.png" media="(max-width:640px)">
    <source srcset="./images/Banner-M.png" media="(max-width:1024px)">
    <img src="./images/Banner-L.png" alt="">
</picture>

方案四使用 img 标签的 srcset 属性

html

<img srcset="./images/Banner-S.png 640w,
             ./images/Banner-M.png 1024w, 
             ./images/Banner-L.png 1440w"
     src="./images/Banner-L.png" 
     alt="">
注：图片地址后面的长度是图片的宽度，不是视口的宽度，父元素此时默认100%，与视口同宽，视口小于640时，选择小图，以此类推。  src="./images/Banner-L.png"表示默认情况下（即大于1440时），也用大图，防止用户屏幕过大。

④ 响应式导航

3 BFC

3.1 什么是 BFC

Block Formatting Context 简称 BFC，中文翻译为 块级格式上下文。

① W3C 中对 BFC 的定义

Floats, absolutely positioned elements, block containers (such as inline-blocks, table-cells, and table-captions) that are not block boxes, and block boxes with 'overflow' other than 'visible' (except when that value has been propagated to the viewport) establish new block formatting contexts for their contents.

译文：
浮动、绝对定位元素、不是块盒子的块容器(如inline-blocks、table-cells和table-captions)，以及overflow属性的值除visible以外的块盒(除非该值已传播到视口)，将为其内容建立新的块格式化上下文。

https://www.w3.org/TR/CSS22/visuren.html#block-formatting

② MDN 上对 BFC 的定义

A block formatting context is a part of a visual CSS rendering of a web page. It's the region in which the layout of block boxes occurs and in which floats interact with other elements.

译文：
块格式化上下文（Block Formatting Context，BFC） 是Web页面的可视CSS渲染的一部分，是块盒子的布局过程发生的区域，也是浮动元素与其他元素交互的区域。

https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Block_formatting_context

https://developer.mozilla.org/zh-CN/docs/Web/Guide/CSS/Block_formatting_context

③ 到底什么是 BFC

首先，BFC 的意思是 Block Formatting Context ，即块级格式上下文。然后，当元素满足了某些条件，我们认为该元素创建了 BFC。创建了 BFC 的元素我们可以把他看做是一个独立的容器，容器内的元素不论如何布局都不会影响到外面。

3.2 创建 BFC 的方式

根元素。
浮动元素。
绝对定位或固定定位的元素。
行内块元素。
表格单元格（th、td）、表格行（tr）、表格标题（caption）、table、thead、tbody、tfoot。
overflow 的值不为 visible 的块元素。
伸缩项目。
多列容器。
column-span 为 all 的元素始终会创建一个新的BFC，即使该元素没有包裹在一个多列容器中。

3.3 创建 BFC 可以解决的问题

① 清除子元素浮动的影响

给浮动元素的父元素创建 BFC，清除掉子元素浮动的影响。

② 解决外边距塌陷

给父元素创建 BFC，第一个和最后一个子元素的外边距不会塌陷。

CSS ​

概述 ​

样式引入 ​

样式继承与自带样式 ​

基本参数 ​

长度单位 ​

颜色设置 ​

颜色名方式 ​

rgb ​

hex ​

rgba ​

hsl ​

hsla ​

浏览器私有前缀 ​

基本样式 ​

文本设置 ​

字体样式 ​

样式参数 ​

使用案例 ​

文本样式 ​

样式参数 ​

使用案例 ​

背景设置 ​

样式参数 ​

使用案例 ​

background-position ​

background-attachment ​

多背景图 ​

光标设置 ​

列表样式 ​

表格样式 ​

样式选择器 ​

基本选择器 ​

组合选择器 ​

伪类选择器 ​

动态伪类选择器 ​

目标伪类选择器 ​

语言伪类选择器 ​

UI元素伪类选择器 ​

结构伪类选择器 ​

否定伪类选择器 ​

属性选择器 ​

伪元素选择器 ​

盒子模型 ​

元素的显示模式 ​

块级元素 block ​

行内元素 inline ​

行内块元素 inline-block ​

盒子模型的构造 ​

CSS设置区域宽高 ​

元素的默认宽高 ​

盒子内边距 ​

CSS 属性 ​

使用案例 ​

盒子边框 ​

样式参数 ​

举例说明 ​

盒子外轮廓 ​

盒子外边距 ​

css 属性 ​

使用案例 ​

margin 塌陷 ​

margin 合并 ​

其他属性 ​

内容溢出 ​

隐藏元素 ​

盒子大小 ​

盒子阴影 ​

不透明度 opacity ​

页面布局 ​

浮动 ​

特点 ​

产生的影响 ​

对后面兄弟元素的影响 ​

对父元素的影响 ​

行内/行内块布局 ​

居中 ​

空白问题 ​

元素之间的空白（左右） ​

底部的空白（图片的幽灵空白） ​

CSS

概述

样式引入

样式继承与自带样式

基本参数

长度单位

颜色设置

颜色名方式

rgb

hex

rgba

hsl

hsla

浏览器私有前缀

基本样式

文本设置

字体样式

样式参数

使用案例

文本样式

样式参数

使用案例

背景设置

样式参数

使用案例

background-position

background-attachment

多背景图

光标设置

列表样式

表格样式

样式选择器

基本选择器

组合选择器

伪类选择器

动态伪类选择器

目标伪类选择器

语言伪类选择器

UI元素伪类选择器

结构伪类选择器

否定伪类选择器

属性选择器

伪元素选择器

盒子模型

元素的显示模式

块级元素 block

行内元素 inline

行内块元素 inline-block

盒子模型的构造

CSS设置区域宽高

元素的默认宽高

盒子内边距

CSS 属性

使用案例

盒子边框

样式参数

举例说明

盒子外轮廓

盒子外边距

css 属性

使用案例

margin 塌陷

margin 合并

其他属性

内容溢出

隐藏元素

盒子大小

盒子阴影

不透明度 opacity

页面布局

浮动

特点

产生的影响

对后面兄弟元素的影响

对父元素的影响

行内/行内块布局

居中

空白问题

元素之间的空白（左右）

底部的空白（图片的幽灵空白）