前端开发HTML+CSS之盒子模型（四）

    在了解了最基本和最简单的网页制作之后，我们需要开始关注细节问题，比如我们期望的背景和文本的分布问题，如何才能达到我们预期的效果，如何更加的美观，如何让用户具有更好的体验感受，才是我们更加需要关注的

    故我们开始讲解盒子模型，也就是一个块内的分布以及块外的布局的逻辑关系

---

    同时在开头介绍一个小技巧，刚设计网页的盒子模型时，你可能不能正确的设计外边距，内边距，导致一些块之间的距离不能得到很好的控制，故这个时候我们可以通过检查网页的源代码来得到
右键网页任意一个地方 – 检查 – 得到HTML代码
或者通过组合键ctrl+shift+I
或F12功能键

点击不同的代码块，左部分可显示该代码块所占的区域，从而可通过检查不同的块来知道是哪一块的内外边距没有设置好

---

在正式进行盒子模型叙述之前，我们先来看一段代码
这段代码位于body内

div {
	border: 1px solid red; /*边框样式*/
	margin: 10px;  /*外边距*/
	padding: 16px; /*内边距*/
	width: 600px;  /*宽度*/
	height: 500px;  /*高度*/
}

这为一个盒子的基本属性

---

一、盒子边框设置

边框包括盒子的内边距和内容

边框风格

即边框的形状，可同时设置4个边框也可以分别设置

属性	描述
border-style	同时设置4个方向的风格
border-bottom-style	下边框风格
border-left-style	左边框风格
border-right-style	右边框风格
border-top-style	上边框风格

参数值	描述
none	无边框，默认值
dotted	点状
dashed	虚线
solid	实线
double	双实线
groove	3D凹槽
ridge	3D垄状
inset	内嵌一个立体边框
outset	外嵌一个立体边框
inherit	父元素继承

e.g.

border-style: dashed; /*均为虚*/
border-style: dashed solid; /*上下为虚，左右为实*/
border-style: dashed solid dotted;  /*上为虚，左右为实线，下为点；*/
border-style: dashed solid double dotted; /*上为虚，右为实线，下为实线，左为点线*/

边框宽度

属性	描述
border-width	同时设置4个方向的宽度
border-bottom-width	下边框宽度
border-left-width	左边框宽度
border-right-width	右边框宽度
border-top-width	上边框宽度

宽度值	描述
length	具体某个值，单位为px/em
关键字 thin medium thick	分别对应细边框，中等（默认），粗边框
inherit	继承父元素

其上下左右设置宽度的方法同上边框类型

边框颜色

属性	描述
border-color	同时设置4个方向的颜色
border-bottom-color	下边框颜色
border-left-color	左边框颜色
border-right-color	右边框颜色
border-top-color	上边框颜色

同理设置

统一设置边框的宽度，颜色，风格

一般都统一设置

属性	描述
border	同时设置4个方向的颜色，宽度，风格
border-bottom	下边框颜色，宽度，风格
border-left	左边框颜色，宽度，风格
border-right	右边框颜色，宽度，风格
border-top	上边框颜色，宽度，风格

e.g.

border: 1px solid red;

边框形状

由于四个边框颜色一致时看上去为一个矩形，但是当我们将边框四个颜色设为不一样的时候，且增加其宽度，会发现各个边框形状为等边三角形
当边框宽度大于或等于3px时，当值越大，三角形越明显

---

二、盒子内边距

内边距也就是设置了边框与内容之间的空白区域

内边距设置

属性	描述
padding	同时设置4个方向的内边距
padding -bottom	下内边距
padding -left	左内边距
padding-right	右内边距
padding-top	上内边距

参数值	描述
auto	浏览器计算内边距
length	px/em/cm为单位的某个具体正数值作为内边距值，默认为0
%	基于父级元素宽度来计算
inherit	继承父级元素

内边距特点

• 撑大元素的尺寸
  在设置宽高的时候要减去内边距的数值
• 背景延申到padding区域
  即背景将占据整个盒子

---

三、盒子外边距设置

向外扩展盒子与盒子周围其他盒子的距离，margin用于定义盒子边框与周围其它盒子的空白区域

外边距设置

属性	描述
margin	同时设置4个方向的外边距
margin -bottom	下外边距
margin -left	左外边距
margin-right	右外边距
margin-top	上外边距

参数值	描述
auto	浏览器计算外边距
length	px/em/cm为单位的某个具体数值作为外边距值，可取正负
%	基于父级元素宽度来计算内边距
inherit	继承父级元素

其四个方向的使用方法同上

外边距合并

即两个相邻块级元素的外边距的取值问题

• 全为正
  较小的margin塌陷到较大的margin中
• 存在负
  合并后的外边距高度等于这些发生合并的外边距的和
• 和为负
  重叠深度等于外边距和的绝对值
• 和为0
  两个块级元素无缝连接

---

在进行了上述的学习，我们能自由放置我们的某一个盒子了，但是如果有多个块，我们就存在将它如何放置的问题，故需要学习浮动和定位
我们已经可以开始设计精美的某一个盒子了，快动手尝试一下吧！

贴出来我初学时做的某些盒子（嘻嘻嘻）
做这个真的就会有一个很明显的过程，看着丑不溜秋的盒子作品再到自己慢慢的喜欢，就真的需要慢慢专研和学习的呢！



该系列博客参考了聂常红 刘伟著的前端HTML+CSS修炼之道
第四篇HTML+CSS学习笔记到此结束 cheers! ?