CSS盒子模型
2020-04-20 本文已影响0人
小疏林er
1、盒子模型
- 所有的HTML元素可以看成一个盒子，它由外边距（margin）、边框（border）、内填充（padding，叫内边距也行）、内容区（content）组成。
- 外边距、边框、内边距等又分为top（上）、right（右）、bottom（下）、left（左）。内容区大小则由width、height设置。
- 所以一个盒子的高度是（margin-top）+（border-top）+（padding-top）+height+（padding-bottom）+（border-bottom）+（margin-bottom）。宽度也是同理加一起。
盒子模型允许我们在其它元素和周围元素边框之间的空间放置元素。
盒子模型.png
2、Content(内容)
内容区是指可放置其他元素的区域，Content大小由width、height设置。
准备两个边长为100px、不同颜色的div，下面都用他俩来演示。
image.png
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
div {
height: 100px;
width: 100px;
}
</style>
</head>
<body style="">
<div style="background-color: #009688;s">
我是小绿
</div>
<div style="background-color: #EB7350;">
我是小橙
</div>
</body>
</html>
3、margin（外边距）
- 外边距是两个元素之间的距离，对方存在外边框就是到外边框的距离，没有就找边框，再没有就找内边距等，知道找到存在的为止。（外边距类似于兽王王的领地，虽然我用不了这么大地方睡觉，但是你别的动物也不能靠近我的小树林）
- margin 清除周围的（外边框）元素区域。margin 没有背景颜色，是完全透明的。
- margin赋值的四种方式(注意值之间以空格连接)
（1）、margin: 100px:上下左右（上下左右边距都是100px）
（2）、margin: 100px 20px：上下 左右 （上下边距是100px，左右是20px）
常用他来对元素进行居中处理margin: 0px aoto
（3）、margin: 10px 20px 30px：上 左右 下 （上边距是10px，左右是20px，下边距是30px）
（4）、margin: 10px 10px 20px 30px：上 右 下 左 （上右下左边距分别是10px、10px、20px、30px）
对小橙div添加一个100px的下边距：margin-top: 100px;，两个div之间会留下100px的距离。<div style="background-color: #EB7350;margin-top: 100px;"> 我是小橙 </div>因为小绿只有内容区的大小，所以他俩之间的距离就是小橙的下边距100px。
image.png
4、border（边框）
- 默认是没有边框的，边框可以设置宽度（border-width）、颜色（border-color）、样式（border-style）它们也具有上面margin的四种赋值方式，栗子：
border-color: #0000FF #008000;- 常用的赋值方式：
border: 1px #1E9FFF solid;将宽度、样式、颜色写在一起，用空格连接，顺序无所谓。- border-color的设置方式可参考：https://www.jianshu.com/p/974bb6d62f32
border-style：常用的就是solid。
image.png
- 设置边框后可变成圆角:
border-radius:25px;，25px可根据情况更改，越大越圆。
下面为小橙添加了，3px、实线、淡蓝色圆角边框。
image.png
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
div {
height: 100px;
width: 100px;
}
div:nth-last-of-type(1){
margin-top: 100px;
border: 3px solid #01AAED;
border-radius: 20px ;
}
</style>
</head>
<body style="">
<div style="background-color: #009688;s">
我是小绿
</div>
<div style="background-color: #EB7350;">
我是小橙
</div>
</body>
</html>
5、padding（内边距、内填充）
- 内边距是内容区到边框的距离，没有边框就是到margin距离，没有margin就是到其他元素的距离。
- 赋值方式和margin一样（四种）。
下面为小橙添加了内边距（边框更改了一下），来演示他们之间的距离。
image.png
说明:
1、2位置：和以前的不一样了，内容并不是贴着边界，而是再上面、左面各空出30px大小后，才开始放内容。
3位置：小橙和小绿的大小发生了改变。宽了（10+30+10）px，高也一样。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
div {
height: 100px;
width: 100px;
}
div:nth-last-of-type(1){
border: 10px solid #01AAED;
padding-left: 20px;
padding-top: 20px;
}
</style>
</head>
<body style="">
<div style="background-color: #009688;s">
我是小绿哈哈
</div>
<div style="background-color: #EB7350;">
我是小橙哈哈
</div>
</body>
</html>
