CSS样式----块级元素和行内元素

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/wangyunzhao007/article/details/86410555

块级元素:div  , p  , form,   ul,  li ,  ol, dl,    form,   address,  fieldset,  hr, menu,  table

 行内元素:span,   strong,   em,  br,  img ,  input,  label,  select,  textarea,  cite, 

举例

块级:DIV标签,称为区隔标记。作用是设定字、画、表格等的摆放位置。

 行内:span标签是超文本标记语言(HTML)的行内标签,被用来组合文档中的行内元素。span没有固定的格式表现。当对它应用样式时,它会产生视觉上的变化。

其他元素的解释见博客:https://blog.csdn.net/sykent/article/details/7738408

 两者区别:

   1)块级元素会独占一行,其宽度自动填满其父元素宽度

        行内元素不会独占一行,相邻的行内元素会排列在同一行里,知道一行排不下,才会换行,其宽度随元素的内容         而变化

   2) 块级元素可以设置 width, height属性,行内元素设置width,  height无效

         注意:块级元素即使设置了宽度,仍然是独占一行的

   3) 块级元素可以设置margin 和 padding.  行内元素的水平方向的padding-left,padding-right,margin-left,margin-right 都产生边距效果,但是竖直方向的padding-top,padding-bottom,margin-top,margin-bottom都不会产生边距效果。(水平方向有效,竖直方向无效)

猜你喜欢

转载自blog.csdn.net/wangyunzhao007/article/details/86410555