不同选择器的优先级公式
-
继承<通配符选择器<标签选择器<类选择器<id选择器<行内样式<!important
-
注意点
- !important不能提升继承的优先级
权重叠加方法
- （0,0,0,0）
- 1、行内样式的个数
- 2、id选择器的个数
- 3、类选择器的个数
- 4、标签选择器的个数
盒子模块的四大组成部分
-
内容
- content
-
内边距
- padding
-
边框
- border
-
外边距
- margin
1像素实线红色边框的代码
- border: 1px solid red
上下20像素、左右10像素内边距的代码
- padding：20px 10px
盒子实际大小的组成部分
- 左border + 左padding + 内容的宽度 + 右padding + 右border
- content + padding + border
盒子的实际大小
- 左border + 左padding + 内容的宽度 + 右padding + 右border
CSS3盒模型的代码
- box-sizing:border-box
盒子、文本水平居中的代码
-
盒子水平居中
- margin：0 auto
-
文本水平居中
- text-align：center
外边距折叠现象-塌陷现象的解决方法
- 1、给父元素设置border-top或者padding-top
- 2、给父元素设置overflow:hidden
- 3、转换成行内块元素
- 4、设置浮动
CSS 三大特性
-
1、继承性
-
2、层叠性
-
3、优先级
-
优先级的公式
-
继承<通配符选择器<标签选择器<类选择器<id选择器<行内样式< !important
-
注意点
- 1、 !important写在属性值的后面，分号的前面
- 2、 !important不能提升继承的优先级，只要是继承，优先级最低！！
-
-
权重计算
-
（0,0,0,0）
-
从左往右
- 1、行内样式的个数
- 2、id选择器的个数
- 3、类选择器的个数
- 4、标签选择器的个数
- 注意点：如果 !important不是继承，优先级最高！！！
-
比较的规则
- 从左往右一个一个的比较，如果某一位比较出来了，此时后面的统统不看！！！
- 如果发现比较到最后权重是相同的，此时比较层叠性
-
-
权重计算题的解题步骤
- 1、判断选择器是否可以直接选中标签（如果不能直接选中 → 继承，优先级最低 → pass）
- 2、通过权重计算公式比较即可
-
PxCook的基本使用
- 1、量尺寸
- 2、吸颜色
- 3、psd文件在开发中直接获取数据
盒子模型
-
内容：content
- width和height默认设置的是内容部分的宽高
-
边框：border
-
单个的属性
-
边框的粗细
- border-width
-
边框的样式
-
border-style
-
取值
-
实线
- solid
-
虚线
- dashed
-
点线
- dotted
-
-
-
边框的颜色
- border-color
-
-
连写
-
属性名
- border
-
属性值
- width style color
-
快捷键
- bd + tab
-
-
border的单方向设置
-
属性名
-
border-方位名词
- top
- right
- bottom
- left
-
-
属性值
- 连写的属性值
-
-
盒子大小初级计算公式
- 盒子实际大小 = 内容（content）+ 边框（border）
-
-
内边距：padding
-
作用
- 控制边框与内容之间的距离
-
取值
-
一个值
- 上右下左
-
两个值
- 上下
- 左右
-
三个值
- 上
- 左右
- 下
-
四个值
- 上
- 右
- 下
- 左
-
记忆规则：
- 先从上开始赋值，然后顺时针赋值，如果没有赋值的？？？？看对面的！！
-
-
padding的单方向设置
- padding-方位名词
-
盒子大小的终极计算公式
- 盒子实际大小 = 内容（content）+ 边框（border）+ 内边距 （padding）
-
不会撑大盒子的特殊情况
- 如果子盒子没有设置宽度，此时宽度默认是父盒子的宽度
- 此时给子盒子设置左右的padding或者左右的border此时不会撑大盒子
-
css3的盒模型
- 自动内减
- box-sizing:border-box
-
-
外边距：margin
-
作用
- 控制边框以外盒子与盒子之间的距离
-
取值
-
一个值
- 上右下左
-
两个值
- 上下
- 左右
-
三个值
- 上
- 左右
- 下
-
四个值
- 上
- 右
- 下
- 左
-
记忆规则：
- 先从上开始赋值，然后顺时针赋值，如果没有赋值的？？？？看对面的！！
-
-
margin的单方向设置
- margin-方位名词
-
margin的单方向应用
-
水平方向
-
margin-left
- 让当前盒子往右移动
-
margin-right
- 让右边的盒子往右移动
-
-
垂直方向
-
margin-top
- 让当前的盒子往下移动
-
margin-bottom
- 让下面的盒子往下移动
-
-
-
去除标签默认的margin和padding
-
- {margin：0；padding：0；}
-
-
-
margin外边距折叠现象
-
margin的合并现象
-
垂直布局的盒子，此时上下的margin会合并
- 两者的距离为margin的最大值
-
解决方法
- 避免就好！！！！
-
-
margin的塌陷现象
-
互相嵌套的块级元素，父子元素的margin-top会被合并作用在父元素上
- 导致父元素一起往下移动（塌陷）
-
解决方法
-
1、给父元素设置一个border-top或者padding-top
- 分隔父子元素的margin-top
-
2、给父元素设置overflow：hidden
-
3、转换成行内块元素
-
4、设置浮动
-
-
-
-
行内元素的margin和padding无效的特殊情况
- 水平方向的margin和padding布局有效果！
- 垂直方向的margin和padding布局是无效的！
