CSS学习笔记——元素显示模式

Posted 2021-06-24 UDK_KL.

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了CSS学习笔记——元素显示模式相关的知识，希望对你有一定的参考价值。

作用

网页的标签很多，在不同的地方会用到不同的标签，了解他们的特点可以更好地布局我们的网。元素显示模式就是元素（标签）以什么方式进行显示如< div>标签自己占一行而一行可以有多个< span>。

html元素一般分为块元素和行内元素

常见的块元素

 <h1> ~ <h6>
 <p>
 <div>
 <ul>
 <ol>
 <li>

块元素的特点
1. 自己独占一行（在浏览器显示时）
2. 高、宽、外边距和内边距都可以自定义
3. 宽度默认是容器（父级）的100%
4. 是一个容器，里面可以放行内元素或块元素
注意

文字类的元素内不能使用块元素，如< p>标签主要用于存放文字，其内不能放块元素。同理< h1>~< h6>内也不能放块元素

特点
1. 相邻行内元素在一行中，一行可以显示多个（在浏览器显示时）
2. 高宽设置是无效的
3. 默认宽度是其本身内容的宽度
4. 行内元素只能容纳文本或其他行内元素
注意
1. 链接（< a>）中不能再放置其他链接
2. 特殊情况：连接标签< a>中可以放块元素

<img />
<input />
<td>

以上元素同时具有块元素和行内元素的特点，故称行内块元素

一个模式需要另一个模式的特点，如链接标签是行内元素，其高宽不能设置，但是可以通过模式转换转换成块元素就可以增加其触发范围

转换语句为样式语句

<style>
  a{
    display: block;
  }
</style>

<body>
  <a herf="#"> </a>
</body>

<style>
  div {
    display: inline;
  }
</style>

<body>
  <div>
    
  </div>
</body>

以上是关于CSS学习笔记——元素显示模式的主要内容，如果未能解决你的问题，请参考以下文章