CSS学习

目录

浏览器和CSS规范

浏览器发展史

1990年 - 1993年：早期浏览器

WorldWideWeb：由Tim Berners-Lee在1990年创建，这是第一个网页浏览器，后来更名为Nexus。
Mosaic：1993年由NCSA（美国国家超级计算机应用中心）开发，是第一个广泛使用的图形化浏览器，对互联网的普及起到了重要作用。

1994年 - 1998年：浏览器大战

Netscape Navigator：1994年推出，迅速成为最流行的浏览器。
Internet Explorer：1995年微软推出，凭借Windows操作系统的捆绑销售，逐渐超越Netscape Navigator，成为市场主导者。

1999年 - 2004年：多浏览器竞争

Opera：1996年推出，以其轻量级和创新功能著称。
Mozilla Firefox：2002年作为Mozilla项目的分支开始开发，2004年正式发布，迅速获得用户青睐。

2005年 - 2010年：现代浏览器时代

Google Chrome：2008年推出，凭借其速度快、稳定性高和扩展性强的特点，迅速成为主流浏览器之一。
Safari：2003年由苹果公司推出，主要在Mac和iOS设备上使用。

2011年至今：移动互联网时代

移动浏览器：随着智能手机和平板电脑的普及，各大浏览器厂商纷纷推出移动版本，如Chrome for Android、Safari for iOS等。
新兴浏览器：如Microsoft Edge（2015年推出，取代Internet Explorer）、Brave（2016年推出，注重隐私保护）等。

CSS发展史

1994年 - 1996年：CSS的诞生

Håkon Wium Lie：1994年提出CSS的概念，旨在解决HTML中样式和结构混杂的问题。
W3C：1996年，W3C发布了CSS1规范，定义了基本的样式规则。

1997年 - 2000年：CSS1和CSS2

CSS1：1996年发布，支持基本的文本和布局样式。
CSS2：1998年发布，增加了更复杂的布局功能，如定位、浮动、表格布局等。

2001年 - 2007年：CSS2.1和CSS3模块化

CSS2.1：2004年发布，对CSS2进行了修订和优化，解决了许多兼容性和实现问题。
CSS3：2001年开始开发，采用模块化设计，每个模块独立发展，包括选择器、背景和边框、动画、媒体查询等。

2008年 - 2015年：CSS3的广泛支持

浏览器支持：各大浏览器逐渐增加对CSS3新特性的支持，如圆角、阴影、渐变、动画等。
响应式设计：2010年左右，随着移动设备的普及，响应式设计成为主流，CSS3的媒体查询和弹性布局（Flexbox）等特性发挥了重要作用。

2016年至今：CSS4和未来趋势

CSS4：虽然没有正式命名，但CSS4特指CSS3之后的新模块，如变量、网格布局（Grid Layout）、容器查询等。
未来趋势：CSS继续向更强大的布局和动画功能发展，同时注重性能优化和跨平台兼容性。

浏览器和CSS的发展相辅相成，从最初的简单文本显示到现在的复杂交互和动态效果，它们共同推动了互联网技术的进步。未来，随着新技术的不断涌现，浏览器和CSS将继续演进，为用户提供更加丰富和流畅的网络体验。

网页icon图标

配置网页的cion图标
在网站根目录下放置 favicon.ico 文件，浏览器在加载网页的时候会自动加载的。这个图片只能是 ico 格式，并且只能叫这个名字

如: css项目的根目录下
image

刷新网站没有生效，需要强制刷新，shift + 刷新
image

外部引入样式方式

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <!-- rel: 指定引入文件和当前html的关系类型，如果不指定有些浏览器则不识别 -->
    <link rel="stylesheet" href="./position.css">
</head>

position.css

img {
    width: 100px;
    height: 100px;
}

优势：样式复用，html结构清晰，可触发浏览器缓存提高加载css速度

样式表的优先级

样式优先级: 行内样式 > 内部样式 = 外部样式，内部样式和外部样式按照加载顺序覆盖（后来者居上）

image

image

选择器

基本选择器

通配选择器

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        * {
            color: red;
        }
    </style>

</head>

<body>
    <h1>与天奋斗，与地奋斗，与人奋斗，其乐无穷</h1>
    <p>学习CSS</p>
</body>

image

使用场景：可使用通配符选择器清除样式

元素选择器

<style>
    p {
        color: blue;
    }
</style>

对p标签设置样式，无法差异化设置样式

类选择器

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

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .title {
            color: blue;
        }

        .size {
            font-size: 80px;
        }

        .custom-position {
            text-align: center;
        }
    </style>

</head>

<body>
    <p class="title size custom-position">学习CSS</p>
</body>

</html>

image

根据class名匹配元素，并为其添加样式。使用-用作名称单词连接，如custom-position

ID选择器

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

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        #color {
            color: blue;
        }
    </style>

</head>

<body>
    <p id="color">学习CSS</p>
</body>

</html>

注意：不能是数字开头，如1color，尽量以字母、数字、下划线、短杠(-)组成，不要包含空格，区分大小写
一个元素只能有一个ID属性

image

复合选择器

交集选择器

选中同时符合多个条件的元素，选择器之间没有空格，保持连续

语法: 选择器1选择器2...选择器n {}

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

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        p#size {
            font-size: 50px;
        }
        #size.color {
            color: red;
        }
    </style>

</head>

<body>
    <p id="size">学习CSS</p>
    <p class="color" id="size">id和类交集</p>
    <p class="color">学习CSS</p>
</body>

</html>

image

注意：交集标签最多包含一个元素标签，而且元素必须在开头紧跟着是ID选择器或者类选择器，如p#size
image

并集选择器

选中多个对应的元素，又称分组选择器

语法: 选择器1,选择器2...选择器n {}

逗号含义为 或

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

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .first,
        .second,
        .third,
        h1,
        #id {
            color: red;
            font-size: 60px;
        }
    </style>

</head>

<body>
    <p class="first">学习CSSfirst</p>
    <p class="second">学习CSSsecond</p>
    <p class="third">学习CSSthird</p>
    <h1>学习CSSh1</h1>
    <p id="id">学习CSSid</p>
</body>

</html>

image

image

后代选择器

作用: 选中指定元素中，符合要求的后代元素
语法: 选择器1 选择器2 选择器2 ... 选择器n {}

选择器中的空格可以理解为 xxx中的，就是xxx的后代，选择器可以是任意类型的中的选择器，如ID选择器,class选择器,元素选择器,交集选择器,并集选择器

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

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        ol li {
            color: red;
            font-size: 80px;
        }

        .change li {
            color: green;
            font-size: 60px;
        }
    </style>

</head>

<body>
    <ul>
        <li>孙中山</li>
        <li>陈独秀</li>
        <li>蒋介石</li>
    </ul>
    <ol>
        <li>教员</li>
        <div>
            <li>阶级</li>
        </div>
    </ol>
    <ol class="change">
        <li>改造我们的学习</li>
    </ol>
</body>

</html>

image

image

子代选择器

作用: 选中指定元素中，符合要求的子元素(儿子元素)
子代选择器又称子元素选择器或子选择器

>含义，可以理解为 xxx的子代。选择器可以是我们学过的任意一种

语法: 选择器1>选择器2>...选择器n {}

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

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        div>a {
            color: red;
            font-size: 80px;
        }

        .sun>a{
            color: blue;
            font-size: 80px;
        }
    </style>

</head>

<body>
    <div>
        <a href="">张三</a>
        <a href="">李四</a>
        <a href="">王五</a>
        <p>
            <a href="">赵六</a>
        <div class="sun">
            <a class="sun" href="">孙七</a>
        </div>
        </p>
    </div>
</body>

</html>

image

image

兄弟选择器

  • 相邻兄弟选择器: 选中指定元素后，符合条件的相邻兄弟元素
    所谓相邻就是紧挨着它的下一个元素，睡在我下铺的兄弟。

  • 语法: 选择器1+选择器2 {}

  • 通用选择器: 选中指定元素后，符合条件的所有兄弟元素。睡在我下铺的所有兄弟

  • 语法: 选择器1~选择器2 {}

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

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        /* 选中div后紧紧相邻的兄弟p元素，相邻兄弟选择器 */
        div+p {
            color: red;
            font-size: 80px;
        }

        /* 选中div后所有的兄弟p元素，通用兄弟选择器 */
        /* div~p {
            color: red;
            font-size: 80px;
        } */
        /* 选中li相邻的li标签，选中li标签，那么1,2,3都可以选中，相邻的li，就只有第2,3个li，因此只有2,3的li选中  */
        li+li {
            color: blue;
            font-size: 80px;
        }
    </style>

</head>

<body>
    <p>java</p>
    <div>CSS</div>
    <p>前端</p>
    <p>后端</p>
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
    </ul>

</body>

</html>

image

注意: 两种选择器选中的都是下面的兄弟元素。上面的元素不会选中

属性选择器

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

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        /* 第一种写法: 选中具有title属性的元素 */
        [title] {
            color: red;
            font-size: 80px;
        }

        /* 第二种写法: 选中具有title属性并且值等于css2的元素 */
        [title="css2"] {
            color: blue;
            font-size: 80px;
        }

        /* 第三种写法: 选中具有title属性并且值以t开头的的元素 */
        [title^="t"] {
            color: gray;
            font-size: 80px;
        }

        /* 第四种写法: 选中具有title属性并且值以4结尾的元素 */
        [title$="4"] {
            color: green;
            font-size: 80px;
        }

        /* 第五种写法: 选中具有title属性并且值包含e的元素 */
        [title*="e"] {
            color: hotpink;
            font-size: 80px;
        }
    </style>

</head>

<body>
    <p title="css1">第一种写法: 选中具有title属性的元素</p>
    <p title="css2">第二种写法: 选中具有title属性并且值等于css2的元素</p>
    <p title="tcss3">第三种写法: 选中具有title属性并且值义t开头的的元素</p>
    <p title="css4">第四种写法: 选中具有title属性并且值以4结尾的元素</p>
    <p title="css5e">第五种写法: 选中具有title属性并且值包含e的元素</p>
</body>

</html>

image

image

伪类选择器

作用: 选中特殊状态的元素

伪类: 像class，但不是class，是元素的一种特殊状态。

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

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        /* 把访问过的元素设置为红色 */
        a:link {
            color: green;
        }
        /* 把访问过的元素设置为红色 */
        a:visited {
            color: red;
        }
    </style>

</head>

<body>
    <a href="https://jd.com">京东</a>
    <a href="https://taobao.com">淘宝</a>
</body>

</html>

image

动态伪类

:link: 超链接被访问的状态，只作用于超链接
:visited: 超链接访问过的状态，只作用于超链接
:hover: 鼠标悬停在元素上的状态
:active: 元素激活的状态

激活: 按下鼠标不松
注意点: 遵循LVHA的顺序，即，link、visited、hover、active

:focus: 获取焦点的元素，表单类才能使用focus。

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

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        /* 把访问过的元素设置为红色 */
        a:link {
            color: green;
        }

        /* 把访问过的元素设置为红色 */
        a:visited {
            color: red;
        }

        /* 鼠标悬浮设置为蓝色 */
        a:hover {
            color: blue;
        }

        /* 点击激活设置为黄色 */
        a:active {
            color: rgb(255, 247, 0);
        }

        /* 获取焦点时选中 */
        input:focus {
            background-color: chocolate;
        }

        select:focus {
            background-color: chocolate;
        }
    </style>

</head>

<body>
    <a href="https://jd.com">京东</a>
    <a href="https://taobao.com">淘宝</a>
    <br>
    <input type="text">
    <br>
    <input type="text">
    <br>
    <select>
        <option>请选择地区</option>
        <option>上海</option>
        <option>北京</option>
    </select>
</body>

</html>

image

结构伪类

:first-child

作用: 选中那些是其父元素的第一个兄弟子元素，并且这个子元素恰好是<p>标签的元素

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

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        /*
        选中第一个子元素为p的所有p元素 因此选中了body的第一个兄弟子元素p和marquee第一个子元素p，
        而mybatis未被选中的原因是不是作为marquee的第一个子元素
        */
        p:first-child {
            color: green;
        }
    </style>
</head>

<body>
    <p>java</p>
    <marquee>
        <p>spirng</p>
    </marquee>
    <marquee>
        <span>boot</span>
        <p>mybatis</p>
    </marquee>
    <p>css</p>
    <p>html</p>

</body>

</html>

image

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

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        /* 选中div标签中第一个子元素为p的元素 因此选中了uniapp */
        div>p:first-child {
            color: green;
        }
    </style>
</head>

<body>
    <p>java</p>
    <div>
        <p>uniapp</p>
        <marquee>
            <p>test</p>
        </marquee>
    </div>
</body>

</html>

image

:last-child

作用: 选择那些是其父元素的最后一个兄弟子元素，并且这个子元素是<p>标签的元素

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

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        /* 选中最后一个标签为兄弟p标签的所有p标签元素，因此选中html1、mybatis、spring */
        p:last-child {
            color: green;
        }
    </style>
</head>

<body>
    <div>
        <p>java</p>
        <marquee>
            <p>spring</p>
        </marquee>
        <marquee>
            <span>boot</span>
            <p>mybatis</p>
        </marquee>
        <p>css</p>
        <p>html1</p>
    </div>
</body>

</html>

image

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

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        /* 选中div标签的最后一个儿子标签为p元素，因此uniapp选中 */
        div>p:last-child {
            color: red
        }

        /* 选中最后一个标签为p标签的所有p标签元素，因此选中html1、mybatis、spring 
        但是实际情况下，html1并没有选中
        */
        p:last-child {
            color: green;
        }
    </style>
</head>

<body>
    <p>java</p>
    <marquee>
        <p>spring</p>
    </marquee>
    <marquee>
        <span>boot</span>
        <p>mybatis</p>
    </marquee>
    <p>css</p>
    <div>
        <span>
            <p>uniapp2</p>
        </span>
        <p>uniapp</p>
    </div>
    <p>html1</p>
</body>

</html>

image

为什么:last-child没有生效？
  • 为什么html1没有被选中？
    原因是浏览器在渲染时自动加了标签
    image
uniapp应该先被div>p:last-child选中，又被p:last-child选中，按理说会被覆盖为绿色，为什么会是红色？

div>p:last-child 是一个后代选择器，它选择了<div>的直接子元素且是最后一个<p>的元素。这个选择器的特异性高于仅使用元素选择器的 p:last-child

:nth-child()

作用: 它用于选择属于其父元素的特定子元素。通过指定一个模式或条件，:nth-child() 可以帮助开发者选中一组兄弟元素中的特定一个或多个元素。这个选择器非常强大，因为它允许基于元素在其父元素中的位置来应用样式

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

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        /* 当n=0是，返回5，当n=1是返回4...0,因此选中父标签的前5个兄弟子元素，并且是p标签的元素 */
        p:nth-child(-n+5) {
            color: red
        }
    </style>
</head>

<body>
    <!-- 第1个元素 -->
    <p>java</p>
    <!-- 第2个元素 -->
    <marquee>
        <p>spring</p>
    </marquee>
    <!-- 第3个元素 -->
    <marquee>
        <span>boot</span>
        <p>mybatis</p>
    </marquee>
    <!-- 第4个元素 -->
    <p>css</p>
    <!-- 第5个元素 -->
    <p>css</p>
    <!-- 第6个元素 -->
    <p>css</p>
    <div>
        <span>
            <p>uniapp2</p>
        </span>
        <p>uniapp</p>
    </div>
    <p>html1</p>
</body>

</html>

image

第偶数个: 使用2n或者even表示
第奇数个: 使用2n+1或者odd表示
前x个: 使用-n + x表示，如前3个 -n + 3

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

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        p:nth-child(even) {
            color: red
        }
    </style>
</head>

<body>
    <!-- 第1个元素 -->
    <p>java</p>
    <!-- 第2个元素 -->
    <p>spring</p>
    <!-- 第3个元素 -->
    <p>mybatis</p>
    <!-- 第4个元素 -->
    <p>css</p>
    <!-- 第5个元素 -->
    <p>css</p>
    <!-- 第6个元素 -->
    <p>css</p>
    <!-- 第7个元素 -->
    <p>uniapp2</p>
    <!-- 第8个元素 -->
    <p>uniapp</p>
    <!-- 第9个元素 -->
    <p>html1</p>
</body>

</html>

image

:first-of-type

作用: 选择属于其父元素的特定类型的第一个子元素。

在同类型元素中找第一个元素。

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

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        p:first-of-type {
            color: red
        }
    </style>
</head>

<body>
    <div>
        <span>css</span>
        <p>java</p>
    </div>
    <p>java2</p>
</body>

</html>

image

:last-of-type

作用: 选择属于其父元素的特定类型的最后一个子元素。

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

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        p:last-of-type {
            color: red
        }
    </style>
</head>

<body>
    <div>

        <p>css</p>
        <p>java</p>
    </div>
    <p>java2</p>
</body>

</html>

image

:nth-of-type()

作用: 根据元素的类型和位置来选择特定的子元素。这个选择器非常强大，因为它提供了一种基于元素类型和位置（而非ID或类名）来选择元素的方法。

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

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        /* 选中父标签的子标签为p标签，且是第2个p标签 */
        p:nth-of-type(2) {
            color: red
        }
    </style>
</head>

<body>
    <div>
        <p>css</p>
        <span>css2</span>
        <p>java</p>
    </div>
    <p>java2</p>
    <p>java3</p>
</body>

</html>

image

:nth-last-child()

作用: 从父元素的末尾开始，选择特定位置的子元素。这个选择器在创建对称布局、实现特定的样式效果或处理有序列表时非常有用。

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

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        /* 选中div中倒数第n个的儿子p元素（按照所有兄弟） */
        p:nth-last-child(1) {
            color: red
        }
    </style>
</head>

<body>
    <div>
        <p>css</p>
        <span>css2</span>
        <p>java</p>
    </div>
</body>

</html>

image

:nth-last-of-type()

作用: 从父元素的末尾开始，选择特定类型的子元素中的第 N 个。这个选择器对于在复杂布局中精确控制样式非常有用，特别是在需要针对特定类型的元素进行样式调整时。

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

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        p:nth-last-of-type(1) {
            color: red
        }
    </style>
</head>

<body>
    <div>
        <p>css</p>
        <span>css2</span>
        <p>java</p>
    </div>
    <div>
        <p>css</p>
        <p>java2</p>
        <span>css2</span>
    </div>
</body>

</html>

image

:only-child

作用: 选择那些是其父元素唯一子元素的元素。换句话说，如果一个元素在其父元素中没有任何兄弟元素（即它是父元素的唯一子元素），那么这个元素就会被 :only-child 选择器选中，并应用相应的样式规则。

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

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        p:only-child {
            color: red
        }
    </style>
</head>

<body>
    <div>
        <p>css</p>
    </div>
    <div>
        <p>css</p>
        <p>java2</p>
    </div>
</body>

</html>

image

:only-of-type

作用: 选择那些在其父元素中属于特定类型且是该类型唯一子元素的元素。具体来说，如果一个元素在其父元素中没有其他相同类型的兄弟元素（即它是该类型元素的唯一代表），那么这个元素就会被 :only-of-type 选择器选中，并应用相应的样式规则。

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

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        p:only-of-type {
            color: red
        }
    </style>
</head>

<body>
    <div>
        <p>css</p>
        <p>css2</p>
    </div>
    <div>
        <span>java</span>
        <p>css</p>
    </div>
</body>

</html>

image

:root

作用: 选中html的的根元素，即html标签

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

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        :root {
            background-color: red;
        }
    </style>
</head>

<body>
    <div>
        <p>css</p>
        <p>css2</p>
    </div>
    <div>
        <span>java</span>
        <p>css</p>
    </div>
</body>

</html>

image

:empty

作用: 选择那些没有任何子元素（包括文本节点、注释节点、换行、空格等）的元素。换句话说，如果一个元素内部是完全空的，没有任何内容，那么这个元素就会被 :empty 选择器选中，并应用相应的样式规则。

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

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        /* 第一个div不会选中，因为有换行，第二个div为空内容，可以被选中*/
        div:empty {
            width: 100px;
            height: 100px;
            background-color: red;
        }
    </style>
</head>

<body>
    <div>
        <p>css</p>
        <p>css2</p>
    </div>
    <div>
    </div>
    <div></div>
</body>

</html>

image

image

否定伪类:not()

作用: 选择除了指定条件之外的元素。这个选择器允许你排除掉某些特定的元素，以便将样式应用于其他所有元素。

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

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        div>p:not(.fail) {
            color: red;
        }
    </style>
</head>

<body>
    <div>
        <p>css</p>
        <p class="fail">css</p>
    </div>
</body>

</html>

image

div>p:not(:first-child) : 排除掉div中第一个子元素为p的元素，如果第一个不为p则不排除

UI伪类

:checked :enabled :disabled

:checked: 被选中的复选框或单选按钮
:enabled: 可用的表单元素
:disabled: 不可用的表单元素

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

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .check:active {
            width: 50px;
            height: 50px;
        }

        .checked:checked {
            width: 50px;
            height: 50px;
        }

        .com:checked {
            width: 50px;
            height: 50px;
        }

        input:disabled {
            background-color: gray;
        }

        input:enabled {
            background-color: yellow;
        }
    </style>
</head>

<body>
    <div>
        <input class="check" type="checkbox">
        <br>
        <input class="checked" type="checkbox">
        <br>
        <input class="com" name="test" type="radio">你
        <input class="com" name="test" type="radio">坏
        <br>
        <input disabled type="text">
        <br>
        <input type="text">
    </div>
</body>

</html>

image

目标伪类:target

:target: 选中锚点指定的元素

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

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        a {
            font-size: 40px;
        }

        div {
            height: 800px;
            font-size: 40px;
            margin-bottom: 50px;
            background-color: aliceblue;
        }

        div:target {
            background-color: green;
        }
    </style>
</head>

<body>
    <a href="#first">第一个</a>
    <a href="#second">第二个</a>
    <a href="#third">第三个</a>
    <a href="#fourth">第四个</a>
    <div id="first">第一个</div>
    <div id="second">第二个</div>
    <div id="third">第三个</div>
    <div id="fourth">第四个</div>
</body>

</html>

image

语言伪类:lang()

:lang(): 根据指定的语言选择元素（本质只匹配lang的属性值，不管属性值是什么，只要字符串匹配，那么就能选中）

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

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        div:lang(zh-CN) {
            background-color: green;
        }
    </style>
</head>

<body>
    <div lang="zh-CN">第一个</div>
    <div>第二个</div>
</body>

</html>

image

伪元素选择器

作用: 选中元素的特殊位置

::first-letter: 选中元素中的第一个文字
::first-line: 选中元素中的第一行文字
::selection: 选中被鼠标选中的内容
::before: 在元素最开始的位置创建一个子元素，必须使用content属性指定内容
::after: 在元素最后的位置创建一个子元素，必须使用content属性指定内容

::before和::after创建的内容都不会被鼠标选中，请看下方动图。

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

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        /* 选中div元素中的第一个字符 */
        div::first-letter {
            background-color: green;
        }

        /* 选中div元素中的第一行 */
        div::first-line {
            background-color: yellow;
        }

        /* 选中div元素中被鼠标选中的内容 */
        div::selection {
            background-color: blue;
        }

        /* 选中输入框中placeholder */
        input::placeholder {
            background-color: red;
        }

        /* 选中元素中最开始的位置，随后创建一个子元素 */
        .price::before {
            content: "￥";
        }

        /* 选中元素中最末位的位置，随后创建一个子元素 */
        .price::after {
            content: ".00";
        }
    </style>
</head>

<body>
    <div>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Reprehenderit amet soluta incidunt, laboriosam qui
        iusto modi similique doloremque perspiciatis eaque, corrupti possimus minima explicabo obcaecati esse sapiente
        quibusdam aperiam illo!Lorem ipsum dolor sit, amet consectetur adipisicing elit. Reprehenderit amet soluta
        incidunt, laboriosam qui
        iusto modi similique doloremque perspiciatis eaque, corrupti possimus minima explicabo obcaecati esse sapiente
        quibusdam aperiam illo!</div>
    <div><input type="text" placeholder="请输入"></div>

    <span class="price">99</span>
    <br>
    <span class="price">99</span>
</body>

</html>

image

选择器的优先级

通过不同的选择器，选中相同的元素，并且为相同的样式名设置不同的值时，就会发生样式的冲突。选择哪个样式，就需要根据优先级选择。

简单优先级: 行内 > ID选择器 > 类选择器 > 元素选择器 > 通配符选择器

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

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        div {
            color: red;
        }

        * {
            color: blue
        }
    </style>

</head>

<body>
    <div>
        优先级
    </div>
</body>

</html>

image

选择器优先级的权重计算方式

格式: ( a, b, c)
a: ID选择器的个数
b: 类、伪类、属性选择器的个数
c: 元素、伪元素选择器的个数

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

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        /* 选中第一个div的第一个span (2,0,0) */
        #container #id1 {
            color: red;
        }

        /* 也选中第一个div的第一个span (1,0,0) */
        #id2 {
            color: green;
        }

        /* 选中第二个div的第一个span (1,1,1) */
        #container2 span:first-child {
            color: orange;
        }

        /* 也选中第二个div的第一个span (0,1,1) */
        span:nth-child(1) {
            color: blue
        }

        #html4 {
            color: aqua !important;
        }

        #html4 {
            color: rgb(6, 31, 31);
        }
    </style>

</head>

<body>
    <div id="container">
        <span id="id1" id="id2">java</span>
        <span id="id3">css</span>
    </div>
    <div id="container2">
        <span>html1</span>
        <span>html2</span>
        <span>html3</span>
        <span id="html4">html4</span>
    </div>
</body>

</html>

image

鼠标悬停选择器，vscode计算权重，如图
image

!important

!important: 作用于具体的样式，优先级比行内样式还要高，但是要慎用，因为一旦使用!important，如果想使用其他选择器选中并修改，也不会生效，即使使用js也改变不了样式。使用场景比较极端，比如线上hotfix。

CSS三大特性

层叠性

概念: 如果发生了样式冲突，那就会根据一定的规则（选择器优先级），进行样式的层叠（覆盖）

样式冲突: 元素的同一个样式名，被设置了不同的值，这就是冲突。如下

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

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        div {
            color: red;
        }

        * {
            color: blue
        }
    </style>

</head>

<body>
    <div>
        层叠性
    </div>
</body>

</html>

image

引入外部样式css文件，内容如下

#test {
    color: blue;
}

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

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        * {
            color: blue
        }
        div {
            color: red;
        }
    </style>
    <link rel="stylesheet" href="css.css">
</head>

<body>
    <div id="test">
        层叠性
    </div>
</body>

</html>

image

外部样式和内容样式优先级相同，渲染为内部样式就是

* {
	color: blue
}
div {
	color: red;
}
#test {
	color: blue;
}

由于ID选择器优先级最高，因此被选中

继承性

概念: 元素会自动拥有其父元素、或其祖先元素上所设置的某些样式，并不是所有样式都能继承。
规则: 有限继承离得近的。
常见的可继承属性: text-??,font-??,line-??,color ...
可根据MDN网站，可查询属性是否能够被继承。

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

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        div {
            color: red;
            font-size: 50px;
            background-color: blue;
        }
    </style>
</head>

<body>
    <div id="test">
        <span>继承性</span>
        <p><span>继承性2</span></p>
    </div>
</body>

</html>

image

从表现形式来看，span好像是继承了background-color,实际上该元素并不能被继承，我们通过浏览器，可以看出，span只继承了color和font-size，如下图

image

也可以通过MDN网站查看元素的继承性
image

优先级

!important > 行内样式 > ID选择器 > 类选择器 > 元素选择器 > * 通配符选择器 > 继承的样式

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

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        div {
            color: red;
            font-size: 50px;
        }

        * {
            color: blue;
        }
    </style>
</head>

<body>
    <div id="test">
        <span>继承性</span>
        <p><span>继承性2</span></p>
    </div>
</body>

</html>

image
span会继承div的 color和font-size，由于通配符优先级大于集成样式，因此color会被覆盖。

计算优先级的需要注意的点:
并集选择器的每个部分是分开计算的。
image
就相当于有两个元素样式，分别是div{},和p{}

像素

看到像素，如图截图工具可以选中屏幕的指定像素的宽度和长度
image

实际生活中，显示器越贵像素点越小，展示的画面越细腻，因此像素是一个相对的范围，不同设备的像素范围不同。
image
image

截图工具不能精确像素的原因

在使用截图工具量取图片像素时并不准确，因为截图工具受到电脑放缩比例和浏览器放缩比例的影响，如下图，div宽度和高度为100px
image

颜色

颜色名称有哪些，通过mdn网站查找
https://developer.mozilla.org/zh-CN/docs/Web/CSS/named-color

rgb和rgba

rgb和rgba的区别:
RGB 是一种颜色表示方法，它通过红（Red）、绿（Green）、蓝（Blue）三种颜色的不同强度组合来生成各种颜色。RGB 值通常表示为三个介于 0 到 255 之间的整数，可以使用百分比表示，但不能正数和百分比组合表示。
RGBA 是 RGB 的扩展，增加了第四个参数 Alpha，用于表示颜色的透明度。Alpha 值范围从 0.0（完全透明）到 1.0（完全不透明）。例如 rgba(255, 0, 0, 0.5) 表示半透明的红色。

透明度0.x中0可以省略为.x，如: color: rgba(255, 0, 0, .5)

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .rgb {
            color: rgb(255, 0, 0);
        }

        .rgb2 {
            color: rgba(255, 0, 0, .5);
        }
    </style>
</head>

<body>
    <div class="rgb">学习css</div>
    <div class="rgb2">学习css</div>
</body>

</html>

img

推荐mac取色器工具，Pixeur，屏幕任何位置取色。

img

HEX和HEXA

HEX
定义：HEX 是一种表示颜色的方法，使用 6 位十六进制数来表示 RGB（红、绿、蓝）颜色值。
格式：#RRGGBB
RR 表示红色分量
GG 表示绿色分量
BB 表示蓝色分量

color: #FF0000; /* 红色 */
color: #00FF00; /* 绿色 */
color: #0000FF; /* 蓝色 */

HEXA
定义：HEXA 是 HEX 的扩展形式，除了表示 RGB 颜色外，还增加了一个额外的两位来表示 Alpha 通道（透明度）。
格式：#RRGGBBAA
RR 表示红色分量
GG 表示绿色分量
BB 表示蓝色分量
AA 表示 Alpha 通道（透明度）

color: #FF0000FF; /* 红色，完全不透明 */
color: #FF000080; /* 红色，半透明 */
color: #00FF00CC; /* 绿色，部分透明 */

80 在十六进制中转换为十进制是 128，这大约是 FF（255）的一半，所以 80 表示的是半透明。而 88 在十六进制中转换为十进制是 136，比 128 稍微不透明一些，但仍然是半透明的。

简写:

#00FF00CC 可以简写为 #0F0C

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .hex {
            color: #000;
        }

        .hexa {
            color: #0008;
        }
    </style>
</head>

<body>
    <div class="hex">学习css</div>
    <div class="hexa">学习css</div>
</body>

</html>

img

注意:
IE浏览器不支持 HEXA但是支持HEX

HSL和HSLA

Hue (色相): 用角度值（0° - 360°）表示，对应于色轮上的位置。0° 或 360° 表示红色，120° 表示绿色，240° 表示蓝色。
0deg表示0角度，可以省略deg字母缩写。

img

Saturation (饱和度): 用百分比（0% - 100%）表示，表示颜色的纯度。0% 表示灰色，100% 表示完全饱和的颜色。

Lightness (亮度): 用百分比（0% - 100%）表示，表示颜色的明亮程度。0% 表示黑色，100% 表示白色，50% 表示正常亮度。

deg可以省略

background-color: hsl(240deg, 100%, 50%);
background-color: hsl(240, 100%, 50%);

HSLA 是 HSL 的扩展，增加了 alpha 通道来控制颜色的透明度。

Alpha (透明度): 用一个介于 0.0（完全透明）和 1.0（完全不透明）之间的浮点数表示。

background-color: hsla(240, 100%, 50%, 0.5)

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .hsl {
            color: hsl(0, 100%, 50%);
        }

        .hsla {
            color: hsl(0, 0%, 50%);
        }

        .hsla2 {
            color: hsl(0, 0%, 0%, 10%);
        }
    </style>
</head>

<body>
    <div class="hsl">学习css</div>
    <div class="hsla">学习css</div>
    <div class="hsla2">学习css</div>
</body>

</html>

img

饱和度的百分比设置可以理解为，百分比越小，参入灰色越多。
亮度的百分比设置可以理解为，百分比越小，参入黑色越多。100%则为白色

字体样式

字体大小font-size

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .font {
            font-size: 12px;
        }

        .font2 {
            font-size: 3px;
        }
    </style>
</head>

<body>
    <div class="font">学习css</div>
    <div class="font2">学习css</div>
</body>

</html>

img
字号: 浏览器默认字体带下，在不指定字体大小时，默认16px
最小字号: 浏览器最小字体，默认0px。

当浏览器设置最小字体时，css样式字体小于浏览器最小字体时就会失效。如浏览器最小字体为12px，css设置字体为3px，那么浏览器仍然展示12px。
img

字体族font-family

查看mac已安装的字体，打开字体册.app
img
目录地址: /System/Library/Fonts

mac的默认中文字体为苹方-简，windows的默认中文字体为微软雅黑

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .one {
            font-size: 30px;
            font-family: "苹方-简";
        }

        .two {
            font-size: 30px;
        }

        .three {
            font-size: 30px;
            font-family: "行楷-简";
        }

        .four {
            font-size: 30px;
            font-family: "123", "行楷-简", serif;
        }
    </style>
</head>

<body>
    <div class="one">学习css</div>
    <div class="two">学习css</div>
    <div class="three">学习css</div>
    <div class="four">学习css</div>
</body>

</html>

img

衬线字体和非衬线字体的区别:
img

衬线字体

在字母的笔画末端有额外的小装饰线，这些装饰线被称为“衬线”。

例子：Times New Roman、Georgia、Garamond。

应用场景：通常用于印刷品，如书籍、报纸等，因为衬线有助于引导阅读者的视线，使长时间阅读更加舒适。

非衬线字体

特点：字母的笔画末端没有额外的装饰线，整体风格更加简洁、现代。

例子：Arial、Helvetica、Verdana。

应用场景：常用于屏幕显示，如网页、电子文档等，因为非衬线字体在低分辨率屏幕上更易读。

衬线字体适合长篇阅读，尤其是在纸质媒体上。
非衬线字体适合屏幕显示，尤其是在需要简洁、现代感的设计中。

字体中英文对照表

https://www.dute.org/chinese-font-family

注意:
1.使用字体的英文名兼容性会更好
2.使用双引号包裹起来: font-family: "Verdana","Arial",sans-serif
3.设置多个字体时，按照从左到右的顺序进行查找，直到找到设备环境有该字体则使用，如果都没有找到则使用设备默认字体，通过在最后加上非衬线sans-serif或者衬线serif。如下:

body {
    font-family: "Arial", "Helvetica", sans-serif;
}

浏览器会首先尝试使用 Arial 字体，如果 Arial 不可用，则尝试使用 Helvetica，如果两者都不可用，则使用浏览器的默认无衬线字体。

字体风格font-style

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .one {
            font-size: 30px;
            font-style: normal;
        }

        .two {
            font-size: 30px;
            font-style: italic;
            /* 也可以指定角度 */
            font-style: oblique 20deg;
        }

        .three {
            font-size: 30px;
            font-style: oblique;
        }
    </style>
</head>

<body>
    <div class="one">学习css</div>
    <div class="two">学习css</div>
    <div class="three">学习css</div>
    <div class="four">学习css</div>
</body>

</html>

img

italic: 斜体,通常是由字体设计师专门设计的,使用字体自带的斜体风格。

oblique: 斜体，和italic效果一样，但是可以设置倾斜角度，倾斜不是基于字体本身的斜体变体，而是由浏览器或渲染引擎对正常字体进行变换得到的。

字体粗细font-weight

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .one {
            font-size: 30px;
            font-weight: lighter;
        }

        .two {
            font-size: 30px;
            font-weight: normal;
        }

        .three {
            font-size: 30px;
            font-weight: bold;
        }

        .four {
            font-size: 30px;
            font-weight: bolder;
        }

        .five {
            font-size: 30px;
            font-weight: 100;
        }
    </style>
</head>

<body>
    <div class="one">学习css</div>
    <div class="two">学习css</div>
    <div class="three">学习css</div>
    <div class="four">学习css</div>
    <div class="five">学习css</div>
</body>

</html>

img

normal：默认值，表示正常粗细的字体，等同于数字值400。
bold：表示粗体字体，等同于数字值700。
bolder：表示比当前元素字体更加粗体的字体。多数字体不支持
lighter：表示比当前元素字体更加细的字体。

数值: 100~1000(包含)，无单位，数值越大，字体越粗，100~300同等于lighter，400~500等同于normal，600等同于blod

字体复合属性font

font属性中可以包含大小，族，风格，粗细。

规则:
1.字体大小和字体族必须都写上
2.字体族必须在最后，字体大小必须在倒数第二位
3.各个属性使用空格

开发中推荐使用复合写法，如果只添加字体大小属性，就直接使用font-size;

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .one {
            font: italic bold 30px "Fira Sans", sans-serif;
        }
    </style>
</head>

<body>
    <div class="one">学习css</div>
</body>

</html>

img

文本属性

颜色color

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .rgb {
            /* 透明度0.5 */
            color: rgb(255, 0, 0, .5);
        }
    </style>
</head>

<body>
    <div class="rgb">学习css</div>
    <div class="rgb2">学习css</div>
</body>

</html>

img

开发中常用: rbg/rgba或者HEX/HEXA

间距letter-spacing和word-spacing

letter-spacing: 字母间距
word-spacing: 单词间距，根据文字间是否有空格判断是否是一个单词。
属性值为像素px，正值让间距增大，负值间距缩小。

<style>
    .letter {
        /* 字母间距 */
        letter-spacing: 10px;
    }

    .letter1 {
        letter-spacing: 10px;
    }

    .letter2 {
        /* 字母间距 */
        word-spacing: 10px;
    }

    .letter4 {
        word-spacing: 10px;
    }
</style>

<body>
    <div class="letter">学习 css</div>
    <div class="letter1">letter-spacing作用于字母间距 如 Lorem ipsum dolor sit amet.</div>
    <div class="letter2">word-spacing属性作用英文单词间距，如 Lorem ipsum dolor sit amet.汉字无间距</div>
    <div class="letter3">word-spacing根据有无空格区分是否是一个单词，如未使用word-spacing属性: 有 空 格 汉 字</div>
    <div class="letter4">使用word-spacing属性: 有 空 格 汉 字，字体间隔比未使用word-spacing属性要大</div>
</body>

img

修饰text-decoration

text-decoration:
可选值: none/underline/overline/line-through

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        div {
            font-size: 30px;

        }

        .letter {
            /* 上划线 虚线 红色 */
            text-decoration: overline dotted red;
        }

        .letter2 {
            /* 下划线 波浪线 红色 */
            text-decoration: underline wavy red;
        }

        .letter3 {
            /* 删除线 */
            text-decoration: line-through;
        }

        .letter4 {
            /* 去掉带有修饰的属性样式，如去掉a标签下划线 */
            text-decoration: none;
        }
    </style>
</head>

<body>
    <div class="letter">学习 css</div>
    <div class="letter2">学习 css</div>
    <div class="letter3">学习 css</div>
    <div><a class="letter4" href="https://jd.com">学习 css</a></div>
</body>

</html>

img

缩进text-indent

<style>
    div {
        font-size: 40px;
    }

    .letter {
        /* font-size为40px，80px为缩进了两个字符大小 */
        text-indent: 80px;
    }
</style>

<body>
    <div class="letter">学习 css</div>
    <div class="letter2">学习 css</div>
</body>

img

对齐text-align

text-align: 文本对齐方式，align(排列)

left: 左对齐
right: 右对齐
center: 居中

<style>
    div {
        font-size: 20px;
    }

    .letter {
        background-color: red;
        /* 文本排列方式:  */
        text-align: center;
    }
</style>

<body>
    <div class="letter">学习 css</div>
</body>

img

详细研究font-size

<style>
    div {
        font-size: 20px;
        background-color: aqua;
    }

    .letter2 {
        font-family: "报隶-简";
    }

    .letter3 {
        font-family: "翩翩体-简";
    }
</style>

<body>
    <div>
        <span class="letter1">学abcxg</span>
        <span class="letter2">学abcxg</span>
        <span class="letter3">学abcxg</span>
    </div>
</body>

img

同是font-size大小，不同字体，显示大小不一样。
原因: 在设计字体时，不同字体的X字母基线位置不同，汉字和字母都要遵循该基线，因此不同字体的X字母基线高度不同，导致显示效果不一样。

字体设计中的基线系统是一个非常专业的概念，基准线 (Baseline)最基本的参考线
大多数字母的底部对齐位置
例如：'a', 'b', 'c', 'x' 等字母底部都在这条线上

1.由于字体设计不同，文字呈现出的大小并不一定相同
2.通常情况下，文字相对字体设计框，并不是垂直居中的，通常都靠下一些。

img
img

行高line-height

line-height: 行高，指文本行与行之间的垂直距离。
单位: px
可选值:

  • normal: 默认值，根据字体大小浏览器自动计算行高
  • 像素值: 直接指定行高，如30px，行高为30px
  • 数值: font-size的倍数，如 1就为font-size的值(推荐使用)
  • 百分比: 根据字体大小计算行高，如100%，行高为字体大小的100%
<style>
    div {
        font-size: 30px;
        background-color: aqua;
    }

    .letter1 {
        /* 默认值 其大小就为font-size的值为30px */
        line-height: normal;
        line-height: 30px;
        /* 其大小就为font-size的值的1倍为30px */
        line-height: 1;
        /* 其大小就为font-size的值的100%为30px */
        line-height: 100%;
    }
</style>
</head>

<body>
    <div>
        <span class="letter1">行高是指文本行与行之间的垂直距离，行高是指文本行与行之间的垂直距离，行高是指文本行与行之间的垂直距离，行高是指文本行与行之间的垂直距离，行高是指文本行与行之间的垂直距离</span>
    </div>
</body>

img

行高注意事项

<style>
    div {
        font-size: 30px;
        background-color: aqua;
        line-height: 0px;
    }
</style>
<body>
    <div>
        行高是指文本行与行之间的垂直距离
    </div>

</body>

不断调整行高展示效果如图:
img

注意点:

  1. 行高为0px时，文字重叠，且最小值为0px。不能为负数。
  2. 行高为0px时，文字上方被截取一部分。
    原因:
    即使设置 line-height: 0px，文字仍然会占据一定空间，只不过文字的基线位置会发生变化。因此浏览器会截取文字上方的一部分。当不设置line-height时，浏览器会根据字体大小自动计算行高，则正常显示，如果行高小于字体大小，行框的高度不断缩小，基线则不断上移，文字大小又不会改变，导致文字上方超出浏览器
    img

line-height的继承

<style>
    div {
        font-size: 30px;
        background-color: aqua;
        line-height: 1.5;
    }

    span {
        font-size: 50px;
        color: red;
    }
</style>

<body>
    <div>
        行高是可以继承的abcgx行高是可以继承的abcgx行高是可以继承的abcgx行高是可以继承的abcgx行高是可以继承的abcgx行高是可以继承的abcgx
        行高是可以继承的abcgx<span>X行高是可以继承的abcgx</span>行高是可以继承的abcgx行高是可以继承的abcgx行高是可以继承的abcgx行高是可以继承的abcgx
    </div>
</body>

span标签继承了父标签div的行高，因此span的行高为: font-size * line-height = 50px * 1.5 = 75px
img

整个div的高度为: 30 * 1.5 * 3 + 50 * 1.5 = 210px，如图
img

注意点:
1.行高是可以继承的，因此推荐使用行高为数值，如1，1.5，2等。可以动态计算出被继承标签的行高。
2.文本对齐方式默认以基线对齐，如上图的x和X。

line-height与height的关系

<style>
    div {
        font-size: 30px;
        background-color: aqua;
        height: 100px;
    }

    span {
        line-height: 200px;
    }
</style>

<body>
    <div>
        <span>X行高是可以继承的abcgx</span>
    </div>

</body>

指定div的高度为100px，div中span的行高为200px，那么div高度就固定为100px。当不设置div的高度时，div高度以span的行高为准乘以行数。
img

div设置了height时，div的高度为height值。
div没有设置height时，会以div内部的line-height * 行数为高度。

div背景色失效的原因

<style>
    div {
        background-color: aqua;
        line-height: 0px;
    }
</style>

<body>
    <div>
        X行高是可以继承的abcgx
    </div>
</body>

img

明明设置了div的背景色为蓝色，为什么不显示呢？
div的高度 = 行高 * 行数
原因: 行高为0px，因此div的高度为0px，导致蓝色背景不显示。如上图，div的高度0px。

行高的应用场景

场景:
1.调整多行文字的间距。
2.单行垂直居中对齐，设置line-height为height值，并不是绝对垂直居中。这是由于字体设计时，文字并不是在行框居中，而是靠下一些。

<style>
    div {
        height: 200px;
        background-color: aqua;
        line-height: 50px;
    }
</style>

<body>
    <div>
        X行高是可以继承的abcgxX行高是可以继承的
    </div>
</body>

</html>

img

使用行高使单行文字定位在垂直底部

<style>
    div {
        font-size: 30px;
        background-color: aqua;
        height: 200px;
        /* line-height = height * 2 - font-size - x */
        line-height: 364px;
    }
</style>

<body>
    <div>
        行高是指文本行与行之间的垂直距离
    </div>
</body>

img

单行文字计算行高实现垂直底部对齐
line-height = height * 2 - font-size - x
x: 根据字体大小动态调整，如30px字体，x = 30px * 0.2 = 6px

posted @ 2024-11-07 20:47  volc1606  阅读(34)  评论(0)  编辑  收藏  举报