css进阶开发指南

写好css是新手最头痛的问题，虽然现在拥有了相当多的框架，但是搭建简单页面还是写自己的css为上策

先说说问题、

   div麻疹，在刚上手时很容易把html写成清一色的div标签，这种毫无语义的标签可以说是老旧该摈弃的了，这里推荐使用h5的语义化标签来构筑界面，常用的语义标签有

1.header:表示头部

2.footer:表示页脚

3.section:表示一个章节，即一个较大的主体部分

4.article:表示一个具体的模框，比section拥有更强的语义

5.aside:表示注释，非主要部分，提示性信息

6.nav:表示导航栏

7.main:表示网页的主体部分，一个网页只能存在一个main标签

8.figure:用于表示插入文档中的额外内容，常见的为图片

9:strong:行内类型的标签，强调重要的部分

     滥用绝对布局与绝对单位px

绝对布局虽然能够直观快速地构建出页面，但是对于页面的响应性可谓是差到极致，事实上绝对布局的常用方式绝非是搭建页面的主体，由于绝对布局会使元素脱离页面流，所以维护起来十分困难，事实上，绝对布局常用于：

1.弹出注释信息：当设为相对布局时，虽然元素能够脱离原先的位置，但是浏览器仍然会保留其原有位置，这时我们就要使用绝对布局使其弹出页面流，再利用负外边距技巧使其移动，即可使元素相对于以前位置弹出

2.制作气泡的三角形：对于content为空的伪类元素，可以通过保留其部分边框的方式再加上绝对布局制造出三角

3.自定义元素的扩展方向，当写死绝对布局的三个方向后，在不写死长或宽的情况下即可使元素根据自身内容向一侧拓展

事实上我们应该多采用弹性盒子进行布局，即display:flex，

使用px虽然能够快速构造原型，但同样对页面的响应很差，其上位替代方案应该使用相对单位em和rem以及百分比进行开发

简单说说这三者与px的对应关系

em:相对于父元素字体大小

rem:相对于根元素字体大小，即浏览器默认字体大小（一般为16px）

百分比：百分比是相较于包含块而言的

     span和display的误解

   display具有外边框折叠的特性，这是很多开发者使用时没有注意的一点。这使得在同时存在上下margain时，display元素块的间距不会出现中间是两侧双倍的情况，而当一个空的div同时设置上下margain时也会发生折叠效应，使得其只保留较大的margain部分

   span是行内元素，其特性是随内容而自动增加内容块的大小，无法设置其宽度和高度，可以调节水平的padding和margain，但是调节垂直方向的padding和margain以及border都无法变化其大小，唯一变化其盒子大小的方法是调节line-height。想要调节行内元素的大小，需要将其display设为inline-block。

       不敢使用float进行布局

    float的特性往往会使新手十分困惑。事实上其存在的意义是文字环绕图片的布局。当使用float属性时，元素块会弹出页面流进行浮动，当碰到包含块或是其他浮动块时则会停止，而其他的元素都会当浮动走的元素不存在，但内元素则会缩进，若想取消这个特性，需要对行内元素的包含块应用clear属性，常见的作法时在父级元素的after伪元素上应用content='',display='block',clear='both'，clear实质上是同过改变上方的外边距来移动元素块。

        对于flex布局理解不够深入

弹性盒子模型分为主轴和辅轴，主轴即元素排列的方向，即flex-diretion的方向，分为row（横向布局）以及column（纵向布局），主轴用justify-content来设定，辅轴以align-items来设定,主轴对齐分为center,space-berween,space-around三种形式，而辅轴的对其一般默认时属性对应为stretch，即默认拉伸以填满可用空间，而使用flex-start,flex-end,center,baseline均会使子元素收缩成原有大小，后根据对应规则排列。对于实现单一flex元素的垂直居中，使用margain:auto设置即可。

接下来是flex很重要的一点，flex之所以被称作弹性盒子，正在于其尺寸是可收缩的，关于其尺寸，对应着有三个属性，分别是

flex-basis即初始尺寸，flex-grow，当初始尺寸小于盒子时所对应的伸展行为，以及flex-shrink，当初始尺寸大于盒子时对应的收缩行为，flex-grow的计算方法是将剩余部分分成x份，给对应的项目y份，x为所有项目的flex-grow之合，y为项目自身的flex-grow系数，flex-shrink的计算方法是计算每个项目的宽度乘上收缩系数占所有项目的宽度乘上收缩系数的百分比再乘以超出的宽度即为对应的收缩比例。

另外使用flex-wrap可以实现多行布局

总结

在不追究浏览器的兼容性的情况下，优先使用flex可以实现快速布局。同时可以增加适度的语义化标签，并且尽量使用相对计量单位进行属性的设置