(五)复合选择器（更准确，更高效找标签）
由两个或多个基础选择器，通过不同方式组合而成
1.后代选择器：父选择器 子选择器{}（用空格隔开）
html代码：
<div>
<span>shdaklkl</span>
<p>
<span>sdhgljsdlgl</span>
</p>
</div>
css代码：
div span{color:red;} (div中的所有span标签中的内容都显示该样式)
2.子代选择器：选中某元素的子代元素（最近的子级）
选择器写法：父选择器 > 子选择器
css代码: div > span {color:red;} (只有div中的第一个span标签显示该样式)
3.并集选择器：选中多组标签设置相同的样式
选择器1,选择器2,....，选择器N {} (建议每写一个选择器就换一次行)
4.交集选择器：选中同时满足多个条件的元素（同一个标签同时有标签选择器，类选择器或id选择器中的两种到三种）
选择器1选择器2 {} <!--选择器之间直接相连-->
注：若交集选择器中有标签选择器，标签选择器必须书写在最前面
（六）伪类选择器：
设置当鼠标作用于标签元素时的样式
鼠标悬停状态：选择器:hover
例：html代码：标签，css代码：a:hover { color:red;}
任何标签都能设置悬停样式（伪类选择器）（注：除开a，其他有没有效未知，p好像就没有）
（七）伪类-超链接（按LVHA的顺序填写）
在工作中一般只设置hover
a {
color:red;
}
a:hover {
color:greed;
}
(八）CSS三大特性(理解就好)
1.继承性：子级默认继承父级的标签设置
先设置整个body的样式
注：如果标签中有重叠样式现象，浏览器会优先选择特殊的。
因此若想让某一个标签样式不同于公共样式，可单独设置它的选择器。
2.层叠性：
相同属性会覆盖：后浪拍前浪
不同属性会叠加
3.优先级：
当一个标签使用了多种选择器时，基于不同类型的选择器的匹配规则
规则：优先级高的样式生效
公式：通配符选择器<标签选择器<类选择器<id选择器<行内样式<!important
!important: 提权功能，提高权重/优先级到最高,慎用。
*{
color:red !important;
}
4.优先级-叠加计算规则（在存在复合选择器时）（多练就好）
例：.box div{ .box {
color: red; color:green;
} }
分析：他们都没有行内样式和id选择器，则从类选择器个数开始，发现都为1，接着看标签选择器为1：0，所以浏览器会优先显示红色
(九)Emmet写法
代码简写：（Vs Code中）
div标签简写可直接 .类名and .#id名
css可多个属性一起简写：w500+h200+c#fff
(十)背景属性
1.背景图 (默认为平铺效果)
属性名：background-image （bgi：简写方式）
属性值：url（图片地址）
background-imge: url("");
2.背景图平铺方式：
属性名：background-repeat
属性值：
3.背景位置：
默认为左上角
属性名：background-position（bgp）
属性值：1.关键字法：水平、垂直（left、right、center、top、buttom）2.坐标法（数字+px，正负都可） 3.关键字与坐标结合
注：1.数字：先水平后垂直 关键字可颠倒该顺序，
2.可以只写一个关键字，另一个方向默认为居中，数字只写一个值表示水平方向，垂直默认为居中。
4.背景图缩放
如果图比例与盒子尺寸一样则用哪种表示法都是一样的效果
属性名：background-size
属性值：（关键字和百分比方式常用）
contain：如果图片的宽高与盒子尺寸相等则停止缩放，可能露白
用百分比时,100%图片是当图片宽度与盒子宽度一样则停止缩放，高度按原图宽高关系等比缩放。
5.背景图固定
属性名：background-attachment（bga）
属性值：fixed（一般用在大图上，一般不用）
6.背景复合属性
属性名：background（bg）
属性值：color image repeat position/size attachment(空格隔开各个属性值，不区分顺序)
（十一）显示模式(*)
为在布局网页时，根据标签的显示模式选择合适的标签摆放内容
块级元素：（例：div）
独占一行
宽度是父级元素的100%
添加宽高属性生效
行内元素：（例：span、a）
一行共存多个
尺寸由内容撑开
添加宽高不生效
行内块元素：（例：img）
一行共存多个
默认尺寸由内容撑开
添加宽高生效
转换显示模式：
属性名：display
属性值：block（块级）、inline-block（行内块）、inline（行内->一般不用）
经验总结：
（在使用水平对齐方式时，不要转换显示模式为block，应block块级元素自站一行）
文本居中方式：
1.让line-height等于所在盒子尺寸高度
2.text-align:center;(水平居中)
多用后代选择器和类选择器
（十一）结构伪类选择器：根据元素的结构关系查找元素
有多个相同的标签时可用(标签:frist-child..)来选择其中特定的一个设置样式。
:nth-child(公式)：
注：n+5和-n+5包含第5个标签
（十二）伪元素选择器
创建虚拟元素（伪元素），用来摆放装饰性内容
注：1.区别于伪类选择器 ，有两个冒号:
2.必须设置content:" "属性，用来设置伪元素的内容，如果没有内容 ，则引号留空即可
3.伪元素默认是行内显示模式（添加宽高不生效，一行多个，内容撑开）
4.权重和标签选择器相同
<div>爱</div>
(十三)PoCook
PxCook（像素大厨）是一款切图设计工具软件。支持psd文件的文字，颜色，距离智能识别
可用该软件查看设计图的尺寸和颜色
(十四)盒子模型
1.盒子模型-组成
内容(cotent)
内边距(Padding)
边框(border)
外边距(Margin)
2.盒子模型-边框线
属性名：border
属性值：粗细、样式、颜色（无顺序）
样式：
设置单方向的边框线
属性名：border-方位词（bd+方位词首字母-简写）
border-top、border-right、border-bottom、border-left
属性值：粗细、样式、颜色（无顺序）
3.盒子模型 -内边距
属性名：padding/padding-方位词
属性值：数字+px
多值写法：
记忆法：从上开始顺时针，遇到空缺看对面
4.尺寸的计算
盒子尺寸=内容尺寸+border尺寸+内边距尺寸
（给盒子加border和padding会撑大盒子，若想要固定盒子尺寸则在设计物体的宽高时需要考虑border和padding，那么就应减小内容尺寸）
css内置减小内容尺寸方式：
box-sizing:border-box;
5.外边距
属性名margin
属性值：与padding相同
版心居中：（必须要设置盒子宽度）
margin:0 auto;
6.清除默认样式
(1)去除默认内外边距
*{
margin:0;
padding:0;
box-sizing：border-box；<!--启动内减模式,预防撑大盒子-->
}
（2）去除有序无序列表的项目符号
li {
list-style:none;
}
(3)去除链接下划线(之前的)
a {
text-decoration:none;
}
7.元素溢出
控制溢出元素的内容的显示方式
属性名：overflow
属性值：
overflow:hidden;(最常用)
8.外边距问题
（1）合并现象
场景：垂直排列的兄弟元素，上下margin会合并（左右排列为叠加效果）
现象：取两个margin中的较大值生效
解决：只设一个
（2）塌陷问题
场景：父子级的标签，子级的添加上外边距 会产生塌陷问题
现象：导致父级一起向下移动
解决方法：
a.取消子级margin，父级设置padding（直接杜绝问题）
b.父级设置overflow：hidden（存在后解决）
c.父级设置border-top（存在后解决）
a推荐使用√
b理解：
浏览器会先检查移动之前父级的位置然后将父级下移溢出区域剪掉，找到父级正确的边缘，于是只将子级向下。
c理解：
同样是让浏览器找到父级正确边缘，修改错误。
9.行内元素-内外边距问题
场景：行内元素（span）添加margin和padding，无法改变元素垂直位置
解决：添加line-height
10.边框圆角效果
属性名：border-radius
属性值：数字+px/百分比
提示属性值为圆角半径
多直写法：左上顺时赋值，无值对角取值
正圆：给正方形盒子设置圆角属性值为宽高的一半/50%（最大为50%，超过无效果）
胶囊形状：给长方形盒子设置圆角属性为盒子高度的一半。
11.阴影效果
属性名：*box-shadow
属性值：x轴偏移量 y轴偏移量（这两个必有） 模糊半径 扩散半径 颜色 内外阴影（属性之间空格隔开，默认是外阴影，内阴影用inset提示）
1747
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
