CSS基础(4)-三大特性+PxCook的基本使用+盒子模型
学习目标:
◆ 能够认识不同选择器的 优先级 公式
◆ 能够进行 CSS 权重叠加计算,分析并解决CSS 冲突问题
◆ 能够认识 盒子模型 的组成部分
◆ 能够掌握盒子模型的 边框、内边距、外边距 的作用及简写形式
◆ 能够计算盒子的 实际大小
◆ 能够了解 外边距折叠现象,并知道如何解决 盒子塌陷问题
CSS三大特性
1.1优先级的介绍
➢ 特性:不同选择器具有不同的优先级,优先级高的选择器样式会覆盖优先级低选择器样式
➢ 优先级公式:
• 继承 < 通配符选择器 < 标签选择器 < 类选择器 < id选择器 < 行内样式 < !important
➢ 注意点:
1. !important写在属性值的后面,分号的前面!
2. !important不能提升继承的优先级,只要是继承优先级最低!
3. 实际开发中不建议使用 !important 。
1.2 权重叠加计算
➢ 场景:如果是复合选择器,此时需要通过权重叠加计算方法,判断最终哪个选择器优先级最高会生效
➢ 权重叠加计算公式:(每一级之间不存在进位)
➢ 比较规则:
1. 先比较第一级数字,如果比较出来了,之后的统统不看
2. 如果第一级数字相同,此时再去比较第二级数字,如果比较出来了,之后的统统不看
3. ……
4. 如果最终所有数字都相同,表示优先级相同,则比较层叠性(谁写在下面,谁说了算!)
➢ 注意点:!important如果不是继承,则权重最高,天下第一!
盒子模型
1. 盒子模型的介绍
2. 内容区域的宽度和高度
3. 边框( border )
4. 内边距( padding )
5. 外边距(margin)
1.1 盒子模型的介绍
1. 盒子的概念
1. 页面中的每一个标签,都可看做是一个 “盒子”,通过盒子的视角更方便的进行布局
2. 浏览器在渲染(显示)网页时,会将网页中的元素看做是一个个的矩形区域,我们也形象的称之为 盒子
2. 盒子模型
➢ CSS 中规定每个盒子分别由:内容区域(content)、内边距区域(padding)、边框区域(border)、外边距区域(margin)构成,这就是 盒子模型
3. 记忆:可以联想现实中的包装盒
1.2 小结
➢ 盒子模型一共有几个部分组成?分别是什么?
1. 内容区域:content
2. 边框区域:border
3. 内边距区域:padding
4. 外边距区域:margin
2.1 内容的宽度和高度
➢ 作用:利用 width 和 height 属性默认设置是盒子 内容区域 的大小
➢ 属性:width / height
➢ 常见取值:数字+px
2.2 小结
➢ 设置盒子模型内容区域大小可以通过什么属性设置?
1. 宽度:width
2. 高度:height
3.1 边框(border)- 单个属性
➢ 单个属性:
3.2 边框(border)- 连写形式
➢ 属性名:border
➢ 属性值:单个取值的连写,取值之间空格隔开
• 如:border : 10px solid red;
➢ 快捷键:bd + tab
3.3 边框(border)- 单方向设置
➢ 场景:只给盒子的某个方向单独设置边框
➢ 属性名:border - 方位名词
➢ 属性值:连写的取值
3.4 盒子实际大小初级计算公式
➢ 需求:盒子尺寸 400*400,背景绿色,边框10px 实线 黑色,如何完成?
• 注意点: ① 设置width和height是内容的宽高!② 设置border会撑大盒子!
➢ 盒子实际大小初级计算公式:
• 盒子宽度 = 左边框 + 内容宽度 + 右边框
• 盒子高度 = 上边框 + 内容高度 + 下边框
➢ 解决:当盒子被border撑大后,如何满足需求?
• 解决:计算多余大小,手动在内容中减去(手动内减)
布局顺序
1,从外到内,从上到下
2.盒子的样式
1.先调整宽高背景色
2.放盒子内容
3.调整盒子的位置
4.控制盒子的细节,文字的颜色,大小
4.1 内边距(padding)- 取值
➢ 作用:设置 边框 与 内容区域 之间的距离
➢ 属性名:padding
padding属性可以当作复合属性,表示单独设置某个方向的内边距
最多可以设置4个值
多值写法,永远都是从上开始顺时针转一圈,如果数值不够就看对面
➢ 常见取值:
4.2 内边距(padding)- 单方向设置
➢ 场景:只给盒子的某个方向单独设置内边距
➢ 属性名:padding - 方位名词
➢ 属性值:数字 + px
小结
➢ 给盒子设置四周 20px 的内边距可以通过什么属性设置?
• padding : 20px ;
➢ 给盒子设置上下20px、左右30px的内边距可以通过什么属性设置?
• padding : 20px 30px ;
➢ 给盒子设置左侧50px的内边距可以通过什么属性设置?
• padding-left : 50px
4.3 CSS3盒模型(自动内减)
➢ 需求:盒子尺寸300*300,背景粉色,边框10px实线黑色,上下左右20px的内边距,如何完成?
• 给盒子设置border或padding时,盒子会被撑大,如果不想盒子被撑大?
➢ 解决方法 ① :手动内减
• 操作:自己计算多余大小,手动在内容中减去
• 缺点:项目中计算量太大,很麻烦
➢ 解决方法 ② :自动内减
• 操作:给盒子设置属性 box-sizing : border-box ; 即可
• 优点:浏览器会自动计算多余大小,自动在内容中减去
5.1 外边距(margin)- 取值
➢ 作用:设置边框以外,盒子与盒子之间的距离
➢ 属性名:margin
➢ 常见取值:
5.2 外边距(margin) - 单方向设置
➢ 场景:只给盒子的某个方向单独设置外边距
➢ 属性名:margin - 方位名词
➢ 属性值:数字 + px
5.3 margin单方向设置的应用
5.4 清除默认内外边距
➢ 场景:浏览器会默认给部分标签设置默认的margin和padding,但一般在项目开始前需要先清除这些标签默认的
margin和padding,后续自己设置
• 比如:body标签默认有margin:8px
• 比如:p标签默认有上下的margin
• 比如:ul标签默认由上下的margin和padding-left
• ……
➢ 解决方法:
版心
网页的有效内容百分比居中
去掉列表的符号
ul{
list-style:none;
}
5.6 外边距正常情况
➢ 场景:水平布局 的盒子,左右的margin正常,互不影响
➢ 结果:最终两者距离为左右margin的和
5.7 外边距折叠现象 – ① 合并现象
➢ 场景:垂直布局 的 块级元素,上下的margin会合并
➢ 结果:最终两者距离为margin的最大值
➢ 解决方法:避免就好
• 只给其中一个盒子设置margin即可
5.8 外边距折叠现象 – ② 塌陷现象
➢ 场景:互相嵌套 的 块级元素,子元素的 margin-top 会作用在父元素上
➢ 结果:导致父元素一起往下移动
➢ 解决方法:
1. 给父元素设置border-top 或者 padding-top(分隔父子元素的margin-top)
2. 给父元素设置overflow:hidden
3. 转换成行内块元素
4. 设置浮动
5.9 行内元素的margin和padding无效情况
➢ 场景:给行内元素设置margin和padding时
➢ 结果:
1. 水平方向的margin和padding布局中有效!
2. 垂直方向的margin和padding布局中无效!
版权声明:
作者:zhuim521
链接:https://zhuimwl.com/48.html
来源:追梦网络
文章版权归作者所有,未经允许请勿转载。

共有 0 条评论