前端css基础：元素显示模式的特点【重点】

1.元素显示模式的特点，代表标签，转换属性代码

块级元素：

属性：display:block

显示特点：

1.独占一行（一行只显示一个）

2.宽度默认是父元素的宽度，高度默认由内容撑开

3.可以设置宽高

代表标签：

div，p，h1~h6

行内元素：

属性：display：inline

显示特点：

1.一行可以显示多个

2.宽度和高度默认由内容撑开

3.不可以设置宽高

代表标签：

a,span , b , u, i , s , strong ,i ns , em , det

行内块元素:

属性：display：inline-block

显示特点：

1. 一行可以显示多个

2. 可以设置宽高

   代表标签：

   **input、textarea、**button、select

   特殊情况：img标签有行内块元素特点，但是Chrome调试工具中显示结果是inline

	块级元素	行内元素	行内块元素
属性	display:block	display：inline	display：inline-block
显示特点	独占一行（一行只显示一个）	一行可以显示多个	一行可以显示多个
	宽度默认是父元素的宽度，高度默认由内容撑开	宽度和高度默认由内容撑开	可以设置宽高
	可以设置宽高	可以设置宽高
代表标签	div，p，h1~h6	a,span , b , u, i , s , strong	input、textarea
		ins , em , det	button、select

可被继承的常见的属性:

1. color

2. font-style、font-weight、font-size、font-family

3. text-indent、text-align

4. line-height

   a标签的颜色，标题标签的文字大小这两个要单独选出来改变:

其实color属性继承下来了，但是被浏览器默认设置的样式给覆盖掉了