块级元素和行内元素相关问题

块级元素和行内元素相关问题

最近实习接触到前端的东西,以后想要往这个方向发展,把自己入门过程中遇到的一些问题都记录下来。方便以后回来看。

问题:

块级元素有哪些?行内元素有哪些?

参考来源:

http://www.cnblogs.com/Jackie0714/p/4923639.html

http://blog.csdn.net/zyy88886666/article/details/53448131

1.关于行内元素和块状元素的说明

1.1 CSS规范规定

每一个网页元素都有一个display属性,用于确定该元素的类型,每一个元素都有默认的display属性值

div元素,它的默认display属性值为“block”,称为“块级”元素(block-level);

而span元素的默认display属性值为“inline”,称为“行内”元素。

div这样的块级元素,就会自动占据一定矩形空间,可以通过设置高度、宽度、内外边距等属性,来调整的这个

矩形的样子;与之相反,像“span”“a”这样的行内元素,则没有自己的独立空间,它是依附于其他块级元素存在的,因此,对行

内元素设置高度、宽度、内外边距等属性,都是无效的。

1.2 改变类型

但可以使用css中display属性改变生成框的类型,这意味着,通过将display属性设置为block,可以让行内元素表现得像块级元素一样

还可以通过把display设置为none,让生成的元素根本没有框。这样的话,该框及其所有内容就不再显示,不占用文档的空间。

块级框从上到下一个接一个地排列,框之间的垂直距离是由框的垂直外边距计算出来的。

1.2 排列方式

行内框在一行中水平布置,可以通过水平内间距、边框和外边距调整它们的间距。但是,垂直内边距、边框和外边距不影响内行框的高度。

有一行形成的水平框成为行框的告诉总是足以容纳它包含的所有行内框。


2.行内、块状元素区别:

   (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都不会产生边距效果。(水平方        向有效,竖直方向无效)

3.行内、块状元素:

块元素(block element)

定义地址

定义文档中的分区或节

定义文档中的分区或节

定义列表        

定义列表中的项目  

定义列表中定义条目

    定义有序列表   

      定义无序列表    

    • 标签定义列表项目

      创建 HTML 表单

      定义的标题


      创建一条水平线

      标签定义段落

      定义预格式化的文本

      标签定义 HTML 表格   

      标签表格主体(正文)

      标签定义表格的表头   

      定义表格中的行

      定义表格的页脚(脚注或表注)


      内联元素(inline element)

      组合文档中的行内元素

      元素定义标注(标记) 

      输入框            

      定义表格标题      

      定义表头单元格

       

      表格中的标准单元格