对与HTML中的块级元素和行内元素理解

1.块级元素

理解：在浏览器中独占整行，不与其它元素共同占据一行。也就是说，块级元素的宽度是 100%。

常见的块级元素：

了解：

• div - 最常用块级标签，常用于css layout中

• form - 交互表单标签

• p - 段落标签

• h1 - 一级标题

• h2 - 二级标题

• h3 - 三级标题

• h4 - 四级标题

• h5 - 五级标题

• h6 - 六级标题

• hr - 水平分隔线

• ol - 有序 排序列表

• ul - 无序排序列表

• table - 表格标签

• pre - 格式化文本

• menu - 菜单列表

2.行内元素

理解：在浏览器中可以与其它行内元素共占一行，只有当多个元素共用一行时总宽度大于浏览器的宽度时，才会换行显示。

常见的行内元素：

了解：

• span - 常用行内容器，定义文本内区块

• a - 锚点标签

• img - 图片标签

• input - 输入框标签

• select - 下拉选择标签

• label - 表格标签

• strong - 粗体(推荐)

• b - 粗体(不推荐)

• em - 强调

• big - 大字体

• br - 换行

• i - 斜体

• cite - 引用

• sub - 下标

• sup - 上标

• textarea - 多行文本输入框

• u - 下划线

3.块级元素和行内元素的区别

思考：

1. 块级元素会独占一行，其宽度自动填满其父元素宽度；
   行内元素不会独占一行，相邻的行内元素会排列在同一行里，知道一行排不下，才会换行，其宽度随元素的内容而变化

2. 块级元素可以设置 width, height属性，【注意：块级元素即使设置了宽度，仍然是独占一行的】
   行内元素设置width, height无效;

3. 块级元素可以设置margin 和 padding.
   行内元素的水平方向的padding-left,padding-right,margin-left,margin-right 都产生边距效果，但是竖直方向的padding-top,padding-bottom,margin-top,margin-bottom都不会产生边距效果。（水平方向有效，竖直方向无效）              

4.行内元素与块级元素间的相互转换

理解：内元素和块级元素都不是绝对的，可以相互转换,，通常有这些方式可以转换。　　

1、display，将元素设置为块级、行内或是其它。　　

2、float，隐形地把内联元素转换为行内块级元素。不会占据一行，相当于display：inline-block;　　

3、position,属性值为absolute、fixed 时,隐形地把内联元素转换为块级元素，其它属性值不会做转换。                   

5.置换元素

理解：

置换元素：元素内容不受CSS视觉格式化模型控制，CSS渲染模型并不考虑对此内容的渲染，且元素本身一般拥有固有尺寸（宽度，高度，宽高比）的元素，被称之为置换元素。

浏览器根据元素的标签和属性，来决定元素的具体显示内容。

<img>、<input>、<textarea>、<select>、<object>是本身是行内元素，同时又可以设置宽高，所以属于行内置换元素。