基础知识点:
行内元素一般是内容的容器,而块级元素一般是其他容器的容器,行内元素适合显示具体内容,而块级元素适合做布局。
块级元素(block):独占一行,对宽高的属性值生效;如果不给宽度,块级元素就默认为浏览器的宽度,即就是100%宽。
行内元素(inline):可以多个标签存在一行,对宽高属性值不生效,完全靠内容撑开宽高。
行内块元素(inline-block):结合的行内和块级的优点,既可以设置长宽,可以让padding和margin生效,又可以和其他行内元素并排。
其中img和input为行内块元素。
行内元素与块状元素之间的转换:
float: 当把行内元素设置完float:left/right后,该行内元素的display属性会被赋予block值,且拥有浮动特性。行内元素去除了之间的莫名空白。
2. position: 当为行内元素进行定位时,position:absolute与position:fixed.都会使得原先的行内元素变为块级元素。
3 .display:
1、块级标签转换为行内标签:display:inline;
2、行内标签转换为块级标签:display:block;
3、转换为行内块标签:display:inline-block;
常用的display可能的值: