系统学习前端之CSS---day04

obsession36

已于 2023-12-26 13:50:02 修改

阅读量1.5k

点赞数 27

分类专栏： CSS 文章标签：前端学习 css

于 2023-12-25 14:12:41 首次发布

本文链接：https://blog.csdn.net/weixin_63522291/article/details/135197403

版权

CSS 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

一、line-height与vertical-align的解析

line-height（可以继承）

line-height是用来设置文本的最小行高

什么是行高？ ----》简单理解为一行文字所占的高度

专业理解：两行文字基线之间的间距

基线（baseline）：小写字母x底部对齐的线

line-height的值有哪些？

具体数值+单位：line-height：30px；
百分比：line-height：150%；是行高*字体大小
直接写数值：line-height:1; 数值*字体大小
normal：常规显示，浏览器基于字体调整一个合理值，范围在1-1.2
em单位：line-height:2m; 2*字体大小、

line-height和height的区别

height指的是元素的整体高度

line-height指的是一行文字所占据的高度

line-height的应用

一行文字时，让文字在元素中垂直居中

line-height并不能决定文字的最终高度

<!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>
  <style>
    div {
      font-size: 40px;
      /* @1 直接带单位 */
      /* line-height: 40px; */
      /* @2 不带单位 当前字体大小的1倍 */
      /* line-height: 1; */
      /* @3 百分比  1.5*40px */
      /* line-height: 150%; */
      background-color: pink;
      /* height: 200px; */
      /* 讲line-height和height保持一致，其实height是不需要写的 */
      line-height: 200px;
    }
  </style>
</head>

<body>
  <div>line-height</div>
</body>

</html>

继承的问题

vertical-align

当前没有设置div的尺寸，但是有高度，我们之前说是由内容撑起来的。

专业来讲：内容的行高撑起来的

就算是多行文本，那也是行高撑起来的

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <div>学习vertical-align</div>
</body>
</html>

如果在内容里插入一个span标签，并将其设置宽高，会发现整个div变大了

这是由于每一行都是行盒（line box），但是原本的行高已经框不住了，所以整体变大

行盒会将当前这行所有内容全部包裹住

<!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>
  <style>
    span {
      display: inline-block;
      width: 100px;
      height: 100px;
      background-color: pink;
    }
  </style>
</head>

<body>
  <div>
    学习vertical-align<span></span>
    学习vertical-align学习vertical-align学习vertical-align学习vertical-align学习vertical-align学习vertical-align学习vertical-align学习vertical-align学习vertical-align学习vertical-align学习vertical-align学习vertical-align学习vertical-align学习vertical-align
    
  </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>
  <style>
    div {
      background-color: skyblue;
    }

    img {
      width: 100px;
    }
  </style>
</head>

<body>
  <div>
    学习vertical-align
    <img src="https://img2.baidu.com/it/u=3686025989,2627065861&fm=253&fmt=auto&app=138&f=JPEG?w=400&h=400" alt="">
  </div>
</body>

</html>

很明显的发现，图片下面有一条缝隙，那这是怎么产生的呢？

但是本质原因不是图片的问题，放置一个inline-block（行内块）元素也会有这样的现象

一行内有多种元素都是如何对齐的呢？

浏览器会按照某种方式去对齐

vertical-align在官方文档中有这么一句话

This property affects the vertical positioning inside a line box of the boxes generated by an inline-level element.

翻译：vertical-align这个属性会影响行内及元素在一个行盒中垂直方向的位置

行盒还会包裹margin部分，并且inline-block元素里面如果加了文本效果就不一样了

这是由于vertical-align这个属性默认值是basline，所以默认是基线对齐的

这也是为什么底部会有缝隙的原因

图片默认基线是底部

粉色盒子基线是margin底部

就算只有一张图片，底部也会有缝隙，那是因为浏览器给预留了位置

那解决方案有很多

vertical-align不是basline就可以了
img改成block也是可以的

我们再回到刚刚的问题，粉色盒子中加了文字，为什么会变成这样的对齐方式，原因就是基线对齐，span盒子的基线现在已经变了

总结来说

文本的baseline是字母x的下方
inline-block默认的baseline 是margin-bottom的底部，没有margin就是盒子底部
inline-block有文字的时候，baseline是最后一行文本x的下方

vertical-align这个属性的各种值理解

baselin（默认值）：基线对齐
top：把行内级盒子的顶部和line box顶部对齐
middle：行内级盒子的中心点与父盒子基线加上x-height一半的线对齐
bottom：把行内级盒子的底部跟line-box底部对齐

<!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>
  <style>
    div {
      background-color: skyblue;
    }

    img {
      width: 100px;
    }
  </style>
</head>

<body>
  <div>
    一起学习vertical-align吧
    <img src="https://img2.baidu.com/it/u=3686025989,2627065861&fm=253&fmt=auto&app=138&f=JPEG?w=400&h=400" alt="">
    <span></span>
  </div>
</body>

</html>

以上这种状态根本就没有剧中的说法，因为根本有空间去居中

下面代码怎么居中？

如果只给图片设置vertical-align:middle; 这样无法居中，行盒只有行盒那么大，那如果加大行盒呢？

这只是看起来居中了而已，实际上还是有偏差的。

因为middle是行内级盒子的中心点与父盒子基线加上x-height一半的线对齐，x一半的位置不在中线上，因为大部分字体都是文本下沉的。

<!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>
  <style>
    div {
      background-color: skyblue;
      height:300px;
      line-height:300px;
    }

    img {
      width: 100px;
      vertical-align:middle;
    }
  </style>
</head>

<body>
  <div>
    一起学习vertical-align吧
    <img src="https://img2.baidu.com/it/u=3686025989,2627065861&fm=253&fmt=auto&app=138&f=JPEG?w=400&h=400" alt="">
    <span></span>
  </div>
</body>

</html>

二、选择器

什么是选择器？

要使用css对HTML页面中的元素实现一对一，一对多或者多对一的控制，这就需要用到CSS选择器。
HTML页面中的元素就是通过CSS选择器进行控制的

基础选择器

id选择器

我们可以给元素设置id属性，然后通过 #+id属性值 的方式来选择这个元素

选择器命名：

id就像我们的身份证号，是不允许重复的
并且一个元素只能有一个id属性
id命名规范建议（类名命名方式也适用）
- id或者class必须以字母开头，不能以数字或者下划线开头
- 名字不出现汉字
- 不允许带有广告的英文单词出现：如：ad adv adver advertising (防止浏览器当成垃圾广告处理掉过滤掉 )
- 除第一位后边小写字母、数字、连字符（ _ -）
- 见名知意
- 不要出现空格

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>id选择器</title>
    <style>
        #box{
            background-color: green;
        }
    </style>
</head>
<body>
    <ul>
        <li id="box"></li>
        <li></li>
    </ul>
</body>
</html>

类选择器

可以给不同的元素，进行分组。所有类名相等的元素，是一组的，可以进行控制样式
给要被分组的元素设置class属性选择器中使用 .+ class属性值 来选择元素
类不一定多个元素，也可以是一个元素
一个class可以设置多个类名，但是只能有一个class属性，一个元素的多个class属性的值可以用空格隔开，就代表书写多个类名

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>id选择器</title>
    <style>
        li{
            background-color: red;
        }
        .show{
            background-color: green;
        }

        .active{
            background-color: yellow;
        }
        .con{
            width: 100px;
            height: 100px;
        }
    </style>
</head>
<body>
    <ul>
        <li class="show"></li>
        <li></li>
        <li class="show"></li>
    </ul>
    <div class="active con"></div>
</body>
</html>

标签名选择器

通过标签名来选择元素
会选择页面中所有的这个标签的元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>标签名选择器</title>
    <style>
        li{
            background-color: red;
        }
    </style>
</head>
<body>
    <ul>
        <li></li>
        <li></li>
        <li id="three"></li>
        <li></li>
        <li></li>
        <li></li>
    </ul>
    <ol>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ol>
</body>
</html>

通配符选择器（*）

通配符使用星号*表示，意思是“所有的”。
在CSS中，同样使用*代表所有的标签或元素，它叫做通配符选择器。
不过，由于*会匹配所有的元素，这样会影响网页渲染的时间，因此很多人开始停止使用*通配符选择器

/*这里就把所有元素的字体设置为红色*/
*{ color : red; }

属性选择器

[属性]{},把具有这个属性的所有标签选中
[属性=“属性值”]，把不仅具有这个属性，而且必须是属性值也是规定的这一类标签选中

<!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>
  <style>
    /* 样式里，大括号前面的都叫做选择器 */
    /* 通配符选择器 */
    * {
      margin: 0;
      padding: 0;
    }

    /* 元素选择器 */
    div {
      /* color: lightcoral; */
    }

    /* 类选择器 当前页面中只要有class类的值为box2就可以*/
    .box2 {
      /* font-size: 20px; */
    }

    .box3 {}

    /* id选择器 具有唯一性*/
    #box2 {}

    /* 属性选择器 */
    /* 只要有id属性，就能选中 */
    /* [id] {
      font-size: 40px;
    }

    [id="box3"] {
      background-color: blue;
    }

    [class='box2 box3']{
      background-color: bisque;
    } */

    /* 表示带有以 class 命名的属性的元素，并且该属性是一个以空格作为分隔的值列表，其中至少有一个值为 box2 */
    /* [class~=box2] {
      color: red;
    } */

    [class|=box2] {
      color: red;
    }
  </style>
</head>

<body>
  <div>11</div>
  <!-- 类名可以是多个 -->
  <div class="box2 box3">11</div>
  <div class="box2-attr">222</div>
  <div class="box2">222</div>


  <div id="box2">11</div>
  <div id="box3">11</div>

</body>

</html>

复杂选择器

后代选择器

后代选择器使用空格间隔开（A B：在A元素中寻找后代（不一定是儿子）是B的元素）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>后代选择器</title>
    <style>
       /* .box li{
            background-color: red;
        }*/
        div li{
            background-color: pink;
        }
        .show{}
        .box .show{}
        .outer .show{}
        html body div .show{}
    </style>
</head>
<body>
    <div class="outer">
        <p>p1</p>
        <p>p2</p>
        <span>span1</span>
        <ul class="box">
            <li>111</li>
            <li class="show">222</li>
        </ul>
        <ol>
            <li>333</li>
            <li>444</li>
        </ol>
    </div>

</body>
</html>

子代选择器

子代选择器使用 > 间隔开（A>B：在A元素中寻找儿子辈元素是B的元素）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>子代选择器</title>
    <style>
        .box>.show{
            background-color: red;
        }
    </style>
</head>
<body>
    <div class="outer">
        <p>p1</p>
        <p>p2</p>
        <span>span1</span>
        <ul class="box">
            <li>111</li>
            <li class="show">222</li>
            <li>
                <span class="show"></span>
            </li>
        </ul>
        <ol>
            <li>333</li>
            <li class="show">444</li>
        </ol>
    </div>

</body>
</html>

相邻兄弟选择器：

相邻兄弟选择器使用 + 间隔开（A+B：在A元素的下边紧贴着A的元素并且是B 才能被选中）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>相邻兄弟选择器</title>
    <style>
        .outer>.show+span{
            background-color: yellow;
        }
        .outer>.show+p{
            /*选不中状态*/
            background-color: blue;
        }
    </style>
</head>
<body>
    <div class="outer">
        <p>p1</p>
        <p class="show">p2</p>
        <span>span1</span>
        <p>p3</p>
        <span>span2</span>
    </div>
</body>
</html>

通用兄弟选择器：

相邻兄弟选择器使用 ~ 间隔开（A~B：在A元素的下边兄弟元素并且是B 就能被选中）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>通用兄弟选择器</title>
    <style>
        .outer>.show~span{
            background-color: yellow;
        }
    </style>
</head>
<body>
    <div class="outer">
        <span>span0</span>
        <p>p1</p>
        <p class="show">p2</p>
        <span>span1</span>
        <p>p3</p>
        <span>span2</span>
    </div>
</body>
</html>

群组选择器：

将多个选择器使用，隔开可以同时对多个选择器设置样式
如果多个元素有相同的样式，方法有两种
- 使用一个共同的类名
- 使用群组选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>群组选择器</title>
    <style>
        /*.con{
            width: 100px;
            height: 100px;
        }*/
        .con1,.con2,.con3,.con4{
            width: 100px;
            height: 100px;
        }
        .con1{

            background-color: red;
        }
        .con2{

            background-color: #c0ff8b;
        }
        .con3{

            background-color: #5e8fff;
        }
        .con4{

            background-color: #ff2a91;
        }

    </style>
</head>
<body>
<ul>
    <li class="con1 con"></li>
    <li class="con2 con"></li>
    <li class="con3 con"></li>
    <li class="con4 con"></li>
</ul>
</body>
</html>

交集选择器

"交集”选择器：由两个选择器直接连接构成，其结果是选中二者各自元素范围的交集

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>交集选择器</title>
    <style>
        *{
            margin: 0;
            padding: 0;
            list-style: none;
        }
        /*
            当我们想要选择： 某一个元素 并且这个元素拥有某个类名的时候

        */
        .list li{
            width: 30px;
            height: 30px;
            border: 1px solid #000;
            margin: 30px;
            border-radius: 50%;
            background-color: pink;
        }
        .list li.active{
            background-color: skyblue;
        }
    </style>
</head>
<body>
    <div class="outer">
        <ul class="list">
            <li></li>
            <li class="active"></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
    </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>
  <style>
    /* 父子/后代 */
    /* 子代选择器 只能是儿子辈（>）*/
    .first>li {
      font-size: 20px;
    }

    /* 后代选择器 */
    /* .first 所有的后代li（包含了儿子辈）  空格 */
    .first li {
      color: red;
    }

    /* 相邻兄弟 */
    /* .fLi 下面一个兄弟，必须是li   （+） */
    .fLi+li {
      background-color: pink;
    }

    /* 通用兄弟 */
    /* .fLi 下面所有的兄弟，必须是li   （~）*/
    .fLi~li {
      color: blue;
    }


    /* 群组 逗号（和）*/
    li,
    p {
      font-size: 12px
    }

    /*交集 不仅是li，还得类名为.fli */
    li.fLi {
      font-size: 80px;
    }
  </style>
</head>

<body>
  <ul class="first">
    <li>shang</li>
    <li class="fLi">1111</li>
    <p>ppppp</p>
    <li>1111</li>
    <li>1111</li>
    <li>1111</li>
    <li>1111</li>
  </ul>
  <ul>
    <li>222</li>
    <li>222</li>
    <li>222</li>
    <li>222</li>
  </ul>
</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>
  <style>
    /* LV hao */
    a:link {
      color: red;
    }

    /* 链接访问过后的颜色 */
    a:visited {
      color: aqua;
    }

    /* 鼠标悬浮的背景颜色 */
    a:hover {
      background-color: pink;
    }

    /* 被激活状态的样式 */
    a:active {
      color: red;
    }

    div:hover {
      background-color: aqua;
    }

    /* 光标 */
    input:focus {
      background-color: skyblue;
    }
  </style>
</head>

<body>
  <!-- type='text' 普通输入框 -->
  <input type="text">
  <!-- 如果没有href属性，a标签和普通标签没有区别 -->
  <a
    href="https://www.baidu.com/s?wd=3%E5%B2%81%E5%A5%B3%E7%AB%A5%E5%96%8A%E8%84%9A%E7%96%BC%E8%A2%AB%E7%A1%AE%E8%AF%8A%E7%99%8C%E7%97%87%E6%99%9A%E6%9C%9F&sa=fyb_n_homepage&rsv_dl=fyb_n_homepage&from=super&cl=3&tn=baidutop10&fr=top1000&rsv_idx=2&hisfilter=1">baidu</a>
  <div>
    哈哈哈
  </div>
</body>

</html>

三、选择器的优先级

相同优先级的选择器生效方式

当优先级相同的时候，在后边书写的样式优先级高
link元素其实也是把样式关联上，选择器优先级相同的情况写，后写的生效

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>选择器的优先级</title>

    <style>
        .box{
            width: 100px;
            height: 100px;
            background-color: pink;
        }
        .con{
            width: 100px;
            height: 100px;
            background-color: green;
        }
    </style>
    <link rel="stylesheet" href="./01.css">
</head>
<body>
    <div class="box con show">
        box
    </div>
</body>
</html>

选择器优先级的权重计算：

行内样式： 1000
id：100
类：10
标签名：1

!important>内联样式>id>类|属性>标签>通配符>继承>浏览器默认

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>选择器优先级2</title>
    <style>
        #box p{
            /*1 --101*/
            background-color: red;
        }
        #box .con p{
            /*2 -- 111*/
            background-color: pink;
        }
        .box #con p{
            /*3--111*/
            background-color: green;
        }
        .box .show p{
            /*4--21*/
            background-color: yellow;
        }
        .box .con .show p{
            /*5 -- 31*/
            background-color: grey;
        }
        #box .show p {
            /*6 --111*/
            background-color: purple;
        }
        #box #con .show p{
            /*7 -- 211*/
            background-color: #5ab3f4;
        }
        #box #con #show p{
            /*8  -- 301*/
            background-color: #5df2ff;
        }
    </style>
</head>
<body>
<div id="box" class="box">
    <div id="con" class="con">
        <div class="show" id="show">
            <p>我是一个p标签</p>
        </div>
    </div>
</div>
</body>
</html>

四、CSS的三大特性

继承性
层叠性
优先级

①：继承性

什么是继承性？

官方解释，继承是一种规则，它允许样式不仅应用于特定的html标签元素，而且应用于其后代元素。简单说就是给父元素设置一些属性，子元素/后代也可以使用，这个我们称之为继承性。

哪些属性具有继承性

并不是所有的属性都可以继承, 以color/font-/text-/line-开头的属性、元素可见性：visibility

有继承性的属性罗列

参考链接：CSS特性之继承性-CSDN博客

②：层叠性：

层叠性就是CSS处理冲突的一种能力。通俗的说就是多种选择器选中了同一个元素，又对相同的属性设置了不同的属性值，这个时候就会发生层叠性。

如何处理：

1、如果权重相同的话，就看css代码的顺序，后面的会把前面的属性覆盖

2、如果权重不相同的话，谁权重大就听谁的。

③：优先级（权重）

权重顺序
！important>内联样式>id>类>标签>通配符>继承>浏览器默认

obsession36

关注

27
点赞
踩
23

收藏

觉得还不错? 一键收藏
0
评论
系统学习前端之CSS---day04

文本的baseline是字母x的下方inline-block默认的baseline 是margin-bottom的底部，没有margin就是盒子底部inline-block有文字的时候，baseline是最后一行文本x的下方vertical-align这个属性的各种值理解baselin（默认值）：基线对齐top：把行内级盒子的顶部和line box顶部对齐middle：行内级盒子的中心点与父盒子基线加上x-height一半的线对齐。
复制链接

扫一扫