初学css 行内元素与块级元素

行内元素与块级元素直观上的区别

1.行内元素会在一条直线上排列，都是同一行的，水平方向排列块级元素各占据一行，垂直方向排列。块级元素从新行开始结束接着一个断行。

2.块级元素可以包含行内元素和块级元素。行内元素不能包含块级元素。

3.行内元素与块级元素属性的不同，主要是盒模型属性上行内元素设置width无效，height无效(可以设置line-height)，margin上下无效，padding上下无效

行高决定行内元素的上限（即margin-top和padding-top的设置是否显示出来），当你不设置或者设置的行高小于字体所决定的行高时，行高为默认值，即字体*1.4；

无论行高为多少，margin和padding左右下三个方向可以随意设置并显示，下方向，可以设置，也有对应的盒模型，但是底部的底不是砖头，后面的还是可以冲上来，知道碰到其line-height.

行内元素不可以设置宽（width）和高（height），但可以与其他行内元素位于同一行，行内元素内一般不可以包含块级元素。行内元素的高度一般由元素内部的字体大小决定，宽度由内容的长度控制。

什么时候需要把行内元素转换为块级元素？

display：block；比较常用于<a><span>这两个标签，因为他们不是块级元素，定义display：block属性后，定义width、height等和长宽相关的css属性才会生效。

行内元素的高度可以用line-height设置，宽度可以用margin和padding,为什么还需要block化？

这在设置单行文字时是有效的，

什么时候会倾向于设置width和height？

你想把文字限定在一个宽度和高度内部，

来自网上资料

 

转载于:https://www.cnblogs.com/hfeng007/p/9104676.html