黑马官网最新2024前端就业课V8.5笔记---CSS篇（2）
盒子模型
画盒子
目标:使用合适的选择器画盒子
属性
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>画盒子</title><style>.red {/* 宽度 */width: 100px;/* 高度 */height: 100px;/* 背景色 */background-color: brown;}.orange {width: 200px;height: 200px;background-color: orange;}</style>
</head>
<body><div class="red">div1</div><div class="orange">div2</div>
</body>
</html>
盒子模型-组成
盒子模型重要组成部分：
- 内容区域 – width & height
- 内边距 – padding（出现在内容与盒子边缘之间）
- 边框线 – border
- 外边距 – margin（出现在盒子外面）
<style>div {width: 200px;height: 200px;background-color: pink;/* 内容与盒子边缘之间 */padding: 20px;border: 1px solid #000;/* 出现在盒子外面，拉开两个盒子之间的距离 */margin: 50px;}</style>
盒子模型 – 边框线
属性名： border（bd）
属性值： 边框线粗细 线条样式 颜色（不区分顺序）
常用线条样式
| 属性值 | 线条样式 |
|---|---|
| solid | 实线 |
| dashed | 虚线 |
| dotted | 电线 |
<style>div {width: 200px;height: 200px;background-color: pink;实线 border: 1px solid #000; 虚线 border: 2px dashed red; 点线 border: 3px dotted green;}</style>
盒子模型-设置单方向边框线
<style>div {width: 200px;height: 200px;background-color: pink;上border-top: 1px solid #000;右border-right: 2px dashed red;下border-bottom: 5px dotted green;左border-left: 10px solid orange;}</style>
盒子模型 – 内边距
作用： 设置 内容 与 盒子边缘 之间的距离。
属性名： padding / padding-方位名词
<style>div {width: 200px;height: 200px;background-color: pink;/* padding: 20px; */padding-top: 10px;padding-right: 20px;padding-bottom: 40px;padding-left: 80px;}</style>
盒子模型 – 内边距 – 多值写法
<style>div {width: 200px;height: 200px;background-color: pink;四值：上 右 下 左 padding: 10px 20px 40px 80px; 三值：上 左右 下 padding: 10px 40px 80px; 两值：上下 左右 padding: 10px 80px;/* 记忆方法：从上开始顺时针转一圈，如果当前方向没有数值，取值跟对面一样 */}</style>
技巧： 从上开始顺时针赋值，当前方向没有数值则与对面取值相同
盒子模型 – 尺寸计算
默认情况
盒子尺寸 = 内容尺寸 + border 尺寸 + 内边距尺寸
结论： 给盒子加 border / padding 会撑大盒子
解决：
- 手动做减法，减掉 border / padding 的尺寸
- 內减模式：box-sizing: border-box
<style>div {width: 200px;height: 200px;手动减法 width: 160px;height: 160px; background-color: pink;padding: 20px;內减模式：不需要手动减法，加padding和border不会撑大盒子 box-sizing: border-box;}</style>
盒子模型 – 外边距
作用： 拉开两个盒子之间的距离
属性名： margin
提示： 与 padding 属性值写法、含义相同
技巧： 版心居中 – 左右 margin 值 为 auto（盒子要有宽度）
<style>div {版心居中要求：盒子要有宽度 width: 1000px;height: 200px;background-color: pink;外边距 不会 撑大盒子 margin: 50px; margin-left: 100px; margin: 50px 100px; margin: 0 auto;}</style>
清除默认样式
清除标签默认的样式，比如：默认的内外边距
<style>* {margin: 0;padding: 0;box-sizing: border-box;}去掉列表的项目符号 li {list-style: none;}</style>
盒子模型 – 元素溢出
作用：控制溢出元素的内容的显示方式。
属性名：overflow
属性值
| 属性值 | 效果 |
|---|---|
| hidden | 溢出隐藏 |
| scroll | 溢出滚动（无论是否溢出，都显示滚动条位置） |
| auto | 溢出滚动（溢出才显示滚动条位置） |
<style>div {width: 200px;height: 200px;background-color: pink;overflow: hidden;overflow: scroll; overflow: auto; }</style>
外边距问题 – 合并现象
场景： 垂直排列的兄弟元素，上下 margin 会合并
现象： 取两个 margin 中的较大值生效
外边距问题 – 塌陷问题
场景： 父子级的标签，子级的添加 上外边距 会产生塌陷问题
现象： 导致父级一起向下移动
解决方法：
- 取消子级margin，父级设置padding
- 父级设置 overflow: hidden
- 父级设置 border-top
<style>.father {width: 300px;height: 300px;background-color: pink;/* padding-top: 50px;box-sizing: border-box; *//* 溢出隐藏 *//* overflow: hidden; */border-top: 1px solid #000;}.son {width: 100px;height: 100px;background-color: orange;margin-top: 50px;}</style>
行内元素 – 内外边距问题
场景： 行内元素添加 margin 和 padding，无法改变元素垂直位置
解决方法： 给行内元素添加 line-height 可以改变垂直位置
<style>span {margin: 50px;padding: 20px;line-height: 100px;}</style>
盒子模型 – 圆角
作用： 设置元素的外边框为圆角。
属性名： border-radius
属性值： 数字+px / 百分比
提示： 属性值是圆角半径
技巧： 从左上角开始顺时针赋值，当前角没有数值则与对角取值相同。
<style>div {margin: 50px auto;width: 200px;height: 200px;background-color: orange;一值 border-radius: 20px; /* 记忆：从左上角顺时针赋值，没有取值的角与对角取值相同 */四值：左上 右上 右下 左下 border-radius: 10px 20px 40px 80px; 三值：左上 右上+左下 右下 border-radius: 10px 40px 80px; 两值：左上+右下 右上+左下 border-radius: 10px 80px;}</style>
常见应用
- 正圆形状
- 胶囊形状
盒子模型 – 阴影（拓展）
作用： 给元素设置阴影效果
属性名： box-shadow
属性值： X 轴偏移量 Y 轴偏移量 模糊半径 扩散半径 颜色 内外阴影
注意：
- X 轴偏移量 和 Y 轴偏移量 必须书写
- 默认是外阴影，内阴影需要添加 inset
<style>div {margin: 50px auto;width: 200px;height: 80px;background-color: orange;box-shadow: 2px 5px 10px 1px rgba(0,0,0,0.5) inset;}</style>
标准流
标准流也叫文档流,指的是标签在页面中默认的排布规则,例如:块元素独占一行,行内元素可以一行显示多个。
浮动（了解 企业多用flex）
作用: 让块元素水平排列。
属性名: Float
- left:左对齐
- right:右对齐
特点:
-
浮动后的盒子顶对齐
-
浮动后的盒子具备行内块特点
-
浮动后的盒子脱标,不占用标准流的位置
清除浮动
场景: 浮动元素会脱标,如果父级没有高度,子级无法撑开父级高度(可能导致页面布局错乱)
清除浮动
方法一:额外标签法
- 在父元素内容的最后添加一个块级元素,设置 CSS 属性 clear: both
方法三:双伪元素法(推荐)
方法二:单伪元素法
.clearfix::after { content: “”; display: block; clear: both; }
.clearfix::before, .clearfix::after { content: “”; display: table; }
.clearfix::after { clear: both; }
方法四:overflow
父元素添加 CSS 属性 overflow: hidden
浮动 – 总结
浮动属性 float,left 表示左浮动,right 表示右浮动
特点：
-
浮动后的盒子顶对齐
-
浮动后的盒子具备行内块特点
-
父级宽度不够,浮动的子级会换行
-
浮动后的盒子脱标
-清除浮动: 子级浮动,父级没有高度,子级无法撑开父级高度,影响布局效果
双伪元素法
拓展: 浮动本质作用是实现图文混排效果
Flex – 认识
Flex 布局也叫弹性布局,是浏览器提倡的布局模型,非常适合结构化布局,提供了强大的空间分布和对齐能力。
Flex 模型不会产生浮动布局中脱标现象,布局网页更简单、更灵活。
Flex – 组成
设置方式: 给父元素设置 Display: Flex,子元素可以自动挤压或拉伸
组成部分:
- 弹性容器
- 弹性盒子
- 主轴:默认在水平方向
- 侧轴 / 交叉轴:默认在垂直方向
Flex – 布局
主轴对齐方式
属性名: Justify-Content
主轴对齐方式
- center
- space-between
- space-around
- space-evenly
侧轴对齐方式
属性名
- align-items：当前弹性容器内所有弹性盒子的侧轴对齐方式（给弹性容器设置）
- align-self：单独控制某个弹性盒子的侧轴对齐方式（给弹性盒子设置）
修改主轴方向
主轴默认在水平方向，侧轴默认在垂直方向
属性名： flex-direction
属性值
弹性伸缩比
作用： 控制弹性盒子的主轴方向的尺寸。
属性名： flex
属性值： 整数数字，表示占用父级剩余尺寸的份数。
弹性盒子换行
弹性盒子可以自动挤压或拉伸，默认情况下，所有弹性盒子都在一行显示。
属性名： flex-wrap
属性值：
- wrap：换行
- nowrap：不换行（默认
行对齐方式
属性名: Align-Content
属性值：
注意: 该属性对单行弹性盒子模型无效。