CSS-02（pink老师课程笔记）
Emmet语法
提高编写速度
HTML
生成标签：标签名+tab建
多个相同标签：div*3（生成3组）
父子关系：ul>li div>span
兄弟关系：div+p
有class或id的标签名：p.nav或p#nav
有顺序的类名：.demo$5
生成的标签内有内容：div{内容}
CSS
text-align：center=tac
text-indent：=ti
width：200=w200
text-decoration：none=tdn
复合选择器
由多个基础选择器组成。
后代选择器（重要）
包含选择器
元素1 元素2 {样式声明}（1为父，2为子，最终选择的是元素2）空格隔开
ul li {color: pink}将ul中的所有li改为粉色
ul li a{color: blue}后代均可选择
.nav li a {color:red}
子选择器(重要)
只能选择亲儿子
元素1>元素2{样式声明}
大于隔开
div>a {
color: rgb(66, 67, 104);
}
并集选择器（重要）
选择多组标签，定义相同样式
元素1，元素2{样式声明}
逗号隔开
.peiqi,
.pig {
color: pink;
}
一般竖着写
伪类选择器
鼠标放置在文字上发生变化
用冒号（：）表示
链接(a)
a:link未被访问的链接
a:visited已访问
a:hover鼠标指针位于其上的链接
a:active鼠标按下未弹起的链接
注意事项：
按照LVHA的顺序进行声明
链接样式单独指定
实际开发中的写法：
a{
color: gray;
text-decoration: none
}
a:hover{
color:red;
text-decoration: none
}
focus:选取有焦点的表单元素(input)
一般input类表单元素才能获取
input:focus{
background-color:yellow;}
元素显示模式
标签以什么方式进行显示
HTML一般分为块元素和行内元素两种类型
块元素（如，div）
独占一行
高度、宽度、外边距及内边距都可以控制
宽度默认是容器的100%
是一个容器，里面可以放行内或者块级元素
文字类的元素内不能放块级元素（p、h1）
行内元素（如，span）
一行可显示多个
高、宽直接设置是无效的
默认宽度是它本身内容的宽度
只能容纳文本或其他行内元素
链接里可放块级元素
行内块元素（img / input / td）
一行可显示多个,中间空白隔开
默认宽度是它本身内容的宽度
高度、宽度、外边距及内边距都可以控制
元素显示模式转换
转换为块级元素：display：block
a {
width: 200px;
height: 200px;
background-color: pink;
display: block;
}
转换为行内元素：display：inline
转换为行内块元素：display：inline-block
文字垂直居中：让文字的高度（行高）等于盒子的高度
height: 30px;
line-height: 30px;
背景
background-color-背景颜色
background-color: transparent(透明)或颜色值（red）
background-image-背景图片
background-image
装饰性图片、logo、超大图。优点：位置便于控制
background-image: none |url(图片地址)
background-repeat-背景平铺
background-repeat
background-repeat :repeat | no-repeat | repeat-x | repeat-y 图片是否平铺（默认平铺）
background-position-背景位置
background-position
background-position :length || length
（20px 20px）第一个X轴，第二个为Y轴
background-position :position || position
（top|center|left|right）与顺序无关
指定一个position，另一个省略，则省略则默认居中
混合单位
background-position: 20px center;
与顺序有关，x和y一一对应
background-attachment-背景固定
视差滚动
background-attachment
background-attachment: scroll | fixed;(滚动|固定)
默认滚动
复合写法
background：颜色 图片地址 平铺 图像滚动 图片位置
约定俗成
背景色半透明
background: rgba(0, 0, 0, 0.5);
最后一个值介于0~1之间
三大特性
层叠性
相同选择器设置相同的样式，就近原则
继承性
子标签继承父标签的某些样式（子承父业）
主要继承的是文字相关（text-，font-，line-，color）
特殊情况-行高的继承
行高可跟单位（px）也可不跟
font: 12px/1.5 'Times New Romon';行高为当前文字大小的1.5倍。
优先级
一个元素指定多个选择器
选择器相同，则执行层叠性
选择器不同，则根据选择器权重执行
| 选择器 | 权重 |
|---|---|
| 继承或* | 0.0.0.0 |
| 元素 | 0.0.0.1 |
| 类、伪类 | 0.0.1.0 |
| ID | 0.1.0.0 |
| 行内style=”“ | 1.0.0.0 |
| ！important | 无穷大 |
`div {
color: blue !important;
}`
注意：继承的权重为0
权重的叠加（复合选择器）
CSS盒子模型
三大核心：盒子模型、浮动和定位
网页布局的本质
组成部分
边框border、内/外边距padding/margin、内容content
border
宽度（粗细）、样式、颜色
div {
width: 300px;
height: 300px;
border-width: 20px;
*/\* 边框样式：solid实线、dashed虚线、dotted点线 \*/*
*/\* border-style: solid; \*/*
*/\* border-style: dashed; \*/*
border-style: dotted;
border-color: pink;
}
复合写法
border: 10px solid pink;
边框可分开写（border-top/bottom/right/left）
border: 10px solid blue;
border-top: 10px solid red;
细线边框
border-collapse：合并相邻边框
table {
width: 300px;
height: 300px;
}
table,
td,
th {
border: 1px solid pink;
border-collapse: collapse;
font-size: 12px;
text-align: center;
边框会影响盒子的实际大小
padding
top/bottum/right/left
padding-left: 20px;
复合写法
padding： 5px；上下左右均为5px
padding： 5px 10px；上下5，左右10
padding： 5px 10px 20px；上5，左右10，下20
padding： 5px 10px 20px 30px；上5右10下20左30
padding会影响盒子的实际大小
如果没有指定width或height，则设置border或padding不会撑开盒子
margin
（top/bottom/left/right）
margin简写与padding相同
块级盒子水平居中
条件：设置width；盒子左右外边距都设置为auto
行内或行内块元素水平居中给其父亲添加text-align：center。
相邻块元素垂直外边距合并（兄弟）
解决方法：尽量只给一个盒子添加margin
嵌套块元素塌陷（父子）
解决方法：父元素设置border；父元素设置内边距；父元素添加overflow：hidden
清除内外边距
清楚元素默认的值
* {
padding: 0;
margin: 0;
}
行内元素尽量只设置左右内外边距
