CSS元素显示模式

最新推荐文章于 2022-05-21 10:06:39 发布

学习中的小菜鸟.

最新推荐文章于 2022-05-21 10:06:39 发布

阅读量139

点赞数

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

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

版权

CSS 专栏收录该内容

56 篇文章 0 订阅

订阅专栏

元素显示模式

什么是元素显示模式
块元素
- 块元素的特点
- 注意
行内元素
- 行内元素的特点
- 行内块元素
元素显示模式转换
单行文字垂直居中
导航栏案例

什么是元素显示模式

元素以什么方式进行显示.

块元素

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

块元素的特点

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

注意

文字类的元素内不能使用块级元素, <p> 和 <h1> ~ <h6>

行内元素

常见的行内元素有 <a>, <strong>, <b>, <em>, <i>, <del>, <s>, <ins>, <span>等

行内元素的特点

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

行内块元素

行内元素中有几个特殊的标签 ----- <img /> <input /> <td> 它们同时具有块元素和行内元素的特点

元素显示模式转换

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

把行内元素转换为块级元素使用 display: block;
把块级元素转换为行内元素使用 display: inline;

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        a {
            width: 150px;
            height: 50px;
            background-color: red;
            display: block;
        }
    </style>
</head>

<body>
    <a href="#">www.baidu.com</a>
</body>

</html>

单行文字垂直居中

让文字的行高等于盒子的高度

导航栏案例

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        a {
            /* 元素转换 */
            display: block;
            /* 宽度 */
            width: 230px;
            /* 高度 */
            height: 40px;
            /* 背景颜色 */
            background-color: slategrey;
            /* 字体颜色 */
            color: #fff;
            /* 不要下划线 */
            text-decoration: none;
            /* 首行缩进两个字 */
            text-indent: 2em;
            line-height: 40px;
        }
        
        a:hover {
            background-color: red;
        }
    </style>
</head>

<body>
    <a href="#">手机    电话卡</a>
    <a href="#">电视    盒子</a>
    <a href="#">笔记本  平板</a>
    <a href="#">出行    穿戴</a>
</body>

</html>