笔记来源：拉勾教育 - 大前端就业集训营
文章内容：学习过程中的笔记、感悟、和经验
CSS常用样式
字体属性
font-weight（文字粗细）
设置文字是否加粗显示，是font的一个单一属性
书写方式：font-weight: 单词/数字
| 属性值（单词） | 说明 |
|---|---|
| normal | 默认值，定义标准字体 |
| bold | 粗体，b和strong标签的默认值 |
| bolder | 更粗的字体 |
| lighter | 更细的字体 |
/* 单词属性值 */
font-weight: bold;
/* 数字属性值
数字取值100-900整百数字！！！，数字越大，文字越粗
400等价于normal默认值
700等价于bold粗体
*/
font-weight: 500;
font-style（字体风格 - 倾斜）
设置文字是否斜体或倾斜显示，是font的一个单一属性
书写方式：font-style: 属性值
| 属性值 | 说明 |
|---|---|
| normal | 默认值，标准字体 |
| italic | 斜体文字，主要针对于英文，要求英文以字体中斜体样式显示（用的多） |
| oblique | 倾斜的文字，只是将文字倾斜，与字体无关 |
/* 字体风格
italic和oblique在显示上大部分情况下是相同的
*/
font-style: italic;
line-height（行高）
设置一行文字在浏览器中实际占有的高度，font的单一属性，文字在行高中垂直居中显示
书写方式：font-height: 像素值/百分比
/* 行高20px */
line-height: 20px;
/* 百分比参考的是文字字号的百分比，比如字体大小12px，则200%就是24px */
line-height: 200%;
实际工作中按照设计图获取，量取的时候使用一些辅助软件
fireworks（切图软件）
初始设置：选中文字工具，属性栏中把平滑消除锯齿更改为不消除锯齿，方便文字像素更清晰显示
量取行高：
- 确定字号和字体：使用文字工具，书写两个与内容想同的字，调整字体字号，直到两者重合（建议使用不同的颜色，方便观察）
- 根据已知的字体和字号，再写上下不同行的文字，调整面板上的行高为像素，再调整行高值，直到上下两行重合
使用切片工具可以快速量取宋体行高（上一行文字顶端到下一行文字顶端距离就是行高）
font属性综合写法
字体、字号、行高、文字粗细、斜体都是font的一个单一属性，所以我们可以将这五个属性进行连续合并书写，多个属性值中间使用空格分隔开
/* font连续合并书写 */
font: 粗、斜体 字号/行高 字体;
/* 两个属性:只能是字体和字号 */
font: 12px "宋体"；
/* 三个属性：字体、字号、行高 */
font: 12px/18px "宋体";
/* 三个以上属性 */
font: bold italic 12px/18px "宋体";
书写方法：
- 当只有两个属性值的时候，只能是字体和字号两个属性，书写时必须字号在前，字体在后
font：字号 字体； - 书写字体、字号、行高时，书写顺序为字号 + 行高 + 字体，字体和行高以 / 分割开，
font：字号/行高 字体； - 如果同时要设置加粗或者斜体，必须把这两个属性放在前面，粗体和斜体可以颠倒，后面三个属性和上一条一样
文本属性
设置给文字的相关属性，都可以继承给后代，严格来说行高也属于文本类属性，但我暂时归结到字体中
text-align（水平对齐）
设置文本水平方向的对齐方式，在盒子中，不论是单行文本还是多行文本，都会根据方向进行对齐
书写方法：text-align: 属性值
| 属性值 | 效果 |
|---|---|
| left | 左对齐，大部分标签的默认属性 |
| center | 居中对齐 |
| right | 右对齐 |
/* 设置水平对齐方式 */
text-align: left/center/right;
text-decoration（文本修饰）
设置文字文本整体是否带有线条修饰效果
书写方法：text-decoration：属性值
| 属性值 | 说明 |
|---|---|
| none | 没有修饰，大部分标签的默认值 |
| overline | 上划线 |
| line-through | 中划线，删除线，del标签的默认值 |
| underline | 下划线，a标签的默认值 |
/* 文本修饰 */
text-decoration: overline/line-through/underline;
text-indent（文本缩进）
设置段落首行文字缩进效果（只能设置给块级元素）
书写方法：text-indent: 属性值
| 属性值 | 说明 |
|---|---|
| px单位 | 按照像素缩进 |
| em单位 | 首行缩进几个中文字符的位置，1em = 1个中文字符（最常用） |
| 百分比% | 缩进文字的父元素标签宽度的百分比 |
/* 首行缩进100px */
text-indent: 100px;
/* 首行缩进2个文字宽度，会跟着文字大小动态变化 */
text-indent: 2em;
/* 首行缩进20% */
text-indent: 20%；
属性值区分正负，正数向右缩进，负数向左缩进（设置overflow：hidden可用来隐藏文字）
盒模型
又叫框模型，包含五个用来描述盒子位置、尺寸的属性，分别是：
- 内容区域：width（宽度）、height（高度）
- padding（内边距）
- border（边框）
- margin（外边距）
常见的盒模型区域
- 内容区域：width（宽度）+height（高度）
- 可显示区域：内容区域 + padding（内边距）+ border（边框）
- 实际占位：可显示区域 + margin（外边距）
浏览器打开调试工具 》 选中元素 》 computed可以查看到元素盒子示意图
width（宽度）
定义元素内容区域的宽度
书写方式：width: px值
| 属性值 | 说明 |
|---|---|
| auto | 默认值，浏览器自动计算 |
| px值 | 像素宽度 |
| 百分比% | 百分比宽度，相对于父元素 |
/* 盒子像素宽度 */
width: 200;
/* 盒子百分比宽度 */
width: 70%;
特殊应用：
- 如果元素不设置宽度，默认值为auto，不同元素会自动计算其宽度，比如div会独占一行撑满父元素宽度，而span元素则不会占一行，宽度由其中内容元素撑开
- body元素会自适应浏览器窗口的宽度，不需要设置
height（高度）
定义元素内容区域的宽度
书写方式：height: px值
| 属性值 | 说明 |
|---|---|
| auto | 默认值，浏览器自动计算 |
| px值 | 像素高度 |
| 百分比% | 百分比高度，相对于父元素 |
/* 盒子像素高度 */
height: 200;
/* 盒子百分比高度 */
height: 70%;
注意：盒子高度如果不设置，浏览器会自动计算高度，高度会由内部元素自适应撑开
padding（内边距）
设置元素边框到内容区域之间的距离，可以加载背景，但不能书写嵌套内容
书写方法：padding: px值
/*
padding四个单一方向属性值
padding是个复合属性，包括四个单一方向的属性，四个方向书写顺序为：上 - 右 - 下 - 左
*/
padding-top: 20px;
padding-right: 20px;
padding-bottom: 20px;
padding-left: 20px;
/* 下面是复合写法 */
/* 一个值，代表四个方向宽度相同 */
padding: 20px;
/* 两个值，代表左右相同、上下相同 */
padding-top: 20px 30px;
/* 三个值，左右相同，上下不同 */
padding-top: 20px 30px 40px;
/* 四个值，四个方向均不同 */
padding-top: 20px 30px 40px 50px;
我们可以把四个方向的值进行合并简写为padding属性，值和值之间用空格隔开，不同写法，最后呈现的效果也不同，根据值的个数不同，有四种写法：
- 四值法：四个值分别分配上、右、下、左
- 三值法：三个值分别分配上、左右相同、下
- 二值法：两个值分别分配上下相同、左右相同
- 单值法：代表四个方向宽度都相同
border（边框）
设置内边距外边的边界区域，作为盒子实体化的最外层
书写方法：border: 宽度 线形 颜色；
/* 边框三属性 */
border: 2px solid red;
/* 边框属性拆分写法 */
border-width: 2px;
border-style: solid;
border-color: red;
/* 单独设置某个边框 */
border-top: 2px solid red;
/* 细分属性（可以单独设置某条边的某个属性） */
border-left-color: pink;
按照属性值类型划分：
- border-width(线宽)
- 设置边框线的宽度，同样有上右下左四个方向，和padding一样有四种写法（参考padding）
- 书写方法：
border-width: px值
- border-style（线形）
- 设置边框线条形状，四个边可以单独设置线的形状，整体类似于padding（参考padding）
- 书写方法：
border-style: 线形单词 - 常用几种值：none（默认无边框）、solid（实线）、dashed（虚线）......
- borde-color（颜色）
- 设置边框线的颜色，四个边可以单独设置线的颜色，整体类似于padding（参考padding）
- 书写方法：
border-style: 颜色名/色值;
按照边框的方向进行划分
- border-top（上边框）
- border-right（右边框）
- border-bottom（下边框）
- border-left（左边框）
每一个属性都要和border一样，设置三个属性值
根据方向和类型细分属性
比如border-top属性，还可以再次进行单一属性的划分
书写方法：border-方向-类型: 属性值
margin（外边距）
设置盒子之间的距离，无法渲染背景，属性的具体用法和padding相同，也分为四个方向（参考padding）
书写方法：margin: px值
/*
margin四个单一方向属性值
margin是个复合属性，包括四个单一方向的属性，四个方向书写顺序为：上 - 右 - 下 - 左
*/
margin-top: 20px;
margin-right: 20px;
margin-bottom: 20px;
margin-left: 20px;
/* 下面是复合写法 */
/* 一个值，代表四个方向宽度相同 */
margin: 20px;
/* 两个值，代表左右相同、上下相同 */
margin-top: 20px 30px;
/* 三个值，左右相同，上下不同 */
margin-top: 20px 30px 40px;
/* 四个值，四个方向均不同 */
margin-top: 20px 30px 40px 50px
盒模型扩展应用
清除默认样式
大部分标签会自带一些样式，可能会对我们布局产生影响，使用并集选择器或者通配符选择器（小项目可以使用通配符，大项目不建议）
- 盒模型的内外边距：margin、padding：0
- ul和ol列表默认的前缀：list-style：none
- a标签默认样式：color（文本颜色）、text-decoration（去除下划线）：none
- 默认加粗效果：font-weight：normal
/* 重置所有盒子 */
* {
margin: 0;
padding: 0;
}
body,div,h1,h2,h3,h4,p,ul,ol,li...... {
margin: 0;
padding: 0;
}
/* 删除默认样式 */
ul,ol {
list-style: none;
}
a {
color: #333;
text-decoration: none;
}
h1,h2,h3,b,strong..... {
font-weight: normal;
}
/* 设置一些初始化的公共样式，后代可以继承 */
body {
color: #333;
font-size: 14px;
font-damily: Arial,"宋体";
}
高度（height）应用
根据需求不同，高度属性可以设置也可以不设置，后期可以根据设计来确定是否需要设置高度
- 如果设置了高度：盒子占用位置就定死了，渲染后面的同级元素会紧挨着加载
- 盒子内容过多会溢出盒子，可以使用overflow
- 盒子内容过少会有剩余空间
- 如果没有设置高度：根据元素内部标签内容自动撑开
overflow（溢出效果）：
设置了固定高度的盒子，如果内容超过父元素，会出现溢出效果，可以使用overflow属性来对溢出部分显示效果进行设置
| 属性值 | 说明 |
|---|---|
| bisible | 默认值，溢出部分可见 |
| hidden | 溢出部分直接隐藏掉 |
| scroll | 出现滚动条，不论是否溢出，都有滚动条 |
| auto | 自动，溢出只出现相应方向滚动条 |
/*盒子overflow属性*/
overflow: bisible/hidden/scroll/auto;
居中
网页中常见的居中效果
文本居中效果：
- 水平居中：text-align：center
- 垂直居中：
- 单行文本：设置行高等于盒子高度
line-height：盒子高度 - 多行文本：不要给高度，自动撑开即可居中，如果想要上下间距可以设置上下padding
- 单行文本：设置行高等于盒子高度
/* 文本自动水平居中 */
text-align: center；
/* 单行文本自动垂直居中，原理是文字在行高内总是垂直居中显示 */
line-height: 元素高度;
/* 多行文本垂直居中，原理是盒子自动被文本撑开（相当于垂直居中），如果还要上下空隙效果，可以上下添加一个padding，*/
padding：上下固定高度 左右随意;
元素居中效果：
- 垂直居中：和多行文本类似，父元素不设置高度，子元素撑开，父元素设置上下padding
- 水平居中：设置子盒子左右margin为auto（父盒子宽度大于子盒子）
/* 元素垂直居中 */
父元素 {
不设置height
padding：上下固定 左右随意;
}
/* 元素水平居中，原理是左右auto两侧都会去争取最大宽度，最后当两侧宽度相等时达到平衡 */
子元素 {
margin： 上下随意 auto；
}
父子盒模型
父盒子内部可以存在多个子盒子，多个子盒子要排成一行，必须保证父盒子宽度足够，要遵循一个规则：
所有元素宽度（包括margin）加在一起不能大于父元素的宽度width的值，既父元素的width >= 所有子盒子的width+padding+border+margin，如果不满足条件，多余的子元素会掉下来，溢出父元素
/* 此时所有子元素margin+padding+border+width之和没有超过父元素width，不会出现溢出或者掉落 */
父元素 {
width： 1000px;
}
子元素1 {
margin-right: 50px;
width： 100px;
}
子元素2 {
margin-right: 20px;
width： 800px;
}
/* 再加上一个盒子超出了父元素width，盒子会掉落 */
子元素3 {
margin-right: 20px;
width： 800px;
}
如果出现溢出或者掉落的解决方法：
- 计算或量取尺寸的时候要计算准确，一像素都不能有偏差
- 盒模型自动内减：只有一个子元素，且元素是自动独占一行的块级元素
- 不给子元素设置width，子元素就会自动撑满父元素的width，如果子元素同时设置了margin、padding、border时，不需要手动去进行内减，子元素的width会自动收缩尺寸
/* 盒模型自动内减，原理就是不给子元素宽度，这样他就会自动占满父元素width，宽度就是父元素宽度-border-padding-margin */
父元素 {
width： 100px;
}
子元素1 {
margin-right: 10px;
brder-width：5px；
padding: 5px;
}
margin塌陷现象
垂直方向两个元素margin相遇，加载出来的效果会按照margin值较大的加载，小的值会重合到大的值内部
/* 实际渲染会按照100px加载 */
box1 {
margin：20px;
}
box2 {
margin: 100px;
}
父子元素margin塌陷
父元素和子元素同时设置了同方向的margin，且没有其它元素进行隔离，导致margin直接相遇，也会发生塌陷
/* 此时子元素的10px不会显示出来，塌陷到了父元素20px内部 */
.box1 {
margin-top：20px;
}
.box1 p {
margin-top: 10px;
}
/* 此时父盒子上部会出现10px的margin，相当于和父盒子的0px塌陷 */
.box1 {
margin-top：0px;
}
.box1 p {
margin-top: 10px;
}
解决方案：
- 同级元素：如果元素垂直方向有间距，只需要给一个元素设置，另一个不给
- 父子元素：给父元素添加border或者padding把两个margin隔开，最常用的方法不给子盒子margin，用父盒子padding代替
水平方向没有margin塌陷
标准文档流
元素在排版布局的过程中，会默认按照从左到右，从上到下流式排列方式，前面内容发生变化，会影响后面内容的位置
HTML就是标准文档流文件
特点
HTML中标准文档流特点通过两种和方式体现：微观现象、元素等级
- 微观现象：
- 空白折叠现象，空格和换行不会影响最终呈现效果
- 文字类的元素排在一行会出现底边对齐，高低不对齐的效果
- 自动换行元素内容超出父元素width会触发换行
- 元素等级：标准流大部分元素区分等级，习惯划分为：块级元素、行内元素、行内块级元素等
- 块级元素：包括p在内的大部分容器级标签，比如div、h1等
- 可设置宽高，在浏览器中可正确加载
- 独占一行，不能和其他任何标签并排一行
- 不设置宽度，会自动撑满父元素width区域，不设置高度，由内部内容自动撑开
- 行内元素：大部分文本级标签，比如span、a、b等
- 行内元素不加载宽高，设置也没用，只能加载内容撑开的宽高
- 其他盒模型属性虽然能设置，但是容易出现加载的问题，比如加载padding元素位置不会变化，但会向上延伸，遮住其他元素
- 行内元素之间可以在一行内显示（包括行内块）
- 行内块级元素：比如img、input等
- 行内块可以设置宽高
- 可以和其他行内、行内块在一行显示
- 行内块不设置宽高，会以原始尺寸进行加载或者由内部元素撑开
- 行内块依旧具有标准流微观现象
- 块级元素：包括p在内的大部分容器级标签，比如div、h1等
display属性（CSS显示模式）
使用display可以更改一个标签的显示模式，比如把块级元素改成行内等等
根据属性值不同，可以加载对应元素的显示模式特点
书写方法：display: 属性值
| 属性值 | 作用 |
|---|---|
| block | 设置为块级元素 |
| inline | 设置为行内元素 |
| inline-block | 设置为行内块级元素 |
| none | 隐藏元素，让出位置 |
/* 更改span为块级元素 */
标签名 {
display: block/inline/inline-block;
}
/* 直接隐藏元素，不占据位置，相当于直接删除元素 */
标签名 {
display: none;
}
脱离标准流
display依旧受限于标准文档流，要想要脱离标准文档流，目前的主流方法有：
- 浮动
- 绝对定位
- 固定定位
浮动（float）
脱离了标准文档流，是一种布局属性，还可以避免空白折叠现象
书写方式：元素名: left/right （左浮动、右浮动）
作用：让元素脱离标准流，同一级的浮动元素并排在一行显示
/* 浮动，相当于把元素漂浮起来，这样可以避免有些元素独占一行，使每一个浮动的元素 按顺序排列*/
p {
float: left/right;
}
性质
脱离标准流
具备行、块二象性，可设置宽高，还可排成一行，不会有空白折叠现象，如果元素不设置宽高，可以被元素内容自动撑开
元素依次次贴边
- 如果父元素足够宽，子元素设置左浮动。子元素则会依次向左贴边：父元素左侧--子元素1--子元素2--子元素3--子元素4
- 若宽度不够，剩下的元素向前找可以贴边且剩余空间宽度足够的元素，且不会出现钻空的现象，如果前面所有元素剩余的宽度都不够，元素就会贴在父元素上面，如果一个元素高度超过父元素宽度，则会溢出
案例：实现表格效果
<style>
/* 重置盒子边距 */
* {
margin: 0;
padding: 0;
}
/* ul的padding不参与宽高的运算，宽为102*4=408，高为42*3=126 */
ul {
list-style: none;
width: 408px;
height: 126px;
background: #ccc;
padding: 2px 0 0 2px;
}
/* 一个li的宽度为100+2=102，高为40+2=42，向左浮动 */
ul li {
float: left;
width: 100px;
height: 40px;
margin: 0 2px 2px 0;
background: skyblue;
}
</style>
<!-- 建立一个12个li的ul元素进行浮动程4*3的表格 -->
<ul>
<li>内容</li>
<li>内容</li>
<li>内容</li>
<li>内容</li>
<li>内容</li>
<li>内容</li>
<li>内容</li>
<li>内容</li>
<li>内容</li>
<li>内容</li>
<li>内容</li>
<li>内容</li>
</ul>
注意
同一个盒子中，可以左右浮动盒子并存，子盒子会根据浮动方向，向上一个同方向的盒子进行贴边，如果空间不够，也会出现之前依次贴边的各种情况
贴边样式的应用
可完成更多的页面效果
- 平均分布表格效果（上边案例）
- 导航栏效果
- 常见电商、或者企业网站布局
没有margin塌陷
不会出现标准流里面的margin塌陷的现象
让出标准流的位置
会将原来标准流中占有的位置释放掉，后面的元素会跑到这个位置，浮动的元素会覆盖到标准流元素上边（IE老板本有兼容性问题）
由于兼容性问题，不会是用这种压盖效果，后期我们会用定位的方式制作压盖效果
如果没有特殊要求，不允许一个父元素内的内容同时出现浮动和非浮动并存的现象
字围现象
如果一个元素浮动，一个不浮动，不浮动的文字会主动让开浮动区域进行渲染
<style>
/* 重置盒子边距 */
* {
margin: 0;
padding: 0;
}
.box1 {
width: 200px;
background: #cccccc;
}
/* item1浮动了 item2不给浮动，会出现字围效果 */
.box1 .item1 {
float: left;
width: 100px;
height: 100px;
background: pink;
}
</style>
<div class="box1">
<p class="item1">我是浮动的</p>
<p class="item2">我不浮动，我的文字会自动避开浮动效果的区域，外饶他来进行展示我不浮动，我的文字会自动避开浮动效果的区域，外饶他来进行展示我不浮动，我的文字会自动避开浮动效果的区域，外饶他来进行展示我不浮动，我的文字会自动避开浮动效果的区域，外饶他来进行展示我不浮动，我的文字会自动避开浮动效果的区域，外饶他来进行展示我不浮动，我的文字会自动避开浮动效果的区域，外饶他来进行展示</p>
</div>
浮动存在的问题
- 子元素浮动之后无法撑开父元素高度了，如果子元素都浮动那么父元素会失去高度
- 父元素没有高度，会影响后面标准流位置，甚至可能会影响后面浮动效果
清除浮动
清除浮动元素带来的影响
给父元素强制设置一个合适的高度
缺点：子元素一旦发生变化，父元素无法自适应变化，上面的问题又会出现
clear(清除浮动)属性
清除标签元素自身受到的前面的浮动元素的影响
给标准流父元素添加clear属性，父元素不受前面浮动的影响，不会再占有浮动让出的位置
书写方法：clear: left/right/both（左、右、全部浮动）
<style>
.box1, .box2 {
width: 1000px;
background: pink;
border: 5px solid red;
}
.box1 p, .box2 p {
float: left;
width: 100px;
height: 200px;
background: #cccccc;
}
.box2 {
clear: both;
}
</style>
<!--box2不再受box1浮动的影响，直接让出box1的位置-->
<div class="box1">
<p>我在浮动</p>
<p>我在浮动</p>
<p>我在浮动</p>
<p>我在浮动</p>
</div>
<div class="box2">
<p>我在浮动</p>
<p>我在浮动</p>
<p>我在浮动</p>
<p>我在浮动</p>
</div>
问题：浮动的父元素还是不能自适应高度，两个父元素之间如果有margin效果会体现不出来
隔墙法
在两个大的父盒子中间，添加一个空的div，给div添加一个clear：both属性
<div class="box1">
<p>我在浮动</p>
<p>我在浮动</p>
<p>我在浮动</p>
<p>我在浮动</p>
</div>
<!-- 中间用一个div隔开 -->
<div style="clear:both;"></div>
<div class="box2">
<p>我在浮动</p>
<p>我在浮动</p>
<p>我在浮动</p>
<p>我在浮动</p>
</div>
问题：父元素高度依旧不能自适应
内墙法
直接在大盒子内部最后的位置添加一个带有clear：both的div
<!-- 内墙没有浮动，所以算在标准流当中，设置了clear属性后会让出浮动元素的位置，而空的div没有高度，自然不会影响标签的显示效果 -->
<div class="box1">
<p>我在浮动</p>
<p>我在浮动</p>
<p>我在浮动</p>
<p>我在浮动</p>
<!-- 内墙 -->
<div style="clear:both;"></div>
</div>
<div class="box2">
<p>我在浮动</p>
<p>我在浮动</p>
<p>我在浮动</p>
<p>我在浮动</p>
<!-- 内墙 -->
<div style="clear:both;"></div>
</div>
缺点：浮动是css的问题，而内墙却使用了HTML结构来解决问题，如果浮动比较多，会有很多无语义内墙，造成HTMl冗余
伪类模拟内墙
利用伪类方法使用CSS书写一道内墙，伪类选择器是一个特殊的选择器，通过给标签添加伪类，去选中标签某个伪类或位置
:afte:选中某个标签内部最后的位置
书写方式：选择器:after { }
一般情况下给需要清除浮动的父盒子设置一个clearfix的类名，然后在CSS里面给clearfix添加一个伪类
/* 老师视频里的方法，添加伪类、content是伪类的内容，设置为块级元素，高度设置为0不让他有高度，清除浮动，vis可以隐藏元素，！！！注意这里不可以使用display=none */
.clearfix::after {
content: "1";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
/* 我的方法 直接不给伪类内容，然后转换成块级元素，清除浮动，两个效果相同*/
.clearfix::after {
content: "";
display: block;
clear: both;
}
溢出隐藏
给父元素添加overflow：hidden可以解决所有问题（前提是不能给父盒子高度）
原理：当父盒子不设置高度，但设置了溢出隐藏的时候，浏览器加载的时候会强制检索所有子内容的高度，包括浮动元素，然后把最高的高度给父盒子用。当父盒子有了高度，就可以管理住内部的浮动元素，不会影响后面的元素
总结
- 如果父盒子高度是固定的，建议使用heigth属性解决
- 如果父盒子高度需要自适应，建议使用overflow属性来解决浮动
a标签的伪类
- 普通的类：必须给标签设置class，才能选中，而且属性会立刻加载到浏览器上
- 伪类：不需要给标签添加属性，伪类名是固定的，伪类要依靠选择器伪类样式不一定要立刻加载到浏览器上，只有用户触发之后才会立即加载，权重和类是相通的（类似于事件）
书写方法：选择器：伪类名{ }
a标签的伪类根据用户行为不同，划分为4种，通过a标签的伪类可以将四种状态选中设置为不同的样式效果，用户触发对应的行为，就可以加载对应的样式
/* 访问前状态 */
a:link {
color: red;
}
/* 访问、点击后状态 */
a:visited {
color: blue;
}
/* 鼠标移动到标签盒子上 */
a:hover {
color: green;
}
/* 点击一瞬间状态 */
a:active {
color: yellow;
}
书写顺序：
- a标签上可能同时会触发多重状态，每个状态都会进行加载，相同的属性之间会发生重叠
- 伪类的权重是相同的，只能根据书写顺序，后写的层叠先写的，所以伪类顺序非常重要
- 要让每个伪类都能正常加载，书写顺序必须是：link--visited--hover--active
实际应用
一般我们会将访问前后状态设置成一样，保证页面统一性，可以选择性设置hover和active的状态
更加常用的方法是：可以事先设置好a标签的样式，包括盒模型、文字等，然后使用a：hover设置鼠标移上的不一样的样式就可以了
/* 提前设置好样式。这个样式可以代表四个状态合写 */
a {
dispay: block;
width: 150px;
height: 50px;
background: skyblue;
color: #ccc;
}
/* 单独设置一个鼠标移上样式，触发之后会回到原来的默认样式 */
a:hover {
color: red;
}
background（css背景样式）
综合属性的，包含多个单一属性
background-color（背景色）
设置盒子区域内添加的背景颜色，加载区域包括border、padding和内容区域
书写方法：background-color: 颜色名/颜色值
/* 红色背景 */
background-color: red;
background-image（背景图片）
给盒子添加图片修饰，加载区域包括border、padding和内容区域，后期如果图片不重复加载，加载从border以内开始
书写方法：background-image: url(图片路径)
/* 同时存在背景色和背景图，背景图覆盖在背景颜色上面 */
div {
width: 500px;
height: 500px;
background-image: url(路径);
}
background-repeat（背景重复）
设置背景图片是否要在盒子中重复加载
书写方法：background-repeat: 属性值
| 属性值 | 说明 |
|---|---|
| repeat | 重复，默认值，会使用重复加载填满整个背景区域 |
| no-repeat | 不重复，只加载一次图片，不管够不够 |
| repeat--x | 水平重复，背景图片重复加载只铺满一行 |
| repeat--y | 垂直重复，背景图片重复加载只铺满一列 |
/* 同时存在背景色和背景图，背景图覆盖在背景颜色上面 */
div {
width: 500px;
height: 500px;
background-image: url(路径);
background-repeat：no-repeat；
}
背景重复依靠背景图片，没有背景图无法设置背景重复
background-position（背景定位）
设置不重复的图片在背景区域的开始加载位置
书写方法：background-position: 单词、像素表示、百分比表示（水平方向 垂直方向）
单词表示法（类似于文本对齐方式）默认left和top：
- 水平方向：left、center、right
- 垂直方向：top、center、bottom
像素表示法，使用像素值定位：
- 第一个值：根据左上角向右移动多少像素（负值向左）
- 第二个值：根据左上角向下移动多少像素（负值向上）
可以使用负值，在小盒子中显示大图片的某一部分
百分比表示法，使用百分比表示位置，100%=图片宽高和盒子宽高的差值：
/* 单词表示法，类似于文本对齐方式 */
background-position：right top；
/* 像素表示法，可以精确定位，正值向右、下移动，负值相反*/
background-position：20px 100px；
/* 百分比表示法，也可以精确定位，100%表示图片和盒子宽高的的差值（一般不用）*/
background-position：100% 30%；
background-attachment（背景附着）
设置背景图片要不要随着页面或者盒子滚动而滚动
书写方法：background-attachment：属性值
| 属性值 | 说明 |
|---|---|
| scroll | 滚动的，背景图片和盒子保持相对位置不变，随着页面滚动而滚走 |
| fixed | 固定的，背景图的定位的参考点从盒子border 以内的左上顶点变为了浏览器窗口的左上顶点，页面滚动时，浏览器窗口的左上顶点是不变的，导致背景图固定在浏览器窗口的某个位置，不会随着页面滚动而滚走。 |
<style>
div {
width: 200px;
height: 200px;
background-color: #ccc;
}
body {
background-image: url(地址);
/* 背景图不会随着页面滚动 */
background-attachment: fixed;
}
</style>
<!--写多个div超过视窗高度-->
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
注意：大部分情况下是背景附着只是给网站的body做背景图，也可以给其他元素背景图设置，但是设置之后这个图片的参考依据就会变成body元素，从而脱离所原本设背景的元素，会产生一些问题
属性综合写法（background）
可以把背景的5个单一属性值进行合写，属性值个数可以是1-5个，可以相互颠倒，使用空格隔开，注意背景定位的两个属性值算一个，不能分开也不能前后颠倒顺序
书写方法：background：5个单一属性值
/* 五个单一属性合写在一起，注意center top（定位）算是一个属性值，不能分开也不能颠倒 */
background: #ccc url(地址) fixed center top no-repeat;
注意事项：
- 如果我们没有写满五个属性值，那么我们的其他属性值会按照默认属性进行加载
- 可以使用单一属性值层叠综合属性值的某个值，使用单一属性去层叠，不要使用合写
背景属性应用
替换插入图
h1标签是权重最高的标签，一般在里面书写一些重要内容，比如logo、最大的标题等，h1内部文字可以提高seo搜索排名，如果制作logo就是需要用到图片，但是是用图片就没法再添加文字，这时候我们可以使用背景图来替换掉这张图片
<style>
* {
margin: 0;
padding: 0;
}
设置h1标签
h1 {
/* 根据图片宽高设置h1宽高 */
margin: 0 auto;
height: 105px;
width: 220px;
}
a {
/* a标签转为块元素，设置宽高等于h1宽高 */
display: block;
height: 105px;
width: 220px;
/* 设置背景图和不重复 */
background: url(图片地址，建议尽量使用相对位置，实测网上素材不能显示) no-repeat;
/* 下面要让a标签中存在的文字隐藏掉的两种方案 */
/* 方法1：将文字字号设置为0，但是ie8以前的浏览器会出现兼容性问题 */
font-size: 0;
/* 方法2（建议使用）：设置文字首行缩进，超出容器宽度，设置超出容器隐藏 */
text-indent: -10em;
overflow: hidden;
}
</style>
<!-- 在h1标签内添加a标签，a标签设置背景图 -->
<h1>
<a href="#">我是B站</a>
</h1>
注意：图片地址，建议尽量使用相对位置，实测网上素材不能显示
padding区域背景图
将背景图加载到paddingf区域，比如新闻文字标题前面的小图标
需求：在一个盒子里面有文字内容和背景，文字让开背景区域进行加载，背景区域应该使用padding挤出位置，4个方向都可以设置
<style>
* {
margin: 0;
padding: 0;
}
/* 设置ul样式 */
.list {
width: 300px;
border: 1px solid red;
margin: 20px;
padding-left: 10px;
list-style: none;
}
/* 给li设置20px的左侧内边距，让出空间显示背景图片，然后设置背景图片、不重复、定位 */
.list li {
padding-left: 20px;
background: url(小图标路径) no-repeat left center;
line-height: 30px;
}
</style>
<!-- 添加1个ul和6个li -->
<ul class="list">
<li>文字内容</li>
<li>文字内容</li>
<li>文字内容</li>
<li>文字内容</li>
<li>文字内容</li>
<li>文字内容</li>
</ul>
精灵图（雪碧图）
处理网页背景图像的方式
需求：当用户访问网页的时候，会有很多小图标，这些小图片每个都需要一次http请求，很耗费资源，降低加载速度，我们可以把所有小图标拼成一张大图，然后使用背景定位技术来渲染
技术依据：
- 大图的背景一定是透明的png图片
- 利用背景定位加载图片
/* 设置宽高等于要使用的小图片的宽高（可以使用切片工具量取），不重复，定位可以无脑使用切片工具提供的x和y值加上负号 */
div {
width: 56px;
height: 13px;
background: url(雪碧图地址) no-repeat -146px -103px;
}
注意事项：
- 都是小尺寸的装饰图片，插入图不可以
- 精灵图宽度取决于最宽的那个背景图的标签宽度
- 精灵图可以横向摆放也可以纵向摆放，但是每张图片之间要留够的间距，以免加载的时候加载到多余的部分
- 精灵图底端留空白，方便日后新增精灵图
- 可以在线生成精灵图，使用网络
CSS3新增背景属性
背景半透明
CSS3加入了半透明写法，色值增加到了rgba模式
rgba模式：在原本rgb基础上，新增了a，取值0-1之间，0表示完全透明，1代表完全不透明，0-1之间取值代表不同程度的透明度
写法：rgba（红，绿，蓝，透明度）
/* 0.5代表透明度 */
background-color: rgba(255, 255, 0, 0.5);
- 透明只会影响背景，不会影响盒子内部元素的显示效果
- 半透明可以应用到所有可以使用raba色值的属性中，例如字体颜色、边框颜色
background-size（背景缩放）
设置背景图片的尺寸，类似于img图片，在移动web开发中做应用适配非常广泛
书写方法：background-size：属性值
| 属性值 | 说明 |
|---|---|
| px值 | 1-2个数值，只设置1个垂直方向会等比例拉伸，2个值按照设置的值加载 |
| %百分比 | 和px一样，设置百分比参考盒子宽高 |
| cover | 等比例缩放，使X和Y都充满图片，如有有多出来的则会被隐藏掉 |
| contai | 等比例缩放，直到X或者Y到最大值位置，可能X和y会有一个还没有充满 |
div {
width: 500px;
height: 500px;
border: 5px solid red;
background: url(./icons.png) no-repeat;
/* 下面是4种取值写法，不可以合写进background中 */
background-size: 20px 40px;
background-size: 50% 50%;
background-size: cover;
background-size: contain;
}
background-image（多背景）
一个盒子添加多张背景图片，前面的显示在最上面，后面的层叠在下面
书写方式：background-image：url（），url（）......
/* 多张背景图加载，层叠显示 */
background-image: url(路径1), url(路径2), url(路径3);
定位
是一种布局中重要属性，常用来制作压盖效果或者位置相关的效果
postition（定位）
给元素设置整体定位，必须同时存在position属性和偏移量属性才能生效
书写方法：position：属性值
| 属性值 | 说明 |
|---|---|
| relative | 相对定位 |
| absolute | 绝对定位 |
| fixed | 固定定位 |
属性值用来设置定位元素，每个属性值对应着不同的参考元素
偏移量属性
定位的元素，在水平或者垂直方向需要偏移的距离
- 水平：left（左）、right（右）
- 垂直：top（上）、bottom（下）
相对定位（relatve）
参考这个元素原始应该加载的位置
书写方式：position：relatve； 水平偏移：数值； 垂直偏移：数值
相对定位并没有脱离原始状态（标准流、浮动），不会让出原始占有的位置，显示效果上，原位占坑，形影分离
/* 相对定位,向下移动100px，向右移动100px */
position：relatve;
top: 100px; 等价于 bottom: -100px;
left: 100px; 等价于 right: -100px;
注意事项：
- 偏移量属性区分正负
- 正数表示偏移方向和属性名相反
- 负数表示偏移方向和属性名相同
- 水平和垂直方向上，只能设置一个属性，如果left和right同时存在，以left为准，垂直方向以top为准
- 相对定位参考自身位置，+left = -right，+top = - bottom，为了方便记忆，可以平时只使用top和left
实际应用：
- 相对定位比较稳定，不会随意放出位置，可以把相对定位作为绝对定位的参考元素
- 相对定位比较稳定，可以在占有原始位置的情况下，对加载效果区域进行位置调整，进行微调设置，或者对文字进行微调
<!--需求：
1、建立一个导航栏，要求鼠标移上后导航上方出现一个边框，且原本位置不能变
2、给一段文字添加注释
-->
<style>
* {
margin: 0;
padding: 0;
}
/* 设置导航栏基本属性，宽高、居中显示、去除自带样式、背景色 */
.nav {
width: 1080px;
height: 50px;
margin: 100px auto;
list-style: none;
background: #cccccc;
}
/* 给每个导航标签设置样式，高度等于导航栏高度 */
.nav li {
float: left;
width: 180px;
height: 50px;
}
/* a标签设置样式，转化块、宽高、行高、居中 */
.nav li a {
display: block;
width: 180px;
height: 50px;
line-height: 50px;
text-align: center;
}
/* 鼠标移上效果，相对定位、上移4px，出现上边框，背景色 */
.nav li a:hover {
position: relative;
top: -4px;
border-top: 4px solid yellow;
background: red;
}
p {
width: 200px;
border: 2px solid red;
}
/* p元素添加注释，上移5px */
p span {
position: relative;
top: -5px;
font-size: 10px;
}
</style>
<!-- 导航栏 -->
<ul class="nav">
<li><a href="#">导航文字</a></li>
<li><a href="#">导航文字</a></li>
<li><a href="#">导航文字</a></li>
<li><a href="#">导航文字</a></li>
<li><a href="#">导航文字</a></li>
<li><a href="#">导航文字</a></li>
</ul>
<!-- p添加注释【1】 -->
<p>我是文字我是文字我是文字我是<span>[1]</span>文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字</p>
绝对定位（absolute）
参考距离最近的有定位的祖先元素的，都没有则参考body，必须搭配偏移量才能使用
书写方式：position：absolute； 水平偏移：数值； 垂直偏移：数值
绝对定位脱离了标准流，类似于浮动，让出原始位置，可设置宽高，可随时定义位置，不设置高度只能被撑开
注意：
- 参考元素不固定，不同参考元素和偏移值会有不同的表现效果
- 和相对定位不同，四个方向偏移量不再有关系，无法等价互换
参考点
- 如果有top参与的时候，参考点就是body或者盒子的左上或者右上顶点，
- 如果bottom参与定位，参考点就是body！！！首屏！！！！或者盒子的左下或者右下顶点
实际工作不会以body作为参考元素
祖先级参考元素
- 如果祖先级有定位属性，就不会去寻找body，只需要寻找最近的含定位属性的祖先元素的即可
- 当祖先元素设置了相对定位、绝对定位、固定定位，都可以当做子元素绝对定位的参考元素，但由于相对定位比较稳定，所以日常工作中我们一般使用子绝父相的情况比较多
祖先元素参考点：
如果绝对定位参考元素是祖先级元素，参考点就是祖先盒子border的四个顶点，组合方式决定了参考点，绝对定位只关心对比点（子盒子）和参考点（父盒子）之间的距离，忽略padding区域
| 偏移属性值 | 参考点 | 对比点 |
|---|---|---|
| left、top | 祖先元素的左上角（内容区域+padding） | 盒子自身左上角（包含margin） |
| left、bottom | 祖先元素的左下角（内容区域+padding） | 盒子自身左下角（包含margin） |
| right、top | 祖先元素的右上角（内容区域+padding） | 盒子自身右上角（包含margin） |
| right、bottom | 祖先元素的右下角（内容区域+padding） | 盒子自身右下角（包含margin） |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/* 如果box1、2、3都没设置position那么就以body为参考元素
*/
.box1 {
width: 500px;
height: 500px;
border: 10px solid red;
margin: 100px;
position: relative; /* 只要有我在，上边设置了position也没用，也要以我为参考元素 */
}
.box2 {
width: 400px;
height: 400px;
border: 10px solid green;
margin: 40px;
position: absolute; /* 只要有我在，上边设置了position也没用，也要以我为参考元素 */
}
.box3 {
width: 300px;
height: 300px;
border: 10px solid blue;
margin: 40px;
position: fixed; /* 只要有我在，上边设置了position也没用，也要以我为参考元素 */
}
.me {
width: 50px;
height: 50px;
border: 10px solid yellow;
margin: 10px;
background: #cccccc;
position: absolute; /* 设置绝对定位和偏移量 */
top: 0;
left: 0;
}
</style>
</head>
<body>
<div class="box1">
<div class="box2">
<div class="box3">
<div class="me"></div>
</div>
</div>
</div>
</body>
</html>
固定定位（fixed）
参考元素只能根据浏览器窗口四个顶点，位置根据偏移量决定，不随着屏幕滚动而滚动
书写方法：position：fixed； 水平偏移：数值； 垂直偏移：数值
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div {
width: 300px;
height: 300px;
margin: 20px;
background: #cccccc;
}
p {
/* 设置固定定位和偏移量 */
position: fixed;
right: 20px;
bottom: 20px;
}
</style>
</head>
<body>
<p>我是固定的</p>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</body>
</html>
脱离标准流，让相互位置，可设置宽高，可任意设置位置，参考元素是浏览器窗口，始终显示在窗口固定位置
定位属性的应用
压盖效果
所有定位都可以实现压盖效果，绝对定位脱离标准流，压盖效果更彻底，比较常用
.box1 {
position: relative;
border: 2px solid red;
}
/* 设置p的绝对定位，然后调整偏移量 */
.box1 p {
position: absolute;
top: 20px;
left: 20px;
width: 100px;
height: 100px;
background-color: pink;
}
<div class="box1">
<img src="路径" alt="">
<p>11111</p>
</div>
居中显示
思路：
- 给父盒子设置定位属性
- 自己设置绝对定位，偏移量为50%
- 给自己添加一个反方向的margin负值，数值等于子盒子的一半
/* 设置box1相对定位 */
.box1 {
position: relative;
width: 500px;
height: 300px;
border: 2px solid red;
margin: 50px auto;
}
/* 设置p绝对定位，偏移量是父元素的50%，再使用margin的负值拉回一半的宽度和高度 */
.box1 p {
position: absolute;
top: 50%;
left: 50%;
width: 600px;
height: 100px;
margin: -50px 0 0 -300px;
background: #ccc;
}
<!-- box1下面的p元素垂直居中 -->
<div class="box1">
<p>11111</p>
</div>
定位中的压盖顺序（z-index）
用来定义有重叠的元素谁在上面谁在下面显示
默认压盖顺序
- 定位元素不分类型，都会压盖标准流和浮动的元素
- 如果都是定位元素，会按照HTML书写顺序，后写的压盖先写的，和类型没关系
自定义压盖顺序（z-index）
更改定位元素的压盖顺序
书写方式：z-index：数字
注意事项：
- 属性值大的压盖属性值小的
- 如果属性值是相同的，后写的压盖先写的
- z-index只能给定位元素设置，其他元素不生效
- （先比父亲，再比儿子）多个父子盒子中，如果父盒子设置了z-index，数值多大的压盖小的，子盒子跟着父盒子一起压盖，如果父盒子没设置，子盒子设置了，父盒子还是按照书写顺序，子盒子按照z-index压盖
<style>
* {
padding: 0;
margin: 0;
}
.fuqin1 {
position: relative;
/* 如果我的z-index比fuqin2的大，我和我儿子就压在fuqin2和erzi2上面，否则，默认fuqin2和erzi2压住我 */
/* z-index: 1; */
width: 200px;
height: 200px;
border: 10px solid red;
}
.fuqin2 {
position: absolute;
/* 如果我和fuqi1都没设置z-index，默认我压在fuqin1和erzi1上面 */
/* z-index: 1; */
top: 0;
left: 0;
width: 200px;
height: 200px;
border: 10px solid green;
}
.fuqin1 .erzi1 {
position: relative;
/* 如果fuqin们都没设置z-index，那我会压在erzi2上面，因为我有z-index */
z-index: 1;
width: 100px;
height: 100px;
background: pink;
}
.fuqin2 .erzi2 {
/* 我在erzi1下面，就因为erzi1设置了z-index */
position: relative;
width: 50px;
height: 50px;
background: skyblue;
}
</style>
</head>
<body>
<div class="fuqin1">
<div class="erzi1"></div>
</div>
<div class="fuqin2">
<div class="erzi2"></div>
</div>
定位属性的应用
CSS书写顺序（推荐）：结构（display、宽高、浮动、定位等）》盒模型属性》背景属性》文字属性
cursor： pointer（鼠标光标变手）
轮播图静态结构布局
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>position:absolute</title>
<style>
/* 清除默认样式 */
* {
padding: 0;
margin: 0;
}
ul, ol {
list-style: none;
}
a {
text-decoration: none;
}
/* 样式设置 */
.lunbo {
position: relative;
width: 880px;
height: 550px;
margin: 100px auto;
border: 5px solid #ccc;
}
/* 轮播图图片组 */
.lunbo .imgs li {
position: absolute;
left: 0;
top: 0;
width: 880px;
height: 550px;
display: none;
}
/* 显示某张图片 */
.lunbo .imgs .show {
display: block;
}
/* 轮播图左右按钮 */
.lunbo .btn a {
position: absolute;
top: 50%;
width: 40px;
height: 40px;
margin-top: -20px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.3);
font: 16px/40px "宋体";
text-align: center;
color: #fff;
}
/* 按钮鼠标划入效果 */
.lunbo .btn a:hover {
background: rgba(255, 255, 255, 0.6);
}
/* 按钮定位 */
.lunbo .btn .left {
left: 10px;
}
.lunbo .btn .right {
right: 10px;
}
/* 轮播图状态栏 */
.lunbo .sub {
position: absolute;
bottom: 10px;
left: 50%;
width: 240px;
height: 20px;
margin-left: -120px;
}
/* 状态栏元素 */
.lunbo .sub li {
float: left;
width: 10px;
height: 10px;
margin-right: 20px;
background: rgba(255, 255, 255, 0.3);
border-radius: 50%;
}
/* 状态栏元素鼠标划入 */
.lunbo .sub li:hover {
background: rgba(255, 255, 255, 0.8);
cursor: pointer;
}
/* 状态栏显示元素高亮 */
.lunbo .sub .show {
background: rgba(255, 255, 255, 0.8);
}
</style>
</head>
<body>
<!-- 轮播图 -->
<div class="lunbo">
<!-- 图片组 -->
<ul class="imgs">
<li class="show"><img src="./lunbo/c1.jpg" alt="第1张图片"></li>
<li><img src="./lunbo/c2.jpg" alt="第2张图片"></li>
<li><img src="./lunbo/c3.jpg" alt="第3张图片"></li>
<li><img src="./lunbo/c4.jpg" alt="第4张图片"></li>
<li><img src="./lunbo/c5.jpg" alt="第5张图片"></li>
<li><img src="./lunbo/c6.jpg" alt="第5张图片"></li>
</ul>
<!-- 左右按钮 -->
<div class="btn">
<a class="left" href="javascript:;" class="btn"><</a>
<a class="right" href="javascript:;" class="btn">></a>
</div>
<!-- 状态显示栏 -->
<ol class="sub">
<li class="show"></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ol>
</div>
</body>
</html>
