盒子模型
每个盒子由四个部分（或称区域）组成，其效用由它们各自的边界（Edge）所定义（原文：defined by their respective edges，可能意指容纳、包含、限制等）。如图，与盒子的四个组成区域相对应，每个盒子有四个边界：内容边界 Content edge、内边距边界 Padding Edge、边框边界 Border Edge、外边框边界 Margin Edge。
盒子边框（border）
语法：
border : border-width | border-style | border-color
边框属性—设置边框样式：border-style 用于定义页面中边框的风格，常用属性值如下：
none: 没有边框即忽略所有边框的高度（默认值）
solid：边框为单实线（最常用）
dashed： 边框为虚线
dotted：边框为点线
double：边框为双实线
<style>
div {
width: 200px;
height: 200px;
border-width: 1px;/*边框粗细*/
border-color: lightpink;
border-style: solid;/*单实线边框*/
}
</style>
</head>
<body>
<div>盒子</div>
</div>
盒子边框总结表：
| 设置内容 | 样式属性 | 常用属性值 |
|---|---|---|
| 上边框 | border-top-style:样式; border-top-width:宽度;border-top-color:颜色;border-top:宽度 样式 颜色; | |
| 下边框 | border-bottom-style:样式;border- bottom-width:宽度;border- bottom-color:颜色;border-bottom:宽度 样式 颜色; | |
| 左边框 | border-left-style:样式; border-left-width:宽度;border-left-color:颜色;border-left:宽度 样式 颜色; | |
| 右边框 | border-right-style:样式;border-right-width:宽度;border-right-color:颜色;border-right:宽度 样式 颜色; | |
| 样式综合设置 | border-style:上边 [右边 下边 左边]; | none无（默认）、solid单实线、dashed虚线、dotted点线、double双实线 |
| 宽度综合设置 | border-width:上边 [右边 下边 左边]; | 像素值 |
| 颜色综合设置 | border-color:上边 [右边 下边 左边]; | 颜色值、#十六进制、rgb(r,g,b)、rgb(r%,g%,b%) |
| 边框综合设置 | border:四边宽度 四边样式 四边颜色; |
表格的细线边框
table{ border-collapse:collapse; } collapse 单词是合并的意思
border-collapse:collapse; 表示边框合并在一起。
cellpadding: 不要使用这个属性，因为它已经被废弃。 <table>元素应该使用 CSS定制样式。 在<table>元素上使用 CSS属性值为 collapse 的border-collapse属性，在 <td>元素上使用属性 padding，以达到类似于 cellpadding 的效果。
cellspacing:小贴士：不要使用这个属性，因为它已经被废弃。 <table>元素应该使用 CSS 定制样式。在 <table>元素上使用 CSS 的属性 border-spacing。以达到类似于 cellspacing 的效果。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<style>
table {
width: 700px;
height: 300px;
border: 1px solid red;
border-collapse: collapse; /* 合并相邻边框 */
}
td {
border: 1px solid red;
}
</style>
</head>
<body>
<table cellspacing="0" cellpadding="0">
<tr>
<td>123</td>
<td>123</td>
<td>123</td>
<td>123</td>
<td>123</td>
</tr>
<tr>
<td>123</td>
<td>123</td>
<td>123</td>
<td>123</td>
<td>123</td>
</tr>
<tr>
<td>123</td>
<td>123</td>
<td>123</td>
<td>123</td>
<td>123</td>
</tr>
<tr>
<td>123</td>
<td>123</td>
<td>123</td>
<td>123</td>
<td>123</td>
</tr>
<tr>
<td>123</td>
<td>123</td>
<td>123</td>
<td>123</td>
<td>123</td>
</tr>
</table>
</body>
</html>
圆角边框（css3）
CSS属性 border-radius 允许你设置元素的外边框圆角。当使用一个半径时确定一个圆形，当使用两个半径时确定一个椭圆。这个(椭)圆与边框的交集形成圆角效果。
border-radius: 左上角 右上角 右下角 左下角;
border-radius: 30px;
border-radius: 25% 10%;
border-radius: 10% 30% 50% 70%;
border-radius: 10% / 50%;
border-radius: 10px 100px / 120px;
border-radius: 50% 20% / 10% 40%;
使用百分数定义圆形半径或椭圆的半长轴，半短轴。水平半轴相对于盒模型的宽度；垂直半轴相对于盒模型的高度。负值无效
border-radius: 1em/5em;
/* 等价于： */
border-top-left-radius: 1em 5em;
border-top-right-radius: 1em 5em;
border-bottom-right-radius: 1em 5em;
border-bottom-left-radius: 1em 5em;
border-radius: 4px 3px 6px / 2px 4px;
/* 等价于： */
border-top-left-radius: 4px 2px;
border-top-right-radius: 3px 4px;
border-bottom-right-radius: 6px 2px;
border-bottom-left-radius: 3px 4px;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<style>
div {
width: 200px;
height: 200px;
border: 1px solid red;
display: inline-block;
}
div:first-child { /* 结构伪类选择器 选亲兄弟 */
border-radius: 10px; /* 一个数值表示4个角都是相同的 10px 的弧度 */
}
div:nth-child(2) {
/*border-radius: 100px; 取宽度和高度 一半 则会变成一个圆形 */
border-radius: 50%; /* 100px 50% 取宽度和高度 一半 则会变成一个圆形 */
}
div:nth-child(3) {
border-radius: 10px 40px; /* 左上角 和 右下角 是 10px 右上角 左下角 40 对角线 */
}
div:nth-child(4) {
border-radius: 10px 40px 80px; /* 左上角 10 右上角 左下角 40 右下角80 */
}
div:nth-child(5) {
border-radius: 10px 40px 80px 100px; /* 左上角 10 右上角 40 右下角 80 左下角 右下角100 */
}
div:nth-child(6) {
border-radius: 100px;
height: 100px;
}
div:nth-child(7) {
border-radius: 100px 0;
}
</style>
</head>
<body>
<div> 1. 20px</div>
<div> 2. 50% 或者 100px</div>
<div>3. 10px 40px</div>
<div>4. 10px 40px 80px</div>
<div>5. 10px 40px 80px 100px</div>
<div>6. 123</div>
<div>7. 100px 0</div>
</body>
</html>
内边距（padding）
padding属性用于设置内边距。 是指 边框与内容之间的距离。
| 值的个数 | 表达意思 |
|---|---|
| 1个值 | padding：上下左右边距 比如padding: 3px; 表示上下左右都是3像素 |
| 2个值 | padding: 上下边距 左右边距 比如 padding: 3px 5px; 表示 上下3像素 左右 5像素 |
| 3个值 | padding：上边距 左右边距 下边距 比如 padding: 3px 5px 10px; 表示 上是3像素 左右是5像素 下是10像素 |
| 4个值 | padding:上内边距 右内边距 下内边距 左内边距 比如: padding: 3px 5px 10px 15px; 表示 上3px 右是5px 下 10px 左15px 顺时针 |
padding-top:上内边距
padding-right:右内边距
padding-bottom:下内边距
padding-left:左内边距
padding: 1em;
padding: 10% 0;
padding: 10px 50px 20px; 上10px；左右50px；下20px；
padding: 10px 50px 30px 0;
padding: 0;
实例：
padding: 5%; /* All sides: 5% padding */
padding: 10px; /* All sides: 10px padding */
padding: 10px 20px; /* top and bottom: 10px padding */
/* left and right: 20px padding */
padding: 10px 3% 20px; /* top: 10px padding */
/* left and right: 3% padding */
/* bottom: 20px padding */
padding: 1em 3px 30px 5px; /* top: 1em padding */
/* right: 3px padding */
/* bottom: 30px padding */
/* left: 5px padding */
案例：导航栏
- a链接自带下划线，用text-decoration: none;取消下划线。
- padding: 0 15px; 设置内边距上下0，左右15px，因为盒子内的字数不同，所以不能给盒子宽度，否则无法调整文字和盒子之间的边距，直接设置内边距，然后用文字本身撑开盒子，最后设置行高等于高line-height
:41px;，让文字居中显示就可以了
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
nav {
height: 41px;
background-color: #fcfcfc;
border-top: 3px solid #ff8500;/*上边框*/
border-bottom: 1px solid #edeef0;/*下边框*/
}
nav a {
font-size: 14px;
color: #4c4c4c;
text-decoration: none;/*取消下划线*/
padding: 0 15px;/*内边距上下0，左右15px，因为盒子内的字数不同，所以不能给盒子宽度，要不无法调整边距，直接设置内边距，然后用文字本身撑开盒子，然后行高等于高，让文字居中显示就可以了*/
height: 41px;
line-height: 41px;/*让行高等于盒子高，使文字垂直居中*/
background-color: ;
display: inline-block; /*链接是行内元素，不能设置高度，将其转换为行内块元素*/
}
nav a:hover {
background-color: #ccc;
}
</style>
</head>
<body>
<nav>
<a href="#">首页</a>
<a href="#">手机新浪网</a>
<a href="#">网站导航</a>
<a href="#">客户端</a>
</nav>
</body>
</html>
效果如下：鼠标经过变灰色
外边距（margin）
一个盒子实现水平居中的两个条件：
必须是块级元素
盒子必须制定宽度（width）
然后就给 左右边距 都设定为auto 就可以实现盒子水平居中。
margin: 1em;
margin: 5% 0;
margin: 10px 50px 20px;
margin: 10px 50px 20px 0;
margin: 0;
示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<style>
div {
width: 200px;
height: 200px;
background-color: pink;
/* margin-top: 100px;
margin-left: 50px; */
margin: 30px auto; /* 上下 30px; 左右 auto 自动 这样可以使块级带有宽度的盒子水平居中对齐 */
padding:4px;
}
header,
span { /*span是行内元素，不是块元素，所以设置自动居中不起效果*/
width: 900px;
height: 120px;
background-color: black;
margin: 0 auto; /* 左右设置auto使盒子居中 */
}
</style>
</head>
<body>
<div></div>
<header>头部标签</header>
<span>123</span>
</body>
</html>
文字水平居中和盒子水平居中的区别
文字居中水平
text-align: center;
盒子水平居中
margin: 10px auto; 左右margin 改为 auto
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
div {
width: 300px;
height: 100px;
border: 1px solid pink;
text-align: center; /* 文字居中水平 */
margin: 10px auto; /* 盒子水平居中 左右margin 改为 auto 就阔以了 */
}
section {
width: 400px;
height: 400px;
border: 1px solid #000;
}
section img {
width: 200px;/* 插入图片更改大小 width 和 height */
height: 210px;
margin-top: 30px; /* 插入图片更改位置 可以用margin 或padding 盒模型 */
margin-left: 50px; /* 插入的图片也是一个盒子 */
}
aside {
width: 400px;
height: 400px;
border: 1px solid purple;
background: #fff url(images/sun.jpg) no-repeat;
background-size: 200px 210px; /* 背景图片更改大小只能用 background-size 插入图片直接用宽、高设置*/
background-position: 30px 50px; /* 背景图片更该位置 用 background-position */
}
</style>
</head>
<body>
1. 文字水平居中 和 盒子水平居中
<div>文字水平居中</div>
2. 插入图片和背景图片
<section>
<img src="images/sun.jpg" height="691" width="721" alt="">123
</section>
<aside>
123123123
</aside>
3. 一般情况下，背景图片适合做一些小图标使用
产品展示之类的就用插入图片
</body>
</html>
外边距实现盒子居中
清除元素的默认内外边距
用通配符 * 也能做到同样的效果，但是 * 的清除范围太广了，不建议使用。
p,
ul {
margin: 0;
padding: 0;
}
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
p,
ul {
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<p>abc</p>
<p>abc</p>
<ul>
<li>列表</li>
<li>列表</li>
<li>列表</li>
</ul>
</body>
</html>
外边距合并
相邻块元素垂直外边距的合并
块级元素的上外边距和下外边距有时会合并（或折叠）为一个外边距，其大小取其中的最大者，这种行为称为外边距折叠（margin collapsing），有时也翻译为外边距合并。注意浮动元素和绝对定位元素的外边距不会折叠。
下面列出了会发生外边距折叠的三种基本情况：
毗邻的两个元素之间的外边距会折叠（除非后一个元素需要清除之前的浮动）。
父元素与其第一个或最后一个子元素之间
如果在父元素与其第一个子元素之间不存在边框、内边距、行内内容，也没有创建块格式化上下文、或者清除浮动将两者的 margin-top分开；或者在父元素与其最后一个子元素之间不存在边框、内边距、行内内容、height、min-height、max-height将两者的 margin-bottom 分开，那么这两对外边距之间会产生折叠。此时子元素的外边距会“溢出”到父元素的外面。
空的块级元素
如果一个块级元素中不包含任何内容，并且在其 margin-top 与 margin-bottom 之间没有边框、内边距、行内内容、height、min-height将两者分开，则该元素的上下外边距会折叠。
一些需要注意的地方：
- 上述情况的组合会产生更复杂的外边距折叠。
- 即使某一外边距为0，这些规则仍然适用。因此就算父元素的外边距是0，第一个或最后一个子元素的外边距仍然会“溢出”到父元素的外面。
- 如果参与折叠的外边距中包含负值，折叠后的外边距的值为最大的正边距与最小的负边距（即绝对值最大的负边距）的和。
- 如果所有参与折叠的外边距都为负，折叠后的外边距的值为最小的负边距的值。这一规则适用于相邻元素和嵌套元素。
嵌套块元素垂直外边距的合并
两个嵌套关系的块元素，如果父元素没有上内边距以及边框，则父元素的上内边距会与子元素的上外边距发生合并，合并后的外边距为两者中的较大者吗，既使父元素的上外边距为0，也会合并。
解决方案：
- 可以为父元素定义1px的上边框或内边距
- 可以为父元素添加 overflow:hidden；（BFC）
content宽度和高度
使用宽度属性width和高度属性height可以对盒子的大小进行控制。
width和height的属性值可以为不同单位的数值或相对于父元素的百分比%，实际工作中最常用的是像素值。
大多数浏览器，如Firefox、IE6及以上版本都采用了W3C规范，符合CSS规范的盒子模型的总宽度和总高度的计算原则是：
如果盒子本身没有指定宽度，而是继承父级元素宽度，那么给内边距padding和height高度不会使盒子变大。
/外盒尺寸计算（元素空间尺寸）/
Element(元素)空间高度 = content height + padding + border + margin
Element 空间宽度 = content width + padding + border + margin
/内盒尺寸计算（元素实际大小）/
Element Height = content height + padding + border （Height为内容高度）
Element Width = content width + padding + border （Width为内容宽度）
注意：
1、宽度属性width和高度属性height仅适用于块级元素，对行内元素无效（ img 标签和 input除外）。
2、计算盒子模型的总高度时，还应考虑上下两个盒子垂直外边距合并的情况。
3、如果一个盒子没有给定宽度/高度或者继承父亲的宽度/高度，则padding 不会影响本盒子大小。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<style>
div {
width: 100px;
height: 100px;
background-color: pink;
border: 5px solid red; /* 4个边框 110 5 + 5 */
padding: 10px; /* left right 10 + 10 = 130 */
margin: 20px; /* left right 20 + 20 = 170 */
/* 空间尺寸: width + border + padding + margin ; */
/* 内合 实际尺寸: width + border + padding 130 ; */
}
</style>
</head>
<body>
<div></div>
<div></div>
</body>
</html>
案例：
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
* {/*写css需要先清除默认样式*/
margin: 0;
padding: 0;
}
ul {
list-style: none;/*取消列表自带的小点，取消默认样式*/
}
.searchPic {
width: 238px;
height: 294px;
border: 1px solid #d9e0ee;
border-top: 3px solid #ff8400;
margin: 100px;
}
.searchPic h3 {
height: 35px;
line-height: 35px;
border-bottom: 1px solid #d9e0ee;
font-size: 16px;
font-weight: normal;/*让粗体不变粗*/
padding-left: 12px;
}
.searchPic img {
margin: 7px 0 0 8px;
}
.searchPic ul li a {
font-size: 12px;
color: #666;
text-decoration: none;/*取消链接自带的下划线*/
}
.searchPic ul {
margin-left: 8px;
}
.searchPic ul li {
padding-left: 10px;
height: 26px;
line-height: 26px;/*让li 垂直居中*/
background: url(images/square.png) no-repeat left center;/*left center是让li前面的小点水平垂直居中，上面的line-height是让文字居中*/
}
.searchPic ul li a:hover {
text-decoration: underline;/*添加下划线*/
color: #ff8400;
}
</style>
</head>
<body>
<div class="searchPic">
<h3>搜索趣图</h3>
<img src="images/happy.gif" />
<ul>
<li><a href="#">GIF：小胖墩游泳被卡 被救后一脸无辜</a></li>
<li><a href="#">GIF：小胖墩游泳被卡 被救后一脸无辜</a></li>
<li><a href="#">GIF：小胖墩游泳被卡 被救后一脸无辜</a></li>
</ul>
</div>
</body>
</html>
