不管怎么说，写博客这件事算是坚持下来了，也的确从写作的这个过程中领悟到很多，以前看书时没有注意到的细节，没有领悟的技巧，在用语言重构的过程中变得慢慢的清晰。挺好！
这一次，我们要说的，是CSS中的重头戏，我以为这是CSS中最重要，概念也是最复杂的一部分，那就是关于CSS的布局。这种布局很宏观，也很微观，一个网站漂不漂亮，绝大程度上都基于此。
一 、开始布局的注意事项
- 内容与显示分离
这是构建网页的根本，前面也一再提到，作为最佳实践，应始终保持内容（HTML）与显示（CSS）分离，如果对所有的页面都这样做，就可以共享相同的布局和整体样式，而只在具体页面设置差异即可
- 布局方法
网站设计主要有两大类型：固定宽度和响应式。
固定宽度，顾名思义，就是整个页面和每一栏的宽度都用一个具体的像素值固定下来，无论是使用PC还是智能手机或者iPad之类的设备，所看到的效果都是一样的。这种布局方式最为常见，也是比较容易掌握的一种方式，这一次我们说的就是固定宽度。
但是，伴随着智能终端概念的深化，响应式应运而生，响应式又称流式，使用百分数定义宽度，页面会随着显示环境的变化而发生相应的放大或者缩小，这样以来，不同分辨率，不同尺寸的设备所看到的效果就会有所差异，如果设置合理的话，在每一台设备上都能取得最佳的效果，这些我们下一次才会接触到。
- 浏览器注意事项
用户使用的系统和浏览器会有所不同，所以在将网站放在服务器之前，有必要在不同的浏览器上对它们进行测试，推荐在开发的过程中就对它们定期测试，这样在最后的全面测试的时候问题就会少一些。
二 、构建页面
CSS让页面内容富有活力，开发人员的设计技巧大部分都是靠它来呈现，但首先我们应该知道，高效网页的核心是结构良好、语义化的HTML。
- 恰当的使用main、article、aside、nav、section、header、footer和div等元素将页面划分成不同的逻辑区块。根据需要对它们应用ARIA地标角色。
header常用作报头，包括标识，社交媒体网站链接和主导航。
section元素可以将main划分为多个条目。
aside作为附注栏，提供关于博客作者或者其他页面的链接。
footer作为页脚，常包含版权信息等内容。
div的使用较为灵活，可以包裹其他任意元素，并为之添加样式。
- 按照一定的顺序放置内容，确保页面在不使用CSS的情况下也是合理的，例如，首先是报头，接着是主体内容，接着是一个多多个附注栏，最后是页面级的页脚。将最重要的内容放在前面，不仅方便用户的获取，也便于搜索引擎的索引。
- 以一致的方式使用标题元素（h1~h6），从而明确的标识页面上这些区块的信息，并对它们按优先级排序。
- 使用合适的语义标记剩下的内容，如段落、图、表等。
- 如果有必要，使用注释来标识页面上不同的区域及内容。如 <!-- ===========开始报头============ -->
注意：不一定一定要等到所有的HTML都标记好才开始应用CSS，在HTML的主体部分写完后，CSS就可以介入，然后一边标记页面，一边写CSS。这是一种迭代的思想！
三 、盒模型
这是CSS最核心的思想。CSS在处理网页时，认为每个元素都是包含在一个不可见的盒子里，这里的盒子由内容区域、内容区域周围的空间（内边距，padding）、内边距的外边缘（边框，border）和边框外面将元素与相邻元素隔开的不可见区域（外边距，margin）构成。使用CSS可以确定盒子的外观和位置，并由此控制网页的布局。
这里尤为要提到的一点，是关于width的。CSS里的width属性，是关于内容宽度的，默认的处理方式中，元素的显示宽度=内容宽度+左右内边距+左右边框，但是我们可以通过设置box-sizing:border-box;来让显示宽度与width的值相同，这时候，内容宽度自然就不是width了。
四 、控制元素的显示类型和可见性
显示类型：每个元素在默认情况下要么显示在单独的行（如h1~h6,p等），要么显示在行内（如em,strong,cite等），前一种元素称为块级元素，后一种称为行内元素。造成这种情况的本质是它们的display属性，块级元素被设置为display:block，而行内元素被设置为display:inline。这样的情况，完全可以由CSS修改，例如，把行内元素改为display:block，这样它们就拥有了块级元素的特性，还有一种混合的形式，inline-block，让元素与其他内容显示在一行，同时具有块级元素的属性，之所以会有这样的设置，是因为设置为inline的元素，对于width,padding,margin等属性是完全忽略的。如果将display设置为none，该元素就不会显示，不仅如此，紧跟在其后的文字会占据它原有的位置，看起来就跟该元素不存在一样。
默认情况下，元素会按照在HTML中自上而下出现的顺序显示，这称为文档流。
可见性：visibility属性控制元素是否可见，visibility:hidden的话，元素不可见，但仍在文档流中占据位置，原来元素的区域现在变成空白，这与display:none有所差异。输入visible的话，元素就显示出来了。
五 、设置元素的高度和宽度
可以为块级元素设置高度和宽度，对于行内元素，如果想设置的话，须将display属性修改为block或inline-block。
div{ width:500px/80%/.8em/auto; height:200px/95%/.95em/auto; } |
width和height的值，可以是固定的，如用像素表示，常用于固定宽度格局，也可以是相对的，如百分数，em，多用于响应式，默认情况是auto。百分数和em均是相对于父元素的，而不是关于自身的，这点切记！
还有min-width,max-width,min-height,max-height，顾名思义，即设置最大最小高度宽度，max-width是为响应式布局设置宽度的绝佳工具，下一次我们会接触到。height的值很少设为固定的，因为你往往不能确定内容会有多少，如果一定要设置一个固定高度的话，那也应该是用min-height，它在需要时候，会弹性的自动增高，这样更灵活，不是吗？
这里的宽度和高度，都仅仅是关于内容区域的，并非显示的宽度，当然你也可以box-sizing:border-box来改变这一切。
六 、在元素周围添加内边距
内边距，顾名思义就是元素内容周围、边框以内的空间，如果不设置内边距，内容就会贴到边界，显得很拥挤，设置内边距后就会留有一些空白，看起来更为舒适。添加内边距，使用的是padding属性。
div{ padding:.3125em .625em .3125em .625em; } |
单位可以是像素，百分数或者em。
如果为padding设置四个值，则分别表示上、右、下、左，顺时针方向。
如果为padding设置一个值，则会应用于四个方向。
如果为padding设置两个值，前一个会应用于上下两边，后一个会应用于左右两边。
如果为padding设置三个值，第一个会应用于上边，第二个会应用于左右两边，第三个会应用于下边。
也可以单独为四个方向设置padding，如padding-top:2px,padding-right:.5em，这样都是可以的。
七 、设置边框
可以在元素周围创建边框，并指定它的厚度、风格和颜色。
img{ border: 5px solid #bebebe; } |
定义边框宽度：border-width:n，单位可以是像素或者em。
定义边框风格：border-width:type，其中的type可以是none、dotted（点线）、dashed（虚线）、solid（实线）、double（双线）、groove（槽线）、ridge（脊线）、inset（凹边）、outset（凸边）。
设置边框颜色：border-color:color，这里的color可以是颜色名称、十六进制或RGB、HSL、RGBA、HSLA。
当然最方便的还是简记法，即如上面示例的那样。甚至你还可以单独设置某一条边的属性，就像padding一样，border-top/left/right/bottom都是可以的。
注意：简记法的顺序一定要是border-width border-style border-color，另外还需要注意的是，上述三者都可以分别填充四个值，就像padding的四个值一样。
八 、设置元素周围的外边框
外边距是元素与相邻元素之间的透明空间，属性为margin，具体的用法与padding类似，此外，margin还有自己的一些独特的东西，如auto，和width有很大关系，如果左右值设置为auto的话，元素就会居中显示。
注意：如果元素位于另一个元素的上面，对于相互接触的两个margin，仅使用其中较大那一个，另一个会被叠加。
这个时候要总结一下了：padding、border、margin都是都不是继承的而且它们的em表示的也不是相对于父元素的，而是相对与自身字体的大小。在这三个属性中，border的单位常常是像素表示，而另外两个则最好用相对单位em来表示，这样的布局会使网页更加的富有弹性，而且在响应式布局中总是被用到。
九 、使元素浮动
可以通过float属性使元素浮动在文本或其他元素上。可以使用这种技术让文本环绕在图像或者其他元素周围，也可以使用这种技术创建多栏布局等。
浮动只能是关于指定了width的元素。
main{ width:500px; float:left; } |
float的属性值可以是left、right或者是none。
注意：你选择的是方向是关于需要浮动元素的，而不是应用于环绕它的元素，使用float:left时，页面的其他部分围绕在右边。
flaot元素不是继承的，这很好理解。
十 、控制元素浮动的位置
我们可以控制浮动的停止，需要先理解一点，浮动的元素是不在文档流里的，但它本身是占据了一定的位置的，所以文档流会避开它继续流到空白的位置，有的时候你想要让元素回到原来文档流的位置，就要清除浮动，这在CSS中很简单：clear:left/right/both，如果原先的浮动是左的话就清除左，反之则是右。一旦清除浮动后，后面的元素就正常归位了。
由于浮动的元素不占据文档流的位置，所以其所在容器的高度就很难预测，所以你想为容器添加背景色，这个时候就需要容器自身有自清除的能力，有两种方式，一种是为容器元素添加clearfix类，关于clearfix，网上的方案有很多，比如说：
.clearfix:before,.clearfix:after{ content:""; display:table; } .clearfix:after{clear:both;} .clearfix{ *zoom:1;/*IE/7/6*/ } |
至于为什么这么写比较复杂，我目前也不是很懂，直接拿来用即可，另一种方法是用overflow属性，hidden或者auto属性值，就具体情况而定。
十一 、对元素进行相对定位
每个元素在文档流中都有一个自然位置，相对于这个原始位置进行移动就称为相对定位。
span{ positive:relative; top:35px; left:2em; } |
既要指明定位（positive）的方式，如这里的相对定位，也要指出偏移量，偏移量有四种，top、left、bottom、right，单位可以是px，em，数字可以是负数。
所谓相对定位，是相当于元素原来文档流的位置，其他的元素不受影响，所以有可能产生重叠，这时候要用z-index来解决，这个下面会说到。
如果对元素设置positive:static，元素就会回到原来的位置，static是元素的默认值。
十二 、对元素进行绝对定位
网页中的元素会按照它们各自在HTML中的出现的次序进行排列。对元素进行绝对定位，即制定他们相对于body或最近的已定位祖先元素的精确位置，可以让元素脱离正常的文档流，这与相对定位不同，原先的位置会被之后的元素占据，与浮动也不同，之后的元素不会围绕它，事实上，其他元素根本不知道它的存在，它也不知道其他元素的存在。
div{ positive:absolute; } span{ positive:absolute; top:35px; left:2em; } |
通常我们想绝对定位的时候，需要先为它的祖先元素定位，如果没有的话，是默认以body进行定位，这也许不是你想要的。
还有一种定位叫做固定定位，即positive:fixed，滚动浏览器窗口时元素不动，很多时候都会造成效果不佳，因此也很少使用。
十三 、在栈中定位元素
在相对定位和绝对定位中，有时会出现元素互相重叠，这时候就要选择哪些元素在顶层，这里用到的是z-index属性，该属性的属性值是一个任意的数字，数值大的排在顶层，但是这个属性仅仅对相对定位、绝对定位和固定定位才有效。
十四 、处理溢出
元素并不总是在自己的盒子里，有的时候盒子被设置的太小，或者内容出乎意料的多，无论什么情况，都可以用overflow属性来解决。
overflow有这么几个属性：
visible:让盒子中的所有元素可见，这是默认选项。
hidden:隐藏盒子容纳不了的内容
scroll:无论元素是否需要，都在元素上添加滚动条
auto:让滚动条仅在访问者访问溢出时出现（这个看起来是我们想要的！）
在清除float的时候，也是这个属性！
十五 、垂直对其元素
这里我们针对的是行内元素，行内元素默认在竖直方向上与文本的基线对齐，我们可以用vertical-align方便的改变这一切。
vertical-align有这么几个属性：
baseline:使元素的基准线对齐父元素的基准线
middle:使元素位于父元素中央
sub:使元素成为父元素的下标
super:使元素成为父元素的上标
text-top:使元素的顶部对齐父元素的顶部
text-bottom:使元素的底部对齐父元素的底部
top:使元素的顶部对齐当前行里最高元素的顶部
bottom:使元素的底部对齐当前行里最低元素的底部
或者输入某个值，正负皆可，单位为像素或者em，分别按照特定的值上下移动。
注意：vertical-align仅适用行内元素，对于块级元素不起作用。
十六 、修改鼠标指针
在CSS中，用cursor属性可以方便的修改鼠标的形状。
总结：这一章讲的，的确是难，写的时候都相当费劲，花了三个下午才写完，概念大致都清楚了，但是要说具体到使用中，可能说还是没有很充分的把握。这些只能是在今后的实践中一步步深化理解，光靠书是很难理解的特别透彻的。总而言之，多查，多看，多记，保持谦逊！