CSS CSS3
文章目录 二、选择器 三、盒子模型 四、浮动 五、定位 六、动态效果 七、弹性布局 八、移动端
一、基础 CSS 全称为 Style ，层叠样式表。网页实际上是一个多层的结构，通过 CSS 可以分别为网页的每一个层来设置样式，而最终我们能 看到只是网页的最上边一层。这些层中，最底下的一层称为文档流，文档流是网页的基础，我们所创建的元素默认都是在文档流中进行排列。对于我们来元素主要有两个状态：在文档流中的和不在文档流中的（脱离文档流）。 对比项块级元素行级元素
场景
主要对页面进行布局
主要用来包裹文字
空间
块元素会在页面中独占一行（自上向下垂直排列）
行内元素与其它行内元素共占一行（自左向右水平排列并会自动换行）
宽高
可控，默认铺满整行
不可控，只占自身的大小
默认宽度
父元素的全部（会把父元素撑满）
被内容撑开
默认高度
被内容撑开（子元素）
被内容撑开
互转
1.1 引用
优先级：外部样式 < 内部样式 < 内联样式
<div>行间样式测试div><div style="color: olive;width: 100px;border: 1px solid blue;">行间样式测试div>
<head><style type="text/css">p{background-color: #eeeeee;font-size: 18px;font-style: italic;}style>
head>
<body><p>内部样式测试p>
body>
<head><link rel="stylesheet" type="text/css" href="style.css">
head>
<body><span>外部样式测试span>
body>
span {font-size: 15px;color: rgba(65, 206, 110, 0.79);
}
<head><style type="text/css">@import "style.css"style>
head>
<body><div>导入外部样式测试div><span class="box">导入外部样式测试span>
body>
.box {font-weight: bold;font-size: 16px;
}
对比项外部样式导入外部样式
加载范围
link是XHTML标签，除了加载CSS外，还可以定义RSS等其它事务
@属于CSS范畴，只能加载CSS
加载时机
在页面载入时同时加载
页面完全载入以后加载
兼容问题
HTML标签，无兼容问题
@是在CSS2.1提出的，低版本的浏览器不支持
JS交互
link支持使用控制DOM去改变样式
@不支持
1.2 单位 单位说明
像素
屏幕实际上是由一个一个的小点点（1px）构成，不同屏幕的像素大小是不同的，像素越小的屏幕显示的效果越清晰。
百分比
相对于其父元素属性的百分比，设置百分比可以使子元素跟随父元素的改变而改变。
em
相对于元素的字体大小来计算的，1em = 1 font-size，em会根据字体大小的改变而改变。
rem
相对于根元素的字体大小来计算的
单位说明
RGB值
通过三种颜色的不同浓度来调配出不同的颜色，每一种颜色的范围在 0 - 255 (0% - 100%) 之间。
RGBA
就是在rgb的基础上增加了一个a表示不透明度，1表示完全不透明 0表示完全透明 .5半透明。
十六进制的RGB值
语法：#红绿蓝，颜色浓度通过 00-ff；如果颜色两位两位重复可以进行简写 # --> #abc。
HSL值 & HSLA值
H 色相(0 - 360)；S 饱和度，颜色的浓度 0% - 100%；L 亮度，颜色的亮度 0% - 100%；A 不透明度。
1.3 字体
列表中展示的属性值仅为举例，完整列表请参考 Zeal或 W3C。
属性说明设置
font-size
字号
10px 固定值尺寸像素、75% 基于包含块字号的百分比
font-
字体
"Segoe UI",,sans-serif 从左到右依次匹配第一个浏览器支持的字体，否则使用默认
font-style
样式
：正常、：斜体（特殊字体使用 元素强制使其倾斜）
font-
加粗
、、bold、
font-
变体
small-caps 字母大写但大小比常规的要小
color
颜色
通过颜色单位指定
语法 font: [font-style] [font-] [font-] font-size[/line-] font-;实例 font: small-caps 18px/1.5 宋体;顺序不可颠倒，font-size和 font-必填 当有特殊的字体效果渲染需求，浏览器已有字体不能满足时，可以自定义字体。通过 font-face将服务器中的字体直接提供给用户去使用：
@font-face {/* 指定字体的名字 */font-family:'myfont' ;/* 服务器中字体的路径 */src: url('./font/ZCOOLKuaiLe-Regular.ttf') format("truetype");
}
定义后的字体可以直接通过 font-进行引用：
p{font-family: myfont,sans-serif;
}
1.4 文本 属性说明设置
line-
行高
10px 固定值尺寸像素、1.5 字体大小的倍数
text-
修饰
(下划线)、line-(贯穿线)、(上划线)
text-align
水平对齐
left、、right、（两端对齐）
-align
垂直对齐
（基线对齐）、top、、
text-
转换
(单词首字母大写)、(全部大写)、(全部小写)
text-
缩进
10px 首行缩进10个像素、2em 首行缩进2个字符
text-
阴影
2px 3px 5px #bfa 水平偏移距离 垂直偏移距离 [模糊距离] [颜色]
word-wrap
换行
| 单词不拆分直到下个换行、自动拆分换行
word-break说明
使用浏览器默认的换行规则
break-all
允许在单词内换行
keep-all
只能在半角空格或连字符处换行
<p class="normal">This is a veeeeeeeeeeeeeery long word.p><p class="break">This is a veeeeeeeeeeeeeery long word.p><p class="keep">This is a veeeeeeeeeeeeee-ry long word.p>
<style>p {width: 200px;border: 1px solid #bfa;margin-left: 100px;white-space: nowrap;overflow: hidden;}.clip {text-overflow: clip;}.ellipsis {text-overflow: ellipsis;}style><p class="clip">用于匹配父元素中兄弟子元素，可以用于子元素非连续的情况用于匹配父元素中兄弟子元素，可以用于子元素非连续的情况p><p class="ellipsis">用于匹配父元素中兄弟子元素，可以用于子元素非连续的情况用于匹配父元素中兄弟子元素，可以用于子元素非连续的情况p>
1.5 背景 属性说明
-color
设置背景颜色 /color
-image
设置背景图片 url(‘./img/some.png’)
-
背景图像铺排方式 (默认)/no-/-x/-y
用两个表示方位的词 top | left | right | | 来设置背景图片的位置，如果只写一个则第二个默认是 。也通过偏移量来指定背景图片的位置：-50px 300px。 -clip 用来规定背景（包含背景图像和背景色）的绘制区域，- 设置背景图像的起始位置，这两个属性的取值相同；-box：-clip 的默认值，用来指示背景会覆盖到边框下面；-box：- 的默认值，用来指示背景只会覆盖到内边距；-box：用来指示背景仅会覆盖到内容区； 可以 230px 特别指定宽高，也可以只指定一个则另一个会自动根据原图片比例进行调整；cover：图片的比例不变，将元素铺满（图片可以能展示不全）；：图片比例不变，将图片在元素中完整显示（背景可能铺不满）； 默认值，背景图片会跟随元素移动。fixed 背景会固定在页面中，不会随元素移动。 所有背景相关的样式都可以通过 来设置并且该样式没有顺序要求，也没有哪个属性是必须写的；-size必须写在 -的后边，并且使用/隔开 -/-size；-、-clip 两个样式 ，orgin 要在 clip的前边； 1.6 边框 属性说明
-
设置边框角的弧度，可以通过 -top-left | top-rigth | -left | -right- 分别设置
box-
设置边框的阴影，水平偏移距离 垂直偏移距离 [模糊距离] [阴影的尺寸] [颜色] 举例 2px 2px 2px 1px rgba(0, 0, 0, 0.2)
-image
设置边框的图片，图片 向内偏移距离 宽度 图像区域超出边框的距离 重复效果
1.7 渐变 通过渐变可以设置一些复杂的背景颜色，可以实现从一个颜色向其他颜色过渡的效果渐变是图片，需要通过 -image来设置线性渐变颜色沿着一条直线发生变化，径向渐变则呈现放射性的效果 可以通过 to top | right | | left 或其组合的方式 to top left 来指定，也可以通过 45deg 角度或 . 圈数来指定 指的是每种颜色发生渐变的范围：哪个位置开始渐变、哪个位置到达两种颜色渐变的中部、哪个位置结束渐变-image: -(45deg, 0% 10%, 30%, #bfa 50% 60%, 75%, 90% 100%);从左下角到右上角，0-10%保持 纯色，10%-50%发生 ->#bfa渐变并在 30%处到达中值，接着 50%-60%保持 #bfa纯色，60%-90%发生 #bfa->渐变并在 75%处到达中值，最后 90%-100%保持 纯色
还可以通过 -- 设定重复排列的线性渐变 size 可以通过 | 形状或 -side | - | -side | - 渐变到边界来指定，也可以直接通过长度单位来指定 则是通过 to top | right | | left 或其组合的方式 to top left 来指定-image: -(200px 200px at top left, , rgba(130, 165, 249, 0.497));从左上角的位置渐变出一个半径为 200px的圆
同样的，还可以通过 -- 设定重复排列的径向渐变 1.8 默认样式
浏览器都会为元素设置一些默认样式，其存在会影响到页面的布局，通常情况下需要清除或统一。
reset.css 直接去除了浏览器的默认样式.css 对默认样式进行了统一 二、选择器 2.1 样式选择器 选择器说明
用来匹配所有的标签
标签选择器
针对指定的标签
类选择器
用来选择class命名的标签
id选择器
用来选择用id命名的标签
派出选择器
根据上下文确定要选择的标签
<body><p>全匹配：p标签p><strong>全匹配：strong标签strong><span>标签匹配：span标签span><div class="wrapper">类匹配：div标签div><p id="content">id匹配：p标签p><ul><li>li01li><li>li01li>ul><ul class="list"><li>li02li><li>li02li>ul>
body>
/* 1. * */
* {color: red;
}
/* 2. 标签选择器 */
span {display: block;margin-right: 20px;border: 1px solid gray;
}
/* 3. 类选择器 */
.wrapper {color: aqua;
}
/* 4. id选择器 */
#content {color: pink;
}
/* 5. 派出选择器：类list下的li标签 */
.list li {color: blue;
}
<body><h1>h1h1><div class="box">class boxdiv><p>pp>
body>
h1, .box, p {color: red;
}
p {width: 100px;background-color: #999999;
}
<body><div class="extend">这是一段<span>继承测试span>div><div class="override">这是一段<span>覆写测试span>div>
body>
.extend {font-size: 28px;
}.extend span {font-weight: bold;
}
.override {color: red;
}.override span {color: blue;
}
样式权重
!
10000
内联样式
1000
id选择器
100
类、伪类选择器
10
标签选择器
<head><link rel="stylesheet" type="text/css" href="style.css"><style type="text/css">p {color: blue;}strong {color: blue!important;}style>
head>
<body><strong style="color: yellow;">1. !important > 内联样式strong><p style="color: yellow;">2. 内联样式 > 内部样式p><p>3. 内部样式 > 外部样式p><div id="content"><div class="main_content"><h2>4. 复杂情况需依次累加计算权重h2> div>div>
body>
p {color: red;
}/* 复杂情况下的优先级判断 */
#content div.main_content h2 {/* 权重：100+1+10+1=112 */color: red;
}#content .main_content h2 {/* 权重：100+10+1=111 */color: blue;
}
2.2 伪类选择器
伪类：专门用来表示元素的一种特殊状态
伪类选择器说明
a:link
未访问状态
a:
已访问状态
a:hover
鼠标悬停状态
a:
用户激活（单击）
input:
表单禁用时触发样式
input:
表单启用时触发样式
input:
表单勾选时触发样式
input:focus
表单获得焦点时触发样式
:first-child
第一个子元素
:last-child
倒数第一个子元素
:nth-child(n)
正数第N个子元素
:nth-last-child(n)
倒数第N个子元素
:nth-child(2n)
偶数
:nth-of-type(n)
匹配父元素中兄弟子元素，可以用于子元素非连续的情况
:nth-last-of-type(n)
倒数
:only-child
父元素中仅有它一个子元素（不允许其它元素存在）
:only-of-type
父元素中仅有它一个这样类型的子元素（不允许同类型元素出现）
:empty
没有元素，包含文本元素，即查找空元素
<body><a href="#">多变的伪类选择器a><input type="text"><ul><li>aaali><li>bbbli><li>cccli>ul>
body>
a:hover {color: yellow;
}
input:focus {outline: 1px solid #f00;
}
ul li:first-child {color: red;
}
ul li:nth-child(2) {color: green;
}
ul li:last-child {color: blue;
}
2.3 属性选择器 写法说明
属性名
包含有指定属性名的元素
属性名=值
属性名的值为指定值的元素
属性名~=值
属性名的值包含指定值的元素
属性名^=值
属性名以指定值开头的元素
属性名$=值
属性名以指定值结尾的元素
<body><div class="content" title="内容">content0div><div class="content">content1div><form><input type="text" name="account"><input type="text" name="usr">form><div class="box public">publicdiv><div class="box private">privatediv>
body>
div.content[title] {font-weight: bolder;
}
input[name=usr] {background-color: #eee;
}
div[class~=public] {font-size: 30px;
}
2.4 关系选择器 选择器说明
空格
后代选择器
只选择儿子元素
只选择兄弟元素
<body><h1><strong>关系1strong><span><strong>关系2strong>span>h1><ul><li>aaali><li>bbbli><li>cccli>ul>
body>
/* 后代选择器 */
h1 strong {color: red;
}
/* 儿子选择器 */
h1>strong {background-color: black;
}
/* 兄弟选择器 */
ul li+li {list-style-type: none;color: red;
}
2.5 伪元素选择器 css引入伪类和伪元素概念是为了 格式化文档树以外的信息。伪类用于当已有元素处于某个状态时，为其添加对应的样式，这个状态是根据用户行为而动态改变的。它只有处于dom树无法描述的状态时才能为元素添加样式，所以将其称为伪类。伪元素用于创建一些不在文档树中的元素，并为其添加样式。比如说，我们可以通过 :: 来在一个元素前增加一些文本，并为这些文本添加样式。虽然用户可以看到这些文本，但是这些文本实际上不存在于文档树中。 伪元素和伪类都不会出现在源文档或文档树中；伪类允许出现在选择器的任何位置，而一个伪元素只能跟在选择器的最后一个简单选择器后面；伪元素名和伪类名都是大小写不敏感的有些伪类是互斥的，而其它的可以同时用在一个元素上。（在规则冲突的情况下，常规层叠顺序决定结果） 伪元素说明
::
在元素之前添加内容
::after
在元素之前添加内容
::first-
在元素第一个字母前添加内容
::first-line
在元素第一行前添加内容
::
::
::
<body><p>伪类用于当已有元素处于某个状态时，为其添加对应的样式，这个状态是根据用户行为而动态改变的。它只有处于dom树无法描述的状态时才能为元素添加样式，所以将其称为伪类。p>
body>
p::before {content: "Today is a good day!"
}
p::first-letter {font-size: 30px;font-family: 黑体;color: blue;
}
p::first-line {text-decoration: underline;
}
p::after {content: ".....";
}
三、盒子模型 CSS 将页面中的所有元素都设置为了一个矩形的盒子，每个盒子由 （外边距），（边框线），（内边距）和 （内容）组成。将元素设置为矩形的盒子后，对页面的布局就变成将不同的盒子摆放到不同的位置。
属性值说明
none
不显示元素
block
块显示，在元素前后设置换行符，将行级标签转换为块级标签
行显示，将块级标签转换为行级标签
-block
将块级或行级标签转换为行内块级标签
属性值说明
默认值，元素在页面中正常显示
元素在页面中隐藏 不显示，但是依然占据页面的位置
属性值说明
第一个值
水平偏移量 设置阴影的水平位置 正值向右移动 负值向左移动
第二个值
垂直偏移量 设置阴影的水平位置 正值向下移动 负值向上移动
第三个值
阴影的模糊半径
第四个值
阴影的颜色
div {width: 100px;height: 100px;padding: 5px;border: 7px solid #fff;margin: 10px;// box-sizing: xxx;}
-box（默认值）：宽高 = 内容区的宽高
-box：宽高 = 内容区 + 内边距 + 边框 的宽高
3.1 组成
.box1{width: 200px;height: 200px;background-color: #bfa;
}
常用的有三个属性 style|width|color 如 : 10px red solid；可以通过如 -color: red 分别指定，也可以通过 top|right||left 指定每边如 -left: 10px red solid，甚至可以通过如 -left-width: 10px 精细到每边的每种属性；还可以通过如 -: |% 为盒子设置圆角，更精细化的设置方式是 -(top-left|top-right|-right|-left)-； 用来设置元素的轮廓线，用法和一模一样，轮廓和边框不同的点，就是轮廓不会影响到可见框的大小；盒子有四边和四角，书写样式时会触发简写模式，如 -width: 10px 30px 表示上下边10px、左右边30px； 传值边角
四个值
(上、右、下、左)
(左上、右上、右下、左下)
三个值
(上、左右、下)
(左上、右上/左下、右下)
两个值
(上下、左右)
(左上/右下、右上/左下)
一个值
(上下左右)
(左上/右下/右上/左下)
一共有四个方向的内边距：-top|right||left；内边距的设置会影响到盒子的大小，背景颜色会延伸到内边距上；盒子的可见框大小由内容区、内边距和边框共同决定；内边距的简写属性规则和 -width 一样； 不会影响盒子可见框的大小，但是会影响盒子的位置和盒子的实际占用空间共有四个方向的外边距（可以设置负值即往相反的方向移动）： 方向说明
-top
上外边距，设置一个正值，元素会向下移动
-right
默认情况下不会产生任何效果
-
下外边距，设置一个正值，其下边的元素会向下移动
-left
左外边距，设置一个正值，元素会向右移动
元素在页面中是按照自左向右的顺序排列的，所以默认情况下如果我们设置的左和上外边距则会移动元素自身，而设置下和右外边距会移动其他元素；简写方式和规则和 -width 一样； 行内元素不支持设置宽度和高度行内元素可以设置 ，但是垂直方向 不会影响页面的布局行内元素可以设置 ，但是垂直方向 不会影响页面的布局行内元素可以设置 ，但是垂直方向 不会影响页面的布局
.s1{background-color: yellow;width: 100px;height: 100px; padding: 50px; border: 20px solid red; margin: 30px;
}
3.2 元素的布局 元素在父元素中水平方向的位置由 -left + -left + -left + width + -right + -right + -right 共同决定且 和必须等于父元素内容区的宽度。当等式不成立时浏览器会根据设置的 auto 情况对 width | -left | -right 进行自动调整，这种行为称为 过渡约束。 auto 场景说明
无 auto
自动调整 -right 值以使等式满足
1 个 auto
自动调整为 auto 的那个值以使等式成立
width: auto
宽度会调整到最大，外边距都是 0
width: XXpx; : 0 auto
元素在其父元素中水平居中
父元素在没有设置高度时，默认情况下被内容撑开。子元素是在父元素的内容区中排列的，如果子元素的大小超过了父元素，则子元素会从父元素中溢出。使用 属性来设置父元素如何处理溢出的子元素： 属性值说明
默认值 子元素会从父元素中溢出，在父元素外部的位置显示
溢出内容将会被裁剪不会显示
生成两个滚动条，通过滚动条来查看完整的内容
auto
根据需要生成滚动条
3.3 垂直外边距的折叠
相邻的垂直方向外边距会发生折叠现象。
兄弟元素间的相邻垂直外边距会取两者之间的较大值（两者都是正值）。如果相邻的外边距一正一负，则取两者的和；如果相邻的外边距都是负值，则取两者中绝对值较大的。兄弟元素之间的外边距的重叠，对于开发是有利的，所以我们不需要进行处理。 父子元素间相邻外边距，子元素的会传递给父元素（上外边距），这时外边距的折叠会影响到页面的布局，需要进行处理。如想要通过设置外边距让子元素与父元素的下边框对齐，可以通过以下方式解决：
<style>.outer {width: 200px;height: 200px;background-color: #bfa;}.outer::before {content: '';display: table;}.inner {width: 100px;height: 100px;background-color: orange;margin-top: 100px;}
style><div class="outer"><div class="inner">div>
div>
未添加 :: 父子同时下移添加 :: 来隔离父子元素以完成布局
四、浮动 4.1 简介 通过 float: none | left | right 属性可以使一个元素向其父元素的左侧或右侧移动。元素设置浮动以后，会 完全从文档流中脱离，元素下边还在文档流中的元素会自动向上移动，水平布局的等式便不需要强制成立。浮动的主要作用就是让页面中的元素可以水平排列，以制作一些水平方向的布局。
div {font-size: 30px;height: 100px;width: 100px;float: left;
}
.box1 { background-color: #fba; }
.box2 { background-color: aliceblue; }
.box3 { background-color: aquamarine; }
浮动元素会完全脱离文档流，但默认不会从父元素中移出。浮动元素向左或向右移动时，不会超过它前边的其他浮动元素（依次排列）。如果浮动元素的上边是一个没有浮动的块元素，则浮动元素无法上移。浮动元素不会盖住文字，文字会自动环绕在浮动元素的周围，可以利用浮动来设置 文字环绕图片 的效果。无论块元素或行内元素设置浮动以后都会从文档流中脱离，默认被内容撑开不会独占一行。 4.2 布局
<header>header>
<main><nav>nav><article>article><aside>aside>main>
<footer>footer>
header, main, footer{width: 1000px;margin: 0 auto;
}/* 设置头部 */
header{height: 150px;background-color: silver;
}/* 设置主体 */
main{height: 500px;margin: 10px auto;
}nav, article, aside{float: left;height: 100%;
}/* 设置左侧的导航 */
nav{width: 200px;background-color: yellow;
}/* 设置中间的内容 */
article{width: 580px;background-color: orange;margin: 0 10px;
}/* 设置右侧的内容 */
aside{width: 200px;background-color: pink;
}/* 设置底部 */
footer{height: 150px;background-color: tomato;
}
4.3 高度塌陷 在浮动布局中，父元素的高度默认是被子元素撑开的。当子元素浮动后，其会完全脱离文档流，将会无法撑起父元素的高度。父元素高度丢失以后，其下的元素会自动上移，导致页面的布局混乱。
<div class="outer"><div class="inner">div>
div><div class="box3"">div>
.outer {border: 10px red solid;
}
.inner {width: 100px;height: 100px;background-color: #bfa;float: left;
}
.box3 {width: 200px;height: 200px;background-color:yellow;
}
CSS 中的隐含属性，开启后会为元素开辟 独立的布局区域。元素开启 BFC 后的特点：不会被浮动元素所覆盖、子元素和父元素外边距不会重叠、可以包含浮动的子元素。元素开启 BFC 的方式： 方式说明
float: left;
设置元素的浮动（不推荐）
: -block;
将元素设置为行内块元素（不推荐）
: ;
将元素的设置为一个非 的值
.outer {border: 10px red solid;/* float: left; *//* display: inline-block; *//* overflow: hidden; */
}
IFC的元素会在一行中从左至右排列，在一行上的所有元素会在该区域形成一个行框行宽的高度为包含框的高度，高度为行框中最高元素的高度浮动的元素不会在行框中，并且浮动元素会压缩行框的高度行框的高度容纳不下子元素时，子元素会自动会换下一行显示，并且会产生新行框行框的元素内遵循 text-align和 -align
/* * 1. 在父元素后添加空伪元素并以块元素方式显示以独占一行；* 2. 该块级伪元素清除浮动后，会排列在浮动元素之下；* 3. 因该块级伪元素未脱离文档流，父元素会自动适配其大小；*/
.outer::after {content: '';display: block;clear: both;
}
.clearfix::before, .clearfix::after {content: '';display: table;clear: both;
}
<div class="outer clearfix"><div class="inner">div>
div><div class="box3"">div>
五、定位 定位是一种更加高级的布局手段，通过定位可以将元素摆放到页面的任意位置。使用 : | | | fixed | ; 属性来设置定位。当元素开启了定位以后，可以通过偏移量属性 top | | left | right 来设置元素的位置。 5.1 相对定位 元素开启相对定位以后，如果不设置偏移量元素不会发生任何的变化相对定位是 参照于元素在文档流中的位置进行定位 的相对定位会提升元素的层级相对定位 不会使元素脱离文档流相对定位不会改变元素的性质块还是块，行内还是行内
<div class="box1">1div>
<div class="box2">2div>
<div class="box3">3div>
body{font-size: 60px;
}
div{width: 200px;height: 200px;
}
.box1{background-color: #bfa;
}
.box2{background-color: orange;position: relative;left: 200px;top: -200px;
}
.box3{background-color: yellow;
}
5.2 绝对定位 开启绝对定位后，如果不设置偏移量元素的位置不会发生变化开启绝对定位后，元素会 从文档流中脱离绝对定位会改变元素的性质，行内变成块，块的宽高被内容撑开绝对定位会使元素提升一个层级绝对定位元素是 相对于其包含块进行定位 的 正常情况下包含块就是离当前元素最近的祖先块元素绝对定位的包含块就是 离它最近的开启了定位的 祖先元素如果所有的祖先元素都没有开启定位则 html（根元素、初始包含块）就是它的包含块
<div class="box1">1div>
<div class="box3">3<div class="box2">2div>
div>
body{font-size: 60px;
}
div{width: 200px;height: 200px;
}
.box1{background-color: #bfa;
}
.box2{background-color: orange;position: absolute;left: 200px;top: 200px;
}
.box3{width: 400px;height: 400px;background-color: blanchedalmond;position: relative;
}
5.3 固定定位 固定定位也是一种绝对定位，所以固定定位的大部分特点都和绝对定位一样唯一不同的是固定定位永远 参照于浏览器的视口 进行定位即：固定定位的元素不会随网页的滚动条滚动
<div class="box1">1div>
<div class="box2">2div>
<div class="box3">3div>
body{font-size: 60px;height: 2000px;
}
div{width: 200px;height: 200px;
}
.box1{background-color: #bfa;
}
.box2{background-color: orange;position: fixed;top: 100px;
}
.box3{background-color: yellow;
}
5.4 粘滞定位 粘滞定位和相对定位的特点基本一致，不同的是粘滞定位可以在元素 到达某个位置时将其固定IE 浏览器不支持，如需兼容请考虑其它方案
<div class="box1">1div>
<div class="box2">2div>
<div class="box3">3div>
body{font-size: 60px;height: 2000px;
}
div{width: 200px;height: 200px;
}
.box1{background-color: #bfa;
}
.box2{background-color: orange;position: sticky;top: 100px;
}
.box3{background-color: yellow;
}
5.5 绝对定位元素的布局 当开启了绝对定位后，水平方向的布局等式就需要添加 left 和 right 两个值，即：left + -left/right + -left/right + -left/right + width + right = 包含块的内容区的宽度过渡约束：如果没有 auto 则自动调整 right 值以使等式满足（left 和 right的值默认是 auto），如果有auto，则自动调整auto的值以使等式满足据此特征可以通过以下样式将元素在其包含块中水平居中：
.box {margin: 0 auto;left: 0;right: 0;
}
垂直方向布局的等式的也必须要满足：top + -top/ + -top/ + -top/ + = 包含块的高度据此特征可以通过以下样式将元素放置在其包含块的正中：
.box {margin: auto;left: 0;right: 0;top: 0;bottom: 0;
}
5.6 层级 对于开启了定位元素，可以通过 z-index 属性来指定元素的层级z-index 需要一个整数作为参数，值越大元素的层级越高，元素的层级越高越优先显示如果元素的层级一样，则优先显示靠下的元素祖先的元素的层级再高也不会盖住后代元素
"box1">1
"box2">2 body{font-size: 60px;
}
div{width: 200px;height: 200px;position: absolute;
}
.box1{background-color: rgba(255 , 0, 0, .6);z-index: 3;
}
.box2{background-color: #bfa;top: 50px;left: 50px;
}
.box3{background-color: yellow;top: 100px;left: 100px;z-index: 999;
}
.box4{width: 100px;height: 100px;background-color: orange;
}
六、动态效果 6.1 过渡
通过过渡可以指定一个属性发生变化时的切换效果。
<style type="text/css">.box1 {/* 设置初始值及渐变 */height: 10px;overflow: hidden;transition: height 0.3s;width: 100px;background-color: #bfa;margin: 100px auto;}.box1:hover {/* 设置触发 */height: 100px;}
style><div class="box1">
div>
transition-property: height, width;
transition-property: all;
多个属性间使用 ',' 隔开如果所有/ 很多属性都需要过渡，可以直接使用 all关键字过渡时必须是从一个有效数值向另外一个有效数值进行过渡，不能使用 auto 属性值说明
ease
默认值，慢速开始，先加速，再减速
匀速运动
ease-in
加速运动
ease-out
减速运动
ease-in-out
先加速 后减速
cubic-()
来指定时序函数（参考：）
steps(num, end/start)
分步执行过渡效果，通过 end/start 指定在时间结束/开始时执行过渡
div {height: 271px;width: 132px;margin: 200px auto;background-image: url(./img/bigtap-mitu-queue-big.png);background-position: 0 0;transition: 0.3s steps(3);
}div:hover {background-position: -396px 0;
}
6.2 动画
过渡需要在某个属性发生变化时才会触发，动画可以自动触发动态效果。
.box1 {height: 100px;width: 100px;border-radius: 50%;margin: 100px auto;animation: change-color 1s infinite alternate;
}@keyframes change-color {from /* 或 0% */ {background-color: red;}to /* 或 100% */ {background-color: yellow;}
}
from 指定动画开始时元素的状态，等价于 0%to 指定动画结束时元素的状态，等价于 100%from和 to之间还可以引入多个 帧，使用对应的百分比来表示 属性说明
-name
要对当前元素生效的关键帧的名字
-
执行时间
-delay
延时
--
时序函数
--count: n/
执行的次数
属性值说明
默认值 从 from 向 to 运行 每次都是这样
从 to 向 from 运行 每次都是这样
从 from 向 to 运行 重复执行动画时反向执行
-
从 to 向 from 运行 重复执行动画时反向执行
属性值说明
none
默认值 动画执行完毕元素回到原来位置
动画执行完毕元素会停止在动画结束的位置
动画延时等待时，元素就会处于开始位置（即直接将 from 设置的属性给到元素）
both
结合了 和
div {width: 256px;height: 256px;margin: 200px auto;background-image: url('./img/bg2.png');animation: run 0.5s steps(6) infinite;
}@keyframes run {from { background-position: 0 0; }to { background-position: -1536px 0; }
}
6.3 变形 变形就是指通过 CSS来改变元素的形状或位置变形不会影响到页面的布局通过 : (px/xx%) () () 来设置元素的变形效果
div {width: 200px;height: 200px;margin: 200px auto;background-image: url('./img/4.jpg');transition: 0.3s;
}div:hover {transform: translateY(-4px);box-shadow: 0 0 10px rgba(0, 0, 0, .3);
}
div {position: absolute;/* 这种居中方式，只适用于元素的大小确定top: 0;left: 0;bottom: 0;right: 0;margin: auto; */left: 50%;top: 50%;transform: translateX(-50%) translateY(-50%);
}
调整元素在z轴的位置，正常情况就是调整元素和人眼之间的距离，距离越大，元素离人越近。z轴平移属于立体效果（近大远小），默认情况下网页是不支持透视，如果需要看见效果必须要设置网页的视距。通过 html { : 800px; } 来设置视距，取值范围一般为 600 - 1200。 6.4 旋转 旋转可以使元素沿着 x y 或 z 旋转指定的角度。通过 : (.) (45deg) (100px) 进行设置。通过 -: 设置是否展示元素的背面。
<style>.clock-wrapper {height: 300px;width: 300px;margin: 100px auto;border-radius: 50%;position: relative;background-image: url(./img/13/bg3.jpg);background-size: cover;}/* 设置元素重叠居中 */.clock-wrapper>div {position: absolute;top: 0;bottom: 0;left: 0;right: 0;margin: auto;}.hour-wrapper {height: 60%;width: 60%;/* 转动指针的容器而不是转动指针 */animation: clock 43200s linear infinite;}.hour {height: 50%;width: 6px;margin: 0 auto;background-color: black;}.minute-wrapper {height: 70%;width: 70%;animation: clock 3600s steps(60, end) infinite;}.minute {height: 50%;width: 4px;margin: 0 auto;background-color: black;}.second-wrapper {height: 90%;width: 90%;animation: clock 60s linear infinite;}.second {height: 50%;width: 3px;margin: 0 auto;background-color: black;}@keyframes clock {from {transform: rotateZ(0);}to {transform: rotateZ(360deg);}}style><div class="clock-wrapper"><div class="hour-wrapper"><div class="hour">div>div><div class="minute-wrapper"><div class="minute">div>div><div class="second-wrapper"><div class="second">div>div>div>
<style>/* 取消图片间产生的间隙 */img {vertical-align: top;}.cube {width: 200px;height: 200px;margin: 200px auto;/* 设置3D变形效果 */transform-style: preserve-3d;animation: rotate 15s linear infinite;}.cube > div {opacity: .8;position: absolute;}.box1 { transform: rotateY(90deg) translateZ(100px); }.box2 { transform: rotateY(-90deg) translateZ(100px); }.box3 { transform: rotateX(90deg) translateZ(100px); }.box4 { transform: rotateX(-90deg) translateZ(100px); }.box5 { transform: rotateY(180deg) translateZ(100px); }.box6 { transform: rotateY(0deg) translateZ(100px); }@keyframes rotate {from {transform: rotateX(0) rotateZ(0);}to {transform: rotateX(1turn) rotateZ(1turn);}}style><div class="cube"><div class="box1"><img src="./img/14/1.jpg">div><div class="box2"><img src="./img/14/2.jpg">div><div class="box3"><img src="./img/14/3.jpg">div><div class="box4"><img src="./img/14/4.jpg">div><div class="box5"><img src="./img/14/5.jpg">div><div class="box6"><img src="./img/14/6.jpg">div>div>
6.5 缩放 即字面的含义，将元素进行放大和缩小。通过 : scale()/ () () 进行设置。通过 -: ; 来设置缩放的源点。
<style>.img-wrapper{width: 200px;height: 200px;margin: 100px auto;border: 1px black solid;overflow: hidden;}img {width: 100%;transition: .2s;}.img-wrapper:hover img {transform: scale(1.2);}style><div class="img-wrapper"><img src="an.jpg">div>
七、弹性布局
Flex 是 Box 的缩写，意为“弹性布局”或者“弹性盒子”，是 CSS3 中的一种新的布局模式，可以简便、完整、响应式地实现各种页面布局，当页面需要适应不同的屏幕大小以及设备类型时非常适用。
7.1 简介 采用 Flex 布局的元素，称为 Flex 容器（flex ），即弹性容器。它的所有子元素自动成为容器成员，称为 Flex 元素（flex item），即弹性元素。容器默认存在两根轴，弹性元素的排列方向称为主轴（main axis）、主轴的垂直方向称为侧轴/交叉轴（cross axis）。主轴的开始位置叫做 main start，结束位置叫做 main end；侧轴的开始位置叫做 cross start，结束位置叫做 cross end。单个元素占据的主轴空间叫做 main size，占据的交叉轴空间叫做 cross size。
通过 float: left 进行布局
通过 : flex 进行布局
<style>* {margin: 0;padding: 0;list-style: none;}ul {width: 800px;border: 10px red solid;margin: 100px auto;display: flex;}li {/*float: left;*/width: 200px;line-height: 100px;font-size: 50px;text-align: center;}li:nth-child(1) {background-color: #bfa;}li:nth-child(2) {background-color: pink;}li:nth-child(3) {background-color: orange;}style><ul><li>1li><li>2li><li>3li>ul>
弹性容器：flex-、flex-wrap、flex-flow、-、align-items、align-弹性元素：order、align-self、flex、flex-grow、flex-、flex-basis 属性描述
指定 HTML 元素的盒子类型
flex-
指定弹性盒子中子元素的排列方式
flex-wrap
设置当弹性盒子的子元素超出父容器时是否换行
flex-flow
flex- 和 flex-wrap 两个属性的简写
-
设置弹性盒子中元素在主轴（横轴）方向上的对齐方式
align-items
设置弹性盒子中元素在侧轴（纵轴）方向上的对齐方式
align-
修改 flex-wrap 属性的行为，类似 align-items，但不是设置子元素对齐，而是设置行对齐
order
设置弹性盒子中子元素的排列顺序
align-self
在弹性盒子的子元素上使用，用来覆盖容器的 align-items 属性
flex
设置弹性盒子中子元素如何分配空间
flex-grow
设置弹性盒子的扩展比率
flex-
设置弹性盒子的收缩比率
flex-basis
设置弹性盒子伸缩基准值
7.2 容器属性 值描述
row
默认值，主轴沿水平方向从左到右
row-
主轴沿水平方向从右到左
主轴沿垂直方向从上到下
-
主轴沿垂直方向从下到上
值描述
默认值，表示元素不会换行
wrap
表示元素会在需要时换行
wrap-
表示元素会在需要时换行，但会以相反的顺序
值描述
flex-start
默认值，左对齐
flex-end
右对齐
居中
space-
两端对齐，项目之间的间隔是相等的
space-
每个项目两侧的间隔相等
值描述
默认值，项目将被拉伸以适合容器
项目位于容器的中央
flex-start
项目位于容器的顶部
flex-end
项目位于容器的底部
项目与容器的基线对齐
值描述
默认值，将项目拉伸以占据剩余空间
项目在容器内居中排布
flex-start
项目在容器的顶部排列
flex-end
项目在容器的底部排列
space-
多行项目均匀分布在容器中，其中第一行分布在容器的顶部，最后一行分布在容器的底部
space-
多行项目均匀分布在容器中，并且每行的间距（包括离容器边缘的间距）都相等
7.3 元素属性
.flex div:nth-child(1) {order: 5;}.flex div:nth-child(2) {order: 3;}.flex div:nth-child(3) {order: 1;}.flex div:nth-child(4) {order: 2;}.flex div:nth-child(5) {order: 4;}
值描述
默认值，项目将被拉伸以适合容器
项目位于容器的中央
flex-start
项目位于容器的顶部
flex-end
项目位于容器的底部
项目与容器的基线对齐
使用场景 - 当父元素有多余的空间时，子元素如何伸展，默认为 0 不伸展当属性值设置为一个具体的长度时，子元素会按照比例进行分配 使用场景：当父元素中的空间不足以容纳所有的元素时，子元素如何收缩，默认为 1 等比例收缩 如果主轴是 横向的，则该值指定的就是元素的 宽度如果主轴是 纵向的，则该值指定的是就是元素的 高度如果传递了一个具体的数值，则以该值为准默认值是 auto，表示参考元素自身的高度或宽度 == 0 1 == 1 1 == 0 0 auto 弹性元素没有弹性 八、移动端 8.1 视口 屏幕是由一个一个发光的小点构成，这一个个的小点就是 像素；分辨率 1920 x 1080 说的就是屏幕中小点的数量。像素分为 CSS像素 和 物理像素：上述所说的小点点就属于物理像素，而编写网页时所用像素是CSS像素。浏览器在显示网页时，需要将CSS像素转换为物理像素然后再呈现。一个CSS像素最终由几个物理像素显示，由浏览器决定：默认情况下在PC端，一个CSS像素 = 一个物理像素。 视口就是屏幕中用来显示网页的区域，可以通过查看视口的大小，来观察CSS像素和物理像素的比值。
PC端默认情况下CSS像素和物理像素的比是 1:1，即如果屏幕分辨率 1920 x 1080，那么视口宽度也为 （CSS像素）。可以通过改变视口的大小，来改变CSS像素和物理像素的比值。 智能手机的像素点远远小于计算机的像素点，如24寸的电脑显示器像素为 1920 x ，而4.7寸的手机就可达到 750 x 。为了显示完整、移动端会自动对网页进行缩放，如网页的宽度为 ，在 750px的移动端则会缩放 1260/750 倍，也可以说这时的 750/1260 个CSS像素才对应 1个物理像素。移动端本身像素高，却为了适配 PC而用多个 CSS像素对应 1个物理像素；所以基本大部分的pc端网站都可以在移动端中正常浏览，但是往往都不会有一个好的体验。为了解决这个问题，大部分网站都会 专门为移动端设计网页。 由于不同设备视口和像素比不同，所以在移动端开发时，就不能再使用px来进行布局了。vw 表示的是视口的宽度，100vw = 一个视口的宽度，假设设计图的宽度为 750px，那么如何构造一个 45 * 60px 的盒子呢？一般通过 less 将 html 的 font-size 设置为大于 12px（浏览器限制）的一个值，如 html { font-size: 100vw/750 * 40; }，即先把 100vw分给 750像素再取 40份作为字体大小，这时 1rem 就相当于设计图的 40px。
构造盒子时，只需要通过 less 进行运算 width: 45/40rem; 即可得出宽度为 45px 的盒子。这样，在任何移动端展示出来的页面效果/ 比例都是相同的。 可以通过 meta标签 来设置视口大小，如 即将视口设置 375px，这时 1 CSS像素对应两个物理像素。每一款移动设备设计时，都会有一个最佳的像素比。 即是将网页的视口设置为完美视口。 8.2 媒体查询
为了在移动端获得良好的网页阅读效果，除了可以通过 VW适配来专门为移动端设计网页外，还可以通过媒体查询来进行响应式布局。
类型说明
all
所有设备
打印设备
带屏幕的设备
屏幕阅读器
可以使用 , 连接多个媒体类型，这样它们之间就是一个或的关系可以在媒体类型前添加一个only，表示只有 特性说明
width
视口的宽度
视口的高度
min-width
视口的最小宽度（视口大于指定宽度时生效）
max-width
视口的最大宽度（视口小于指定宽度时生效）
断点说明
小于768
超小屏幕 max-width=768px
大于768
小屏幕 min-width=768px
大于992
中型屏幕 min-width=992px
大于1200
大屏幕 min-width=
/* width < 768px */
@media only screen and (max-width: 768px) {body {background-color: #bfa;}
}
/* 768px < width < 992px */
@media only screen and (min-width: 768px) and (max-width: 992px) {body {background-color: #ffa;}
}
/* 992px < width < 1200px */
@media only screen and (min-width: 992px) and (max-width: 1200px) {body {background-color: #bff;}
}
/* width > 1200px */
@media only screen and (min-width: 1200px) {body {background-color: #bba;}
}
8.3 响应式布局 网页可以根据不通的设备或窗口大小呈现出不同的效果使用响应式布局，可以 使一个网页适用于所有设备响应布局的关键就是 媒体查询通过媒体查询，可以为不通的设备，或设备不同状态来分别设置样式
