Home > Article > Web Front-end > Summarize three methods of converting inline elements to block-level elements
Summarize three methods of converting inline elements to block-level elements
- 零下一度Original
- 2017-06-28 09:35:356733browse
The following summarizes three methods for converting inline elements to block-level elements:
(1)display
(2)float
(3)position(absolute and fixed)
Speak less and do more, run the following code to see the effect:
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 方法一：使用display31 </div>32 <a href="#">a标签转为块级元素</a>33 <div>34 方法一：使用float35 </div>36 <span>span标签转为块级元素</span>37 <div>38 方法一：使用position（absolute和fixed）39 </div>40 <i>i标签转为块级元素</i>41 </body>42 </html>
Check whether it is converted to a block-level element by inspecting the element:
The above is the detailed content of Summarize three methods of converting inline elements to block-level elements. For more information, please follow other related articles on the PHP Chinese website!
Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：css notes-input tag introductionNext article：css notes-input tag introduction