盒子模型
画盒子
目标:使用合适的选择器画盒子
新属性
<!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>
盒子模型 – 内边距
作用： 设置 内容 与 盒子边缘 之间的距离。
属性名： 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 中的较大值生效
<style>
.one {
width: 100px;
height: 100px;
background-color: brown;
margin-bottom: 80px;
}
.two {
width: 100px;
height: 100px;
background-color: orange;
margin-top: 50px;
}
</style>
外边距问题 – 塌陷问题
场景： 父子级的标签，子级的添加 上外边距 会产生塌陷问题
现象： 导致父级一起向下移动
解决方法：
- 取消子级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>
标准流
标准流也叫文档流,指的是标签在页面中默认的排布规则,例如:块元素独占一行,行内元素可以一行显示多个。
浮动
作用: 让块元素水平排列。
属性名: 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
属性值：
注意: 该属性对单行弹性盒子模型无效。
