行内块

1.块级元素

独占一行，对宽高的属性值生效；如果不给宽度，块级元素就默认为浏览器的宽度，即就是100%宽（宽度默认是父元素宽度）；高度默认值由元素内容决定；margin和padding的上下左右均对其有效

image

2.行内元素

可以多个标签存在一行，对宽高属性值不生效，完全靠内容撑开宽高！；行内元素的margin和padding属性,水平方向的属性都产生边距效果,但竖直方向的却不会产生边距效果

image

3.行内块元素：

结合的行内和块级的有点，不仅可以对宽高属性值生效，还可以多个标签存在一行显示；

3.1）行内块标签：img、input、textarea

特点：结合的行内和块级的有点，不仅可以对宽高属性值生效，还可以多个标签存在一行显示；

3.2）消除行内块之间空隙

方法一：HTML下，把行内标签写在一行，不去换行书写。结果出现间隙，就是因为换行导致
方法二：给行内块的父亲，添加font-size:0。之后给自元素重新设置字号

4.各种标签之间的转换

1、块级标签转换为行内标签：display:inline;
2、行内标签转换为块级标签：display:block;
3、转换为行内块标签：display:inline-block;

5.区别

块标签：独自占领一行、可以进行宽高的数值的设定；块级元素内不要再次嵌套块级元素
行标签：在一行内显示、不可以进行宽高的数值设定；行内元素里尽量只放行内元素和行内块元素，但a标签范围较大，可以放很多。
行内块标签：能和其他元素待在一行，能设置宽高；

6.嵌套规则

块标签可以套行标签，行标签不可以套块标签。
P标签不要套块属性标签，可以套a，span，文本...
a标签可以套块级元素，但最好还是把a转块级
嵌套的时候注意代码的缩进。