【CSS学习笔记三】CSS的元素显示模式、CSS背景设置、CSS的三大特性

waski

已于 2023-10-25 09:54:31 修改

阅读量109

点赞数

分类专栏：前端之路文章标签： 1024程序员节 css 前端学习笔记

于 2023-10-24 23:11:15 首次发布

本文链接：https://blog.csdn.net/waski/article/details/134024031

版权

前端之路专栏收录该内容

19 篇文章 1 订阅

订阅专栏

文章目录

9. CSS的元素显示模式

元素显示模式分为：块元素；行内元素

9.1 块元素 `<h1>~<h6>, <p>, <div>, <ul>, <ol>, <li>`

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

其中<div>是最经典的块元素。

块元素的特点：

自己独占一行
高度，宽度，外边距，及内边距，都可以控制
宽度默认，为父级宽度的100%
是一个容器及盒子，里面可以放行内或块级元素。（<h1>~<h6>, <p>不能再放块级元素）

9.2 行内元素（内联元素）`<a>, <strong>, <b>, <em>, <i>, <del>, <s>, <ins>, <span>`

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

其中<span>是最经典的行内元素。

行内元素的特点：

一行可以显示多个行内元素
高，宽，设置是无效的
默认宽度，就是他本身内容的宽度
行内元素只能容纳文本或其他行内元素。

注意：

链接<a>里面不能再放链接<a>
链接<a>里面可以放块级元素，但是给<a>转换一下模式最安全。

9.3 行内块元素`<img>, <input>, <td>`

对于<img>, <input>, <td>，标签同时具有行内元素和块元素的特点。

行内块元素的特点：

一行可以放多个元素（行内元素的特点）
默认的宽度，就是他本身的宽度，如图片。（行内元素的特点）
高度，宽度，外边距，内边距，都可以控制。（块级元素的特点）

9.4 小结

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

9.5 元素显示模式的转换 `display:inline-block`

实现 块级元素、行内元素、行内块元素 的相互转化

转换为块级元素：display:block

<!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>
    <link rel="stylesheet" href="style.css">
    <style>
        a {
            width: 300px;
            height: 300px;
            background-color: pink;
            display: block;  行内元素<a>转换为块后，此时的 width和 height才能起作用
        }
    </style>
</head>

<body>
    <a href="#">链接</a>
</body>

</html>

转换为行内元素：display:inline

<!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>
    <link rel="stylesheet" href="style.css">
    <style>
        div{
            width: 300px;
            height: 300px;
            display: inline;  块元素<div>转换为行内元素后，上面的 width和 height不起作用
        }
    </style>
</head>

<body>
    <div>我是一个块级元素</div>
</body>

</html>

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

<!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>
    <link rel="stylesheet" href="style.css">
    <style>
        span{
            width: 300px;
            height: 300px;
            background-color: aquamarine;
            display: inline-block;   行内元素<span>转换为行内块元素后，上面的 width和 height起作用
        }
    </style>
</head>

<body>
    <span>我是一个行内元素</span>
</body>

</html>

10. CSS背景

背景属性可以设置背景颜色、背景图片、背景平铺、背景图片位置、背景图像固定等。

一般用于：页面超大背景图片，页面里的小logo

10.1 背景颜色 `background-color`

背景颜色的属性为：background-color:pink;，pink可以改为16进制的颜色值，rgb颜色，

背景颜色默认background-color:transparent;，表示透明的

背景颜色半透明：

<style>
        div {
            width: 500px;
            height: 500px;
            background: rgba(0, 255, 255, 0.7);
        }
    </style>

使用background: rgba(0, 255, 255, 0.7);前面3个值是正常的rgb值，最后一个参数是alpha为显色度，取值范围在0~1之间

10.2 背景图片 `background-image:url(images/logo.png);`

添加背景图片比插入图片 更好控制图片位置

语法：

background-image:none|url(images/logo.png);
输入bgi后tab

例：

<!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>
    <link rel="stylesheet" href="style.css">
    <style>
        div{
            display: inline-block;
            width: 300px;
            height: 300px;
            background-image: url(images/logo.png);
        }
    </style>
</head>

<body>
    <div>我是一个块级元素</div>
</body>

</html>

10.3 背景平铺 `background-repeat:no-repeat;`

平铺：background-repeat 属性

background-repeat: repeat | no-repeat | repeat-x | repeat-y

铺满：（默认）

background-repeat:repeat

不进行平铺

background-repeat:no-repeat

沿着x轴方向平铺

background-repeat:repeat-x

沿着y轴方向平铺

background-repeat:repeat-y

同时设置背景颜色和背景图片效果：重叠在一起，背景颜色在最底层

10.4 背景图片位置 `background-position: x y ;`

background-position：控制图片在块元素背景中的位置

语法：background-position: x y ;

x 坐标和 y坐标：可以使用方位名词或者精确单位确定图片位置

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

10.4.1 方位名词定位 `background-position: left top;`

方位名词包括：

控制上下的： top center bottom
控制左右的： left center right

例：

<!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>
    <link rel="stylesheet" href="style.css">
    <style>
        div{
            display: inline-block;
            width: 600px;
            height: 400px;
            background-image: url(images/logo.png);   插入背景图片
            background-color: blue;         背景为蓝色
            background-repeat: no-repeat;   图片不平铺
            background-position: left top;  图片位于背景的左上方
        }
    </style>
</head>

<body>
    <div>我是一个块级元素</div>
</body>

</html>

注意：

方位名词来控制位置时，与输入的顺序无关，可以先输左右再输上下，也可以先输上下再输左右。
当只是输入一个值时，另外一个默认为center

10.4.2 精确单位定位 `background-position: 20px 50px;`

background-position: 20px 50px;

第一个值：图片沿x轴从左到右20px位置；第二个值：图片沿y轴从上到下50px位置

background-position: 20px;

如果只是输入一个值，那么y轴默认为center

10.4.3 混合单位定位 `background-position: 20px center;`

方位名词和精确单位混合使用

background-position: 20px center;

注意：前面20px一定是x轴，后面center一定是y轴

10.5 背景图像固定 `background-attachment：fixed;`

background-attachment：scroll | fixed;

scroll：表示背景会随着页面一起滚动（默认）
fixed：表示背景会固定在页面上

10.6 背景复合写法 `background: #fff fixed 20px 50px no-repeat url(logo.png);`

可以将上面的内容用一行来写完：

<style>
    body {
        /* background-image: url(images/logo.png);
        background-color: blue;
        background-repeat: no-repeat;
        background-position: center top;
        background-attachment: fixed; */
        background: #fff fixed 20px 50px no-repeat url(images/logo.png);
    }
</style>

定义背景属性可以用一行代码写完，属性值空格隔开，没有顺序要求

10.7 小结

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

11. CSS的三大特性

CSS有三个非常重要的三个特性：层叠性、继承性、优先级。

11.1 层叠性

给同一个标签设置不同样式时，此时后面的样式就会覆盖(层叠)前面冲突的样式

11.2 继承性

<!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>
    <link rel="stylesheet" href="style.css">
    <style>
        div {
            color: pink;
            font-size: 20px;
        }
    </style>
</head>
<body>
    <div>
        <p>龙生龙凤生凤</p>      子承父业，<p>会继承<div>的样式
    </div>
</body>
</html>

注意：是继承部分属性，主要是继承与文字相关的属性。

<!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>
    <link rel="stylesheet" href="style.css">
    <style>
        body {
            font: 15px/1.5 "微软雅黑";
        }
        div {
            font-size: 14px;
        }
        p {
            font-size: 16px;
        }
    </style>
</head>
<body>
    <div>粉红色的回忆</div>
    <p>粉红色的回忆</p>
    <ul>
        <li>我没有指定文字大小</li>
    </ul>
</body>
</html>

注意此时父级元素的属性是：font: 15px/1.5 "微软雅黑";

div的行高为14px*1.5，继承body行高

p的行高为16px*1.5，继承body行高

li的字号大小为15px，行高为15px*1.5，继承body字号和行高

11.3 优先级 `style > id > class > div > body/*`

当同一个元素指定多个选择器,就会有优先级的产生
●选择器相同,则执行层叠性
●选择器不同 ,则根据选择器权重执行
外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

例：

<!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>
    <link rel="stylesheet" href="style.css">
    <style>
        div{
            color: pink!important;   此时pink为最优先级！
        }
        .lei{
             color: aqua;
        }
        #idxuanze{
            color: aquamarine;
        }
    </style>
</head>

<body>
    <div class="lei" id="idxuanze" style="color:blue;">你笑起来真好看</div>
</body>

</html>

权重：style > id > class > div > body/*

如果某一行加上!important，那么他就是最高的优先级

注意：继承的权重是0

权重的叠加：

<!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>
    <link rel="stylesheet" href="style.css">
    <style>
        li {           权重为 0，0，0，1
            color: antiquewhite;
        }

        ul li {        权重为 0，0，0，1 + 0，0，0，1 = 0，0，0，2
            color: aqua;
        }

        .nav {         权重为 0，0，1，0
            color: aquamarine;
        }

        .nav li {      权重为 0，0，1，0 + 0，0，0，1 = 0，0，1，1  权重最大
            color: bisque;
        }
    </style>
</head>

<body>
    <ul class="nav">
        <li>大猪蹄子</li>
    </ul>
</body>

</html>