# 选择器
选择器:帮助你精准的选中想要的元素
## 简单选择器
1.ID选择器
2.元素选择器
3.类选择器
4.通配符选择器
*,选中所有元素
5.属性选择器
根据属性名和属性值来选中元素
```
[这里面写属性值和属性名]
例如: [href=“https://baidu.com"]{
color:red;
}
```
6.伪类选择器
选中某些元素的某种状态
1) link:超链接未访问时的状态
2) visited:超链接访问过后的状态
3) hover:鼠标悬停状态(一般用来选择a元素)
```
a:hover{
color:red;
}
表示的就是选中鼠标悬停时的a元素
```
4) active:激活状态,鼠标按下状态
用法和hover一样,就是把hover换成active就行了
爱恨法则: love hate
7.伪元素选择器
生成并选中某个元素内部的第一个子元素或最后一个子元素
before
```
span::before{
content:"《"
color:red;
}
```
after同理
## 选择器的组合
1.并且
1.后代元素 —— 空格(多用)
2.子元素 —— >
3.相邻兄弟元素 —— +
4.兄弟元素 —— ~
## 选择器的并列
多个选择器用逗号分隔
语法糖
# 属性值的计算过程
一个元素一个元素依次渲染,顺序按照页面文档的树形目录结构进行
渲染每个元素的前提条件: 该元素的所有css属性必须有值
一个元素,从所有属性都没有值,到所有的属性都有值,这个计算过程,叫做属性值计算过程
特殊的两个css取值:
-inherit: 手动(强制)继承,将父元素的值取出应用到该元素
-initial:初始值,将该属性设置为默认值
# 层叠
声明冲突:同一个样式多次用到同一个元素
层叠:解决声明冲突的过程,浏览器自动处理(权重计算)
## 1.比较重要性
重要性从高到低:
>作者样式表:开发者书写的样式
1) 作者样式表中的!important样式
2) 作者样式表中的普通样式
3) 浏览器默认样式表中的样式
## 2.比较特殊性
看选择器
总体规则:选择器选中的范围越窄,越特殊
具体规则:通过选择器,计算出一个4位数 (xxxx)
1.千位:如果是内联样式,记1,否则记0
2.百位:等于选择器中所有id选择器的数量
3.十位:等于选择器中所有类选择器、属性选择器、伪类选择器的数量
4.个位:等于选择器中所有元素选择器、伪元素选择器的数量
## 3.比较源次序
代码书写靠后的胜出
## 应用
1.重置样式表
书写一些作者样式,覆盖浏览器的默认样式
重置样式表覆盖浏览器默认样式
2.爱恨法则
link visited hover active
# 继承
子元素会继承父元素的某些css属性
通常,跟文字相关的属性都会被继承
# 盒模型
box: 盒子,每个元素在页面中都会生成一个矩形区域(盒子)
盒子类型:
1.行盒,display等于inline的元素
2.块盒,display等于block的元素
行盒在页面中不换行、块盒独占一行
display默认值为inline
浏览器默认样式表设置的块盒:容器元素、h1~h6、p
常见的行盒:span、a、img、video、audio
## 盒子的组成部分
无论是行盒还是块盒,都由下面几个部分组成,从内到外分别是:
1.内容 content
width、height,设置的是盒子内容的宽高
内容部分通常叫做整个盒子的**内容盒**
2.填充(内边距) padding
盒子边框到盒子内容的距离
padding-left、padding-right、padding-top、padding-bottom
padding: 简写属性
padding: 上 右 下 左
填充区+内容区= **填充盒**
3.边框 border
边框 = 边框样式 + 边框宽度 +边框颜色
边框+填充区+内容区 = **边框盒**
4.外边距 margin
边框到其他盒子的距离
# 盒模型应用
## 改变宽高范围
默认情况下,width 和 height 设置的是内容盒宽高。
衡量设计稿尺寸的时候,往往使用的是边框盒,但设置width和height,则设置的是内容盒
1.精确计算
2.CSS3:box-sizing
## 改变背景覆盖范围
默认情况下,背景覆盖边框盒
可以通过background-clip进行修改
## 溢出处理
overflow,控制内容溢出边框盒后的处理方式
## 断词规则
会影响文字在什么位置被截断换行
normal: 普通 对于CJK字符(文字位置截断),非CJK字符(单词位置截断)
(word-break)
break-all: 截断所有,所有字符都在文字处截断
Keep-all:保持所有。所有文字都在单词间截断
## 空白处理
white-space:nowrap(不换行)
text-overflow: ellipsis(三个圆点 来表示省略的)
# 行盒的盒模型
常见的行盒: 包含具体内容的元素
span、strong、em、i、img、video、audio
## 显著特点:
1.盒子沿着内容延伸
2.行盒不能设置宽高
调整行盒的宽高,应该使用字体大小、行高、字体类型,间接调整
3.填充区
水平方向有效,垂直方向仅会影响背景,不会实际占据空间。
4.边框
水平方向有效,垂直方向不会实际占据空间
5.外边距
水平方向有效,垂直方向不会实际占据空间
## 行块盒
display属性等于inline-block的盒子
1.不独占一行
2.盒模型中所有尺寸都有效
## 空白折叠
空白折叠,发生在行盒内部 或 行盒之间
## 可替换元素 和 非可替换元素
大部分元素,页面上显示的结果,取决于元素内容,称为**非可替换元素**
少部分元素,页面上显示的结果,取决于元素属性,称为**可替换元素**
可替换元素:img、video、audio
绝大部分可替换元素均为行盒。
可替换元素类似于行块盒,盒模型中所有尺寸都有效。(例如可设置宽高width height)
# 常规流
盒模型:规定单个盒子的规则
视觉格式化模型(布局规则):页面中的多个盒子排列规则
视觉格式化模型,大体上将页面中盒子的排列分为三种方式:
1.常规流
2.浮动
3.定位
## 常规流布局
常规流、文档流,普通文档流,常规文档流
所有元素,默认情况下,都属于常规流布局
总体规则:块盒独占一行,行盒水平依次排列
包含块:每个盒子都有它的包含块,包含块决定了盒子的排列区域。
绝大部分情况下:盒子的包含块,为其父元素的内容盒
**块盒**
1.每个块盒的总宽度,刚好必须等于包含块的宽度
宽度的默认值是auto
margin的取值也可以是auto,默认值0
auto: 将剩余的空间吸收掉
width吸收能力强于margin
若宽度、边框、内边距、外边距计算后,仍然有剩余空间,该剩余空间被margin-right全部吸收
在常规流中,块盒在其包含块中居中,可以定宽,然后左右margin设置为auto。
2.每个块盒垂直方向上的auto值
height:auto,表示适应内容的高度
margin:auto,表示0
3.百分比取值
padding、宽、margin可以取值为百分比
以上的所有百分比相对于包含块的宽度
高度的百分比:
1.包含块的高度取决于子元素的高度,设置百分比无效
2.包含块的高度不取决于子元素的高度,百分比相对于父元素高度
4.上下外边距的合并
两个常规流块盒,上下外边距相邻,会进行合并。
两个外边距取最大值。
# 浮动
视觉格式化模型,大体上将页面中盒子的排列分为三种方式:
1.常规流
2.浮动
3.定位
## 应用场景
1.文字环绕
2.横向排列
## 浮动的基本特点
修改fioat属性值为:
-left:左浮动,元素靠上靠左
-right:右浮动,元素靠上靠右
默认值为none
1.当一个元素浮动后,元素必定为块盒(更改display属性为块盒)
2.浮动元素的包含块和常规流一样,为父元素的内容盒
## 盒子尺寸
1.宽度为auto时,适应内容宽度
2.高度为auto时,与常规流一致,适应内容高度
3.margin为auto时,为0
4.边框、内边距、百分比设置与常规流一样
## 盒子排列
1.左浮动的盒子靠上靠左排列
2.右浮动的盒子靠上靠右排列
3.浮动盒子在包含块中排列时,会避开常规流块盒
4.常规流块盒在排列时,无视浮动盒子
5.行盒在排列时会避开浮动盒子
6.外边距合并不会发生
>如果文字没有在行盒中,浏览器会自动生成一个行盒包裹文字,该行盒叫做匿名行盒
## 高度坍塌
高度坍塌的根源:常规流盒子的自动高度,在计算时,不会考虑浮动盒子
清除浮动,实际css属性:clear
-默认值:none
-left:清除左浮动,该元素必须出现在前面所有左浮动盒子的下方
-right:清除右浮动,该元素必须出现在前面所有右浮动盒子的下方
-both:清除左右浮动,该元素必须出现在前面所有浮动盒子的下方
# 定位
视觉格式化模型,大体上将页面中的盒子的排列分为三种方式:
1.常规流
2.浮动
3.定位
定位;手动控制元素在包含块中的精准位置
涉及的CSS属性:position
## position
-默认值:static,静态定位(不定位)
-relative:相对定位
-absolute:绝对定位
-fixed:固定定位
一个元素,只要position的取值不是static,认为该元素是一个定位元素。
定位元素会脱离常规流(相对定位除外)
一个脱离了文档流元素:
1.文档流中的元素摆放时,会忽略脱离了文档流的元素
2.文档流中元素计算自动高度时,会忽略脱离了文档流的元素
## 相对定位
不会导致元素脱离文档流,只是让元素在原来位置上进行偏移。
可以通过四个CSS属性设置其位置:
-left
-right
-top
-bottom
盒子的偏移不会对其他盒子造成任何影响。
## 绝对定位
1.宽高为auto,适应内容
2.包含块变化:找祖先中第一个定位元素,该元素的填充盒(边框里面的东西)为其包含块。若找不到,则它的包含块为整个网页(初始化包含块)
(图片重叠的问题,当然祖先元素最好为相对定位)
## 固定定位
其他情况和绝对定位完全一样
包含块不同:固定为视口 (浏览器的可视窗口)
## 定位下的居中
某个方向居中:
1.定宽(高)
2.将左右(上下)距离设置为0
3.将左右(上下)margin设置为auto
绝对定位和固定定位中,margin为auto时,会自动吸收剩余空间
## 多个定位元素重叠时
堆叠上下文
设置z-index,通常情况下,该值越大,越靠近用户
只有定位元素设置z-index有效
z-index可以是负数,如果是负数,则遇到常规流、浮动元素,则会被其覆盖
## 补充
-绝对定位、固定定位元素一定是块盒
-绝对定位、固定定位元素一定不是浮动
-没有外边距合并
# 常见样式声明
1.color
元素内部的文字颜色
**预设值**: 定义好的单词
**三原色、色值**:光学三原色(红绿蓝),每个颜色可以使用0~255之间的数字来表达,色值。
```
rgb表示法:
rgb(0,255,0)
hex(16进制)表示法:
#红绿蓝(前两位表示红,中间两位表示绿,后两位表示蓝)
```
淘宝红:#ff4400
黑色:#000000 #000
白色:#ffffff #fff
红:#ff0000 #f00
绿:#00ff00 #0f0
蓝:#0000ff #00f
紫色:#f0f
青色:#0ff
黄色:#ff0
灰色:#ccc
2.background-color
元素背景颜色
3.font-size
元素内部文字尺寸大小
1).px: 像素,绝对单位,简单地理解为文字的高度占多少个像素
2).em:相对单位,相对于父元素的字体大小
每个元素必须有字体大小,如果没有声明,则直接使用父元素的字体大小,如果没有父元素(html),则使用基准字号。
4.font-weight
文字粗细程度,可以取值数字,可以取值预设值
基本都是bold(加粗)或者normal
>strong元素,默认加粗
5.font-family
文字类型(宋体...)
必须用户计算机中存在的字体才会有效。
使用多个字体以匹配不同环境。
sans-serif,非衬线字体
6.font-style
字体样式,通常用它设置斜体
>i元素,em元素,默认样式是倾斜字体;实际使用时,通常用它表示一个图标
7.text-decoration
文本修饰(给文本加线)
>a元素
>del元素:错误的内容
>s元素:过期的内容
8.text-indent
首行文本缩进
9.line-height
每行文本的高度,该值越大,每行文本的距离越大
设置行高为容器的高度,可以让单行文本垂直居中
行高可以设置为纯数字,表示相对于当前元素的字体大小(推荐)
10.width
宽度
11.height
高度
12.letter-space
文字间隙
13.text-align
元素内部文字的水平排列方式