行内元素转为块级元素的方法
2018-06-24 01:31:28来源:未知 阅读 ()
以下汇总三种行内元素转为块级元素的方法:
(1)display
(2)float
(3)position(absolute和fixed)
少说多做,运行以下代码看效果:
1 <!DOCTYPE html> 2 <html lang="zh"> 3 <head> 4 <meta charset="UTF-8" /> 5 <meta http-equiv="X-UA-Compatible" content="ie=edge" /> 6 <title>行内元素转为块级元素</title> 7 <style type="text/css"> 8 *{ 9 margin: 0; 10 padding: 0; 11 font-size: 20px; 12 color: red; 13 } 14 div{ 15 margin-top: 20px; 16 } 17 a{ 18 display:block; 19 } 20 span{ 21 float: left; 22 } 23 i{ 24 position:absolute; 25 } 26 </style> 27 </head> 28 <body> 29 <div> 30 方法一:使用display 31 </div> 32 <a href="#">a标签转为块级元素</a> 33 <div> 34 方法一:使用float 35 </div> 36 <span>span标签转为块级元素</span> 37 <div> 38 方法一:使用position(absolute和fixed) 39 </div> 40 <i>i标签转为块级元素</i> 41 </body> 42 </html>
通过审查元素查看是否转为块级元素:
标签:
版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有
下一篇:vue属性
- [03]HTML基础之行内标签 2020-06-01
- 前端CSS五中元素定位类型 2020-06-01
- css设置overflow:hiden行内元素会发生偏移的现象 2020-05-09
- CSS的 行内元素 和 块类元素 2020-05-06
- 相邻元素margin的自动合并与float的坑 2020-04-30
IDC资讯: 主机资讯 注册资讯 托管资讯 vps资讯 网站建设
网站运营: 建站经验 策划盈利 搜索优化 网站推广 免费资源
网络编程: Asp.Net编程 Asp编程 Php编程 Xml编程 Access Mssql Mysql 其它
服务器技术: Web服务器 Ftp服务器 Mail服务器 Dns服务器 安全防护
软件技巧: 其它软件 Word Excel Powerpoint Ghost Vista QQ空间 QQ FlashGet 迅雷
网页制作: FrontPages Dreamweaver Javascript css photoshop fireworks Flash