CSS-元素显示模式及转换


css元素显示模式

元素显示模式分为:块级元素、行内元素以及块级行内元素

块级元素

代表元素: div、h1-h6、 p…..

  • 块级元素独占一行
  • 块级元素可以设置元素的宽高,如果没有设置,默认为父级元素的宽高
  • 块级元素内可以插入其它块级元素以及行内元素

注意:

p标签内不能插入div标签

行内元素

代表元素:span、a…..

  • 行内元素可以并列在一行
  • 行内元素不能直接设置宽高,默认的宽是里面包含内容的长度
  • 行内元素里面只能插入行内元素

注意

a标签内可以插入块级元素

块级行内元素

既具有块级元素的特点也具有行内元素的特点,代表元素:img、input、td…

  • 一行可以排列多个,但之间会留有缝隙
  • 默认宽度是里面包含类容的长度
  • 可以设置宽高、内外边距

元素显示模式的转换

行内元素 、 块级元素、行内块元素的相互转换,使其拥有其它显示模式的特性

display:block; //可以将元素转换成块级元素

dispaly:inline;//将元素转换成行内元素

dispaly:inline-block;//将元素转换成行内块元素

文章作者: 木叶勇
版权声明: 本博客所有文章除特別声明外,均采用 CC BY 4.0 许可协议。转载请注明来源 木叶勇 !
 上一篇
CSS-背景 CSS-背景
css背景 主要分为背景颜色、背景图片、背景颜色的重复以及背景颜色的定位 background-color 默认是transparent(透明),可以用16进制、RGB以及直接设置颜色来设置 p { background-color:
2020-04-15
下一篇 
HTML-文本格式化标签 HTML-文本格式化标签
语义 标签 说明 加粗 <strong> </strong> or <b></b> 推荐使用strong 倾斜 or 推荐使用em 删除线 or 推荐使用de
2020-04-15
  目录