CSS显示模式

目录

CSS显示模式简介

CSS显示模式的分类

块元素

行元素

行内块元素

元素显示模式的转换

使块内文字垂直居中的方法

设计简单小米侧边栏(实践)


CSS显示模式简介

元素显示模式就是元素(标签)以什么方式进行显示,比如<div></div>自己占一行,比如一行可以放多个<span></span>。当网页的标签非常多,在不同地方会用到不同类型的标签,了解他们的特点可以更好的布局网页

CSS显示模式的分类

块元素

常见的块元素有以下标签:

html 复制代码
标题标签
<h1></h1>~<h6></h6>

段落标签
<p></p>

<div></div>

无序列表标签
<ul>
    <li></li>
    <li></li>
</ul>
有序列表标签
<ol>
    <li></li>
    <li></li>
</ol>

其中,<div></div>是典型的块元素标签

块元素标签的特点:

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

📌

文字类的元素内不能放块级元素,例如<p></p>中不可以放块级元素,特别是不能放<div> </div>同理, <h1></h1>~<h6></h6>等都是文字类块级标签,里面也不能放其他块级元素

示例代码:

html 复制代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>块元素</title>
    <style>
        div{
            width: 200px;
            height: 200px;
            background-color: red;
        }
        h1 {
            background-color: blue;
        }
    </style>
</head>
<body>
    <h1>这是一段内容</h1>
    <div>这是一段内容</div>
</body>
</html>

效果如下:

如果在文字类标签中放入可以放置任何内容的块元素则会出现问题

html 复制代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>块元素</title>
    <style>
        div{
            width: 200px;
            height: 200px;
            background-color: red;
        }
        h1 {
            background-color: blue;
        }
    </style>
</head>
<body>
    <h1>这是一段内容</h1>
    <p><div>这是一段内容</div></p>
    <div>这是一段内容</div>
</body>
</html>

问题如下:

行元素

常见的行元素标签:

html 复制代码
链接标签
<a></a>

粗体标签
<strong></strong>
<b></b>

斜体标签
<em></em>

删除线标签
<del></del>
<s></s>

下划线标签
<ins></ins>
<u></u>

<span></span>

<span></span>标签是最典型的行内元素。有的地方也将行内元素称为内联元素

行内元素的特点:

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

📌

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

示例代码:

html 复制代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>行元素</title>
    <style>
        span {
            width: 200px;
            height: 200px;
            background-color: red;
        }
    </style>
</head>
<body>
    <span>这是一段内容</span>
</body>
</html>

效果如下:

行内块元素

常见的行内块标签:

html 复制代码
<img />
<input />
<td></td>

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

  • 和相邻行内元素(或者行内块元素)在一行上,但是他们之间会有空白缝隙。
  • 一行可以显示多个行内块元素(行内元素特点)。
  • 默认宽度就是它本身内容的宽度(行内元素特点)。
  • 高度,行高、外边距以及内边距都可以控制(块级元素特点)。

元素显示模式的转换

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

转换方式:

  • 转换为块元素:display: block;
  • 转换为行内元素:display: inline;
  • 转换为行内块:display: inline-block;
html 复制代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>行内块元素</title>
    <style>
        /* 将a标签转换为行内块元素 */
        a {
            display: inline-block;
            width: 200px;
            height: 200px;
            background-color: red;
        }
    </style>
</head>
<body>
    <a href="#">链接</a>
    <a href="#">链接</a>
</body>
</html>

效果如下:

使块内文字垂直居中的方法

在CSS中没有直接对文字设置垂直居中的属性,但是可以采用行高的设置来解决这个问题

当行高与当前块高度相同时,文字会被上下两个间隙挤在块的中间

同理,当行高大于当前块高度时,则此时因为上下间隙均等分布,所以上面的间隙会占据大部分的块空间,从而使文字向下移动,反之当行高小于当前块高度时,使文字向上移动

设计简单小米侧边栏(实践)

参考图如下:

参考小米商城链接:小米商城

html 复制代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>简单小米侧边栏</title>
    <style>
        a {
            /* 设置每一个链接的大小,前提是为块元素 */
            display: block;
            width: 237px;
            height: 50px;
            /* 设置每一个链接的背景颜色 */
            background-color: rgb(80, 85, 92);
            /* 设置每一个链接的文字缩进 */
            text-indent: 2em;
            /* 设置每一个链接文字的行高,使内容文本垂直居中 */
            line-height: 50px;
        }

        /* 设置链接默认显示效果 */
        a:link {
            color: whitesmoke;
            text-decoration: none;
        }
        /* 设置当鼠标悬停时链接的效果 */
        a:hover {
            background-color: rgb(205, 103, 0);
        }
    </style>
</head>
<body>
        <a href="#">手机</a>
        <a href="#">电视</a>
        <a href="#">家电</a>
        <a href="#">笔记本 平板</a>
        <a href="#">出行 穿戴</a>
        <a href="#">耳机 音箱</a>
        <a href="#">健康 儿童</a>
        <a href="#">生活 箱包</a>
        <a href="#">智能 路由器</a>
        <a href="#">电源 配件</a>
</body>
</html>
相关推荐
科技探秘人10 分钟前
Chrome与火狐哪个浏览器的隐私追踪功能更好
前端·chrome
科技探秘人10 分钟前
Chrome与傲游浏览器性能与功能的深度对比
前端·chrome
JerryXZR15 分钟前
前端开发中ES6的技术细节二
前端·javascript·es6
七星静香17 分钟前
laravel chunkById 分块查询 使用时的问题
java·前端·laravel
q24985969320 分钟前
前端预览word、excel、ppt
前端·word·excel
小华同学ai26 分钟前
wflow-web:开源啦 ,高仿钉钉、飞书、企业微信的审批流程设计器,轻松打造属于你的工作流设计器
前端·钉钉·飞书
Gavin_91534 分钟前
【JavaScript】模块化开发
前端·javascript·vue.js
懒大王爱吃狼2 小时前
Python教程:python枚举类定义和使用
开发语言·前端·javascript·python·python基础·python编程·python书籍
逐·風6 小时前
unity关于自定义渲染、内存管理、性能调优、复杂物理模拟、并行计算以及插件开发
前端·unity·c#
Devil枫6 小时前
Vue 3 单元测试与E2E测试
前端·vue.js·单元测试