盒子模型
组成部分
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/* 边框 */
.body div {
width: 300px;
height: 300px;
/* 边框粗细 */
/* border-width: 5px; 边框的粗细 */
border-width: 5px;
/* 边框样式 */
/* border-style: dotted; 边框的样式 */
/* solid-实线 dashed-虚线 dotted-点线 其余查手册*/
border-style: dotted;
/* 边框颜色 */
/* border-color: bisque; 边框的颜色 */
border-color: bisque;
/* 复合写法 */
/* 一般格式：粗细、样式、颜色 */
bottom: 5px solid pink;
/* 单独设置边框 */
bottom-top: 5px solid pink;
/* top、bottom、left、right */
/* 注意：
覆盖性——先写大的，再写小的
bottom: 5px solid pink;
bottom-top: 55px solid blue;
上边框为蓝，其余为粉
若顺序反了则全为粉
*/
/* 注意： 边框会影响盒子的实际大小 */
/* 实际大小 = 盒子大小 + 边框大小 */
}
/* 表格细线边框 */
table,
td,
th {
border: red 1px solid;
font-style: 14px;
text-align: center;
/* 边框合并 */
/* 由于相邻边框重叠，实际宽度不修改会为两倍 */
border-collapse: collapse;
}
/* 盒子内边距padding */
.padding {
width: 200px;
height: 300px;
background-color: red;
/* 内边距设置 */
padding-left: 5px;
padding-top: 30px;
padding-bottom: 5px;
padding-right: 5px;
/* 复合写法 */
/* padding: 5px; 上下左右有5px */
/* padding: 5px 7px; 上下有5px 左右为7px */
/* padding: 5px 7px 9px; 上为5px，左右为7px，下为9px */
/* padding: 5px 6px 7px 8px; 上为5px，右为6px，下为7px，左为8px */
/* 注意： padding会影响盒子的实际大小 */
/* 实际大小 = 盒子大小 + padding大小 */
/* 可以用此特性完成设计，不用宽度用内边距设定大小 */
}
/* padding不会撑开盒子的情况 */
h1 {
/* 不给宽度就不会撑开 */
/* 两种情况： 1.默认宽度 2.继承来的大小 */
height: 500px;
background-color: pink;
padding: 30px;
/* 此时会多加30px */
/* width: 100%;
height: 500px;
background-color: pink;
padding: 30px; */
}
/* 盒子外边距margin */
.margin {
width: 200px;
height: 300px;
background-color: rgb(0, 255, 89);
/* 外边距设置 */
/* 和padding规则相同 */
margin-top: 50px;
margin-bottom: 5px;
margin-left: 5px;
margin-right: 5px;
/* 复合写法 */
/* margin: 5px; */
/* 让盒子水平居中对齐 */
/* 有以下写法：
margin-left: auto; margin-right: auto;
margin: 0 auto; 上下为0，左右为auto */
}
/* 行内元素或者行内块元素居中对齐 */
.hnk {
/* 方法：给父元素添加text-align: center;即可 */
width: 900px;
height: 400px;
background-color: pink;
text-align: center;
margin: auto;
}
/* 外边距合并-套嵌块元素塌陷 */
/* 塌陷案例 */
.father {
width: 400px;
height: 400px;
background-color: red;
margin-top: 50px;
}
.son {
width: 40px;
height: 200px;
background-color: pink;
margin-top: 100px;
/* 谁大谁会塌陷，父元素和子元素无论谁大会把另一个也拖下来 */
}
/* 解决方法 */
/* 1.为父元素加上边框 border 如：border：1px solid transparent；
2.为父元素定义内边距
3.为父元素添加overflow: hidden */
.father2 {
width: 400px;
height: 400px;
background-color: red;
margin-top: 50px;
overflow: hidden;
/* padding: 10px; */
}
.son2 {
width: 20px;
height: 100px;
background-color: pink;
margin-top: 100px;
}
/* 清除浏览器内外边距 */
/* * {
margin: 0;
padding: 0;
} */
/* 这是我们CSS的第一行代码 */
/* 行内元素为了照顾兼容性，一般只设置左右内外边距，不设置上下边距 */
</style>
</head>
<body>
<table align="center" cellspacing="0" width="500px" height="400px">
<thead>
<tr>
<th>排名</th>
<th>关键词</th>
<th>趋势</th>
<th>进入搜索</th>
<th>最近qitian</th>
<th>相关链接</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>鬼吹灯</td>
<td><img src="/上箭头.jpg" alt="" width="13px" height="13px"></td>
<td>456</td>
<td>123</td>
<td>
<a href="#">贴吧</a>
<a href="#">图片</a>
<a href="#">百科</a>
</td>
</tr>
<tr>
<td>1</td>
<td>鬼吹灯3</td>
<td><img src="/下箭头.jpg" alt="" width="13px" height="13px"></td>
<td>456</td>
<td>123</td>
<td>
<a href="#">贴吧</a>
<a href="#">图片</a>
<a href="#">百科</a>
</td>
</tr>
<tr>
<td>1</td>
<td>鬼吹灯2</td>
<td><img src="/上箭头.jpg" alt="" width="13px" height="13px"></td>
<td>456</td>
<td>123</td>
<td>
<a href="#">贴吧</a>
<a href="#">图片</a>
<a href="#">百科</a>
</td>
</tr>
</tbody>
</table>
<div class="padding">
盒子的内容是content
盒子的内容是content
盒子的内容是content
盒子的内容是content
盒子的内容是content
</div>
<h1>padding 不会撑开盒子的情况</h1>
<div class="margin">margin1</div>
<div class="margin">margin2</div>
<div class="hnk">
<span>行内块元素居中</span>
</div>
<div class="father">
<div class="son">zi</div>
</div>
<div class="father2">
<div class="son2">zi2</div>
</div>
</body>
</html>
下载链接：