写好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来设定