CSS - 元素显示模式

最新推荐文章于 2022-07-11 11:02:12 发布

学习中的小菜鸟.

最新推荐文章于 2022-07-11 11:02:12 发布

阅读量174

点赞数

分类专栏： CSS 文章标签： css

本文链接：https://blog.csdn.net/qq_33962481/article/details/116983641

版权

CSS 专栏收录该内容

56 篇文章 0 订阅

订阅专栏

文章目录

一、什么是元素显示模式
二、元素显示方式
三、块元素
- 1. 块级元素的特点
- 注意
四、行内元素
- 行内元素的特点
- 注意
五、行内块元素
- 行内块元素的特点
六、元素显示模式转换

一、什么是元素显示模式

元素显示模式就是元素以什么方式进行显示. 比如div自己占一行, 比如一行可以放多个span

二、元素显示方式

HTML元素一般分为块元素和行内元素两种类型

三、块元素

常见的块元素有 <h1>-<h6>, <p>, <div>, <ul>, <ol>, <li> 等.

1. 块级元素的特点

独占一行
高度, 宽度, 外边距以及内边距都可以控制
宽度默认是容器的100%
是一个容器及盒子, 里面可以放行内或者块级元素

注意

文字类的元素内不能使用块元素
比如p标签主要用于存放文字, 因此p里面不能放块级元素

四、行内元素

常见的块元素有 <a>, <strong>, <b>, <em>, <i>, <del>, <s>, <span> 等.

行内元素的特点

相邻行内元素在一行上, 一行可以显示多个
高, 宽直接设置是无效的
默认宽度就是它本身内容的宽度
行内元素只能容纳文本或者其他行内元素

注意

特殊情况链接里面可以放块级元素, 但是给 a 转换一下块级模式最安全

五、行内块元素

<img />, <input />, <td> 它们同时具有块元素和行内元素的特点.

行内块元素的特点

和相邻行内元素在一行上, 但是它们之间会有空白缝隙.一行可以显示多个
默认宽度就是它本身内容的宽度
高度, 行高, 外边距以及内边距都可以控制

六、元素显示模式转换

一个模式的元素需要另外一种模式的特性

1. 行内元素转换为块元素

语法 :

display:block;

2. 块级元素转换为行内元素

语法 :

display: inline;

3. 转换为行内块元素

元素转换实例

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        a {
            /* 转换为块级元素 */
            display: block;
            background-color: red;
            width: 200px;
            height: 30px;
        }

        div {
            /* 转换为行内元素 */
            display: inline;
            background-color: green;
            width: 200px;
            height: 100px;
        }

        span {
            /* 转换为行内块元素 */
            display: inline-block;
            width: 300px;
            height: 50px;
            background-color: greenyellow;
        }
    </style>
</head>

<body>
    <a href="#">把a转换为块级元素</a>
    <div>块级元素转换为行内元素</div>
    <div>块级元素转换为行内元素</div>
    <span>转换为行内块元素</span>
    <span>转换为行内块元素</span>
</body>

</html>

学习中的小菜鸟.

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
CSS - 元素显示模式

文章目录一、什么是元素显示模式二、元素显示方式三、块元素1. 块级元素的特点注意四、行内元素行内元素的特点注意五、行内块元素行内块元素的特点六、元素显示模式转换一、什么是元素显示模式元素显示模式就是元素以什么方式进行显示. 比如div自己占一行, 比如一行可以放多个span二、元素显示方式 HTML元素一般分为块元素和行内元素两种类型三、块元素常见的块元素有 <h1>-<h6>, <p>, <div>, <ul>, <
复制链接

扫一扫

专栏目录