一、块于行： 

一、显示：display：

block(块级元素)  |  inline(行级元素)  |  inline-block  |none（无） ；

二、自适宽高

width:auto;  自适宽度，跟随父级元素

height:auto; 自适高度，由内容决定高度

三、块级标签的特点：

1、独占一行

2、可设置尺寸

3、没有明确宽度的时候，宽度由父级决定

4、没有明确高度的时候，高度由内容决定

5、支持margin、padding

四、行级标签的特点：

1、不会独占一行，可与其他行级元素并排

2、不支持尺寸设置

3、对margin左右、padding左右支持较友好，

上下间距慎用！！！

4、支持盒模型，但不会独占一行

二、盒模型

一、盒模型组成：

外边距margin  border边界  padding内边界  内容尺寸width/heigh

二、盒模型分为：

标准盒模型、怪异盒模型

三、盒子与盒子之间用margin

盒子内部用padding

盒子尺寸尽量用auto  

三、margin、padding

marign：外边距（盒子与盒子之间的距离、盒子外部的距离）

margin-left：左边距（auto、px）

margin-right：右边距

margin-top

margin-bottom

margin：上  右  下  左；

margin：上  左右  下；

margin：四个方向；

四、css引入方式

一、行间样式优缺点

优点：不会产生额外请求

缺点：1、容易产生重复代码，照成文档体积变大

2、不利于维护

3、不符合结构样式分离的规范

综上所述，不建议使用行间样式

二、在HTML中  style 中写

优点：不会产生额外请求

初步实现结构与样式分离

缺点：代码复用不方便

适合单页面网站应用

三、外部引入

优点：1、利于后期维护

2、可重复使用

3、实现了结构与样式的分离

缺点：会产生额外的请求（后期会借助工具抹平）