常见的块级元素和行级元素

常见的块级元素有:div;p;form;ul;li;ol;dl;hr;table;h1~h6;

常见的行内元素有:a;span;strong;em;br;img;input;label;button;select;textarea;i;

注意点:

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)p元素虽然是块级元素,但里面不可以再嵌套块级元素;a元素虽然是行内元素,但里面可以嵌套块级元素,但a标签里面不可以再嵌套a标签;img、button和input既是行内元素,也是替换元素,有内在的宽度和高度,所以可以直接设置宽度和高度,用js也可以直接读取到相应的高度和宽度;

5)行内元素中间有间隙:

产生原因:换行符、tab(制表符)、空格产生间隙;

解决方法:1、元素写成一行;2、设置font-size:0;采用方法1代码会比较乱,一般不使用;采用方法2:直接给行内元素的父元素设置font-size:0,然后针对具体的行内元素设置相应的字体大小。

原文地址:https://www.cnblogs.com/lmsblogs/p/5834567.html