布局：块级元素

最新推荐文章于 2024-10-02 13:25:04 发布

媽呀

最新推荐文章于 2024-10-02 13:25:04 发布

阅读量114

点赞数

分类专栏：前端学习文章标签： css 前端

本文链接：https://blog.csdn.net/qq_44729735/article/details/115262649

版权

前端学习专栏收录该内容

12 篇文章 0 订阅

订阅专栏

显示模式：

块级元素：
<h1></h1>
<p></p>
<div></div>
<ul></ul>
<ol></ol>
<li></li>
特点：
- 独占一行
- 高度、宽度、外边距、内边距可以控制
- 宽度默认为父级容器的100%
- 里面可以放块级元素或者行内元素
行内元素：
<a></a>
<em></em>
<i></i>
<del></del>
<s></s>
<u></u>
<span></span>
特点：
- 相邻行内元素在一行上，一行可以显示多个
- 高宽直接设置是无效的
- 默认宽度为本身类容宽度
- 行内元素只能容纳文本或其他行内元素
行内块元素：
<img src="" alt="">
<input type="text">
<td></td>
特点：
- 和相邻行内元素在一行上，但是之间会有空白缝隙，一行可以显示多个
- 默认宽度就是它本身内容的宽度。
- 高度、宽度、外边距、内边距可以控制
TIP：文字类的行内元素（<h1>，<p>，<dt>）内不能放块级元素

模式转换：

   <!doctype html>
   <html lang="zh">
   <head>
       <title>Document</title>
       <style type=text/css>
           p{display:block;/*转换为块级元素*/}
           div{display:inline;/*转换为行内元素*/}
           span{display:inline-block;/*转换为行内块元素*/}
       </style>
   </head>
   <body>
        <p>QAQ</p>
        <div>QAQ</div>
        <span>QAQ</span>
   </body>
   </html>