前端开发基础 CSS3

发表于 2025-01-14 更新于 2025-03-28 分类于 Web 阅读次数：本文字数： 9.2k

前端开发从入门到入土之CSS。

CSS简介

CSS（Cascading Style Sheets，层叠样式表），可对 HTML 文件进行修饰，即给 HTML 标签加入样式。

CSS语法

标签{属性;属性}

1	div{color:red;font-size:20px;}

使用方法

内部样式

直接用于 html 文件， style 标签里：

<!DOCTYPE html>
<html lang="en">
<head>
    <title>CSS基础用法</title>
    <style>
        /*内部样式*/
        div {
            color: aqua; /*一条声明*/
            font: size 30px;
        }
        p {
            color: red;
        }
    </style>
</head>
<body>
    <p>正常字体</p>
    <div>
        CSS使用方法
    </div>
</body>
</html>

行内样式

直接写在标签里，采用style="..."的形式：

1	<p style="color:blue;font-size:20px;">正常字体</p>

外联样式

在 HTML 文件之外，新建一个 css 文件，同时在原 HTML 文件中引用 css ：

html 文件：
<head>
    <title>CSS基础用法</title>
    <link rel="stylesheet" href="style.css">
</head>

css 文件：
        /*内部样式*/
        div {
            /*声明块*/
            color: aqua;
            /*一条声明*/
            font: size 30px;
        }

        p {
            color: red;
        }

选择器和优先级

考虑使用了多个 div 标签的场景，我们只想对其中一个或几个进行修饰，我们需要选择器来选择特定的标签。

基本选择器：

标签选择器

1
2
3

 p {
            color: red;
}

类（class）选择器

通过给标签指定类（class="..."），通过点选择器（.）来选择类加入 css 。

    <style>
        .box {
            color: blue;
        }
    </style>
<p class="box">
  字体
</p>

id 选择器

通过给标签指定 id（id="..."），通过 id 选择器（#）来选择类加入 css 。

    <style>
        .box {
            color: blue;
        }

        #box {
            color: green;
        }
    </style>
</head>

<body>
    <p class="box" id="box">
        正常字体
    </p>
</body>

同时可以注意到，同时指定类选择器和 id 选择器时，id 选择器优先生效。

优先级：id 选择器（100） > 类选择器（10） > 标签选择器（1），优先级相同时，后写的覆盖先写的。

行内样式优先级目前最高，为1000。

派生选择器

后代选择器（包含选择器）

存在标签嵌套时，可以选择后代选择器：（.xxx .xxx {}，注意中间有空格）

注意后代选择器的选择范围是选择器最后一个子类及它包含的子类，优先级是各个选择器之和。

<head>
    <title>CSS基础用法</title>
    <style>
        .wrap .header {
            font-size: 100px;
            color: pink
        }

        .header {
            color: green;
        }
    </style>
</head>
<body>
    <div class="wrap">
        <div class="header">
            今天是双十二
        </div>
    </div>
</body>
</html>

子选择器

和后代选择器同理，格式为：.wrap>.header {}

注意子选择器只作用于选择器的最后一个子类，它包含的子类不再作用。优先级与后代选择器相同，优先级相同时后写的覆盖先写的。

<head>
    <title>CSS基础用法</title>
    <style>
        .wrap .header {
            font-size: 100px;
            color: pink
        }

        .wrap>.header {
            color: green;
        }

        .header {
            color: green;
        }
    </style>
</head>
<body>
    <div class="wrap">
        <div class="header">
            <div class="123">
                今天是双十二
            </div>
        </div>
    </div>
</body>

群组选择器

使用逗号分隔，同时选择。

    .a,
    .b,
    p {
        color: blue;
    }

<div class="a">群组1</div>
<div class="b">群组2</div>
<p>群组3</p>

字体样式

font-size ：字体大小
font-style：italic / oblique / normal 控制斜体
font-weight：lighter / bold / bolder 控制粗细
font-family："宋体" / “微软雅黑” 控制字体

如果想要同时使用，格式为：font: 12px, oblique, bold, "宋体"（按照顺序来，中间可省略）

文本样式

color : 单词 / #01204f / rgb(100,200,255)，字体颜色
line-height ： 50px / 2em行高 / 行间距
text-align ：center / left（默认） / right 对齐方式
text-indent ： 32px / 2em（2倍字体大小）首行缩进
text-decoration：underlint / overline / line-through / none 下划线 / 上划线 / 删除线/ 无
text-transform：capitalize / uppercase / lowercase 首字母大写 / 全大写 / 全小写

超链接样式（伪类选择器）

a:link{}(未被访问之前)
a:visited{}（前两个伪类只能给 a 标签加）
a:hover{} （可以给任意元素加）
a:active{} （按钮、超链接可以加）

列表样式

list-style-type：circle ...
list-style-image：url(...)
list-style-positon：outsize / inside

综合写法：list-style：

背景样式

background-color：背景颜色
background-image：url(...) 背景图片
background-repeat：no-repeat / repeat（默认）/ repeat-x （横向）/ repeat-y（纵向），图片只显示一次
background-position：center / top / 100px 20px，在 no-repeat 时，选择图片位置
background-size：100% 100%（横纵充满）/ 100%（横充满，纵等比例缩放）/ cover

综合写法：background:#ccc url() no-repeat center/cover（注意 center 和 cover 之间用"/"）

盒模型

使用 div 进行分块，则我们可以把网页中的元素抽象成一个现实中的盒子，可以给盒子设置宽和高，背景颜色等。

width （指定文字区域大小，可以用大小或比例，如20px / 50%）
height（指定文字区域大小，可以用大小或比例，如20px / 50%）
padding（内边距，即文字区域到内边框的距离，默认四个方向）/ padding-top / padding-right / padding-bottom / padding-left，也可分别指定四个方向，按照padding:上右下左的顺序，左右相同：上左/右下上下相同、左右相同：上/下左/右
background-color
margin：外边距，用法同 padding
border （内边框，默认四个方向，用法同 padding ）/ border-top / border-right / border-bottom / border-left / border-width / border-style / border-color，其中 border-style可以设定： solid（实线）/ dashed（虚线）/ dotted（点线）/ double（双实线）

				.box {
            width: 300px;
            height: 300px;
            /* background-color: red; */
            border: 1px solid red;
            padding: 100px;
            margin: 30px;
        }

html,body{
  height: 100%;
}
.box{
  width: 50%;
  height: 50%;
  padding: 50px 100px;
}

应用

块级元素中（所有盒模型的属性都能正常使用）：

div，p，ul，ol，dl，dt，dd，table，form

行内元素
- 行内非替换元素：a，span（宽/高不能正常使用）
- 行内替换元素：img，input，textarea（内置宽高属性）

元素展示

网页默认是存在 padding 和 margin 的，可以使用 * 通配符清除。一个 div 的上下无边距，左右居中的常见方法是：margin: 0 auto;

* {
    padding: 0;
    margin: 0;
}

.box {
    width: 1200px;
    border: 1px solid red;
    margin: 0 auto
}

我们在开发中的一个常见的场景是：一个 div 中设置左右两个 div 展示属性。然而，因为 div 是块级元素，它会默认换行，无法实现左右显示的需求，此时我们可以使用展示属性 display 来设置元素展示的形式（块级 / 行内、隐藏 / 显示）。

block（块元素）
inline（行内元素）
inline-block（行内块元素，可以设置宽高）
none（设置元素隐藏，除此之外的属性值都会显示）

此时，我们给 div 中左右 div 设置为 display:inline-block，就可以在一行显示，并且具有宽高了。

<head>
    <title>Document</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }
        .box {
            width: 1200px;
            border: 1px solid red;
            margin: 0 auto;
        }
        .box div {
            width: 500px;
            height: 300px;
            display: inline-block;
            border: 2px solid #000;
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="left">
            left
        </div>
        <div class="right">
            right
        </div>
    </div>
</body>
</html>

然而，一个问题时，两个 div 之间存在空隙，这是因为 HTML 文件中 div 间的空白符（换行）也是会显示的，所以需要我们在外层 div 中把字体大小设为 0 ，但是这样做的话 “left” 和 “right”也会不显示，所以我们在内层 div 中也设置大小。日后会有更好的方法。

.box {
    width: 1200px;
    border: 1px solid red;
    margin: 0 auto;
    font-size: 0;
}

.box div {
    width: 500px;
    height: 300px;
    display: inline-block;
    border: 2px solid #000;
    font-size: 20px;
}

一个简单的隐藏显示，划上复原的做法为：

.box .left {
    display: none;
}

.box:hover .left {
    display: inline-block;
}

这里需要注意优先级，直接.left 的话是不行的，因为优先级低于 .box div{}。同时这里的显示隐藏并不是我们日常所见到的效果，我们常见的效果在下文讲解。

文档流

普通流（normal flow）

我们之前的开发中，盒子互不重合，每个盒子各自占据一个空间，这就是文档流。

普通流中，块级元素独占一行，行内元素从左到右依次排开，当放置不下时自动换行。

浮动流（floats）

浮动流中，元素会尽可能向左/向右浮动到父元素的边界，不会超出父元素。

浮动会脱离文档流，其后的非浮动元素会无视该元素的存在，但是浮动不会脱离文班流，后边元素的文本内容会为该元素流出位置。

定位流（position）

完全脱离文档流和和文本流。

浮动

脱离文档流之后，元素相当于在页面上面增加一个浮层来放置内容。此时可以理解为有两层页面，一层是底层的原页面，一层是脱离文档流的上层页面，所以会出现折叠现象。同时加上浮动之后，两个块之间的间隔也会消除。

例如使用横向导航栏，可以选择给无序列表设置浮动，然后加入外边距即可。

属性值：
- float：left / right /none
设置 float 的初衷
- 实现文字环绕效果
注意事项：
- 包裹性，浮动后和父元素同宽（可以理解为成为行内块元素），到最右侧会自动换行
- 向上性，浮动元素会尽可能向上排布
- 浮动元素不会重叠
- 浮动后父元素会高度塌陷（一种解决方法是给父元素直接设置 height 属性，就可以不塌陷了）

1
2
3

.nav {
    float: left;
}

清除浮动

由于浮动后父元素会高度塌陷，所以此时我们如果想设置父元素的背景色就不能显示。一种解决方法是设置 height 属性，但是比较麻烦且不能完美贴合。还有一个问题是如果后续元素没有浮动，那么会受到影响，因此引入消除浮动。

clear：left / right / both 受影响的元素添加 clear 属性，一般选择 both

另一种方法是父级元素加入 overflow:hidden;clear:both;

伪元素

伪元素可以看作一个块元素的效果，格式为 .div::after/before{...}，清除浮动也可以使用伪元素，格式为：

.clear::after{
  content:'';
  display:block;
  clear:both;
}

此时给想要清除浮动，给类名加上 clear 即可（注意可以存在多个类名，用空格隔开）。

定位

定位流完全脱离文档流和和文本流，一个体现是网页向下滚动时，一个导航栏一直停留在一个位置而不改变，这就需要用到定位流。

position 要与 top / eight /bottom /left 等属性连用。

position：static（没有定位）
position：relative（相对定位，相对于它自身所在位置定位，保留自身位置，不脱离文档流，但是会提高一个层级）
position：absolute（绝对定位，相对于其有定位属性（属性值非 static ）的祖先元素定位，若祖先元素都无定位属性，则相对于 body 定位，会完全脱离文档流）
position：fixed（固定定位，相对于浏览器窗口定位，会完全脱离文档流，可以实现网页向下滚动时，一个导航栏一直停留在一个位置而不改变，会完全脱离文档流，提高一个层级）

一个常见的方法是外层 div 设置相对定位，内层 div 设置绝对定位。

.box {
    width: 300px;
    height: 300px;
    border: 1px solid red;
    position: relative;
}

.box div {
    width: 100px;
    height: 100px;
    background-color: #ccc;
}

.box .left {
    /* top: 50px;
    left: 50px; */
    margin-bottom: 20px;
    background-color: red;
    position: absolute;
    /* left: 40px; */
    right: 40px;
    top: 100px;
}

/* .right {
    left: 30px;
} */
.goTop {
    width: 100px;
    height: 50px;
    background-color: #ccc;
    position: fixed;
}

层级

用于相互覆盖时，决定谁在前面，值越大越优先，如果不规定层级，后写的在上面。

z-index：整数（无单位），只对定位元素有效

溢出处理（overflow）

在图片超出 box 范围时，我们想要隐藏，可以设置 overflow。

overflow：hidden（直接溢出隐藏）/ scroll（出现滚动条，注意无溢出也会存在） / auto（溢出时出现滚动条）/ visible（默认，不处理）

BFC

BFC（block formatting context，块级格式化上下文），就是页面中的一块渲染区域，并且有一套渲染的规则。它决定了其子元素将如何定位、以及和其他元素的关系、相互作用等。

创建BFC

html 根元素
浮动元素（float 属性值除 none 以外的）
定位元素（固定定位和绝对定位）
display 为 inline-block，flex，inline-flex 等元素。
overflow 除了 visible 以外的值

普通文档流布局规则

浮动元素不会被父级计算高度
非浮动元素会覆盖浮动元素的位置
第一个子元素的 margin 会传递给父级（以大的值为最终值）
两个相邻的子元素上下 margin 会重叠（以大的值为最终值）

BFC布局规则

如果父级触发了 BFC，浮动子元素会被父级计算高度，因此 overflow:hidden 也可以清除浮动
- BFC 可以识别浮动子元素
非浮动元素触发了 BFC，则不会覆盖浮动元素的位置
- BFC 可以识别浮动的同级元素
如果父级元素触发了 BFC，第一个子元素的 margin 不会传递给父级
给其中一个元素添加一个父级并触发 BFC，上下 margin 就不重叠了
- BFC 是一个独立的、封闭的渲染区域，子元素的样式对 BFC 外部的元素不产生影响

BFC应用

可以解决浮动的高度塌陷问题
可以解决盒子之间的外边距重叠或者传递等问题
可以制作弹性布局（双飞翼布局，即分为左右两边和中间，重点处理中间）

利用 BFC，可以在双飞翼布局中，使得中间部分的文字无论页面大小始终位于中间而不在两边。

<head>
    <title>Document</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }
        .box {
            background-color: #ccc;
            overflow: hidden;
        }
        .left,
        .right {
            width: 200px;
            height: 300px;
            background-color: red;
        }
        .left {
            float: left;
        }
        .right {
            float: right;
        }
        .center {
            overflow: hidden;
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="left">

        </div>
        <div class="right">

        </div>
        <div class="center">
            双飞翼布局双飞翼布局双飞翼布局双飞翼布局双飞翼布局双飞翼布局 双飞翼布局双飞翼布局双飞翼布局双飞翼布局双飞翼布局双飞翼布局 双飞翼布局双飞翼布局双飞翼布局双飞翼布局双飞翼布局双飞翼布局
            双飞翼布局双飞翼布局双飞翼布局双飞翼布局双飞翼布局双飞翼布局 双飞翼布局双飞翼布局双飞翼布局双飞翼布局双飞翼布局双飞翼布局 双飞翼布局双飞翼布局双飞翼布局双飞翼布局双飞翼布局双飞翼布局
            双飞翼布局双飞翼布局双飞翼布局双飞翼布局双飞翼布局双飞翼布局
        </div>
    </div>
</body>