css基础-4-css元素显示方式和三大特性

最新推荐文章于 2022-11-23 17:10:33 发布

Neptuneyut

最新推荐文章于 2022-11-23 17:10:33 发布

阅读量357

点赞数

分类专栏： Web前端文章标签： css

本文链接：https://blog.csdn.net/qq_42491125/article/details/106265638

版权

Web前端专栏收录该内容

25 篇文章 1 订阅

订阅专栏

文章目录

css元素显示方式
css三大特性
参考

css元素显示方式

在网页布局的时候，需要用到各种各样的布局方式，有的希望成块，有的希望成行，有的希望兼具二者的特点，这就用到css元素的不同显示方式：块元素、行内元素和行内块元素

块元素

诸如div,h1-h6,p,ul和li等元素就是典型的块元素，其特点是：

独占一行
可以设置宽、高以及不同的边距
若不设宽度则默认是父元素的宽度
块元素本身是一个容器，里面可以放置块和行内元素
文字类的块元素中不要放块元素，例如在p和h1-h6中不要放置其他块元素

行内元素

诸如span,a,strong,em

一行可以放置多个行内元素
含内元素宽和高没有效果，宽高默认被内容撑开
行内元素只能容纳文本和其他行内元素
链接中不能再放链接
特殊情况a可以放入块元素

行内块元素

input,img,td兼具块和行内元素特点
一行可以放置多个行内块元素
默认宽度就是内容的宽度
可以设置宽高、边距

元素模式的转换

display更改元素的显示方式

block将元素变成块元素
inline将元素变成行内元素
inline-block将元素变成行内块元素

作出小米官网左侧边栏：
在这里插入图片描述

<!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变成块元素垂直布局 */
        a {
            display: block;
            width: 235px;
            height: 45px;
            background-color: rgb(140, 157, 159);
            color: #fff;
            text-decoration: none;
            text-indent: 2em;
            line-height: 45px;
            font-size: 16px;
        }

        a:hover {
            background-color: rgb(238, 113, 46);
        }
    </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>

显示和隐藏元素

display: none/block;：隐藏/显示元素，隐藏元素位置同时消失，常用
visibility:hidden;：隐藏元素，隐藏元素位置仍在
overflow：hidden/auto：将溢出内容隐藏/溢出内容自动显示，并根据溢出大小自动加上x/y轴滚动轴

<!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>
        body {
            background-color: rgba(0, 0, 0, 0.3);
        }

        div {
            width: 200px;
            height: 200px;
        }

        .box1 {
            background-color: salmon;
            /* box1隐藏同时位置也消失 */
            /* display: none; */
            /* box1位置并不消失 */
            visibility: hidden;
            /* 自动为溢出内容添加滚动条 */
            /* overflow: auto; */
        }

        .box2 {
            background-color: sandybrown;
        }
    </style>
</head>

<body>
    <div class="box1">Lorem ipsum dolor sit amet consectetur adipisicing elit. In aliquid quam cum minima vero, porro
        esse praesentium similique, quidem voluptas deserunt veniam ad repellendus? Unde dolorem illo beatae inventore
        enim?</div>
    <div class="box2"></div>
</body>

</html>

在这里插入图片描述

css三大特性

层叠性

相同选择器设置同样的样式，后面的会覆盖掉前面的样式，例如：

<style>
        div {
            color: red;
        }
        /* 重复设置样式，后面的覆盖掉前面的样式，最后是绿色 */
        div {
            color: green;
        }
</style>
<body>
    <div>颜色测试</div>
</body>

继承性

子元素会继承父元素某些特定属性，主要是文字类text-,font-,line-以及color
开发时常在body中设置整个页面的字体，行高等，后续的子元素可以都继承到，不需要再单独书写，大大简化了css代码和复杂度
需要注意的是常常在body中设置行高多少倍，这里是值得相对子元素字体的倍数，因此子元素字体变大行高也随即变大

    <style>
        /* 这里2是行高的继承，是子元素div的字体大小的2倍，子元素改变，行高也随即改变 */
        body {
            font: 20px/2 'Microsoft Yahei';
            color: orange;
        }

        div {
            font-size: 30px;
        }
    </style>
<body>
    <div>颜色测试</div>
    <div>颜色测试</div>
</body>

优先级/权重

不同选择器的优先级

类型	优先级
继承和通配符	0,0,0,0
元素选择器	0,0,0,1
类和伪类选择器	0,0,1,0
`id`选择器	0,1,0,0
行内选择器`style`	1,0,0,0
`!important`	无穷大

不同选择器可以累加优先级，但是同一级选择器无论累加多少次都不会比下一级大（没有进位）
父元素的权重为0，因此无论父元素权重多高，子元素的权重都是0

<!-- 不同权重比较 -->
<style>
        /* 1.代码运行到这div是橙色 */
        div {
            color: orange;
        }

        /* 2.由于类选择器优先级是0,0,1,0,高于div的0,0,0,1,代码到这是红色 */
        .red {
            color: red;
        }

        /* 3.由于id选择器优先级是0,1,0,0,高于类的0,0,1,0,代码到这是蓝色 */

        #blue {
            color: blue;
        }

        /* 5.由于!important优先级是最大的,高于行内权重，代码到这是黄色 */

        div {
            color: yellow !important;
        }
    </style>

<body>
    <!-- 4.由于行内style选择器优先级是1,0,0,0,高于id的0,1,0,0,代码到这是粉色  -->
    <div class="red" id="blue" style="color: pink;">优先级测试</div>
</body>

<!-- 继承的权重是0 -->
 .father {
            color: red !important;
        }

        /* 虽然.father权重比p高，但是父元素继承的权重为0，因此还是p的权重大，所以这里是橙色 */
        p {
            color: orange;
        }
    </style>

<body>
    <div class='father'>
        <p>测试颜色</p>
    </div>
 </body>

参考

黑马pink老师

Neptuneyut

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
css基础-4-css元素显示方式和三大特性

文章目录块元素行内元素行内块元素元素模式的转换在网页布局的时候，需要用到各种各样的布局方式，有的希望成块，有的希望成行，有的希望兼具二者的特点，这就用到css元素的不同显示方式：块元素、行内元素和行内块元素块元素诸如div,h1-h6,p,ul和li等元素就是典型的块元素，其特点是：独占一行可以设置宽、高以及不同的边距若不设宽度则默认是父元素的宽度块元素本身是一个容器，里面可以放置块和行内元素文字类的块元素中不要放块元素，例如在p和h1-h6中不要放置其他块元素行内元素诸如span,
复制链接

扫一扫

专栏目录