CSS三大特性
- 继承性
- 层叠性 : 个选择器样式不冲突， 层叠
- 优先级 : 各选择器样式冲突，根据优先级来决定
优先级的介绍
➢ 优先级比较公式是怎样的?
- 继承 < 通配符选择器 < 标签选择器 < 类选择器 < id选择器 < 行内样式 < !important
➢ !important能提升继承的优先级吗?
- 不能
权重叠加计算
➢ 场景:如果是复合选择器，此时需要通过权重叠加计算方法，判断最终哪个选择器优先级最高会生效
PxCook的基本使用
像素大厨 ？？
盒子模型（重点）
盒子模型的介绍
- 盒子的概念
- 页面中的每一个标签，都可看做是一个 “盒子”，通过盒子的视角更方便的进行布局
- 浏览器在渲染(显示)网页时，会将网页中的元素看做是一个个的矩形区域，我们也形象的称之为 盒子
- 盒子模型
- CSS盒子分别由:内容区域(content)、内边距区域(padding)、边框区域(border)、外边距区域(margin)构成
内容区域的宽度和高度
➢ 设置盒子模型内容区域大小可以通过什么属性设置?
-
宽度:width
-
高度:height
边框( border )
➢ 给盒子设置四周 20像素、实线、蓝色的边框，属性应该如何设置?
- border:20px solid blue;
➢ 给盒子设置上边框 10像素、虚线、黄色的边框，属性应该如何设置?
- border-top:10px dashed yellow;
内边距( padding )
➢ 给盒子设置四周 20px 的内边距可以通过什么属性设置?
- padding : 20px ;
➢ 给盒子设置上下20px、左右30px的内边距可以通过什么属性设置?
- padding : 20px 30px ;
➢ 给盒子设置左侧50px的内边距可以通过什么属性设置?
- padding-left : 50px ;
外边距(margin)
➢ 给盒子设置四周 20px 的外边距可以通过什么属性设置?
- margin : 20px ;
➢ 给盒子设置上下20px、左右30px的外边距可以通过什么属性设置?
- margin : 20px 30px ;
➢ 给盒子设置左侧50px的外边距可以通过什么属性设置?
- margin-left : 50px ;
清除默认内外边距
浏览器会默认给部分标签设置默认的margin和padding，但一般在项目开始前需要先清除这些标签默认的 margin和padding，后续自己设置
* {
margin: 0;
padding: 0;
}
版心居中
div {
margin: 0 auto;
}
外边距折叠现象 - 合并现象
➢ 场景:垂直布局 的 块级元素，上下的margin会合并
➢ 结果:最终两者距离为margin的最大值
➢ 解决方法:避免就好
- 只给其中一个盒子设置margin即可
外边距折叠现象 - 塌陷现象（坑爹现象）
➢ 场景:互相嵌套 的 块级元素，子元素的 margin-top 会作用在父元素上
➢ 结果:导致父元素一起往下移动
➢ 解决方法:
- 给父元素设置border-top 或者 padding-top(分隔父子元素的margin-top)
- 给父元素设置overflow:hidden
- 转换成行内块元素
- 设置浮动
行内元素的margin和padding无效情况
➢ 场景:给行内元素设置margin和padding时
➢ 结果:
- 水平方向的margin和padding布局中有效!
- 垂直方向的margin和padding布局中无效!
