CSS的元素显示模式系列

日子如影儿

已于 2022-09-20 19:31:35 修改

阅读量108

点赞数

文章标签： css 前端 html

于 2022-09-20 14:04:24 首次发布

本文链接：https://blog.csdn.net/m0_58035213/article/details/126951389

版权

CSS笔记同时被 2 个专栏收录

17 篇文章 0 订阅

订阅专栏

前端

16 篇文章 0 订阅

订阅专栏

元素显示模式：

即元素（标签）以什么方式进行显示

布局网页

<div>自己占一行

一行可放多个<span>

HTML元素：

块元素：一行放一个

行元素：一行放多个

块元素

<p>

<div>

<ul>

<ol>

<li>

特点：独占一行

width、height外边距内边距可控制

width默认是容器（父级宽度）的100% 一样宽

是一个容器及盒子里边可放行内或块级元素

注意：文字类的元素内不能使用块元素。

<p>标签主要存文字，<p>中不能放块级元素(特别是<div>)

同理，<h1>-<h6>是文字类块级标签，也不可放块级元素

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>显示模式之块级元素</title>
    <style>
        div {
            /* width: 200px; */
            height: 200px;
            background-color: pink;
        }
    </style>
</head>

<body>
    <div>比较霸道,自己独占一行</div> 瑟瑟发抖
    <p>
        <div>这里有问题</div>
    </p>
</body>

</html>

行内元素（内联元素）

特点：

相邻行内元素在一行上，一行可显示多个；

高、宽直接设置是无效的

默认宽度即是它本身内容的宽度

行内元素只能容纳文本或其它行内元素

注意：链接里面不能再放链接

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

行内块元素

同时具有块元素和行内元素的特点

特点：

1、相邻元素间为空白缝隙，在同一行一行可显示多个。（行内元素特点)

2、默认宽度即它本身内容的宽度（行内元素特点）

3、高度、行高、外边距、内边距都可控制（块内元素特点）

总结

元素显示模式转换

一个模式的元素需要另外一种模式的特性比如想要增加链接<a>的触发范围。

转换为块元素：display:block;

转换为行内元素：display:inline;

转换为行内块：display: inline-block

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>元素显示模式转换</title>
    <style>
        a {
            width: 150px;
            height: 50px;
            background-color: pink;
            /* 把行内元素 a 转换为 块级元素 */
            display: block;
        }

        div {
            width: 300px;
            height: 100px;
            background-color: purple;
            /* 把 div 块级元素转换为行内元素 */
            display: inline;
        }

        span {
            width: 300px;
            height: 30px;
            background-color: skyblue;
            display: inline-block;
        }
    </style>
</head>

<body>
    <a href="#">金星阿姨</a>
    <a href="#">金星阿姨</a>
    <div>我是块级元素</div>
    <div>我是块级元素</div>
    <span>行内元素转换为行内块元素</span>
    <span>行内元素转换为行内块元素</span>
</body>

</html>

一个小工具的使用 snipaste

单行文字垂直居中的代码

解决方案: 让文字的行高等于盒子的高度就可以让文字在当前盒子内垂直居中

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>单行文字垂直居中</title>
    <style>
        div {
            width: 200px;
            height: 40px;
            background-color: pink;
            line-height: 40px;
        }
    </style>
</head>

<body>
    <div>我要居中</div>
</body>

</html>