一、块级元素的特点

1、默认显示在父标签的左上角

2、默认占满一行（占满整个文档流） 文档流是将窗体自上而下分成一行行, 并在每行中按从左至右的顺序排放元素,即为文档流。

二、行内元素（内联元素）的特点

1、大小受到文字区域的影响，不受到width、height影响。

2、行内元素不会独自占满一行。

例：

1 
     
      2 这是块级元素3 
     
4 5 这是行内元素6 

1 

 

三、常用的块级元素和行内元素

 1、块级元素（div、table、ul li、ol li、hr、h1~h6、p）

 2、行内元素（a、img、span、input）

四、块级元素和行内元素互转

1、块级==》行内: display：inline;

2、行内==》块级: display：block;

3、块具有行内元素和块级元素的特点：display：inline-block;  （width、height受到影响。不会单独占满一行）

例：块级-行内 display：inline;

1 
     
      2 这是块级元素13 
     
4 
     
      5 这是块级元素26 
     

 添加前效果：

1 

添加display：inline;后效果

1 

例：行内-块级 display：inline;（通常a标签用的比较多）

1 
     
 
      普通行内元素 
     
2 
     
3 
     
 
      行内元素变成块级元素 
     

1 

五、盒子模型

CSS盒子模式:内容(content)、填充(padding)、边框(border)、边界(margin)。

盒子模型是html网页制作中非常重要的布局方式。现在流行的网页制作都是采用盒子模型布局。

padding（内间距）

 1、padding:10px;   //表示 上下左右的内间距都是10px;

 2、padding:10px 20px; //表示 上下10px 左右20px; 

 3、padding:10px 15px 20px; 表示 上10px 左右15px 下20px;

 4、padding：5px 10px 15px 20px; 表示 上5px 右10px 下15px 左20px;

margin(外间距)

1、margin-top：上间距

2、margin-bottom：下间距

3、margin-left：左间距

4、margin-right：右间距

常用居模块的水平居中使用：margin：0px auto;margin与padding如何进行区分，其实说白了padding 就是内容与边框的空隙。而margin则是模块与模块的空隙。