前端基础-CSS布局-第3篇
本篇目录
一、CSS三大特性
1.继承性
2.层叠性
3.优先级
3.1优先级介绍
- 特性:不同选择器具有不同的优先级,优先级高的选择器样式会覆盖优先级低选择器样式
- 优先级公式:
- 继承 < 通配符选择器 < 标签选择器 < 类选择器 < id选择器 < 行内样式 < !important
- 注意:
- !important写在属性值的后面,分号的前面!
- !important不能提升继承的优先级,只要是继承优先级最低!
- 实际开发中不建议使用 !important
3.2权重叠加计算
-
场景:如果是复合选择器,此时需要通过权重叠加计算方法,判断最终哪个选择器优先级最高会生效
-
权重叠加计算公式:(每一级之间不存在进位)
-
比较规则:
- 先比较第一级数字,如果比较出来了,之后的统统不看
- 如果第一级数字相同,此时再去比较第二级数字,如果比较出来了,之后的统统不看
- 如果最终所有数字都相同,表示优先级相同,则比较层叠性(谁写在下面,谁说了算!)
-
注意:!important如果不是继承,则权重最高,天下第一!
3.3(拓展)权重叠加计算案例
- 权重计算题解题步骤:
- 先判断选择器是否能直接选中标签,如果不能直接选中 → 是继承,优先级最低 → 直接pass
- 通过权重计算公式,判断谁权重最高
- 注意:
- 如果都是继承,先看当前标签的父标签样式
- 实际开发中选择标签需要精准,尽量避免多个选择器同时选中一个标签的情况,不要自己难为自己
3.4(拓展)查错流程 (遇到样式出不来,要学会通过调试工具找错)
二、PxCook的基本使用
1.打开设计图
① 打开软件 ② 拖拽入设计图 ③ 新建项目
2.常用快捷键
- 放大设计图:ctrl + +
- 缩小设计图:ctrl + -
- 移动设计图:空格按住不放,鼠标拖动
3.常用工具
- 量尺寸
- 吸颜色
4.从psd文件中直接获取数据
- 切换到开发界面,直接点击获取数据
三、盒子模型
1.盒子模型介绍
-
盒子的概念
- 页面中的每一个标签,都可看做是一个 “盒子”,通过盒子的视角更方便的进行布局
- 浏览器在渲染(显示)网页时,会将网页中的元素看做是一个个的矩形区域,我们也形象的称之为 盒子
-
盒子模型
- CSS 中规定每个盒子分别由:内容区域(content)、内边距区域(padding)、边框区域(border)、外边距区域(margin )构成,这就是 盒子模型
-
记忆:可以联想现实中的包装盒
-
盒模型分类:
- w3c盒模型:
box-sizing:content-box;
—手动内减 - ie盒模型:
box-sizing:border-box;
—自动内减
- w3c盒模型:
2.内容区域的宽度和高度
- 作用:利用 width 和 height 属性默认设置是盒子 内容区域 的大小
- 属性:width / height
- 常见取值:数字+px
3.边框(border)
3.1边框(border)- 单个属性
-
作用:给设置边框粗细、边框样式、边框颜色效果
作用 属性名 属性值 边框粗细 border-width 数字+px 边框样式 border-style 实线solid,虚线dashed,点线dotted 边框颜色 border-color 颜色取值
3.2边框(border)- 连写形式
- 属性名:border
- 属性值:单个取值的连写,取值之间以空格隔开
- 如:border : 10px solid red ;
- 快捷键:bd+tab
3.3边框(border)- 单方向设置
- 场景:只给盒子的某个方向单独设置边框
- 属性名:border - 方位名词
- 属性值:就是连写的取值
3.4新浪导航案例
- 布局顺序:
- 从外往内,从上往下
- 每一个盒子的样式:
- 宽高
- 辅助的背景颜色
- 盒子模型的部分:border、padding、margin
- 其他样式:color、font-、text-、……
4.内边距( padding )
4.1 内边距(padding)- 取值
- 作用:设置 边框 与 内容区域 之间的距离
- 属性名:padding
- 常见取值:
取值 | 示例 | 含义 |
---|---|---|
一个值 | padding:10px; | 上下左右都设置为10px |
两个值 | padding:10px 20px; | 上下设为10px,左右20px |
三个值 | padding:10px 20px 30px; | 上设为10px,左右20px,下30px |
四个值 | padding:10px 20px 30px 40px; | 上10px,右20px,下30px,左40px |
- 记忆规则:从上开始赋值,然后顺时针赋值,如果没有赋值的,看对面的!!
4.2 内边距(padding)- 单方向设置
- 场景:只给盒子的某个方向单独设置内边距
- 属性名:padding - 方位名词
- 属性值:数字 + p
4.3盒子实际大小终极计算公式
-
需求:盒子尺寸300*300,背景粉色,边框10px实线黑色,上下左右20px的内边距,如何完成?
- 注意点:① 设置width和height是内容的宽高!② 设置border会撑大盒子 ③ 设置padding会撑大
-
盒子实际大小终极计算公式:
- 盒子宽度 = 左边框 + 左padding + 内容宽度 + 右padding + 右边框
- 盒子高度 = 上边框 + 上padding + 内容宽度 + 下padding + 下边框
-
解决:当盒子被border和padding撑大后,如何满足需求
- 自己计算多余大小,手动在内容中减去(手动内减)
4.4(案例) 新浪导航的优化
- 需求:优化之前的新浪导航,如果每个导航的字数增加,如何完成效果?
- 解决:将盒子的宽度删除(盒子宽度默认由内容撑开),然后给盒子设置padding左右值→调整左右字间距
4.5 CSS3盒模型(自动内减)
自动内减:
- 操作:给盒子设置属性 box-sizing : border-box ; 即可
- 优点:浏览器会自动计算多余大小,自动在内容中减去
5.外边距(margin)
5.1 外边距(margin)- 取值
- 作用:设置边框以外,盒子与盒子之间的距离
- 属性名:margin
- 常见取值: 同内边距
- 记忆规则: 同内边距
5.2 外边距(margin) - 单方向设置
- 场景:只给盒子的某个方向单独设置外边距
- 属性名:margin - 方位名词
- 属性值:数字 + px
5.3 margin单方向设置的应用
-
应用
方向 属性 效果 水平方向 margin-left 让当前盒子往右移动 水平方向 margin-right 让右边的盒子往右移动 垂直方向 margin-top 让当前盒子往下移动 垂直方向 margin-bottom 让下面的盒子往下移动
5.4 清除默认内外边距
- 场景:浏览器会默认给部分标签设置默认的margin和padding,但一般在项目开始前需要先清除这些标签默认的 margin和padding,后续自己设置
- 比如:body标签默认有margin:8px
- 比如:p标签默认有上下的margin
- 比如:ul标签默认由上下的margin和padding-left
- 解决方法:
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-9DXFF5Gs-1685112590006)(C:\Users\金柯\AppData\Local\Temp\1682938079610.png)]
5.6 外边距正常情况
- 场景:水平布局 的盒子,左右的margin正常,互不影响
- 结果:最终两者距离为左右margin的和
5.7 外边距折叠现象 – ① 合并现象
- 场景:垂直布局 的 块级元素,上下的margin会合并
- 结果:最终两者距离为margin的最大值
- 解决方法:避免就好—只给其中一个盒子设置margin即可
5.8 外边距折叠现象 – ② 塌陷现象
- 场景:互相嵌套 的 块级元素,子元素的 margin-top 会作用在父元素上
- 结果:导致父元素一起往下移动
- 解决方法:
- 给父元素设置border-top 或者 padding-top(分隔父子元素的margin-top) ----也可以用伪元素分隔(如:双伪元素清除法)
- 给父元素设置overflow:hidden
- 转换成行内块元素
- 设置浮动
5.9 行内元素的margin和padding无效情况
- 场景:给行内元素设置margin和padding时
- 结果:
- 水平方向的margin和padding布局中有效!
- 垂直方向的margin和padding布局中无效!
- 补充:
- 垂直方向的padding虽布局无效,但其实本身是有效果的,只是不会撑开上下其他盒子,可应用在a标签hover状态加下划线的案例
5.10补充:不会撑大盒子的特殊情况
- 不会撑大盒子的特殊情况(块级元素)
- 如果子盒子没有设置宽度,此时宽度默认是父盒子的宽度
margin和padding时
- 如果子盒子没有设置宽度,此时宽度默认是父盒子的宽度
- 结果:
- 水平方向的margin和padding布局中有效!
- 垂直方向的margin和padding布局中无效!
- 补充:
- 垂直方向的padding虽布局无效,但其实本身是有效果的,只是不会撑开上下其他盒子,可应用在a标签hover状态加下划线的案例
5.10补充:不会撑大盒子的特殊情况
- 不会撑大盒子的特殊情况(块级元素)
- 如果子盒子没有设置宽度,此时宽度默认是父盒子的宽度
- 此时给子盒子设置左右的padding或者左右的border,不会撑大盒子