html5块元素转换成其他元素
html5中块状元素转换为其他元素(行内或行内块状)
块状元素特征:
-
(1)能够识别宽高
-
(2)margin和padding的上下左右均对其有效
-
(3)可以自动换行
-
(4)多个块状元素标签写在一起,默认排列方式为从上至下
行内元素特征:
-
(1)设置宽高无效
-
(2)对margin仅设置左右方向有效,上下无效;padding设置上下左右都有效,即会撑大空间
-
(3)不会自动进行换行
行内块状元素特征:
-
(1)不自动换行
-
(2)能够识别宽高
-
(3)默认排列方式为从左到右
在html5中,可以利用display 属性将块状元素转换为行内或行内块元素。
-
display:inline;
转换为行内元素 -
display:inline-block;
转换为行内块状元素
示例:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<style>
p{
background-color: #FFC0CB;
height: 50px;
}
</style>
</head>
<body>
<p>块状元素p</p>
<p>块状元素p</p>
<p style="display: inline;">块状元素p--转为行内元素</p>
<p style="display: inline;">块状元素p--转为行内元素</p>
<p>块状元素p</p>
<p style="display: inline-block;">块状元素p--转为行内块元素</p>
<p style="display: inline-block;">块状元素p--转为行内块元素</p>
</body>
</html>
可以看出,块状元素和行内块状元素可以设置高度,而行内元素不可以;而行内元素和行内块状元素不和换行,而块状元素会。
这篇好文章是转载于:学新通技术网
- 版权申明: 本站部分内容来自互联网,仅供学习及演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系,请提供相关证据及您的身份证明,我们将在收到邮件后48小时内删除。
- 本站站名: 学新通技术网
- 本文地址: /boutique/detail/tanfbjbb
系列文章
更多
同类精品
更多
-
photoshop保存的图片太大微信发不了怎么办
PHP中文网 06-15 -
Android 11 保存文件到外部存储,并分享文件
Luke 10-12 -
word里面弄一个表格后上面的标题会跑到下面怎么办
PHP中文网 06-20 -
《学习通》视频自动暂停处理方法
HelloWorld317 07-05 -
微信公众号没有声音提示怎么办
PHP中文网 03-31 -
photoshop扩展功能面板显示灰色怎么办
PHP中文网 06-14 -
excel下划线不显示怎么办
PHP中文网 06-23 -
怎样阻止微信小程序自动打开
PHP中文网 06-13 -
excel打印预览压线压字怎么办
PHP中文网 06-22 -
photoshop蒙版画笔没反应怎么办
PHP中文网 06-24