首页 > Web开发 > 详细

html的布局元素有哪些,并描述每种应用场景

时间:2020-08-08 21:33:12      阅读:150      评论:0      收藏:0      [点我收藏+]

分类:
1.内联元素
span i em a strong br input textarea
display: inline;
和其他的内联元素在同一行从左到右排列,不可以直接操作宽高以及相关的css属性,可以设置内外边距的左右值,(marign,padding的左右值);
宽高由自身的内容的宽高决定(文本,图片);
只能容纳行内元素,不能嵌套块级元素

2.块级元素
h1-h6,div,ul,ol,dl,li,table,li,form
display:block;
独占一行,每个元素会从新的一行开始,可以直接设置宽高以及相关css属性;
在不设置宽的情况下,宽度等于父元素的宽度;
在不设置高度的情况下,高度等于内容的高度

3.行内块级元素
综合了前两种的情况又各有取舍
display:inline-block
不自动换行
能够识别宽高,padding,lineheight,margin
默认排列方式为从左到右

应用场景:
内联元素:用于不指定宽高,有内容撑起宽高,不占满一行
块状元素:用于指定宽高,沾满一行
内联块级元素:用于指定宽高,不占满一行

html的布局元素有哪些,并描述每种应用场景

原文:https://www.cnblogs.com/xxcnhj/p/13460198.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!