盒模型
边框属性
什么边框?
- 边框就是环绕在标签宽度和高度周围的线条
- 边框属性的格式
- 连写(同时设置四条边)
-
border：边框的宽度 边框的样式 边框的颜色;
示例代码
<html lang="en">
<head>
<meta charset="UTF-8">
<title>盒模型</title>
<style>
.box{
width: 100px;
height: 100px;
background-color: red;
border: 5px solid blue;
/*
border: 5px solid;
border: 5px blue;
border: solid blue;
*/
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
快捷键：
- bd + border：1px solid #000;
注意点：
- 连写格式中颜色属性可以省略, 省略之后默认就是黑色
- 连写格式中样式不能省略, 省略之后就看不到边框了
- 连写格式中
宽度 可以省略, 省略之后还是可以看到边框
按方向连写(分别设置四条边)
- border-top：边框的宽度 边框的样式 边框的颜色;
- border-right：边框的宽度 边框的样式 边框的颜色;
- border-bottom：边框的宽度 边框的样式 边框的颜色;
- border-left：边框的宽度 边框的样式 边框的颜色;
示例代码
<html lang="en">
<head>
<meta charset="UTF-8">
<title>盒模型</title>
<style>
.box {
width: 100px;
height: 100px;
background-color: red;
border-top: 5px solid blue;
border-right: 10px dashed green;
border-bottom: 15px dotted purple;
border-left: 20px double pink;
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
快捷键：
- bt + border-top：1px solid #000;
- br + border-right：1px solid #000;
- bb + border-bottom：1px solid #000;
- bl + border-left：1px solid #000;
按要素连写(分别设置四条边)
- border-width：上 右 下 左;
- border-style：上 右 下 左;
- border-color：上 右 下 左;
示例代码
<html lang="en">
<head>
<meta charset="UTF-8">
<title>盒模型</title>
<style>
.box {
width: 500px;
height: 500px;
background-color: red;
border-width: 5px 10px 15px 20px;
border-style: solid dashed dotted double;
border-color: blue green purple pink;
/*
border-color: blue green purple;
border-color: blue green;
border-color: blue;
*/
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
注意点：
- 这三个属性的取值是按照顺时针来赋值, 也就是按照
上右下左 来赋值, 而不是按照日常生活中的上下左右
这三个属性的取值省略时的规律
- 上 右 下 左 > 上 右 下 > 左边的取值和右边的一样
- 上 右 下 左 > 上 右 > 左边的取值和右边的一样 下边的取值和上边一样
- 上 右 下 左 > 上 > 右下左边取值和上边一样
非连写(方向 + 要素)
- border-top-width;
- border-top-style;
- border-top-color;
- border-right-width;
- border-right-style;
- border-right-color;
- border-bottom-width;
- border-bottom-style;
- border-bottom-color;
- border-left-width;
- border-left-style;
- border-left-color;
示例代码
<html lang="en">
<head>
<meta charset="UTF-8">
<title>盒模型</title>
<style>
.box {
width: 500px;
height: 500px;
background-color: red;
border-top-width: 5px;
border-top-style: solid;
border-top-color: blue;
border-right-width: 10px;
border-right-style: dashed;
border-right-color: green;
border-bottom-width: 15px;
border-bottom-style: dotted;
border-bottom-color: purple;
border-left-width: 20px;
border-left-style: double;
border-left-color: pink;
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
注意点：
- 同一个选择器中如果设置了多个边框属性, 后面的会覆盖前面的
<html lang="en">
<head>
<meta charset="UTF-8">
<title>盒模型</title>
<style>
.box {
width: 500px;
height: 500px;
background-color: red;
border-top-width: 5px;
border-top-style: solid;
border-top-color: blue;
border-right-width: 10px;
border-right-style: dashed;
border-right-color: green;
border-bottom-width: 15px;
border-bottom-style: dotted;
border-bottom-color: purple;
border-left-width: 20px;
border-left-style: double;
border-left-color: pink;
}
.box2 {
border: 5px solid red;
border-right: 5px dashed green;
}
</style>
</head>
<body>
<div class="box box2"></div>
</body>
</html>
内边距属性
什么是内边距?
- 边框和内容之间的距离就是内边距
单独设置四条边
- padding-top;
- padding-right;
- padding-bottom;
- padding-left;
示例代码
<html lang="en">
<head>
<meta charset="UTF-8">
<title>内边距属性</title>
<style>
div {
width: 98px;
height: 90px;
border: 1px solid #000;
background-color: red;
}
.box1 {
padding-top: 20px;
padding-right: 40px;
padding-bottom: 80px;
padding-left: 160px;
}
</style>
</head>
<body>
<div class="box1">我是内容</div>
</body>
</html>
同时设置四条边
- padding：上 右 下 左;
示例代码
<html lang="en">
<head>
<meta charset="UTF-8">
<title>内边距属性</title>
<style>
div {
width: 98px;
height: 90px;
border: 1px solid #000;
background-color: red;
}
.box1 {
/*
padding:20px 40px 80px 160px;
padding:20px 40px 80px;
padding:20px 40px;
*/
padding: 20px;
}
</style>
</head>
<body>
<div class="box1">我是内容</div>
</body>
</html>
注意点：
这三个属性的取值省略时的规律
- 上 右 下 左 > 上 右 下 > 左边的取值和右边的一样
- 上 右 下 左 > 上 右 > 左边的取值和右边的一样，下边的取值和上边一样
- 上 右 下 左 > 上 > 右下左边取值和上边一样
给标签设置内边距之后, 标签占有的 宽度和高度会发生变化
给标签设置内边距之后, 内边距也会有背景颜色
外边距属性
什么是外边距?
标签和标签之间的距离就是外边距
单独设置四条边
- margin-top;
- margin-right;
- margin-bottom;
- margin-left;
示例代码
<html lang="en">
<head>
<meta charset="UTF-8">
<title>外边距属性</title>
<style>
.box1 {
margin-top: 20px;
margin-right: 40px;
margin-bottom: 80px;
margin-left: 160px;
}
</style>
</head>
<body>
<div class="box1">我是内容</div>
</body>
</html>
同时设置四条边
- margin：上 右 下 左;
示例代码
<html lang="en">
<head>
<meta charset="UTF-8">
<title>外边距属性</title>
<style>
.box1 {
margin: 20px 40px 80px 160px;
background: red;
/*
margin:20px 40px 80px;
margin:20px 40px;
margin:20px;
*/
}
</style>
</head>
<body>
<div class="box1">我是内容</div>
</body>
</html>
注意点：
这三个属性的取值省略时的规律
- 上 右 下 左 > 上 右 下 > 左边的取值和右边的一样
- 上 右 下 左 > 上 右 > 左边的取值和右边的一样，下边的取值和上边一样
- 上 右 下 左 > 上 > 右下左边取值和上边一样
外边距的那一部分是没有背景颜色的
外边距合并现象
- 默认布局的垂直方向上外边距是不会叠加的, 会出现合并现象, 谁的外边距比较大就听谁的
示例代码
<html lang="en">
<head>
<meta charset="UTF-8">
<title>外边距合并现象</title>
<style>
span {
display: inline-block;
width: 100px;
height: 100px;
border: 1px solid #000;
}
div {
height: 100px;
border: 1px solid #000;
}
.hezi1 {
margin-right: 50px;
}
.hezi2 {
margin-left: 100px;
}
.box1 {
margin-bottom: 50px;
}
.box2 {
margin-top: 100px;
}
</style>
</head>
<body>
<span class="hezi1">我是span</span><span class="hezi2">我是span</span>
<div class="box1">我是div</div>
<div class="box2">我是div</div>
</body>
</html>
关于 margin-top 的问题
如果两个盒子是嵌套关系, 那么设置了里面一个盒子顶部的外边距, 外面一个盒子也会被顶下来
如果外面的盒子不想被一起定下来, 那么可以给外面的盒子添加一个边框属性
在企业开发中, 一般情况下如果需要控制嵌套关系盒子之间的距离, 应该首先考虑 padding, 其次再考虑 margin(margin 本质上是用于控制兄弟关系之间的间隙的)
示例代码
<html lang="en">
<head>
<meta charset="UTF-8">
<title>关于 margin-top 的问题</title>
<style>
.big {
width: 500px;
height: 500px;
background-color: red;
/*不设置边框, big 也会被 small 的顶部外边距顶下去*/
border: 5px solid #000;
}
.small {
width: 200px;
height: 200px;
background-color: blue;
margin-top: 150px;
margin-left: 150px;
}
</style>
</head>
<body>
<div class="big">
<div class="small"></div>
</div>
</body>
</html>
text-align：center; 和 margin：0 auto; 的区别
- text-align：center; 是设置盒子中存储的文字 / 图片水平居中
- margin：0 auto; 是让盒子自己水平居中
示例代码
<html lang="en">
<head>
<meta charset="UTF-8">
<title>盒子居中和内容居中</title>
<style>
.father {
width: 800px;
height: 500px;
background-color: red;
/*
文字图片会居中
text-align: center;
*/
/*
盒子自身会居中
*/
margin: 0 auto;
}
.son {
width: 100px;
height: 100px;
background-color: blue;
}
</style>
</head>
<body>
<div class="father">
我是文字
<br/>
<img src="images/girl.jpg">
<div class="son"></div>
</div>
</body>
</html>
什么是 CSS 盒模型?
- CSS 盒模型仅仅是一个形象的比喻, HTML 中的标签都是盒模型
- CSS 盒模型指那些可以设置宽度高度 / 内边距 / 边框 / 外边距的标签
- 这些属性我们可以用日常生活中的常见事物盒子作一个比喻来理解，所以 HTML 标签又叫做盒模型
示例代码
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS盒子模型</title>
<style>
span, a, b, strong {
display: inline-block;
width: 100px;
height: 100px;
border: 6px solid #000;
padding: 20px;
margin: 20px;
}
</style>
</head>
<body>
<span>我是span</span>
<a href="#">我是超链接</a>
<b>我是加粗</b>
<strong>我是强调</strong>
</body>
</html>
- 盒模型宽度和高度
- 内容的宽度和高度
- 就是通过 width / height 属性设置的宽度和高度
元素的宽度和高度
- 宽度 = 左边框 + 左内边距 + width + 右内边距 + 右边框
- 高度，同理可证
规律
- 增加了
padding /border 之后元素的宽高也会发生变化 - 如果增加了
padding /border 之后还想保持元素的宽高, 那么就必须减去内容的宽高
元素空间的宽度和高度
- 宽度 = 左外边距 + 左边框 + 左内边距 + width + 右内边距 + 右边框 + 右外边距
- 高度，同理可证
box-sizing 属性
CSS3 中新增了一个 box-sizing 属性, 这个属性可以保证我们给盒子新增 padding 和 border 之后, 盒子元素的宽度和高度不变
box-sizing 取值
- content-box：元素的宽高 = 边框 + 内边距 + 内容宽高
- border-box：元素的宽高 = width / height 的宽高
增加 padding 和 border 之后要想保证盒子元素的宽高不变, 系统会自动减去一部分内容的宽度和高度
示例代码
<html lang="en">
<head>
<meta charset="UTF-8">
<title>box-sizing 属性</title>
<style>
/*
增加 padding / border 之后元素宽高会变大
*/
.box1 {
width: 200px;
height: 200px;
background-color: blue;
float: right;
border: 20px solid #000;
padding: 20px;
}
</style>
</head>
<body>
<div class="box1"></div>
</body>
</html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>box-sizing 属性</title>
<style>
/*
增加 padding / border 之后元素宽高不会变大
*/
.box1 {
box-sizing: border-box;
width: 200px;
height: 200px;
background-color: blue;
float: right;
border: 20px solid #000;
padding: 20px;
}
</style>
</head>
<body>
<div class="box1"></div>
</body>
</html>
