CSS边框属性
学习目标
边框使用方法
border可以设置元素的边框。边框有三部分组成:边框宽度(粗细) 边框样式 边框颜色。
语法：
border : border-width || border-style || border-color
| 属性 | 作用 |
|---|---|
| border-width | 边框宽度(粗细) |
| border-style | 边框样式 |
| border-color | 边框颜色 |
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>边框属性</title>
<style>
div{
/*
样式效果应用在四条边
顺时针，上右下左
*/
width:200px;
height:200px;
border-width:1px;
border-style:solid;
border-color:red;
}
</style>
</head>
<body>
<div>
边框属性
</div>
</body>
</html>
边框样式
边框样式 border-style 可以设置如下值：
| 值 | 含义 |
|---|---|
| dotted | 点状轮廓 |
| dashed | 虚线轮廓 |
| solid | 实线轮廓 |
| double | 双线轮廓 |
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>边框属性</title>
<style>
div{
/*
样式效果应用在四条边
两个值得时候应用在上下 左右
*/
width:200px;
height:200px;
border-width:1px;
border-style:solid;
border-color:red;
}
</style>
</head>
<body>
<div>
边框属性
</div>
</body>
</html>
边框样式的不同写法
边框样式的出现可以有1个值，2个值，3个值，4个值，它们分别代表不同方向的边框属性的变化。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>边框属性</title>
<style>
div{
/*
一个值的时候应用在四条边
两个值的时候应用在上下 左右
三个值的时候应用在上 左右 下
四个值的时候应用在上 右 下 左
*/
width:200px;
height:200px;
border-width:1px 2px 3px;
border-style:solid dashed double;
border-color:red blue yellow;
}
</style>
</head>
<body>
<div>
边框属性
</div>
</body>
</html>
圆角边框
通过对边框的圆角属性的改变，可以完成圆形div的效果。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>css边框属性</title>
<link rel="stylesheet" type="text/css" href="./style.css">
</head>
<body>
<div>
块元素
</div>
<div class="ad">
</div>
<span>
行元素
</span>
<b>加粗</b>
</body>
</html>
./style.css文件
/*div{
width:200px;
height:200px;
background-color:#fff;
border:5px solid green;
线的粗细 线的形状 线的颜色
border-color:green yellow pink;
border-style:ridge groove outset inset;
border-width:10px 20px 30px 40px;
}
*/
.ad{
width:200px;
height:200px;
border:5px solid green;
border-radius:50%;
}
课程总结
CSS 内外边距属性
学习目标
内边距（padding）
内边距padding，又常常被称为“补白”，它指的是内容区到边框之间的那一部分。内边距都是在边框内部的。
padding局部样式
从CSS盒子模型中我们可以看出，内边距分为4个方向：padding-top、padding-right、padding-bottom、padding-left。
语法：
padding-top: 像素值;
padding-right: 像素值;
padding-bottom: 像素值;
padding-left: 像素值;
| 属性 | 作用 |
|---|---|
| padding-top | 上内边距 |
| padding-right | 右内边距 |
| padding-bottom | 下内边距 |
| padding-left | 左内边距 |
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
div {
display:inline-block; /*将块元素转换为inline-block元素*/
padding-top:20px;
padding-right:40px;
padding-bottom:60px;
padding-left:80px;
border:2px solid red;
background-color:#FFDEAD;
}
</style>
</head>
<body>
<div>padding属性学习</div>
</body>
</html>
padding属性简写形式
跟border属性一样，padding属性也有简写形式。在实际开发中，我们往往使用简写形式，因为这样开发效率更高。padding写法有3种，如下所示。
语法：
padding: 像素值;
padding: 像素值1 像素值2;
padding: 像素值1 像素值2 像素值3;
padding: 像素值1 像素值2 像素值3 像素值4;
说明：
padding:20px表示4个方向的内边距都是20px。
padding:20px 40px表示padding-top和padding-bottom为20px，padding-right和padding-left为40px。
padding:20px 40px 50px表示padding-top20px，padding-right和padding-left为40px ,padding-bottom为50px。
padding:20px 40px 60px 80px表示padding-top为20px，padding-right为40px，padding-bottom为60px，padding-left为80px。大家按照顺时针方向记忆就可以了。
| 值的个数 | 表达意思 |
|---|---|
| padding:5px; | 1个值，代表上下左右都有5像素的内边距。 |
| padding:5px 10px; | 2个值，代表上下是5px，左右是10px像素的内边距。 |
| padding:5px 10px 15px; | 3个值，代表上5px，左右10px,下是15px; |
| padding:5px 10px 15px 20px; | 4个值，代表上5px，右10px，下15px，左20px； |
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
div {
display:inline-block; /*将块元素转换为inline-block元素*/
padding:40px 80px;
margin:40px;
border:2px solid red;
background-color:#FFDEAD;
}
</style>
</head>
<body>
<div>padding属性学习</div>
</body>
</html>
外边距（margin）
外边距margin，指的是边框到“父元素”或“兄弟元素”之间的那一部分。外边距是在元素边框的外部的。
margin局部样式
从CSS盒子模型中我们可以看出，外边距分为4个方向：margin-top、margin-right、margin-bottom、margin-left。
语法：
margin-top: 像素值;
margin-right: 像素值;
margin-bottom: 像素值;
margin-left: 像素值;
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
div {
display:inline-block; /*将块元素转换为inline-block元素*/
padding:20px;
margin-top:20px;
margin-right:40px;
margin-bottom:60px;
margin-left:80px;
border:1px solid red;
background-color:#FFDEAD;
}
</style>
</head>
<body>
<div>margin属性</div>
</body>
</html>
为什么加上margin跟没加一样呢？看不出有什么区别啊。
外边距指的是两个盒子之间的距离，它可能是子元素与父元素之间的距离，也可能是兄弟元素之间的距离。上面我们没有加入其他元素当参考对象，肯定看不出来啊。
举例：只有父元素，没有兄弟元素时
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
#father
{
display: inline-block; /*将块元素转换为inline-block元素*/
border:1px solid blue;
}
#son
{
display:inline-block; /*将块元素转换为inline-block元素*/
padding:20px;
margin-top:20px;
margin-right:40px;
margin-bottom:60px;
margin-left:80px;
border:1px solid red;
background-color:#FFDEAD;
}
</style>
</head>
<body>
<div id="father">
<div id="son">margin属性学习</div>
</div>
</body>
</html>
举例：有兄弟元素时
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
#father {
display: inline-block; /*将块元素转换为inline-block元素*/
border:1px solid blue;
}
#son {
display:inline-block; /*将块元素转换为inline-block元素*/
padding:20px;
margin-top:20px;
margin-right:40px;
margin-bottom:60px;
margin-left:80px;
border:1px solid red;
background-color:#FFDEAD;
}
.brother {
height:50px;
background-color:lightskyblue;
}
</style>
</head>
<body>
<div id="father">
<div class="brother"></div>
<div id="son">margin属性学习</div>
<div class="brother"></div>
</div>
</body>
</html>
margin简写形式
跟padding一样，margin也有简写形式。在实际开发中，我们往往使用简写形式，因为这样开发效率更高。其中margin写法也有3种，如下所示。
语法：
margin: 像素值;
margin: 像素值1 像素值2;
margin: 像素值1 像素值2 像素值3 像素值4;
说明：
margin:20px表示4个方向的外边距都是20px。
margin:20px 40px表示margin-top和margin-bottom为20px，margin-right和margin-left为40px。
margin:20px 40px 60px 80px表示margin-top为20px，margin-right为40px，margin-bottom为60px，margin-left为80px。大家按照顺时针方向记忆就可以了。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
div
{
display:inline-block; /*将块元素转换为inline-block元素*/
padding:20px;
margin:40px 80px;
border:1px solid red;
background-color:#FFDEAD;
}
</style>
</head>
<body>
<div>margin属性简写形式</div>
</body>
</html>
浏览器审查元素
在实际开发中，为了更好地进行布局，我们需要获取某一个元素的盒子模型是怎样的，padding是多少，margin又是多少，然后再进行计算。那怎样才可以快速查看元素的盒子模型信息呢？我们可以通过浏览器自带功能“审查元素”来实现。
绝大多数主流浏览器操作是相似，下面我们以Chrome浏览器为例说明一下。
【第1步】：鼠标移到你想要的元素上面，然后按一下右键，选择“检查”（或者按Ctrl+Shift+I），如下图所示。
【第2步】：在弹出的控制台中，我们可以找到该元素的盒子模型，如下图所示。
课程总结
CSS盒模型
学习目标
网页布局的本质
网页布局过程：
-
先准备好相关的网页元素，网页元素基本都是盒子 Box 。
-
利用 CSS 设置好盒子样式，然后摆放到相应位置。
-
往盒子里面装内容。
-
利用 CSS 摆盒子。
CSS盒模型
在HTML中，我们学习了一个很重要的理论：块元素和行内元素。在这一节中，我们介绍CSS中极其重要的一个理论——CSS盒子模型。
在“CSS盒子模型”理论中，页面中的所有元素都可以看成一个盒子，并且占据着一定的页面空间。下图所示为一个CSS盒子模型的具体结构。
一个页面由很多这样的盒子组成，这些盒子之间会互相影响，因此掌握盒子模型需要从两个方面来理解：一是理解单独一个盒子的内部结构（往往是padding）；二是理解多个盒子之间的相互关系（往往是margin）。
每个元素都看成一个盒子，盒子模型是由四个属性组成的：content（内容）、padding（内边距）、margin（外边距）和border（边框）。此外，在盒子模型中，还有宽度width和高度height两大辅助性属性。记住，所有的元素都可以看成一个盒子。
从上面我们可以知道，盒子模型的组成部分有4个，如下表所示。
| 属性 | 说明 |
|---|---|
| content | 内容，可以是文本或图片 |
| padding | 内边距，用于定义内容与边框之间的距离 |
| margin | 外边距，用于定义当前元素与其他元素之间的距离 |
| border | 边框，用于定义元素的边框 |
内容区
内容区是CSS盒子模型的中心，它呈现了盒子的主要信息内容，这些内容可以是文本、图片等多种类型。内容区是盒子模型必备的组成部分，其他3个部分都是可选的。
内容区有3个属性：width、height和overflow。使用width和height属性可以指定盒子内容区的高度和宽度。在这里注意一点，width和height这两个属性是针对内容区content而言，并不包括padding部分。
当内容过多超出width和height时，可以使用overflow属性来指定溢出处理方式。
内边距
内边距，指的是内容区和边框之间的空间，可以看成是内容区的背景区域。
关于内边距的属性有5种：padding-top、padding-bottom、padding-left、padding-right以及综合了以上4个方向的简写内边距属性padding。使用这5种属性可以指定内容区与各方向边框之间的距离。
外边距
外边距，指的是两个盒子之间的距离，它可能是子元素与父元素之间的距离，也可能是兄弟元素之间的距离。外边距使得元素之间不必紧凑地连接在一起，是CSS布局的一个重要手段。
外边距的属性也有5种：margin-top、margin-bottom、margin-left、margin-right以及综合了以上4个方向的简写外边距属性margin。
同时，CSS允许给外边距属性指定负数值，当外边距为负值时，整个盒子将向指定负值的相反方向移动，以此可以产生盒子的重叠效果，这就是传说中的“负margin技术”。
边框
在CSS盒子模型中，边框跟我们之前学过的边框是一样的。
边框属性有border-width、border-style、border-color以及综合了3类属性的简写边框属性border。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
div {
display:inline-block; /*将块元素转换为inline-block元素*/
padding:20px;
margin:40px;
border:2px solid red;
background-color:#FFDEAD;
}
</style>
</head>
<body>
<div>盒子模型</div>
</body>
</html>
标准盒模型
根据 W3C 的规范，元素内容占据的空间是由 width 属性设置的，而内容周围的 padding 和 border 值是另外计算的；即在标准模式下的盒模型。
盒子实际内容（content）的width/height=我们设置的width/height;
盒子总宽度/高度=width/height+padding+border+margin。
怪异盒模型
在该模式下，浏览器的 width 属性不是内容的宽度，而是内容、内边距和边框的宽度的总和；即在怪异模式下的盒模型，
盒子的（content）宽度+内边距padding+边框border宽度=我们设置的width(height也是如此)，
盒子总宽度/高度=width/height +padding+ margin 。
<!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>06-盒子模型</title>
<style>
body {
margin: 0;
padding: 0;
}
div {
width: 200px;
height: 200px;
background: red;
padding: 20px;
border: 5px solid red;
/* 这里是标准的盒子模型 */
/* box-sizing: content-box; */
/*
计算真正的宽度和高度
宽度：自身的宽度+padding的left的宽度和right的宽度+border的left的宽度和right的宽度
高度：自身的高度+padding的top的高度和bottom的高度+border的top的高度和bottom的高度
*/
/* 这里是怪异的盒子模型 */
box-sizing: border-box;
/*
设置的是多少就是多少 = 边框+margin+padding +content
*/
/* margin: -20px; */
/* margin-top: -100px; */
}
</style>
</head>
<body>
<div>
</div>
</body>
</html>
