选择器
简单选择器
ID选择器
元素选择器
类选择器
通配符选择器
- 选中所有元素
* {
color:red; //所有字体变为red
}
属性选择器
- 选择具有特定属性的元素
- [href] 选择有href属性的元素
- [href~=value] 属性值有一个匹配即可（以空格分隔）
[href="http://www.baidu.com"] {
color:blue; //将百度的链接设为蓝色
}
伪类选择器
- 选择某些元素的某种状态
- hover active link
a:link{
color:white; //未访问过的链接
}
a:visited{
color:black; //访问过的链接
}
a:hover{
color:red; //a悬停状态颜色为红色
}
a:active{
color:blue; //鼠标按下（激活）下变成蓝色
}
- 书写顺序： link > visited > hover >active 爱恨法则：love hate
伪元素选择器
生成并选中某个元素内部的第一个子元素或最后一个子元素
span::before{
content: "《";
color:red;
}
span::after{
content:"》";
color:red;
}
//给所有span标签添加一个红色的书名号
选择器的组合
- 并且
- 后代元素 （空格）
- 子元素 （>）
- 相邻兄弟元素（+）
- 兄弟元素（~）
p.red{
color:red //所有class为red的p元素
}
.red li{
color:green; //所有red类下的li标签
}
.red+li{
color:blue; //将.red的下一个兄弟li元素设为blue
}
.red~li{
color:blue; //将.red的下面所有兄弟li元素设为blue
}
层叠
层叠就是解决声明冲突的过程
比较重要性
重要性从高到低
- !important 最重要 权重最高
- 普通样式
- 浏览器默认样式
比较特殊性
总体规则：选择器中的范围越窄 越特殊
具体规则：通过选择器，计算出一个四位数（xxxx）
- 内联样式 （html里的样式）
- 所有id选择器的数量
- 所有类选择器 属性选择器 伪类选择器的数量
- 选择器中所有元素选择器 伪元素选择器
比较源次序
顺序靠后的胜出
继承
子元素会继承父元素的某些CSS属性
通常，与文字相关的都能被继承
属性值的计算过程
一个元素一个元素依次渲染，按照树形目录顺序。
渲染时每个元素的所有CSS属性必须有属性值
一个元素，从无到有计算出所有属性值叫属性值的计算过程。
确定声明值
参考样式表中没有冲突的声明（浏览器声明就在此）
层叠冲突
有冲突的声明使用层叠规则，确定CSS属性
使用继承
对于仍然没有值的，若可以继承，则继承父元素的值
若有 inherit 属性 则优先继承
使用默认值
对于仍然没有值的属性，使用默认值
a{
/* 没有下划线 元素继承父元素*/
text-decoration: none;
color: inherit;
}
特殊的两个CSS取值
- inherit: 手动（强制）继承，将父元素的值取出应用到该元素
- initial：初始值，将该属性设置为默认值
盒模型
box ：盒子，每个元素在页面中都会生成一个矩形区域（盒子）
盒子类型：
1.行盒，display=inline
2.块盒，display=block
行盒在页面中不换行，块盒独占一行
display默认值为inline
浏览器默认样式设置的块盒：容器元素，标题，p。。。。
常见的行盒：span，a，img，video，audio
盒子的组成部分
无论是行盒，还是块盒都有下面几部分组成，由内到外是：
1.内容 content
width height 设置的是盒子内容的宽高
内容部分通常叫做整个盒子的 内容盒（content - box）
2.填充（内边距） padding
padding-left
padding-right
padding-top
padding-bottom
padding: 上 右 下 左 （顺时针）
填充区 + 内容区 = 填充盒（padding - box）
3.边框 border
边框 = 边框样式 + 边框宽度 + 边框颜色
border-width 上右下左
border-color
border-style 上右下左
border 宽度 样式 颜色
边框+填充区+内容区 = 边框盒（border - box ）
4.外边框 margin
边框到其他盒子的距离
盒模型应用
改变宽高范围
box-sizing: border-box 改变width和height的影响范围
改变背景覆盖范围
background-clip修改
溢出处理
overflow：控制溢出时的处理
overflow/-x/-y:visiable/hidden/scoll/auto
断词原则
在哪个位置换行？
word-break,影响在什么位置被截断
normal：在单词位置截断
break-all：截断所欲，所有文字都会被打断
keep-all：所有文字都在单词间截断
空白处理
text-overflow:ellipsis
overflow:hidden
white-space:nowrap
行盒子的盒子模型
常见的：span，strong，i，img，video，audio
显著特点
-
盒子沿着内容延伸
-
行盒不能设置宽高
调整行盒的宽高，应使字体大小，行高，字体类型，间接调整。
-
内边距（填充区）
水平方向有效，垂直方向仅会影响背景，不会占据实际空间。
-
边框
水平方向有效，垂直方向仅会影响背景，不会占据实际空间。
-
外边距
水平方向有效，垂直方向仅会影响背景，不会占据实际空间。
行块盒
display:inline-block
1.不独占一行
2.盒模型中所有尺寸都有效
3.经常用来做分页
可替换元素和非可替换元素
大部分元素，页面上显示的结果取决于元素内容，称为非可替换元素
少部分元素，页面上显示的结果，取决于元素属性，称为可替换元素
可替换元素：img，video，等等 绝大部分为行盒
但可替换元素类似与行块盒，所有尺寸的设置都有效。
常规流
盒模型：规定单个盒子的规则
视觉格式化模型（布局规则）：页面中多个盒子排列规则
视觉格式化模型，大体上将页面中盒子的排列分为三种方式：
- 常规流
- 浮动
- 定位
常规流布局
常规流 文档流 普通文档流 常规文档流
所有元素 默认情况下 都属于常规流布局
总体规则：块盒独占一行，行盒依次水平排列
包含块（containing block）：每个盒子都有它的包含块，包含块决定了盒子的排列区域
绝大部分情况下：盒子的包含块，为其父元素的内容盒（contain）
块盒
每个块盒的margin + border + padding + contain 的宽度刚好等于内容盒的宽度
auto ：吸收掉剩余的宽度
但 width 吸收能力强于margin
在常规流中，块盒在其含块中居中，可以定宽，然后margin设置为auto
每个块盒垂直方向的auto值
height:auto,适应高度，会被内容撑开
margin：auto，表示0
百分比取值
padding,width,margin可以取值为百分比
以上所有的百分比相对于包含块的宽度
margin padding高度也是相对于包含块宽度
当包含块高度为自适应时，height设置百分比无效
当包含块有确定的高度，height设置百分比有效
上下外边距的合并
当两个盒子上下外边距相邻，边距合并 两个外边距取最大值
父子元素也会形成外边距合并 解决办法：margin改为padding
浮动
应用场景
- 文字环绕
- 横向排列
基本特点
- 浮动会强制元素变为块盒
- 浮动元素的包含块，和常规流一样，为父元素盒的内容
盒子尺寸
- 宽度为auto时，表示适应内容宽度
- 高度为auto时，与常规流一致，表示适应内容高度
- margin为auto时，为0
- 边框 内边距 百分比设置与常规流一样
盒子排列
- left：左浮动，元素靠上靠左
- right：右浮动，元素靠上靠右
- 常规盒子会无视浮动盒子 浮动盒子会避开常规盒子
- 行盒会避开浮动盒子
高度坍塌
高度坍塌的根源：常规流盒子的自适应高度不会考虑浮动盒子，因此导致自动高度失效
解决办法：
清除浮动，涉及css属性：clear
- 默认值：none
- left：清除左浮动
- right：清除右浮动
使用clear后会出现在所有浮动的下方
<div class='clearfix'>
......
</div>
.clearfix:after{
clear:both
}
定位
手动控制元素在包含块的精准位置
设计的CSS属性：position
position属性
- 默认值：static，不定位
- relative：相对定位
- absolute：绝对定位
- fixed：固定定位
一个元素，只要position取值不是static，认为该元素是一个定位元素
定位元素会脱离文档流（相对定位除外）
一个脱离了文档流的元素：
- 文档流中的元素摆放时，会忽视脱离了文档流的元素
- 文档流中元素自动计算高度，也会忽略非文档流
相对定位
不会导致脱离文档流，只让元素在原来的位置上进行偏移
可以通过四个CSS属性对其设置
- left
- right
- top
- buttom
盒子的偏移不会对其他盒子产生任何影响
绝对定位
- 高度为auto：适应内容
- 包含块变化：找祖先元素中第一个定位元素（相对定位 绝对定位 固定定位)该元素的填充盒为其包含块
- 若没有包含块，则整个网页就是他的包含块
固定定位
- 其他情况和绝对定位完全一样。包含块不同
- 固定定位固定为视口（浏览器窗口）
定位下的居中（绝对和固定）
某个方向居中
- 定宽（高）
- 将左右（上下）距离设置为0
- 将左右（上下）margin设置为auto
绝对和固定定位中，margin为auto时，会自动吸收剩余空间
多个定位元素重叠时
堆叠上下文
设置z-index，通常情况下，该值越大越靠近用户
只有定位元素设置z-index有效
z-index可以是负数，若是负数，会被常规元素，浮动元素覆盖
绝对定位，固定定位一定是块盒
透明
每个元素都具有透明通道，0～1
1.rgba（红，绿，蓝，alpha）
2.hex：#红绿蓝透
图标
cursor：可以指定默认样式，也可以指定图片（ico,cur格式）
div{
cursor:url("imgs/target.ico"),auto
}
背景图
img元素是html的概念
背景图是css的概念
1.当图片属于网页内容时，必须使用img元素
2.当图片仅用于美化页面时，必须使用背景图
涉及的css属性
- Background-image
- Background-repat:norepat //不重复
默认情况下，背景图会在横坐标和纵坐标重复
- Background-size
Contain:完整的显示图片
cover:撑满整个区域，但比例不变
也可以设置数值或百分比
