【原文转载自 https://segmentfault.com/a/1190000015202771】
学习总结:
1.行内元素一般是内容的容器,块级元素一般是其他容器的容器, 行内元素适合显示具体内容,块级元素适合做布局
块级元素block:独占一行, 对宽高的属性值生效,如果不给宽度,块级元素就默认显示浏览器的宽度,就是100%宽。
行内元素inine: 可以多个标签存在一行,对宽高属性值不生效,完全靠内容撑开宽高。
行内块元素inline-block:结合行内和块级的优点, 既可以设置宽高,可以让padding和magin生效,又可以和其他行内元素并排。
常见的行内元素有: a input img b strong label button select textarea
常见的块元素有: header form ul ol table article div hr aside fighure canvas video audio footer
其中img 和 input 是行内块元素。
2. 行内元素与块元素之间的转换:
1.float:当把行内元素设置完float:left/right后,该行内元素的display属性被赋予block值, 且拥有浮动特性。行内元素去除了之间的莫名空白。
2.position:当为行内元素进行定位时, position:absolute与position:fixed都会使得原来的行内元素变成块级元素。
3.display:
块级元转换为行内元素:display:inline
行内元素转换为块元素:display:block
转换为行内块元素:display:inline-block
常用的display可能的值还有 table table-cell table-row table-column flex inline-flex grid
3.一些特性总结:
1.text-align属性对块级元素起作用,对行内元素不起作用
原因是块级标签如果不给宽度,那么就默认为浏览器的宽度,即100%宽, 那么在100%的宽度中居中生效;但是行内元素的宽度完全是靠内容撑开。所以宽度就是内容撑开的宽
所以会计元素是在盒子中间居中了,凡是行内元素的宽就是内容宽,没有可居中的空间,所以txt-align:center既没有作用 但是转换为块级就可以啦
2.块级元素独占一行且宽度会占满父元素的宽度,行内元素不会独占一行,相邻行内元素可以排在同一行,直至一行放不下
3.块级元素可以设置宽高weith和height, 行内元素设置宽高无效, 而且块级元素即使设置宽高也还是独占一行。 注意当块级元素没有明确指定width和height时,块级元素的尺寸由内容确定, 当指定了宽高,内容超出块级元素的尺寸就会溢出,这时候块级元素呈现什么行为要看overflow值(visible hidden scroll auto)
4.块级元素可以设置margin和padding属性,行内元素水平方向的margin和padding(如magin-left\padding-right)可以产生边距效果,但是垂直方向的margin-top、margin-bottom 不起作用。
5.行内元素的pading-top和padding-bottom会起作用,不过就像脱离了标准流一样, 并不会占据位置,并且还会把其他元素给盖住了。但是,如果行内元素没有内容,padding-top、padding-bottom将不起作用。如果想要起作用,只需要给padding-left或者padding-right设置一个值,或者当行内元素有内容时就会起作用。
6.当行内块元素inline-block碰到同类(inline、inline-block)时,谁的margin、padding或者line-height大就听谁的。除非他是行内元素inline,因为行内元素inline的margin是不起作用的,且inline的padding是不占空间的。
7.行内元素inline和行内块元素inline-block会引起间距的空格,这个间距是换行或者回车导致的,有以下解决办法
1.将空格删除,放到一行
2.在空格代码中加入注释
3.设置margin-left为负值,但是每个浏览器的间距不一样,所以基本上不用这种方法。
4.给父元素增加“font-size:0px”
5.给父元素增加letter-spacing负值,然后通过子元素清除letter-spacing值