1.盒模型基本概念
我们可以好好看一下这张图；
盒模型：相框边框 - > border ；画和相框边框的距离（内边距） -> padding；相框之间的距离（外边距） -> margin
2.边框
<!DOCTYPE html><html><head><meta charset="UTF-8"><title>Insert title here</title><style type="text/css"> #d1{ width:100px; height:100px; /* 边框宽度（粗细） */ border-width: 10px; /* 边框颜色 */ border-color: red; /* 边框样式 */ border-style:solid; } #d2{ width:100px; height:100px; border:10px blue dashed; } #d3{ width:100px; height:100px; border-top:5px blue dashed; border-right:5px red solid; border-bottom:5px blue dashed; border-left:5px red dotted; }</style></head><body><div id="d1">内容1</div><div id="d2">内容2</div><div id="d3">内容3</div></body></html>
复制代码
运行结果：
3.内边距
用 padding 设置内边距；
<!DOCTYPE html><html><head><meta charset="UTF-8"><title>Insert title here</title><style type="text/css"> #d1{ width:100px; height:100px; /* 边框宽度（粗细） */ border-width: 10px; /* 边框颜色 */ border-color: red; /* 边框样式 */ border-style:solid; /* 设置内边距 */ padding:40px; } #d2{ width:100px; height:100px; border:10px blue dashed; /* 按照上、右、下、左的顺序设置 */ padding:20px 10px 5px 2px; } #d3{ width:100px; height:100px; /* 设置边框样式 */ border-top:5px blue dashed; border-right:5px red solid; border-bottom:5px blue dashed; border-left:5px red dotted; /* 设置内边距 */ padding-top:20px; padding-right:10px; padding-bottom:5px; padding-left:2px; }</style></head><body><div id="d1">内容1</div><div id="d2">内容2</div><div id="d3">内容3</div></body></html>
复制代码
运行结果：
这里我们可以点击页面，查看检查：
我们这边可以看到具体的盒子模型，各种数据都能看到，非常方便！
4.外边距
<!DOCTYPE html><html><head><meta charset="UTF-8"><title>Insert title here</title><style type="text/css"> #d1{ width:100px; height:100px; /* 边框宽度（粗细） */ border-width: 10px; /* 边框颜色 */ border-color: red; /* 边框样式 */ border-style:solid; /* 设置内边距 */ padding:40px; /* 设置外边距 */ margin:20px; } #d2{ width:100px; height:100px; border:10px blue dashed; /* 按照上、右、下、左的顺序设置 */ padding:20px 10px 5px 2px; /* 按照上、右、下、左的顺序设置 */ margin:20px 10px 5px 2px; } #d3{ width:100px; height:100px; /* 设置边框样式 */ border-top:5px blue dashed; border-right:5px red solid; border-bottom:5px blue dashed; border-left:5px red dotted; /* 设置内边距 */ padding-top:20px; padding-right:10px; padding-bottom:5px; padding-left:2px; /* 设置外边距 */ margin-top:20px; margin-right:10px; margin-bottom:5px; margin-left:2px; }</style></head><body><div id="d1">内容1</div><div id="d2">内容2</div><div id="d3">内容3</div></body></html>
复制代码
运行结果：
5.网页布局与盒模型
1.标准文档流；
标准文档流：指在不使用其他与排列和定位相关的特殊 CSS 规则时，各种元素的排列规则；即不同的浏览器解析 CSS 样式的规则基本上是按照标准文档流来解析的；
2.块级元素 VS 行内元素；
块级元素：以一个块的形式展现，跟同级的兄弟块依次竖直排列，左右撑满，比如<div>；
行内元素：以普通的一个 DOM 节点展现，跟同级的兄弟元素横向排列，排满后，自动换行，比如<span>；
<!DOCTYPE html><html><head><meta charset="UTF-8"><title>Insert title here</title></head><body><h1>块内元素</h1><div>块1</div><div>块2</div><div>块3</div><h1>行级元素</h1><span>行1</span><span>行2</span><span>行3</span></body></html>
复制代码
运行结果：
6.盒子在标准流中的定位
1.行内元素之间的水平 margin；
距离为:(margin-right)+(margin-left)；
<!DOCTYPE html><html><head><meta charset="UTF-8"><title>Insert title here</title></head><body><!-- 行1的右边的margin为10px --><span style="margin-right: 10px">行1</span><!-- 行2的左边的margin为10px --><span style="margin-left: 10px">行2</span></body></html>
复制代码
运行结果：
2.块级元素之间的竖直 margin；
距离为：margin-bottom 与 margin-top 之间的较大者！
<!DOCTYPE html><html><head><meta charset="UTF-8"><title>Insert title here</title></head><body><!-- 块1的下边的margin为10px --><div style="margin-bottom: 10px">块1</div><!-- 块2的上边的margin为5px --><div style="margin-top: 5px">块2</div></body></html>
复制代码
运行结果：
注意：这个上下之间的距离是 margin-bottom 与 margin-top 之间的较大者，并不是相加！
3.嵌套盒子之间的 margin；
子块的 margin 将以父块的内容为参考！
<!DOCTYPE html><html><head><meta charset="UTF-8"><title>Insert title here</title></head><body><!-- 块1的周围的margin为10px --><div style="margin: 10px">块1<!-- 块2的上边的margin为20px --><div style="margin-top: 20px">块2</div></div></body></html>
复制代码
这里我们用两个 div 块嵌套，其中块 1 为父块，块 2 为子块；
这里块 1 和块 2 作为一个整体，上下左右的 margin 均为 10px；而块 1 与块 2 之间的上下距离又为 20px； 并不能超过界线！
所以说子块的 margin 将以父块的内容为参考！
运行结果：
4.margin 的属性可以设置成负值；
<!DOCTYPE html><html><head><meta charset="UTF-8"><title>Insert title here</title></head><body><!-- 块1的周围的margin为10px --><span style="margin: 10px">块1</span><!-- 块2的周围的margin为-30px，这样会导致块2向左偏移，从而导致重叠--><span style="margin: -30px">块2</span></body></html>
复制代码
这样设置成负值会导致块 2 向块 1 偏移，从而会出现重叠现象；
运行结果：
我是【程序员的时光】，热爱技术分享，信仰终身学习，爱健身，会点厨艺的热血青年，我们下期再见！
评论