仅仅掌握、的元素定位方式，是不能制作出精良性感的 Web 页面滴！
必须要掌握元素本身的内容显示方式，即，江湖传说中的 CSS 框模型！
框模型往往又被称为盒模型、盒子模型。
他决定了元素的内容、内外边距、边框的设置。
内容区域
先来创建一个最原始的 box ：
本大人乃盒子大仙
效果图：
我们创建了一个类名为 box 的 div 元素。
div 里面只有一个 h1 标题，所以整个页面才会显得空空如也～
现在设置一些基本的样式，将 body、div、h1 分别设置为三种渐变样蓝色（字体颜色大全）
#BBFFEE、#00FFFF、#00AAAA，就是三个背景色。
为了更加方便理解边距饿，我们设置 body 为绝对定位，否则会引起容器塌崩。。。
不会没关系，这个是 CSS 中的 BFC 机制，有兴趣自行百度，不做延伸。
body{
color: #FFF;
background:#BBFFEE;
position: relative;
.box{
background: #00FFFF;
position: absolute;
h1{
background: #00AAAA;
效果图：
看到颜色的划分了不，最大的是 body 背景色 #BFE
然后叠加，盒子模型的 #0FF。
最顶层就是 h1 的 #0AA。
内外边距
内边距，padding；外边距，margin
之前，我们在介绍过属性值的不同，代表含义不同。
我们为了演示，只用一个属性值，代表四个变量。
先设置内边距，padding，修改 h1 代码：
h1{
background: #00AAAA;
padding: 33px;
效果图：
看到了吗，h1 的文字到第一层背景色的外延距离变大了，且长度都是 33px。
文字不在紧贴自己的背景色边缘了，之间的距离就是内边距。
现在，设置h1的外边距，margin：
h1{
background: #00AAAA;
padding: 33px;
margin: 33px;
效果图：
h1 到第二层背景色的底边缘距离就是 margin，外边距。
margin，也可以设置为，负值
margin: -33px;
效果图：
因为外边距为负数，意味着第二层隐藏在 h1 中了
边框
边框 border，也用过好几次了。这次解释下：
h1{
background: #00AAAA;
padding:33px;
margin:33px;
border:6px solid #000;
效果图：
边框位于内外边距的中间，宽度为 6px 的黑线。
内容、内外边距、边框之间的大小关系
现在，让我们综合提升下，padding 设置为 20px、border 设置为 5px、margin20px。
h1 标签的宽度，120*120px。
h1{
width:120px;
height: 120px;
background: #00AAAA;
padding:20px;
margin:20px;
border:5px solid #000;
效果图：
我们设置的 h1 宽高 120*120px，根本没有对 padding、margin、boder 有影响。
width 对应的范围是：
5+20+120+20+5+20 = 170px
这就是出现一个很尴尬的地方，当我们为一个可视化区域设置宽高时，并不是可视化区域宽高。
而是，加上 border、padding 的距离。
一次可以算，两次可以算，n 次后。。。
就不好说了。。。
所以为了，设置宽高就是可视化区域的宽度
就设置 box-sizing 属性为 border-box。
h1{
box-sizing: border-box;
效果图：
为啥，字体会出来？
因为现在设置高度为 120px，可视化高度就是 border + padding + h1 = 120px。
最后 h1，内容宽度只有 70，所以会出来。
这样我们为元素设置什么样的宽高，元素就显示为相应的尺寸。
这样就不用老让设计师计算了。
默认将所有块状元素的 box-sizing 属性值都设置为 border-box。
如果喜欢本系列HTML帖子
3.5 CSS文本阴影
3.2 CSS文本对齐
内容整理：李志远
text-align 属性规定元素中的文本的水平对齐方式。
该属性通过指定行框与哪个点对齐，从而设置块级元素内文本的水平对齐方式。
值描述
left
把文本排列到左边。默认值：由浏览器决定。
right
把文本排列到右边。
center
把文本排列到中间。
justify
实现两端对齐文本效果。
inherit
规定应该从父元素继承 text-align 属性的值。
举例：
3.2 CSS文本对齐 人之初
人之初，性本善。性相近，习相远。苟不教，性乃迁。教之道，贵以专。子不学，非所宜。幼不学，老何为。玉不琢，不成器。人不学，不知义。
王应麟 〔宋代〕
运行后如图：
第二个值 justify 可以使文本的两端都对齐。在两端对齐文本中，文本行的左右两端都放在父元素的内边界上。然后，调整单词和字母间的间隔，使各行的长度恰好相等。在中文字体中显示可能不是很明显，英文会有一个明显对比，例如：
3.2 CSS文本对齐
If you wish to succeed, you should use persistence as your good friend,experience as your reference, prudence as your brother and hope as your sentry.如果你希望成功，当以恒心为良友，以经验为参谋，以谨慎为兄弟，以希望为哨兵。
显示效果如图：
从图上我们可以看到文字两端都是对齐的，如果取消p的两端对齐，看看是什么效果：
说明：两端对齐这个属性值在打印或者英文网站，外贸网站中常会用到，平时我们用到还是很少的。
李志远
如果缘分安排我们相遇，请不要让她擦肩而过。扫一扫二维码，加我为好友吧！
