盒子模型
- 一个盒子我们会分成四个部分：
- 内容区（content）
- 内边距（padding）
- 边框（border）
- 外边距（margin）
如图：
内容区
- 使用width来设置盒子内容区的宽度
- 使用height来设置盒子内容区的高度
- width和height只是设置了内容区的大小，而不是盒子整个的大小
- 盒子可见边框的大小由内容区，内边距和边框共同决定
边框
大部分浏览器中，边框的宽度和颜色都是有默认值的，而边框的样式默认值都是none。
- 要为一个元素设置边框必须指定三个样式,缺一不可
| 样式 | 作用 |
|---|---|
| border-width | 设置边框宽度 |
| border-color | 设置边框颜色 |
| border-style | 设置边框样式 |
-
使用border-width可以分别指定四个边框的宽度
①如果在border-width指定了四个值，则四个值会分别设置给上 右下左，按照顺时针方向设置的
②如果指定三个值，则三个值会分被设置给上 左右 下，第二个值给左右都设置了
④如果指定一个值，则四个边都是这个值
⑤ 除了border-width，CSS中还提供了四个属性：border-top-width，border-right-width ，border-bottom-width，border-left-width，专门用来设置指定边的宽度。 -
使用border-color设置边框颜色 ，CSS中还提供了四个属性：border-top-color，border-right-color ，border-bottom-color，border-left-color，专门用来设置指定边的颜色。
-
使用border-style来设置边框样式
设置边框样式，可选值：
| 可选值 | 效果 |
|---|---|
| none | 默认值，没有边框 |
| solid | 实现边框 |
| dotted | 点状边框 |
| dashed | 虚线 |
| double | 双线 |
如：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.box1{
width: 200px;
height: 200px;
background-color: #BBFFAA;
border-width: 10px;
border-color: red;
border-style: solid dotted dashed double;
}
</style>
</head>
<body>
<div class="box1">
</div>
</body>
</html>
- border是边框的简写样式
①通过它可以同时设置边框的样式，宽度，颜色；而且没有任何的顺序要求。
②使用border一指定就是同时指定四个边，不能分别指定。
③ border-top ， border-right， border-bottom ，border-left 可以单独指定四个边的样式，规则和border一样，只不过它只对一个边生效。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.box{
width: 200px;
height: 200px;
background-color: #BBFFAA;
/*
*使右侧没有边框
*/
border: red solid 10px;
border-right: none ;
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
内边距
- 内边距（padding），指的是盒子的内容区与盒子边框之间的距离。
- 一共有四个方向的内边距：
padding-top
padding-right
padding-bottom
padding-left - 使用padding可以同时设置四个边框的样式，规则和border-width一致
- 内边距会影响可见框的大小，元素的背景会延伸到内边距
- 盒子的大小是由内容区、内边距、边框共同决定的
- 盒子可见框的宽度=border-left-width+padding-left+width+padding-right+border-right-width
- 可见框的宽度=border-top-width+padding-top+height+padding-bottom+border-bottom-width
示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.box1{
width: 200px;
height: 200px;
background-color: #BBFFAA;
border: 10px red solid;
}
/*
* 创建一个子元素box2占满box1
*/
.box2{
width: 100%;
height: 100%;
background-color: yellow;
}
</style>
</head>
<body>
<div class="box1">
<div class="box2"></div>
</div>
</body>
</html>
外边距
-
外边距指的是当前盒子和其他盒子之间的距离，它不会影响盒子可见框的大小，而是会影响到盒子的位置。
-
盒子有四个方向的外边距：
margin-top
margin-right
margin-bottom
margin-left -
由于页面中的元素都是靠左上摆放的， 所以注意当我们设置上和左外边距时，会导致盒子自身的位置发生改变，而如果是设置有和下外边距会改变其他盒子的位置。
-
外边距也可以指定为一个负值，如果外边距设置的是负值，元素会向反方向移动。
-
margin还可以设置为auto,auto一般指设置给水平方向的margin
- 如果只指定单独左外边距或右外边距的margin为auto，则会将外边距设置为最大值；
- 如果将left和right同时设置为auto，则会将两侧的外边距设置为相同的值， 就可以使元素自动在父元素中剧中，所以我们经常将左右外边距设置为auto，以使子元素在父元素中水平居中。
- 垂直方向外边距如果设置为auto，则外边距默认为0
- 外边距同样可以使用简写属性margin，可以同时设置四个方向的外边距，规则和padding一样
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.box1{
width: 200px;
height: 200px;
background-color: #BBFFAA;
border: 10px solid red;
/* margin-left: auto;
margin-right: auto; */
/* margin: 10px 20px 30px 40px;*/
margin: 0 auto;
}
.box2{
width: 200px;
height: 200px;
background-color: yellow;
}
</style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
</body>
</html>
- 垂直外边距的重叠
- 在网页中垂直方向的相邻的外边距会发生外边距的重叠
- 外边距重叠，指兄弟元素之间的相邻外边距会取最大值而不是取和
- 构成条件:
* 1.垂直的外边距
* 2.相邻 - 如果父子元素的外边距相邻了，则子元素的外边距会设置给父元素
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.box1{
width: 100px;
height: 100px;
background-color: red;
margin-bottom: 100px;
}
.box2{
width: 100px;
height: 100px;
background-color: green;
margin-top: 100px;
}
.box3{
width: 200px;
height: 200px;
background-color: yellow;
/*
* 为box3设置一个上边框
*/
border-top: 1px red solid;
padding-top: 1px;
}
.box4{
width: 100px;
height: 100px;
background-color: cyan;
/*
* 为子元素设置一个上外边距，使子元素的位置下移
*/
margin-top: 100px;
}
</style>
</head>
<body>
<div class="box1"></div>
a
<div class="box2"></div>
<div class="box3">
<div class="box4"></div>
</div>
</body>
</html>
浏览器默认样式
- 浏览器为在页面中没有样式时，也可以让页面有一个比较好的显示效果
- 所以为很多的元素设置一些默认的margin和padding，而它的这些默认样式，正常情况下我们是不需要使用的
- 所以我们往往在编写样式之间需要将浏览器中的默认的margin和padding都去掉
*{
margin: 0;
padding: 0;
}
示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
/*
* 清除浏览器的默认样式
*/
*{
margin: 0;
padding: 0;
}
.box1{
width: 100px;
height: 100px;
background-color: green;
}
p{
background-color: yellow;
}
</style>
</head>
<body>
<div class="box1"></div>
<p>我是一个p标签</p>
<p>我是一个p标签</p>
<p>我是一个p标签</p>
<p>我是一个p标签</p>
<ul>
<li>无序列表</li>
<li>无序列表</li>
<li>无序列表</li>
<li>无序列表</li>
</ul>
</body>
</html>
内联元素的盒子模型
- 内容区
- 内联元素不能设置width和height
- 内边距
- 内联元素可以设置水平方向的内边距，会影响布局
- 内联元素可以设置垂直方向的内边距，但是不会影响页面的布局
- 边框
- 内联元素可以设置边框，但是垂直的边框不会影响到页面的布局，水平方向会影响页面布局
- 外边距
- 内联元素支持水平方向的外边距， 水平方向的相邻外边距不会重叠，而是求和
- 内联元素不支持垂直外边距
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
