盒子模型有两种，分别是 ie 盒子模型和标准 w3c 盒子模型
border 边框
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
#cube {
width: 300px;
height: 300px;
background: gray;
border:20px solid blue;
}
</style>
</head>
<body>
<div id="cube"></div>
</body>
</html>
如下代码代表20像素蓝色的实线(solid)边框
border:20px solid blue;
image.png
虚线(dashed)边框
border:20px dashed blue;
image.png
3D凹边(inset)
border:20px inset blue;
image.png
还有很多值，没有必要一一背下来，用时去查就可以了
我们也可以分别设置各方向边框的效果
image.png
margin 外边距
我们使用一个div包裹三个同样宽高向左浮动的div
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
#content {
width: 1000px;
height: 500px;
border:1px solid red;
}
#text1 {
width: 400px;
height: 200px;
border: 1px solid green;
float: left;
}
#text2 {
width: 400px;
height: 200px;
border: 1px solid blue;
float: left;
}
#text3 {
width: 400px;
height: 200px;
border: 1px solid orange;
float: left;
}
</style>
</head>
<body>
<div id="content">
<div id="text1"></div>
<div id="text2"></div>
<div id="text3"></div>
</div>
</body>
</html>
image.png
我们发现内部的div会并列布局，第三个div因为所剩宽度小于自己的宽度，所以被挤至下面
我们为内部第一个div增加margin属性
margin: 10px;
效果如下：
image.png
margin可以同时设置4个方向的值，从上边开始，顺时针方向取值。
如下代表 上方margin10px，右方margin20px,下方margin30px，左方margin40px
margin: 10px 20px 30px 40px;
也可以不写全四个方向的值，没有值的方向就取对边方向的值
如下代表 上方margin10px，右方margin20px,下方margin30px，左方margin20px
margin: 10px 20px 30px;
如果只设置某个方向的margin,可以使用如下属性
image.png
例如，margin左边20px：
margin-left: 20px;
利用margin实现在父容器水平居中（和左右浮动一起使用无效）：
margin: 0px auto;
padding 内边距
使用方式和margin类似，背景色会填充在padding的范围内。也可以增加一条背景色的属性,让背景色只填充在内容区域
background-clip:content-box;
image.png
网友评论