一.css盒子模型---概述
盒子模型的内容范围包括:margin、border、padding、content部分组成。
二.css盒子模型---内边距
1.内边距处于内容外,边框内
2.内边距的属性:padding、padding-top...等四个
三.css盒子模型---边框
1.边框处于内边距外,外边距内
2.边框的样式:border-style:定义了10个不同的非继承样式,包括none
3.单边框的样式:border-top-style...等四个
4.边框的宽度:border-width
5.单边框的宽度:border-top-width...等四个
6.边框的颜色:border-color
7.单边框的颜色:border-top-color...等四个
以下是css3提供的边框:
8.圆角边框:border-radius
9.边框阴影:box-shadow
10.边框图片:border-image
四.css盒子模型---外边距
1.围绕在边框之外的就是外边距,默认为透明区域,接受任何长度单位、百分数值
2.外边距常用属性:
margin:设置所有边距
margin-top等四个:设置上下左右的边距
以上盒子模型的例子:
html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>css盒子模型</title>
<link href="box.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="container">
<div id="bd">
<div id="pd">
<div id="content">我是内容区域</div>
</div>
</div>
</div>
</body>
</html>
css:
body{
/* 不设置的话,最外边会有一定的距离 */
margin: 0px;
}
#container{
margin: 100px;
}
#bd{
border-style: dotted;
}
#pd{
padding: 10px;
}
#content{
background-color: olivedrab;
text-align: center;
padding: 30px;
}
五.css盒子模型---外边距合并
1.两个盒子的外边距都是100px的情况下,则他们之间的边距就是100px
2.如果两个盒子的外边距不同,则按照大的边距来算
※(1)统一设置外边距和内边距,用通配符*,eg.*{margin:0px; padding: 0px;}
(2)margin:20px auto;是指上下20px,左右自适应