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

Posted 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>

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

  • 特点
    1. 和相邻的行内块元素在同一行,但是他们之间会有空白的缝隙,一行可以显示多个
    2. 默认宽度是它本身内容的宽度
    3. 高宽都可以控制

显示模式的转换

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

转换语句为样式语句

  • 转化成块元素
<style>
  a
    display: block;
  
</style>

<body>
  <a herf="#"> </a>
</body>
  • 转换成行内元素
<style>
  div 
    display: inline;
  
</style>

<body>
  <div>
    
  </div>
</body>
  • 行内块元素

    使用方式同上

    语句为display: inline-block

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

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

学习笔记——CSS进阶

前端学习 CSS基础

CSS - 高度坍塌和外边距溢出问题及解决方法

CSS盒子模型的使用及其注意事项——响应式Web系列学习笔记

CSS盒子模型的使用及其注意事项——响应式Web系列学习笔记