行内元素和块级元素表现的不同点?
二、行内元素与块级函数的三个区别
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?
你想把文字限定在一个宽度和高度内部,
还没有写完和想清楚,待会再写!!