盒子模型
学习目标
- 能够说出盒子模块的四大组成部；
- 能够掌握盒子模型的边框.内边距.外边距的作用和简写形式；
- 能够计算盒子的实际大小；
- 能够说出CSS3盒模型的代码；
- 能够说出外边距折叠现象-塌陷现象的解决方法；
盒子模型的介绍
盒子的概念：
1.页面中的每一个标签，都可看做是一个 “盒子”，通过盒子的视角更方便的进行布局。
2.浏览器在渲染（显示）网页时，会将网页中的元素看做是一个个的矩形区域，我们也形象的称之为 盒子。
盒子模型：CSS中规定每个盒子分别由：内容区域（content）、内边距区域（padding）、边框区域（border）、外边距区域（margin）构成，这就是
盒子模型
内容区域（content）
内容的宽高
- 利用 width 和 height 属性默认设置是盒子内容区域的大小
- 属性：width / height
- 常见取值：数字+px
边框区域（boder)
1. 作用：给设置边框粗细、边框样式、边框颜色效果
2. 边框的属性：
boder-width 边框的粗细
boder-style 边框的样式
boder-color 边框的颜色
3.边框的连写
快捷键：bd+tab
4.边框单方向设置
属性名：border - 方位名词
属性值：连写的取值
盒子实际大小的初级计算
需求：盒子尺寸 400*400，背景绿色，边框10px 实线 黑色，如何完成
注意点： ① 设置width和height是内容的宽高！② 设置border会撑大盒子！
<!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>Document</title>
<style>
div {
/* 注意点：width和height属性默认设置的是内容区域的大小 */
width: 380px;
height: 380px;
background-color: green;
/* 注意点：border会把盒子撑大 */
border: 10px solid #000;
/*
盒子的实际大小（宽度）=左边框+内容的宽度+右边框
*/
}
</style>
</head>
<body>
<div></div>
</body>
</html>
内边距区域（padding）
作用：设置边框和内容区域之间的距离
属性名：padding
常见取值
- 一个值
- 两个值
- 三个值
- 四个值
内边距（padding)单方西设置
属性名 ：padding - 方位名词
盒子实际大小的终极计算
需求：盒子尺寸300*300，背景粉色，边框10px实线黑色，上下左右20px的内边距，如何完成？
• 注意点：① 设置width和height是内容的宽高！② 设置border会撑大盒子 ③ 设置padding会撑大盒子
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name
最低0.47元/天 解锁文章
522
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
