CSS
# CSS
CSS 表示层叠样式表（Cascading Style Sheet，简称：CSS，又称为又称串样式列表、级联样式表、串接样式表、阶层式样式表）是为网页添加样式的代码。
# 概念：Cascading Style Sheets 层叠样式表
- 层叠：多个样式可以作用在同一个 html 的元素上，同时生效
- 好处
- 功能强大
- 将内容展示和样式控制分离 1. 降低耦合度。解耦 2. 让分工协作更容易 3. 提高开发效率
- CSS 的使用：CSS 与 html 结合方式
内联样式（inline style）: 在标签内使用 style 生效指定 css 代码
<!-- 方式一 内联方式 在标签内使用style属性指定css代码 -->
<div style="color: cornflowerblue;">hello world</div>
2
内部样式（internal style sheet）: 在 head 标签内，定义 style 标签，style 标签的标签体内容就是 css 代码
<!-- 方式二 内部样式
* 在head标签内,定义style标签,style标签的标签体内容就是css代码-->
<style>
div{
color: blueviolet;
}
</style>
2
3
4
5
6
7
8
外部样式（external style sheet）:
- 在外部定义 css 资源文件
- 在 head 标签内，定义 link 标签，引用外部的 css 资源
<link rel="stylesheet" href="css/外部.css">
<!-- 通过<link>标签 引用外部css标签 rel为 href为css路径 -->
2
link 元素常见的属性：
- href：此属性指定被链接资源的 URL。 URL 可以是绝对的，也可以是相对的。
- rel：指定链接类型，常见的链接类型：https://developer.mozilla.org/zh-CN/docs/Web/HTML/Link_types
- icon：站点图标；
- stylesheet：CSS 样式；
@import：可以在 style 元素或者 CSS 文件中使用 @import 导入其他的 CSS 文件
# css 语法
格式:
选择器 {
属性名 1: 属性值 1;
属性名 2: 属性值 2;
…
}
选择器：筛选具有相似特征的元素 每一对属性需要使用分号隔开，最后一对可以不加；
声明（Declaration）一个单独的 CSS 规则，如 color: red; 用来指定添加的 CSS 样式。
- 属性名（Property name）：要添加的 css 规则的名称；
- 属性值（Property value）：要添加的 css 规则的值；
# 选择器：筛选具有相似特征的元素
分类:
基础选择器
id 选择器：选择具体 id 属性值的元素，建议在一个 html 页面中 id 值唯一 语法:#id 属性值 {}
#div1{ <!--id选择器 根据id选择html标签 --> color: blue; }1
2
3元素选择器：选择具有相同标签名称的元素 语法：标签名称 {} 注意:id 选择器优先级高于元素选择器
div{ <!-- 元素选择器 根据标签名选择html标签 --> color: rebeccapurple; }1
2
3
4- 类选择器：选择具有相同 class 的属性值的元素 语法:.class 属性值 {} 注意：类选择器优先级高于元素选择器 id> 类 > 元素
.cls1{ <!-- 类选择器 根据类选择html标签 --> color: cornflowerblue; }1
2
3
# 多类名
一个标签只有拥有一个 class 属性
但 class 属性能写多个名 用空格分开 每个类名都能单独调用 css
<span class="class1 class2"> </span>
id 在页面中不能重复 class 可以
# 扩展选择器
选择所有元素：语法:*{}
并集选择器：语法：选择器 1, 选择器 2 {} 如: .box1,.box2 {}
交集选择器：只选择该标签并且是此选择 器的 语法：标签名选择器 {} 如:div.box1 {}
后代选择器：又称包含选择器 筛选选择器 1 元素下的选择器元素
语法：父级 子级 {} 如: .box box2 {}
父选择器：直接子代选择器 (必须是直接自带)，筛选选择器 2 的父元素选择器 1 只选下一级的元素 有其他标签包含都不选择 语法：选择器 1 > 选择器 2 {} 如: .box1 > p {}
属性选择器：选择元素名称，属性名 = 属性值的元素 语法：元素名称 [属性名 =“属性值”]{}
[attr*=val]: 属性值包含某一个值val; [attr^=val]: 属性值以val开头; [attr$=val]: 属性值以val结尾; [attr|=val]: 属性值等于val或者以val开头后面紧跟连接符-; [attr~=val]: 属性值包含val, 如果有其他值必须以空格和val分割;1
2
3
4
5
- 兄弟选择器 (sibling combinator)
.one + div {} /* 相邻兄弟选择器 */ .one ~ div {} /* 普遍兄弟选择器 */1
2
# 伪类
伪类选择器：选择一些元素具有的状态 语法：元素：状态 {} 注意状态顺序 否则会出不必要的错误 lvha
# 动态伪类
状态:
link: 初始化的状态
visited: 被访问过的状态
hover: 鼠标悬浮状态
active: 在在访问状态
focus：当前拥有输入焦点的元素（能接收键盘输入）
动态伪类编写顺序建议为：link、:visited、:focus、:hover、:active
因为链接 a 元素可以被键盘的 Tab 键选中聚焦，所以:focus 也适用于 a 元素
# 目标伪类
- :target
# 语言伪类
- :lang( )
# 元素状态伪类
- :enabled、:disabled、:checked
# 结构伪类
- :nth-child( )、:nth-last-child( )、:nth-of-type( )、:nth-last-of-type( )
- :first-child、:last-child、:first-of-type、:last-of-type
- :root、:only-child、:only-of-type、:empty
# 否定伪类
- :not()
# 伪元素
常用的伪元素有
- :first-line、::first-line：可以针对首行文本设置属性
- :first-letter、::first-letter：可以针对首字母设置属性
- :before、::before：用来在一个元素的内容之前或之后插入其他内容（可以是文字、图片)
- :after、::after：用来在一个元素的内容之前或之后插入其他内容（可以是文字、图片)
# display 标签显示模式
# 什么是标签显示模式
标签一什么方式进行显示如:div 自己占一行称为块元素，span 一行可以放多个称为行内元素
- block：让元素显示为块级元素
- inline：让元素显示为行内级元素
- inline-block：让元素同时具备行内级、块级元素的特征
- none：隐藏元素
# 块级元素
常见的块元素有 <h1>~<h6>、<p>、<div>、<ul>、<ol>、<li> 等
一般情况下，可以包含其他任何元素（比如块级元素、行内级元素、inline-block 元素）
p 和 h、dt 里面尽量不要放块元素
特点:
- 独占一行
- 宽度默认是父级的 100%
- 里面可以块元素和行内元素
# 行内元素
常见的行内元素有 <a>、<strong>、<b>、<em>、<i>、<del>、<s>、<ins>、<i>、<span> 等
一般情况下，只能包含行内级元素
特点:
- 高、宽直接设置是没有任何效果的
- 默认的宽度就是它本身内容的宽度
- 行内元素只能容纳文本或其他行内元素
- 链接标签不能再包含链接标签
- 特殊情况 a 里面可以放块元素，但是给 a 转换一下块级模式更好
# 行内块元素
在行内元素中有几个特殊的标签 <img>、<input>、<td>
特点:
- 和相邻的行内元素在一行上，但是之间会有空白缝隙。一行内可以显示多个
- 默认宽度就是它本身内容的宽度
- 高度、行高、外边距和内边距都可以控制
# 标签显示模式转换
- 块转内:dispaly:inline
- 行内转块:display:block
- 块、行内元素转元素为行内块:display:inline-block
- 隐藏元素：none，元素不显示出来，并且也不占据位置，不占据任何空间 (和不存在一样);
隐藏元素
display: none;
隐藏元素，不保留位置
显示元素
display:black;
配合 a 标签的 hover 可以控制隐藏显示
# （font）字体
font-size: 字体大小 如: font-size:10px；
- 也可以使用 em 单位 (不推荐)：1em 代表 100%，2em 代表 200%，0.5em 代表 50%
- 基于父元素的 font-size 计算，比如 50% 表示等于父元素 font-size 的一半
font-family: 设置字体 如:font-family:"微软雅黑";
- 可以同时指定多个字体用逗号分隔，当浏览器不支持前面的字体时自动选择后面的字体 如:font-famil: Arial,"宋体","微软雅黑"; 如字体名有特殊字符或中文要加引号，可以用 Unicode 写中文字体名， 或者是通过 @font-face 指定的可以直接下载的字体。
font-weight: 字体粗细 如:font-weight:normal; normal 默认值 (不加粗) bold (加粗) 100-900 400 为默认 700 为加粗
font-style: 设置斜体 如:font-style:italic; normal 默认值 italic 斜体 oblique 倾斜
可以混成综合使用 如: font: italic 700 20px "宋体"; 按 style-weight-size-family 顺序.
- font-variant：影响小写字母的显示形式， variant 是变形的意思；
- normal：常规显示
- small-caps：将小写字母替换为缩小过的大写字母
# CCS 外观属性 文本 (text)
color: 文本颜色 如:color:"#FFF" 支持英文颜色 十六进制 rgb rgba
text-align: 文本对其方式 如:text-align:center;
left：左对齐
right：右对齐
center：正中间显示
justify：两端对齐
line-height: 行间距 如:line-height:28px; 行高的严格定义是：两行文字基线（baseline）之间的间距 基线（baseline）：与小写字母 x 最底部对齐的线
text-indext: 首行缩进 如:text-indext:2em; 可以写 px 但建议写 em,em 是倍数关系，1em 为 1 个字
text-decoration: 文本的装饰 一般用来取消超链接的下划线 如:text-decoration:none;
text-transform：设置文字的大小写转换
- capitalize：(使… 首字母大写，资本化的意思) 将每个单词的首字符变为大写
- uppercase：(大写字母) 将每个单词的所有字符变为大写
- lowercase：(小写字母) 将每个单词的所有字符变为小写
- none：没有任何影响
- 实际开发中用 JavaScript 代码转化的更多
letter-spacing、word-spacing：分别用于设置字母、单词之间的间距，默认是 0，可以设置为负数
# 行高 (line-height)
中文的行高为 第一行文字的底线到第二行文字的底线的高度
英文的行高为 第一行英文的基线到第二行文字的基线高度
行高 = 上距离 + 内容高度 + 下距离， 文字的行高等于盒子的高度则会垂直居中 (单行文本)
- 行高等于高度 文字会垂直居中
- 行高大于高度 文字会偏下
- 行高小于高度 文字会偏上
# 背景 (background)
- background-color: 背景颜色 如:background-color:red
- background-image: 背景图片 如:background-image:url (图片路径)；路径不需要引号，会盖在 (不是覆盖) background-color 的上面，如果设置了多张图片， 设置的第一张图片将显示在最上面，其他图片按顺序层叠在下面；如果设置了背景图片后，元素没有具体的宽高，背景图片是不会显示出来的
- background-repeat: 背景平铺 如:background-repeat:no-rpeat;
- repeat 默认的在 x 轴和 y 轴上平铺
- no-repeat 不平铺
- repeat-x 在 x 轴平铺
- repeat-y 在 y 轴平铺
- background-position: 背景位置，用于设置背景图片在水平、垂直方向上的具体位置 如:backg-position:10px center；
- 可以填百分百 或 xy 坐标
- 两个位置也可以写绝对位置 top、center、bottom、left、right， 如果只设置了 1 个方向，另一个方向默认是 center
- background-attachment: 背景附着，决定背景图像的位置是在视口内固定，或者随着包含它的区块滚动； 如:background-attachment:scroll;
- scroll：背景图随着对象内容滚动，背景相对于元素本身固定， 而不是随着它的内容滚动
- fixed：背景图像固定，背景相对于元素的内容固定。如果一个元素拥有滚动机制，背景将会随着元素的内容滚动
- fixed：背景相对于视口固定。即使一个元素拥有滚动机制，背景也不会随着元素的内容滚动。
- 背景简写: background: 背景颜色 背景图片地址 背景平铺 背景滚动 背景位置；(没有位置顺序，可省略不要的参数)
- 背景半透明:background-color :rgba (0,0,0,.3);
# 插入图片和背景图片的区别
- 插入图片 我们用的最多 比如产品展示 移动位置只能靠盒模型 padding margin
- 背景图片我们一般用于小图片背景 或者超大背景图片 只能通过 background-position
# CSS 三大特性
# CSS 层叠性
后面的样式覆盖掉前面的样式 不会发生冲突 样式不冲突不会进行覆盖
# CSS 继承性
子标签会继承父标签的某些样式，如文本颜色和字号
想要设置一个可继承的属性，只需将它应用于父元素即可.
子元素可以继承父元素的样式有 (text-，font-，line - 这些元素开头的可以继承，以及 color 属性)
# CSS 优先级
继承＜元素＜class＜id＜标签内的 style＜!important (将此 CSS 属性设为最重要)
# 权重叠加
如:.box a {} 此时的权重为 0,0,1,0 + 0,0,0,1 =0,0,1,1
如超过 10 不会进制
# 盒子模型
事实上，我们可以把 HTML 每一个元素看出一个个的盒子:
HTML 中的每一个元素都可以看做是一个盒子，如下图所示，可以具备这 4 个属性
- 内容（content）：元素的内容 width/height
- 内边距（padding）：元素和内容之间的间距
- 边框（border）：元素自己的边框
- 外边距（margin）：元素和其他元素之间的间距
因为盒子有四边，所以 margin/padding/border 都包括 top/right/bottom/left 四个边：
# 边框
- border-style: 边框的线风格 如:border-style:solid
- solid 实线
- node 没有边框 默认值
- dashed 虚线
- dotted 点线
- groove：凹槽，沟槽，边框看上去好象是雕刻在画布之内
- ridge：山脊，和 grove 相反，边框看上去好象是从画布中凸出来
如果我们相对某一边同时设置 宽度 样式 颜色，可以进行如下设置:
- border-top
- border-right
- border-bottom
- border-left
- border：统一设置 4 个方向的边框
- border-color: 边框颜色 如:border-color:red
- border-width: 边框宽度 border-width:10px
- 边框简写: border: 1px solid red; (没有顺序)
- 指定单方向的边框 如:border-top-width:10px
- border-radius: 边框圆角过渡 如:border-radius:10px; 或 border-radius:50%; 矩形是高度的一半.
- border-top-left
- border-top-right
- borde-bottom-left
- border-bottom-right
- 简写 border: 左上角 右上角 左下角 右下角
- border-collapse: 表格 单元格 th 合并相邻的边框 如:border-collapse:collapse;
# 尺寸
width: 宽度
height: 高度
min-width：最小宽度，无论内容多少，宽度都大于或等于 min-width
max-width：最大宽度，无论内容多少，宽度都小于或等于 max-width
- 移动端适配时，可以设置最大宽度和最小宽度；
min-height：最小高度，无论内容多少，高度都大于或等于 min-height
max-height：最大高度，无论内容多少，高度都小于或等于 max-height
对于行内级非替换元素来说，设置宽高是无效的
# 内边距
padding 用来设置内边距， 指边框与内容之间的距离
- 内容与边框有了距离
- 盒子会变大
- padding-left: 左内边距
- padding-right: 右内边距
- padding-top: 上内边距
- padding-bottom: 下内边距
- padding: 简写
- padding: 1px 2px 3px 0px (上 右 下 左 顺时针)
- padding: 20px 上下左右都为 20px 内边距
- padding:10px 20px 上下为 10px 左右为 20px (如无指定则自动为对称的内边距)
- padding:10px 20px 30px 上为 10 左右为 20 下为 30 的内边距
盒子的实际大小 = 内容的宽度 高度 + 内边距 + 边框 = 盒子的大小 - 内边距 - 边框 =css 中设置盒子的大小
也可以设置盒子属性 box-sizing: border-box; 使得盒子实际大小等于边框 + 内边距的大小
- padding 不影响盒子大小情况 特殊情况
- 如果没有给一个盒子指定宽度，此时再给这个盒子 padding 则不会撑开盒子
# 外边距
margin 属性用于设置外边距.margin 就是控制盒子和盒子之间的距离
- margin-left: 左外边距
- margin-right: 右外边距
- margin-top: 上外边距
- margin-bottom: 下外边距
# 上下 margin 的传递
- margin-top 传递：如果块级元素的顶部线和父元素的顶部线重叠，那么这个块级元素的 margin-top 值会传递给父元素
- margin-bottom 传递：如果块级元素的底部线和父元素的底部线重写，并且父元素的高度是 auto，那么这个块级元素的 margin-bottom 值会传递给父元素
如何防止出现传递问题？
- 给父元素设置 padding-top\padding-bottom
- 给父元素设置 border
- 触发 BFC: 设置 overflow 为 auto
建议：
- margin 一般是用来设置兄弟元素之间的间距
- padding 一般是用来设置父子元素之间的间距
# 上下 margin 的折叠
垂直方向上相邻的 2 个 margin（margin-top、margin-bottom）有可能会合并为 1 个 margin，这种现象叫做 collapse（折叠）
水平方向上的 margin（margin-left、margin-right）永远不会 collapse
折叠后最终值的计算规则，两个值进行比较，取较大的值
如何防止 margin collapse？
只设置其中一个元素的 margin
两个兄弟块级元素之间上下 margin 的折叠
父子块级元素之间 margin 的折叠
# 让块级盒子居中水平对齐
- 必须要设置宽度
- 设置 margin 左右 为 auto 上下 auto 没有效果，margin: 0 auto
# 让文字居中和盒子居中
行内级元素 (包括 inline-block 元素)
- 让盒子内文字居中是 text-align:center, 并且还可以让行内元素和行内块居中对齐
- 块级盒子居中 左右外边距 auto
# 清除元素的默认的内外边距
* {
padding:0px;
margin:0px;
}
2
3
4
行内元素尽量只设置左边内外边距，因为上下内外边距不起作用
# 去掉列表默认的样式
list-style:none;
# 外边距合并
上下：当上下相邻的两个块元素相遇时，如果上面的元素有 margin-bottom, 下面的有 margin-top 时，他们之间的垂直间距并不是 bottom+top 的值，而是取它们两值之间最大的值。如涉及到上下两个外边距合并尽量只给一个元素外边距
嵌套塌陷：当一个父盒子中的子盒子，想于父盒子之间有距离，但又不想把父盒子撑开，如我们在子盒子中设置外边距 top, 则会出现父盒子向下移动了，但子盒子还是与父盒子没有间距.
解决方案:
1. 在父盒子中指定一个top边框 如:border-top:1px solid transport;
2. 给父盒子指定一个内边距top 如:padding-top : 1px;
3. 给父盒子添加overflow:hidden;
# 盒子模型布局稳定性
我们优先使用 width > padding > margin
因为 width 最稳定 padding 会影响盒子大小 margin 会出现合并塌陷问题
# 盒子阴影 box-shadow
box-shadow 属性可以设置一个或者多个阴影，每个阴影用 <shadow> 表示，多个阴影之间用逗号，隔开，从前到后叠加
- box-shadow: 水平阴影大小 垂直阴影大小 模糊大小 阴影大小 阴影颜色 内 / 外阴影 (默认为外);
- 如:box-shadow:2px 2px 2px 2px #000;
我们可以通过一个网站测试盒子的阴影:https://html-css-js.com/css/generator/box-shadow/
# 文字阴影 text-shadow
text-shadow 用法类似于 box-shadow，用于给文字添加阴影效果，相当于 box-shadow, 它没有 spread-radius 的值；
- 第 1 个 <length>：offset-x, 水平方向的偏移，正数往右偏移
- 第 2 个 <length>：offset-y, 垂直方向的偏移，正数往下偏移
- 第 3 个 <length>：blur-radius, 模糊半径
- <color>：阴影的颜色，如果没有设置，就跟随 color 属性的颜色
- inset：外框阴影变成内框阴影
我们可以通过一个网站测试文字的阴影: https://html-css-js.com/css/generator/box-shadow/
# 子盒子可以比父盒子大
如子盒子没有指定大小则会继承父盒子大小
但是子盒子可以指定比父盒子大的值
# 行内非替换元素的注意事项
以下属性对行内级非替换元素不起作用
- width、height、margin-top、margin-bottom
以下属性对行内级非替换元素的效果比较特殊
- padding-top、padding-bottom、上下方向的 border
# 浮动 (float)
float 属性可以指定一个元素应沿其容器的左侧或右侧放置，允许文本和内联元素环绕它，float 属性最初只用于在一段文本内浮动图像，实现文字环绕的效果；但是早期的 CSS 标准中并没有提供好的左右布局方案，因此在一段时间里面它成为网页多列布局的最常用工具； 绝对定位、浮动都会让元素脱离标准流，以达到灵活布局的效果
float: 使元素浮动 如:float:left;
- none：不浮动，默认值
- left：向左浮动
- right：向右浮动
浮动元素会漂浮在普通流上面，不占位置，脱标
朝着向左或向右方向移动，直到自己的边界紧贴着包含块（一般是父元素）或者其他浮动元素的边界为止， 定位元素会层叠在浮动元素上面
如果元素是向左（右）浮动，浮动元素的左（右）边界不能超出包含块的左（右）边界
浮动元素之间不能层叠，如果一个元素浮动，另一个浮动元素已经在那个位置了，后浮动的元素将紧贴着前一个浮动元素（左浮找左浮，右浮找右浮），如果水平方向剩余的空间不够显示浮动元素，浮动元素将向下移动，直到有充足的空间为止
浮动元素不能与行内级内容层叠，行内级内容将会被浮动元素推出，比如行内级元素、inline-block 元素、块级元素的文字内容
行内级元素、inline-block 元素浮动后，其顶部将与所在行的顶部对齐
特性:float 属性会改变元素的 display 属性 与行内块相似但是没有之间没有缝隙 如果父盒子装不下浮动元素 则会自动换行
一般我们会给浮动的元素套一个标准流的父盒子，减少对其他的标准流的影响
浮动元素只会影响后面的标准流元素 并不会影响前面的标准流元素
# 浮动元素与父盒子关系
如果父盒子有边框 浮动元素不会压着边框
如果父盒子有内边距 也不会压着内边距
# 清除浮动
清除浮动主要是为了解决父元素因为子元素引起内部高度为 0 的问题。清除浮动后父元素就会根据浮动的子元素自动检测高度。父元素有了高度就不会影响下面的标准流.
clear:both; 清除两侧的浮动影响 也可单独清除 left 或 right 浮动
- left：要求元素的顶部低于之前生成的所有左浮动元素的底部
- right：要求元素的顶部低于之前生成的所有右浮动元素的底部
- both：要求元素的顶部低于之前生成的所有浮动元素的底部
- none：默认值，无特殊要求
事实上我们有很多方法可以清除浮动
- 方法一：给父元素设置固定高度，扩展性不好（不推荐）
- 方法二：在父元素最后增加一个空的块级子元素，并且让它设置 clear: both，会增加很多无意义的空标签，维护麻烦，违反了结构与样式分离的原则（不推荐）
- 方法三：给父元素添加一个伪元素，推荐；编写好后可以轻松实现清除浮动；
# 额外标签法
在浮动元素后额外添加一个空的标签用来清除浮动
缺点：结构化被打乱
# 父级添加 overflow 属性
给父元素添加 overflow: hidden | auto | scroll 都可以实现清除浮动
缺点：超出父盒子的内容被切割
# 使用伪元素清除浮动
父级元素添加伪元素
.box:after {
content:"";
display:block;
height:0
clear:both;
visibility:hidden;
}
.box{
*zoom:1; /*IE6、7专有的 */
}
2
3
4
5
6
7
8
9
10
# 双伪元素清除浮动
.box:before,
.box:after {
content:"";
display:table;
}
.box:aftr {
clear:both;
}
.box {
*zoom:1; /*IE6、7专有的 */
}
2
3
4
5
6
7
8
9
10
11
# 什么时候用清除浮动
- 父元素没有高度
- 子元素浮动
- 影响下面布局，我们应该清除浮动.
# CSS 属性书写顺序
- 布局定位属性 display/position/float/clear/visibility/overflow (display 建议第一个写)
- 自身属性 width/height/margin/padding/border/background
- 文本属性 color/font/text-decoration/text-align/vertical-align/white-space/break-word
- 其他属性 content/cursor/border-radius/box-shadow/text-shadow/background-linear-gradient
# 定位 (position)
将盒子定在某一个位置，可以自由的漂浮在其他盒子 (包括标准流和浮动) 的上面
默认情况下，元素都是按照 normal flow（标准流、常规流、正常流、文档流【document flow】）进行排布
从左到右、从上到下按顺序摆放好，默认情况下，互相之间不存在层叠现象
在标准流中，可以使用 margin、padding 对元素进行定位，其中 margin 还可以设置负数
比较明显的缺点是：
- 设置一个元素的 margin 或者 padding，通常会影响到标准流中其他元素的定位效果
- 不便于实现元素层叠的效果
# 边偏移
通过 top、bottom、left、right 属性定义元素的边偏移:
# 定位模式
position: 定位模式 如:position:absolute；
- static 静态定位
- relative 相对定位
- absolute 绝对定位
- fixed 固定定位
- sticky：粘性定位
# 静态定位 (static)
静态定位就是默认定位方式，为无定位，没有边偏移
元素按照 normal flow 布局， left 、right、top、bottom 没有任何作用
静态定位几乎不用
# 相对定位 (relative)
相对定位是元素对于 原本在标准流的位置来定位
可以通过 left、right、top、bottom 进行定位，原来在标准流的位置 加上 偏移值
特点：在原来标准流的位置上继续占有，虽然位置已发生改变，但后面的标准流还是无法占用它原来的位置
# 绝对定位 (absolute)
元素脱离 normal flow（脱离标准流、脱标）
绝对定位是元素以带定位的父级元素来移动位置的
定位参照对象是最邻近的定位祖先元素，如果父级元素没有定位，如果找不到这样的祖先元素，参照对象是视口
如果父级有定位，则以父级的位置 加上偏移值来定位
不一定需要父级，只要是嵌套包含此子元素则以此元素为基准偏移定位 (就近原则)
特点：绝对定位后的元素，在原来标准流中不占用位置，后面的元素可以占用它原来的位置
如果希望子元素相对于父元素进行定位，又不希望父元素脱标，常用解决方案是
子绝父相：子级是绝对定位，父级要用相对定位，在绝大数情况下，子元素的绝对定位都是相对于父元素进行定位
- 父元素设置 position: relative（让父元素成为定位元素，而且父元素不脱离标准流）
- 子元素设置 position: absolute
# 固定定位 (fixed)
元素脱离 normal flow（脱离标准流、脱标）
可以通过 left、right、top、bottom 进行定位
定位参照对象是视口（viewport），当画布滚动时，固定不动
- 视口（Viewport）： 文档的可视区域，如上图红框所示
- 画布（Canvas）：用于渲染文档的区域，文档内容超出视口范围，可以通过滚动查看，如上图黑框所示
宽高对比，画布 >= 视口
固定定位是绝对定位的一种特殊形式.
- 不会占用原来的位置
- 不随着滚动条滚动
- 跟父级没有关系
# 绝对和固定元素的特点
- 可以随意设置宽高
- 宽高默认由内容决定
- 不再受标准流的约束
- 不再严格按照从上到下、从左到右排布
- 不再严格区分块级 (block)、行内级 (inline)，行内块级 (inline-block) 的很多特性都会消失
- 不再给父元素汇报宽高数据
- 脱标元素内部默认还是按照标准流布局
- 对于绝对定位元素来说
- 定位参照对象的宽度 = left + right + margin-left + margin-right + 绝对定位元素的实际占用宽度
- 定位参照对象的高度 = top + bottom + margin-top + margin-bottom + 绝对定位元素的实际占用高度
- 如果希望绝对定位元素的宽高和定位参照对象一样，可以给绝对定位元素设置以下属性
- left: 0、right: 0、top: 0、bottom: 0、margin:0
- 如果希望绝对定位元素在定位参照对象中居中显示，可以给绝对定位元素设置以下属性
- left: 0、right: 0、top: 0、bottom: 0、margin: auto
- 另外，还得设置具体的宽高值（宽高小于定位参照对象的宽高）
auto -> 交给浏览器你来出来
width: auto:
- 行内非替换元素 -> width: 包裹内容
- 块级元素 ->width: 包含块的宽度
- 绝对定位元素 -> width: 包裹内容
# 粘性定位 sticky
sticky 是一个大家期待已久的属性
- 可以看做是相对定位和固定 (绝对) 定位的结合体；
- 它允许被定位的元素表现得像相对定位一样，直到它滚动到某个阈值点；
- 当达到这个阈值点时，就会变成固定 (绝对) 定位；
- sticky 是相对于最近的滚动祖先包含滚动视口的 (the nearest ancestor scroll container’s scrollport)
# 绝对定位的盒子居中
绝对定位的盒子是不能使用 margin:auto 设置居中对齐的
- left:50% (定位到父盒子的右边的一半，其他方向都可以用此方法)
- margin-left: 负的自身宽度的一半；(回退自身宽度的一半)
# 堆叠顺序 (z-index)
z-index 属性用来设置定位元素的层叠顺序（仅对定位元素有效）
在定位中，可能会出现盒子层叠，后面的盒子会压掉前面的盒子，后来者居上
我们可以使用 z-index 层叠等级属性来调整盒子的堆叠顺序，默认值为 0，取值可以是正整数、负整数、0
比较原则：
- 如果是兄弟关系， z-index 越大，层叠在越上面， z-index 相等，写在后面的那个元素层叠在上面
- 如果不是兄弟关系，各自从元素自己以及祖先元素中，找出最邻近的 2 个定位元素进行比较， 而且这 2 个定位元素必须有设置 z-index 的具体数值；
# 定位改变 display 属性
一个行内盒子，如果加了浮动、固定定位和绝对定位，不用转换，就可以给这盒子直接设置宽度和高度
# 绝对定位和浮动不会触发外边距合并
之前嵌套盒子给子盒子 margin-top 会出现塌陷问题，我们通过添加父盒子边框
现在我们可以添加添加浮动 或者 绝对定位来解决这个问题，给予父元素或子元素都可以
# 布局总结
- 标准流
- 可以让盒子上下排列 或者 左右排列
- 浮动
- 可以让多个块级元素 一行显示 或者 左右对齐盒子 浮动的盒子就是按照顺序左右排列
- 定位
- 定位最大的特点是有层叠的概念，就是可以让多个盒子 前后 叠压来显示。但是美国盒子需要测量数值
# visibility 可见
设置为 hidden, 虽然元素不可见，但是会占据元素应该占据的空间；
隐藏元素
visibility :hidden;
隐藏元素，保留原本的位置
显示元素
visibility:visible;
还有其他方法将元素隐藏
- rgba 设置颜色，将 a 的值设置为 0，rgba 的 a 设置的是 alpha 值，可以设置透明度，不影响子元素；
- opacity 设置透明度，设置为 0，设置整个元素的透明度，会影响所有的子元素；
# overflow 溢出
检索或者设置当前对象的内容超出其指定的高度及宽度管理如何显示
visible 不剪切内容也不添加滚动条 (默认)，溢出的内容照样可见
hidden 不显示超出的内容，超出部分隐藏掉 (溢出隐藏)
scrool 不管超出多少都显示滚动条
- 会一直显示滚动条区域，滚动条区域占用的空间属于 width、height
auto 超出自动显示滚动条，不超出不显示
# CSS 用户界面样式
# 鼠标样式 cursor
设置该元素当光标指向时 鼠标样式的形状
- default 默认光标
- pointer 小手
- move 移动
- text 文本
- not-allowed 禁止
# 轮廓线 outline
输入框 input 被用户选中时高亮提示的轮廓，一般我们都是取消轮廓，去除 a 元素、input 元素的 focus 轮廓效果
outline:0; 或 outline:none;
- outline-width: 外轮廓的宽度
- outline-style：取值跟 border 的样式一样，比如 solid、dotted 等
- outline-color: 外轮廓的颜色
- outline：outline-width、outline-style、outline-color 的简写属性，跟 border 用法类似
# 防止拖拽文本域 resize
文本域默认的大小用户是可以拖拽，我们一般取消拖拽
resize:none;
# 垂直对齐 vertical-align
vertical-align 它只针对行内元素 或 行内块元素 起作用 对 块元素不起任何作用
baseline 基线对齐 默认图片会与文字基线对齐
middle 垂直居中 图片与文字中线对齐
top 顶部对齐 图片与文字的顶线对齐
bottom 底部对齐
<percentage>：把行内级盒子提升或者下降一段距离（距离相对于 line-height 计算 \ 元素高度）， 0% 意味着同 baseline 一样
<length>：把行内级盒子提升或者下降一段距离，0cm 意味着同 baseline 一样
# 去除图片底部空白缝隙
因为图片默认是与文字的基线对齐，而有的字是超出的基线系统会自动空出这部分来，我们只需要把图片与文字基线以外的对齐即可以解决
vertical-align:bottom/top/middle;
第二种的方法，把图片的行内块元素转成块元素
display:block;
# 溢出的文字省略号显示
- 强制文字在一行内显示 white-space:nowrap;
- 超出部分隐藏 overflow:hidden;
- 超出部分用省略号代替 text-overflow:ellipsis;
# white-space 强制文字一行显示
white-space:
- normal 当文字超出时，自动换行 (默认)，合并所有连续的空白，允许单词超屏时自动换行
- nowrap 强制一行显示文字 除了 br，合并所有连续的空白，不允许单词超屏时自动换行
- pre：阻止合并所有连续的空白，不允许单词超屏时自动换行
- pre-wrap：阻止合并所有连续的空白，允许单词超屏时自动换行
- pre-line：合并所有连续的空白（但保留换行），允许单词超屏时自动换行
# text-overflow 文字用省略号代表超出的部分
text-overflow:
- clip 不显示省略号 (默认)，溢出的内容直接裁剪掉（字符可能会显示不完整）
- ellipsis 超出部分以省略号代替
text-overflow 生效的前提是 overflow 不为 visible
# CSS 精灵技术 (sprite)
CSS 精灵其实是将网页的一些背景图像整合到一张大图中 (精灵图), 浏览器请求服务端只需要请求一次就可以返回多个背景，不同位置的小图，根据精灵图的位置来设置
https://www.toptal.com/developers/css/sprite-generator
background-position:x 坐标 y 坐标；(一般背景定位都是负值)
先用一个父盒子把整张精灵图加载，后面再用子盒子定位到需要的图
# cusor 指针样式
cursor 可以设置鼠标指针（光标）在元素上面时的显示样式
- auto：浏览器根据上下文决定指针的显示样式，比如根据文本和非文本切换指针样式
- default：由操作系统决定，一般就是一个小箭头
- pointer：一只小手，鼠标指针挪动到链接上面默认就是这个样式
- text：一条竖线，鼠标指针挪动到文本输入框上面默认就是这个样式
- none：没有任何指针显示在元素上面
# 滑动门
- a 标签设置背景图左侧 padding 撑开合适的左侧宽度使文字与左侧有内边距
- span 标签设置背景图右侧 padding 撑开右侧背景内边距
# margin 负值
2 个浮动的盒子边框如何合并，我们使用负值的 margin 值就可以解决此问题，如:margin-left:-1px;
# CSS 三角形
当一个盒子高度和宽度为 0 时，我们给予指定的大小边框，它会以三角形的形式呈现出来
注意盒子的 4 个边框都要指定大小，我们只给予需要的边框保留，其他我们设置为 transport 透明色就好
利用 border 或者 CSS 的特性我们可以做出很多图形：https://css-tricks.com/the-shapes-of-css/#top-of-site