CSS（一）预备知识

本文最后更新于：8 个月前

什么是CSS？CSS3新增加了哪些内容？
CSS盒模型、BFC、CSS样式继承和覆盖规则
CSS中的单位、变量、函数、注释

CSS（一）预备知识

一、什么是CSS

CSS (Cascading Style Sheets，层叠样式表），是一种用来为结构化文档（如 HTML 文档或 XML 应用）添加样式（字体、间距和颜色等）的计算机语言，CSS 文件扩展名为 .css

HTML如何引入CSS？

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<head>
    <!-- 方式一 用link标签引入外部.css文件，css文件与html同时加载-->
    <link href="./style.css" rel="stylesheet">
    
    <!-- 方式二 @import导入外部.css文件，html加载完毕之后才加载-->
    <style type="text/css">
    	@import url('./style.css')
    </style>
    
    <!-- 方式三 HTML内部定义-->
    <style>
        div{
            width:100%
        }
    </style>
</head>

二、CSS3

CSS3 对 CSS原来的功能进行了扩展，新增的特性包括但不限于：

  • 选择器的扩展：否定选择器、属性选择器
  • 可变更的盒模型：可以通过box-sizing属性来修改盒模型，两个值供选择：content-box和border-box
  • 新增了弹性盒模型
  • 增加了媒体查询
  • 动画支持：提供transtion过渡、transform变换、animation动画
  • 元素修饰加强：增加了rgba、opacity属性

更多细节，请查看：CSS3新特性概述_w3cschool

三、盒模型

CSS 盒模型本质上是一个盒子，封装周围的 HTML 元素，它包括：边距，边框，填充，和实际内容，即：content box、padding box、 border box、margin box四个元素。

CSS box-model

3.1、标准盒模型

元素默认使用「标准盒模型」

特点：设置的元素的width= content的宽度，height= content的高度

盒子的宽度 = content.width + padding-left + padding-right + border-left + border-right + margin-lfet + margin-right

盒子的高度同理

3.2、替代盒模型

从默认的「标准盒模型」转换到「替代盒模型」的方式

1
2
3
.box{
    box-sizing: border-box;
}

特点：设置的元素的width= content + 左右padding + 左右border（注意：不包括margin！）

实际content的宽高需要减去padding和border的值

3.3、块级 vs 内联盒子

块级盒子 内联盒子 inline-block
声明方式 display: block; display: inline; display:inline-block
布局流 垂直向下 水平向右 水平向右
水平方向 占满父容器宽度 根据盒子中的内容决定宽度 内容决定宽度
width、height属性 起作用 不起作用 起作用
水平margin、padding属性 起作用 起作用 起作用
垂直margin、padding属性 起作用 会被应用，但是不推开其它元素（如下图） 起作用

image-20230215225120619

四、BFC

「BFC」（Block Formatting Context），即块级格式化上下文，它是页面中的一块渲染区域。目的是在页面上形成一个隔离的独立容器，让内部的元素不受外部元素的影响。

4.1、渲染规则

  • 正常文档流，盒子从上到下放置
  • margin重叠，同一个BFC中的两个相邻盒子的margin会重叠，取其中较大的margin值
  • 元素的左外边距从BFC盒子的左边界开始计算，即使浮动元素也是如此
  • BFC的区域不会和float的元素区域重叠（用来设置两栏布局）
  • 计算BFC盒子的高度时，浮动子元素也参与计算（解决”浮动元素高度塌陷“）

4.2、触发BFC的条件

  • 根元素（即<html></html>）
  • overflow属性为：auto、hidden、scroll三者之一（不为visible）
  • position属性为：absolute或fixed
  • 浮动元素
  • dispaly属性为：inline-block、flex、inline-flex、grid、inline-grid、table、table-caption、inltable-cell之一

4.3、应用场景

  1. 阻止margin重叠，同一个BFC中的两个元素，如果都设置了margin，那么以两个margin中大的为准生效，而不是两个margin想加

    而两个不同的BFC，margin不会重叠，而是相加，所以可以给其中一个元素外层包裹一层容器并触发为BFC

  2. 清除内部浮动，浮动元素在容器内部会出现高度塌陷的问题，即容器计算高度时忽略浮动元素的高度（因为浮动元素不在正常文档流中）。而将容器触发为BFC可以将浮动元素的高度计算在内。

  3. 自适应多栏布局，aside声明为向左浮动元素，main触发BFC，因为BFC的区域不会与float的元素区域重叠，所以main实现了宽度自适应

示例见【前端练习】项目

五、样式继承与覆盖

3个与样式继承相关的属性值：

  • inherit，在子元素的某个属性上声明，表示继承父元素的该属性值
  • initial，在某个属性上声明，表示与浏览器默认值相同；如果没有默认值，则继承于父元素
  • unset，可以在样式表中声明all:unset，将重置所有属性。如果是自然继承的属性值，就是inherit，否则就是initial

样式覆盖：

在定义样式的过程中，难免会发生部分元素被重复定义样式的情况，这时就会发生样式覆盖（最终样式只能是其中一种）

总的覆盖原则是：

  1. 选择器优先级高的 覆盖 优先级低的
  2. 若优先级相同，则后面的覆盖前面的
  3. 使用!important可以覆盖所有，慎用！
1
div !important{}	/* 这里定义的属性，覆盖之前所有位置定义的相同属性 */

关于「选择器优先级」，请阅览：《CSS选择器》

六、CSS单位

单位 描述
px 像素 ，对于低 dpi 的设备，1px 是显示器的一个设备像素
对于打印机和高分辨率屏幕，1px 表示多个设备像素
vw 相对于视口*宽度的 1%
vh 相对于视口*高度的 1%
em 相对于父级元素的字体大小
rem 相对于根元素的字体大小
% 相对于父元素

提示：em 和 rem 单元可用于创建完美的可扩展布局！

视口（Viewport）= 浏览器窗口的尺寸

七、CSS注释

.css文件中的注释。

在css中，无论多行注释还是单行注释，都必须以/*开始、以*/结束，中间加入注释内容；*符号不要和注释内容紧挨在一起，至少需要一个空格位置空着

注释可以放在样式表里面

1
2
3
body{
    color: white;	/* 主体颜色 */
}

也可以放在样式表外面

1
2
3
4
/* 样式一 */
.style{
    color: white;
}

八、CSS变量

8.1、用法示例

CSS中可以定义变量

1
2
3
4
5
6
7
8
9
/* 定义变量 */
:root{
    --banner-height: 100vh;
}

/* 使用变量 */
.banner{
    height: var(--banner-height);
}

8.2、CSS变量语法

8.2.1 变量定义

CSS变量合法字符包括：数字[0-9]、字母[a-zA-Z]、下划线_、短横线-。可以使用数字开头，也可以仅用数字声明变量

1
2
3
4
5
6
:root {
  --1: #369;
}
body {
  background-color: var(--1);
}

CSS变量必须定义在块里

1
2
3
4
--深蓝: #369;	/* 这个是无效的 */
body {
  background-color: var(--深蓝);
}

8.2.2 变量作用域

  • CSS全局变量:root伪类可以看作一个全局作用域，在这里声明的变量，在所有选择器中都可以获取到。

  • 局部变量，在具体选择器中定义的变量，变量作用域为该选择器生效的范围

1
2
3
4
5
6
7
8
9
/* 全局变量 */
:root { --color: blue; }
.box{color: var(--color)}

/* 局部变量 */
.box{
    --color: red;
    color: var(--color);
}

8.2.3 变量默认值

在使用变量的时候，可以定义默认值，表示：如果该变量不存在，就使用默认值！

1
2
/* var()第一个参数表示变量名字，第二个参数表示默认值*/
color: var(--foo, #7F583F);

8.3、变量拼接和计算

  • 如果变量值是一个字符串，可以与其他字符串拼接；

    1
    2
    3
    /* 字符串 */
    --bar: 'hello';   
    --foo: var(--bar)' world';

  • 如果变量值是数值，不能与数值单位直接连用;

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    /* 变量值是数值 */
    foo { 
        --gap: 20; 
      	margin-top: var(--gap)px;  /* 无效 */  
    }

    /* 遇到以上这种数字变量要与单位拼接的情况，必须使用calc()函数 */
    foo { 
        --gap: 20; 
      	margin-top: calc(var(--gap) * 1px); 
    }

  • 如果变量值带有单位，就不能写成字符串;

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    .foo {
        --foo: '20px'; 
      	font-size: var(--foo);  /* 无效 */ 
    } 

    /* 正确写法如下 */
    .foo {
        --foo: 20px; 
      	font-size: var(--foo);
    }

九、CSS函数

CSS中可以使用的函数如：calc()

1
width: calc(90%-30px);
CSS
CSS（一）预备知识
http://timegogo.top/2023/02/15/CSS/CSS（一）预备知识/
作者
丘智聪
发布于
2023年2月15日
更新于
2023年7月16日
许可协议