CSS

css层叠样式表又叫级联样式表，简称样式表

css层叠样式表又叫级联样式表，简称样式表

css 文件后缀名为.css

语法

css 规则由两个主要的部分构成：选择器以前一条或多条声明

选择器通常是您需要改变样式的 html 元素

每条声明有一个属性和一个值构成url

属性是你希望设置的样式属性，每个属性有一个值，属性和值被冒号分开

css的引入方式

行内样式

要使用内联样式，你需要在相关的标签使用样式（style） 属性。style 属性可以包含任何 css 属性

缺乏整洁性和规范性，保利与维护，维护成本高

<p style="color:red;">red</p>

内部样式

当单个文档需要特殊的样式时，就应该使用内部样式表。你可以使用<style>标签，在文档头部定义内部样式表

单个页面内的 css 代码具有统一性和规划性，便于维护，但是在多个页面之间容易混乱

html
<head>
		<style>
			p{
				color:red;
			}
		</style>
	</head>

外部样式

当样式需要用用很多界面池，外部样式表将是理想的选择。在使用外部样式表的情况下，你可以通过改变一个文件来改变整个站点的外观。每个页面使用<link>标签链接到样式表，<link>标签在文档的头部

html
<link rel="stylesheet" type="text/css" href="xxx.css">

选择器

全局选择器

可以与任何元素匹配，优先级最低，一般做样式初始化

css
*{
	margin:0;
	padding:0;
}

元素选择器

HTML文档中的元素，p、b、div等。

标签选择器选择的是页面上所有这种类型的标签，所以经常描述“共性”，无法描述某一个元素的个性

css
p{
	font-size:40px;
}

类选择器

规定用圆点.来定义，针对你想要的所有标签使用

<h1 class="a">你好</h1>
.a{
	color:red;
}

class属性特点

  • 类选择器可以被多个标签使用
  • 类名不能以数字开头
  • 同一个标签可以使用多个类选择器。用空格隔开
<h1 class="a b">你好</h1>

ID 选择器

针对某一个特定的标签来使用，只能使用一次。css 中的 id 选择器以#来定义

css
<h1 id="a">你好</h1>
#a{
	color:red;
}

特别强调

ID 是唯一的

ID 不能以数字开头

合并选择器

语法：选择器1，选择器2...{}

作用：提取共同的样式，减少重复代码，对选择器1和选择器2都作用

css
.header,.footer{
	height:300px;
}

优先级由高到低：行内样式 > ID选择器 > 类选择器 > 元素选择器

复合选择器

css
.abc.efg { ... }

CSS 的复合选择器（compound selector），意思是： 选中同时拥有 abc 和 efg 这两个类名的元素。

每一个类选择器 .xxx 的优先级是 0,1,0， 所以 .abc.efg 的优先级是 0,2,0。

多个类型组合示例

选择器含义
div.abc标签为 <div> 且类名包含 abc
.abc.efg同时有 abc 和 efg 两个类
#main.abcID 为 main 且类名含 abc
button.primary.large同时有 .primary 和 .large 的按钮

关系选择器

关系选择器的分类
  • 后代选择器
  • 子代选择器
  • 相邻兄弟选择题
  • 通用兄弟选择器
后代选择器

定义

选择所有被E元素包含的 F 元素，中间用空格隔开

语法

css
E F{

}
ul li{
    
}
子代选择器

定义

选择所有作为E元素的直接子元素F，元素对更深一层的元素不起作用。用 > 表示

语法

css
E>F{}
ul>li{
    
}
相邻兄弟选择器

定义

选择仅跟E元素后的 F元素，用加号表示，选择相邻的第一个兄弟元素

语法

E+F{}
<h1>h1</h1>
<p>p1</p>
<p>p2</p>
h1+p{

}
通用兄弟选择器

定义

选择E元素之后的所有 F元素，作用于多个元素，用~隔开

语法

E~F{}
<h1>h1</h1>
<p>p1</p>
<p>p2</p>
h1~p{

}

伪类选择器

什么是伪类？

伪类是选择器的一种，它用于选择处于特定状态的元素，比如当它们是这一类型的第一个元素时，或者是当鼠标指针悬浮在元素上面的时候。它们表现得会像是你向你的文档的某个部分应用了一个类一样，帮你在你的标记文本中减少多余的类，让你的代码更灵活、更易于维护。

伪类就是开头为冒号的关键字。例如，:hover 就是一个伪类。

伪类选择器用于向某些选择器添加特殊的效果，如给链接添加特殊效果，或选择第1个、第 n 个元素

伪类选择器书写的最大特点是用冒号表示，如:hover、:first-child

所有的伪类以同样的方式实现。它们选中你的文档中处于某种状态的那部分，表现得就像是你已经向你的 HTML 加入类一样。看下 MDN 上的另外几个示例：

因为伪类选择器很多，比如有链接伪类、结构伪类等，这里先讲链接伪类

链接伪类选择器
css
a:link		/*选择所有未被访问的链接*/
a:visited	/*选择所有已被访问的链接*/
a:hover		/*选择鼠标指针位于其上的链接*/
a:action	/*选择活动链接(鼠标按下没有弹起的)*/

重要

为了确保生效，请按照 LVHA的顺序声明(link visited hover action)

:focus伪类选择器

这个伪类选择器用于选取获得焦点的表单元素。

焦点就是光标，一般 <input> 类表单元素才能获取。因此，这个选择器主要针对表单元素来说

input:focus{
	background-color:yellow;
}

伪元素选择器[标签：：伪元素]

伪元素以类似方式表现。不过表现得是像你往标记文本中加入全新的 HTML 元素一样，而不是向现有的元素上应用类。

伪元素开头为双冒号 ::。比如，::before 就是一个伪元素的示例。

备注： 一些早期的伪元素曾使用单冒号的语法，所以你可能会在代码或者示例中看到。现代的浏览器为了保持后向兼容，支持早期的带有单双冒号语法的伪元素。

例如，如果你想选中一段的第一行，你可以把它用一个<span>元素包起来，然后使用元素选择器；不过，如果包起来的单词/字符数目长于或者短于父元素的宽度，这样做会失败。由于我们一般不会知道一行能放下多少单词/字符——因为屏幕宽度或者字体大小改变的时候这也会变——通过改变 HTML 的方式来可预测地这么做是不可能的。

::first-line伪元素选择器会值得信赖地做到这件事——即使单词/字符的数目改变，它也只会选中第一行。

有一组特别的伪元素，它们和content属性一同使用，使用 CSS 将内容插入到你的文档中。

你能用这些插入一个文本字符串，和在下面的实时示例里那样。试着改变content属性的文本值，看看输出是怎么改变的。你也能改变::before伪元素为::after，看到这段文本插入到了元素的末尾而不是开头。

input::replaceholder{
/*选中输入提示框的提示文本*/
}

新增选择器

  1. 属性选择器
  2. 结构伪类选择器
  3. 伪元素选择器
属性选择器

属性选择器可以根据元素特定属性来选择元素，这样就可以不用借助于类或者 id 选择器

选择符简介
E[att]选择具有 att 属性的E元素
E[att=“val”]选择具有 att 属性，并且属性值等于 val 的E元素
E[att^=“val”]选择具有 att 属性，并且属性值以 val 开头的E元素
E[att$=“val”]选择具有 att 属性，并且属性值以 val 结尾的E元素
E[att*=“val”]选择具有 att 属性，并且属性值含有 val 的E元素
结构伪类选择器

结构为类选择器，主要依据文档结构来选择元素，通常于根据父选择器里面的子元素

选择符简介
E:first-child匹配父元素中第一个子元素E
E::last-child匹配父元素中最后一个子元素E
E::nth-child(n)匹配父元素中第n个子元素E
E::first-of-type指定类型E的第一个
E::last-of-type指定类型E的最后一个
E:nth-of-type(n)指定类型E的第n个

备注

  • n可以是数字，关键字和公式

  • n如果是数字，就是选择第 n 个元素

  • n可以是关键字：even偶数，odd奇数

  • n可以是公式，常见的公式如下（如果按时公式，则从0开始计算，但是第0个元素或者超出了元素的个数忽略）

    公式取值
    2n偶数
    2n+1奇数
    5n5 10 15 20…
    n+5从第5个开始（包含第5个）到最后一个
    -n-5前5个元素（包第5个）…

这样可以用来设置表格样式，在奇数行和偶数行不一样

伪元素选择器

伪元素选择器可以帮助我们利用 css 创建新标签元素，而不需要HTML标签，从而简化 HTML结构。

选择符简介
::before在元素内部的前面插入内容
::after在元素内部的后面插入内容
css
/*CSS3语法*/
element::before{样式}
/*（单冒号）CSS2过时写法*/
element:before{样式}
  • before 和 after 创建一个元素，但是属于行内元素
  • 新创建的这个元素在文档中是找不到的，所以我们称为伪元素
  • before 和after必须有 content属性
  • 对元素选择器和标签选择器一样，权重是1

重要

伪元素的使用场景一般用于字体图标、清除浮动

字体属性

CSS字体属性定义字体，颜色，大小，加粗，文字样式

color

规定字体的颜色

css
div{color:red;}
div{color:#ff0000;}
div{color:rgb(255,0,0);}
div{color:rgba(255,0,0,.5);}

font-size

设置字体的大小

h1{font-size:"50px";}

chrome能接受的最小字体是12px

font-weight

设置文本的粗细

值描述
bold定义粗体字符
bolder定义更粗体字符
lighter定义更细的字符
100~900由细到粗，400默认，700等同于bold
css
h1{font-weight:normal;}

font-style

指定文本的字体样式

值描述
nomal默认值
italic斜体字

font-family

关于网页字体有两件重要的事情要记住：

  1. 浏览器支持不同的字体格式，因此你需要多种字体格式以获得良好的跨浏览器支持。例如，大多数现代浏览器都支持 WOFF / WOFF2(Web Open Font Format versions 1 and 2，Web 开放字体格式版本 1 和 2)，它是最有效的格式，但是旧版本 IE 只支持 EOT (Embedded Open Type，嵌入式开放类型) 的字体，你可能需要包括一个 SVG 版本的字体支持旧版本的 iPhone 和 Android 浏览器。我们将向你展示如何生成所需的代码。

让我们来探索由 fontsquirrel 为你生成的@font-face语法。这是其中一个块的样子：

@font-face {
  font-family: "ciclefina";
  src: url("fonts/cicle_fina-webfont.eot");
  src:
    url("fonts/cicle_fina-webfont.eot?#iefix") format("embedded-opentype"),
    url("fonts/cicle_fina-webfont.woff2") format("woff2"),
    url("fonts/cicle_fina-webfont.woff") format("woff"),
    url("fonts/cicle_fina-webfont.ttf") format("truetype"),
    url("fonts/cicle_fina-webfont.svg#ciclefina") format("svg");
  font-weight: normal;
  font-style: normal;
}

这被称为”bulletproof @font-face syntax（刀枪不入的 @font-face 语法）”, 这是 Paul Irish 早期的一篇文章提及后 @font-face 开始流行起来 (Bulletproof @font-face Syntax。让我们来看看它是怎么做的：

  • font-family：这一行指定了你想要引用的字体的名称。你可以把它作为你喜欢的任何东西，只要你在你的 CSS 中始终如一地使用它。
  • src：这些行指定要导入到你的 CSS(url部分) 的字体文件的路径，以及每种字体文件的格式 (format部分)。后面的部分不是必要的，但是声明它是很有用的，因为它允许浏览器更快地找到可以使用的字体。可以列出多个声明，用逗号分隔——浏览器会搜索并使用它能找到的第一个——因此，最好是把新的、更好的格式比如 WOFF2 放在前面，把偏老的，不是那么好的格式像 TTF 这样的放在后面。唯一的例外是 EOT 字体——他们首先在旧版本的 IE 中修复了几个 bug，这样它就会尝试使用它找到的第一件东西，即使它不能真正使用字体。
  • font-weight/font-style: 这些行指定字体的粗细，以及它是否斜体。如果你正在导入相同字体的多个粗细，你可以指定它们的粗细/样式，然后使用不同的font-weight/font-style来选择它们之间的不同值，而不必调用字体种类不同名称的所有不同成员。Roger Johansson 写的 @font-face tip: define font-weight and font-style to keep your CSS simple 更详细地说明了该做些什么。

font-family属性指定一个元素的字体

每个只用逗号分开

如果字体名称包含空格，他必须加上引号

font-family:"Simsun","SimHei";

备注

字体设置形式 单字体形式

font-family: "微软雅黑";

多字体形式

font-family: "微软雅黑","宋体";

字体族形式 首先要知道什么是字体族： 字体族可以理解为是不同类别的字体形式，比如是否有衬线、是否等宽、特殊字体的呢。一般分为五类字体族：

  • serif：衬线体
  • sans-serif：无衬线体
  • monospace：等宽字体
  • cursive：手写字体
  • fantasy：艺术字体
 font-family: "sans-serif";

显示规则

  • 单字体形式 如果电脑中有该字体则显示，没有则显示系统默认的字体。
  • 多字体形式 如果我们设置了多个字体，浏览器会在多个字体中寻找第一个在该电脑上已安装的字体进行显示（当然已安装包括：电脑默认的字体和我们自己下载到电脑上安装了的字体）
  • 字体族形式 字体族并不代表某个字体，如果我们设置了字体族，那么系统会在电脑中找出一种该字体族下的字体来显示

而如何引入这些外部字体呢？

下载字体文件（一般找设计同学拿到相对应的字体文件就可以哦） 拿到的文件可能是otf、woff等格式， 将字体文件放入项目中 css中进行引用

@font-face {
    font-family: 'SYFont';
    src: url('SOURCEHANSANSCN-REGULAR.woff') format('woff');/* 所有现代浏览器 */
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

注意网站中一般一定用到了加粗的情况，所以别忘了加粗的字体引用。

@font-face {
    font-family: 'MyFont';
    src: url('SOURCEHANSANSCN-REGULAR.woff') format('woff'); /* 所有现代浏览器 */
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'MyFont';
    src: url('SOURCEHANSANSCN-BOLD.woff') format('woff'); /* 所有现代浏览器 */
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

几种字体文件类型设置：

@font-face {
  font-family: 'MyFont';
  src: url('SOURCEHANSANSCN-REGULAR.eot'); /* IE9 Compat Modes */
  src: url('SOURCEHANSANSCN-REGULAR.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('SOURCEHANSANSCN-REGULAR.woff') format('woff'), /* 所有现代浏览器 */
       url('SOURCEHANSANSCN-REGULAR.ttf')  format('truetype'), /* Safari, Android, iOS */
       url('SOURCEHANSANSCN-REGULAR.svg#svgFontName') format('svg'); /* Legacy iOS */
}

引用：


body {
 font-family: 'SYFont';
 font: 16px SYFont; /* 或者综合形式中设置*/
}

windows用户：控制面板 - 字体 - 选一个字体右键 - 属性 -详细信息 - 标题

使用字体编辑工具来查看字体的英文名字和中文名字

比如说FontForge这款开源字体编辑软件

其中Preferred Family（首选名）就是字体名称，前面有Chinese和English区分

是 Office 识别 Family 项（Chrome 一度也识别这个项）。IE 之类识别的是 Preferred Family 项。

对于有不同字重的字体

使用@font-face引入

对于每种字重，你都需要单独使用@font-face规则来引入。例如，如果你有一个字体名为”MyFont”，它有6种字重（light, regular, bold, etc.)

@font-face { font-family: ‘MyFont’; src: url(‘MyFont-Light.woff2’) format(‘woff2’), url(‘MyFont-Light.woff’) format(‘woff’); font-weight: 300; /* light */ }

@font-face { font-family: ‘MyFont’; src: url(‘MyFont-Regular.woff2’) format(‘woff2’), url(‘MyFont-Regular.woff’) format(‘woff’); font-weight: 400; /* regular */ }

@font-face { font-family: ‘MyFont’; src: url(‘MyFont-Bold.woff2’) format(‘woff2’), url(‘MyFont-Bold.woff’) format(‘woff’); font-weight: 700; /* bold */ }

/* 以此类推，为其他字重添加@font-face规则 */

然后，在你的CSS中使用这个字体时，可以通过font-weight属性来指定所需的字重：

p { font-family: ‘MyFont’, sans-serif; font-weight: 300; /* 使用light字重 */ }

h1 { font-family: ‘MyFont’, sans-serif; font-weight: 700; /* 使用bold字重 */ }

字重例子（只装了两种粗细的）：

最终方案：

在word中编辑加上字体，另存为单个网页文件，然后查看font-family

下面是之前解决不了的：

@font-face {
			font-family: 'myFont';
			src: url('AlibabaHealthFont2.0CN-85B.ttf') format('woff');
		}

<span style="font-family: 'myFont';font-size: 50px">加载的字体有变化吗，中国制造</span>

image-20250930171346760

行间距

line-height属性是行间距，控制文字行与行之间的距离

值可以去npx或者纯数字，比如ling-height:1.5表示1.5倍行间距

单行文字垂直居中，只要行高与容器的高度一致就会垂直居中

或者使用修改padding属性也可以使文字居中

字体复合属性

字体属性可以把以上文字样式综合来写，这样可以更节省代码

body{
	font:font-style font-weight font-size/line-height font-family;
}

font-size/line-height写法是20px/10px

备注

顺序不能变

不需要的设置的属性可以省略，但必须保留 font-size和 font-family 属性，否则font属性的不起作用

背景属性

CSS背景属性主要有以下几个

属性描述
background-color设置背景颜色，如果值为transparent则表示透明背景
background-image这是背景图片
background-position设置背景图片显示位置
background-repeat设置背景图片如何填充
background-size设置背景图片大小、属性

background-color

该属性设置背景颜色

div{
	background-color:red;
}

#背景颜色使用rgb(r, g, b)或者rgba(r, g, b, 透明度0~1)获取
div{
	background-color:rgb(26, 214, 108);
}
div{
	background-color:rgba(26, 214, 108, 0.5);
}

background-image

div {
				width: 50%;
				height: 300px;
				background-image: url(./img/1709269769618.jpg);
			}

background-repeat

该属性设置如何平铺背景图像

值描述
repeat默认值
repeat-x只向水平方向平铺
repeat-y只向垂直方向平铺
no-repeat不平铺

background-size

该属性设置背景图像的大小

值说明
length设置背景图片的宽度和高度，第一个值为宽度，第2个值为高度，如果只设置一个，第2个值auto
percentage计算相对位置区域的百分比，第一个值是宽度，第2个值是高度，如果只是设置一个第2个值auto
cover保持图片纵横屏，并将图片缩放成完全覆盖背景区域的最小大小（保证图片覆盖）
contain保持图片纵横比，并将图片缩放成适合背景定位区域的最大大小（一定完整显示图片每处）
background-size: cover;
background-size: 100px 200px;
background-size: 100% auto;

background-position

该属性设置背景图片的起始位置，其默认只是0%，0%

值说明
left top左上
left|center|right top|center|bottom
x% y%第一个值是水平位置，第2个值是垂直位置，左上角是0%、0%。如果只指定一个值，其它值默认是50%。默认是0%、0%
xpos ypos单位是像素

背景图像固定

background-attachment属性设置背景图像是否固定或随页面的其他部分滚动，后期可以制作视差滚动的效果

参数作用
scroll背景图像是随对象内容的
fixed背景图像固定

背景复合写法

background:背景颜色/背景图片地址 背景平铺

图像滚动 背景图片位置

渐变背景

当渐变用于背景时，也可以使用像图像一样的 background-image 属性设置。

你可以在 MDN 的 <gradient> 数据类型页面上，了解更多关于渐变的不同类型，以及使用它们可以做的事情。使用渐变的一个有趣的方法是使用网络上许多 CSS 渐变生成器中的一个，比如这个。你可以创建一个渐变，然后复制和粘贴生成它的源代码。

css
.box {
  width: 400px;
  height: 80px;
  padding: 0.5em;
  border: 1px solid #ccc;
  margin: 20px;
}

.a {
  background-image: linear-gradient(
    105deg,
    rgb(0 249 255 / 100%) 39%,
    rgb(51 56 57 / 100%) 96%
  );
}

.b {
  background-image: radial-gradient(
    circle,
    rgb(0 249 255 / 100%) 39%,
    rgb(51 56 57 / 100%) 96%
  );
  background-size: 100px 50px;
}

image-20250403144539108

多个背景图像

也可以有多个背景图像——在单个属性值中指定多个 background-image 值，用逗号分隔每个值。

当你这样做时，你可能会出现背景图片相互重叠的情况。背景将分层，最后列出的背景图片位于最下层，而之前的每张图片都堆在代码中紧随其后的那张图片之上。

备注： 渐变可以与常规的背景图像很好地混合在一起。

其他 background-* 属性也可以像 background-image 一样使用逗号分隔的方式设置：

background-image:
  url(image1.png), url(image2.png), url(image3.png), url(image4.png);
background-repeat: no-repeat, repeat-x, repeat;
background-position:
  10px 20px,
  top right;

不同属性的每个值，将与其他属性中相同位置的值匹配。例如，上面的 image1 的 background-repeat 值将是 no-repeat。但是，当不同的属性具有不同数量的值时，会发生什么情况呢？答案是较小数量的值会循环——在上面的例子中有四个背景图像，但是只有两个背景位置值。前两个位置值将应用于前两个图像，然后它们将再次循环——image3 将被赋予第一个位置值，image4 将被赋予第二个位置值。

背景附加

我们为背景提供的另一个选项是指定内容滚动时的滚动方式。这是用 background-attachment 属性控制的，它可以取以下值：

  • scroll：使元素的背景在页面滚动时滚动。如果滚动了元素内容，则背景不会移动。实际上，背景被固定在页面的相同位置，所以它会随着页面的滚动而滚动。
  • fixed：使元素的背景固定在视口上，这样当页面或元素内容滚动时，它就不会滚动。它将始终保持在屏幕上相同的位置。
  • local：将背景固定在它所设置的元素上，所以当你滚动该元素时，背景也随之滚动。

文本属性

控制文本的显示效果

text-align

决定元素文本的水平对齐方式

值描述
left文本居左排列看，默认值
right把文本排列到右边
center把文本排列到中间
h1{text-align:center;}

text-decoration

该属性指定添加文本的修饰，下划线，上划线，删除线等

值描述
underline定义下划线
overline定义上划线
line-through定义删除线
none没有装饰

text-transform

该属性控制文本的大小写

值描述
captialize定义每个单词开头大小
uppercase定义全部大写字母
lowercase定义全部小写字母

text-indent

在属性规定文本块中，首行文本的缩进

text-indent: 20px;

负数值是允许的，如果值是负数，将在第一行左缩进

表格属性

表格边框

指定 css 表格边框使用 border 属性

table,td{
	border:1px solid black;
}

CSS 的 border 属性是一个用于设置各种单独的边界属性的简写属性。border 可以用于设置一个或多个以下属性的值：border-width、border-style、border-color

Syntax: || ||

折叠边框

border-collapse 属性设置表格的边框能否被折叠成一个单一的边框或隔开

border-collapse: collapse;

表格宽度和高度

width和height 属性定义表格的宽度和高度

table{width:100%;}
td{height:100%;}

表格文字对齐

表格中的文本对齐和垂直对齐属性

text-align设置水平对齐方式，向左，向右，或中心

td{text-align:center;}

垂直对齐属性设置垂直对齐

td{vertical-align:bottom;}

表格填充

如果在表的内容中控制空格之间的边框，应使用 td和th 元素的填充属性

td{padding:15px;}

表格颜色

下面的例子指定边框的颜色和 th 元素的文本和背景颜色

table,td,th{border:1px solid green;}
td{background-color:green;color:red;}

CSS三大特性

层叠性

相同选择器给设置相同样式，此时一个样式就会覆盖另外一个冲突的样式，层叠性主要用于解决样式冲突的问题

层叠性原则：

  • 样式冲突，遵循的原则就是就近原则，哪个样式近，就执行哪个
  • 样式不冲突，不会层叠

继承性

CSS中子标签会继承父标签的某些样式，如文本的字体颜色和字号

  • 恰当使用可以简化代码，降低CSS样式复杂性
  • 子元素会继承父元素的样式（text- font- line-这些元素的开头可以继承以及color属性）

优先级

当同一元素指定多个选择器时，就会有优先级产生。

  • 选择器相同，则执行层叠属性
  • 选择器不同，则根据选择器权重执行
选择器选择器权重
继承 或 *0，0，0，0
元素选择器0，0，0，1
类选择器，伪类选择器0，0，1，0
ID选择器0，1，0，0
行内样式1，0，0，0
!important 重要的无穷大

逐个比较

*{
	color:pink!important;//无限大权重
}

注意

权重有4组数字组成，但是不会有进位

等级判断，从左向右，如果某一位数值相等则比较下一位数值

权重叠加：如果是复合选择器，则会有权重叠加，需要重新计算权重

ul li{ //权重为0，0，0，1 + 0，0，0，1 = 0，0，0，2

}

CSS盒子模型

区块盒子与行内盒子

在 CSS 中，我们有几种类型的盒子，一般分为区块盒子（block boxes）和行内盒子（inline boxes）。类型指的是盒子在页面流中的行为方式以及与页面上其他盒子的关系。盒子有内部显示（inner display type）和外部显示（outer display type）两种类型。

一般来说，可以使用 display 属性为显示类型设置各种值，该属性可以有多种值。

外部显示类型

一个拥有 block 外部显示类型的盒子会表现出以下行为：

  • 盒子会产生换行。
  • width 和 height 属性可以发挥作用。
  • 内边距、外边距和边框会将其他元素从当前盒子周围“推开”。
  • 如果未指定 width，方框将沿行向扩展，以填充其容器中的可用空间。在大多数情况下，盒子会变得与其容器一样宽，占据可用空间的 100%。

某些 HTML 元素，如 <h1> 和 <p>，默认使用 block 作为外部显示类型。

一个拥有 inline 外部显示类型的盒子会表现出以下行为：

  • 盒子不会产生换行。
  • width 和 height 属性将不起作用。
  • 垂直方向的内边距、外边距以及边框会被应用但是不会把其他处于 inline 状态的盒子推开。
  • 水平方向的内边距、外边距以及边框会被应用且会把其他处于 inline 状态的盒子推开。

某些 HTML 元素，如 <a>、 <span>、 <em> 以及 <strong>，默认使用 inline 作为外部显示类型。

内部显示类型

盒子还有内部显示类型，它决定了盒子内元素的布局方式。

区块和行内布局是网络上的默认行为方式。默认情况下，在没有任何其他指令的情况下，方框内的元素也会以标准流的方式布局，并表现为区块或行内盒子。

例如，可以通过设置 display: flex; 来更改内部显示类型。该元素仍将使用外部显示类型 block 但内部显示类型将变为 flex。该方框的任何直接子代都将成为弹性（flex）项，并按照弹性盒子规范执行。

当你继续详细学习 CSS 布局时，将会遇到 flex 以及盒子可以具有的其他各种内部值，例如 grid。

CSS 标准盒模型

在标准盒模型中，如果在盒子上设置了 inline-size 和 block-size（或 width 和 height）属性值，这些值就定义了内容盒子的 inline-size 和 block-size（水平语言中为 width 和 height）。然后将任何内边距和边框添加到这些尺寸中，以获得盒子所占的总大小（见下图）。

假设一个盒子的 CSS 如下：

cssCopy to Clipboard

.box {
  width: 350px;
  height: 150px;
  margin: 10px;
  padding: 25px;
  border: 5px solid black;
}

方框实际占用的空间宽为 410px（350 + 25 + 25 + 5 + 5），高为 210px（150 + 25 + 25 + 5 + 5）。

显示使用标准盒模型时的盒子尺寸

备注： 外边距不计入盒子的实际大小——当然，它影响盒子在页面上所占的总空间，但只影响盒子外的空间。盒子的面积止于边框，不会延伸到外边距中。

CSS 替代盒模型

在替代盒模型中，任何宽度都是页面上可见方框的宽度。内容区域的宽度是该宽度减去填充和边框的宽度（见下图）。无需将边框和内边距相加，即可获得盒子的实际大小。

要为某个元素使用替代模型，可对其设置 box-sizing: border-box：

cssCopy to Clipboard

.box {
  box-sizing: border-box;
}

假设一个盒子的 CSS 与上例相同：

cssCopy to Clipboard

.box {
  width: 350px;
  inline-size: 350px;
  height: 150px;
  block-size: 150px;
  margin: 10px;
  padding: 25px;
  border: 5px solid black;
}

现在，盒子实际占用的空间在行向为 350px，在块向为 150px。

显示使用备用盒模型时的盒子尺寸

要在所有元素中使用替代方框模型（这是开发人员的常见选择），请在 <html> 元素上设置 box-sizing 属性，并将所有其他元素设置为继承该值：

html {
  box-sizing: border-box;
}

*,
*::before,
*::after {
  box-sizing: inherit;//用到的继承的特性，下面讲
}

盒子模型和行内盒子

以上所有的方法都完全适用于块级盒子。某些属性也适用于行内盒子，例如由 <span> 元素创建的盒子。

在下面的示例中，我们在一个段落中使用了 <span>，并对其应用了 width、height、margin、border 和 padding。可以看到，宽度和高度都被忽略了。上下外边距、内边距边框都得到了应用，但不会改变其他内容与行内盒子之间的关系。内边距和边框与段落中的其他文字重叠。左右内边距、外边距和边框会将其他内容从方框中推开。

使用 display: inline-block

display: inline-block 是 display 的一个特殊值，它提供了介于 inline 和 block 之间的中间位置。如果不希望项目换行，但又希望它使用 width 和 height 值并避免出现上述重叠现象，请使用它。

一个元素使用 display: inline-block，实现我们需要的块级的部分效果：

  • 设置 width 和height 属性会生效。
  • padding、margin 和 border 会推开其他元素。

CSS盒子模型本质上是一个盒子封装周围的 HTML元素，它包括

外边距 (margin )边框 (border )内边距 (padding)和实际内容 (content)

4

边框(border)

border可以设置元素的边框，边框有3个部分组成，边框宽度、边框样式、边框颜色

属性作用
border-width边框宽度粗细
border-style边框样式
border-color边框颜色

border-style

取值描述
none没有边框
hidden隐藏边框
dashed虚线边框
dotted点线边框
solid实线边框

边框简写

border: 1px red solid; 没有顺序

表格的细线边框

border-collapse属性控制浏览器绘制表格边框和的方式。他控制相邻单元格的边框

值描述
collapse相邻的单元格共用同一条边框

备注

这是<table>元素的属性，不是td的

设置完这个之后，html属性cellspacing和cellpadding（由padding取代）就都可以不用设置

注意

border会影响盒子实际大小

内边距

padding用于设置内边距，即边框与内容之间的距离

值的个数表达意思
padding:5px1个值，代表上下左右都有5个像素的内边距
padding:5px 10px2个值，代表上下那边距5像素，左右内边距10像素
padding:5px 10px 20px3个值，上内边距5px，左右内边距10px，下内边距20px
padding:5px 5px 5px 5px4个值，分别代表上、左、下、右四个方向的

注意

padding会影响盒子实际大小

提示

CSS 中的 box-sizing 属性定义了 user agent 应该如何计算一个元素的总宽度和总高度。

Syntax: content-box | border-box

值含义
border-boxwidth 和 height 属性包括内容，内边距和边框，但不包括外边距。
content-box默认值，标准盒子模型。width 与 height 只包括内容的宽和高，不包括边框（border），内边距（padding），外边距（margin）。
利用padding会影响盒子实际大小特性

padding内边距可以撑开盒子，我们可以做非常巧妙的应用（不用设置盒子大小，自动撑开盒子）

导航栏每个盒子大小与盒子内文字数量有关，这种情况下不设置宽高，只设置padding更好

如果盒子本身没有指定宽高属性，此时padding不会展开盒子大小

外边距

margin属性外边距控制盒子与盒子之间的距离

块级盒子水平居中对齐

外边距可以让块级盒子水平居中，需满足两个条件

  • 盒子必须指定宽度(width)
  • 盒子左右外边距设置为auto
margn:0 auto;

备注

以上方法是让块级元素水平居中，行内元素或行内块元素水平居中，给其父元素添加text-align属性为center即可

将行内元素转块级元素就能使用块级元素的方法

外边距合并

使用margin定义块元素的垂直边距时，可能出现外边距的合并

  1. 相邻块元素垂直外边距的合并 1

解决方案

尽量只给一个盒子设置margin属性

  1. 嵌套块元素垂直外边距的塌陷

    对于两个嵌套关系的块元素，父元素有上边距的同时子元素也有上边距，此时父元素会塌陷较大的外边距值。

    8

解决方案

  1. 可以给父元素定义上边框（设置颜色为transparent透明色）
  2. 可以给复元素定义内边距
  3. 可以给父元素添加overflow:hidden

还有浮动、固定、绝对定位的盒子不会有塌陷问题

圆角边框

border-radius属性用于设置元素的外边框圆角。

语法：

border-radius:length;
值描述
50%宽度和高度的一半（正方形变圆）
高的一半圆角矩形
10px 20px 30px 40px从左上开始顺时针转一圈
10px 20px对角线为一组，先左上加右下

盒子阴影

使用box-shadow属性为盒子添加阴影

box-shadow:h-shadow v-shadow blur spread color inset
值描述
h-shadow必须，水平阴影的位置，允许负值
v-shadow必须，垂直阴影的位置，允许负值
blur可选，模糊距离(影子的虚实)
spread可选，阴影的尺寸(影子的大小)
color可选，阴影的颜色，颜色一般不是用纯黑色，透明度可以设置0.3
inset可选将外部阴影（outset）改为内部阴影（inset）

文字阴影

使用text-shadow属性，将阴影设置于文本

text-shadow: h-shadow v-shadow blur color

使用情况与上面相同

继承

控制继承

CSS 为控制继承提供了五个特殊的通用属性值。每个 CSS 属性都接收这些值。

  • inherit

    设置该属性会使子元素属性和父元素相同。实际上，就是“开启继承”。

  • initial

    将应用于选定元素的属性值设置为该属性的初始值。

  • revert

    将应用于选定元素的属性值重置为浏览器的默认样式，而不是应用于该属性的默认值。在许多情况下，此值的作用类似于 unset。

  • revert-layer

    将应用于选定元素的属性值重置为在上一个层叠层中建立的值。

  • unset

    将属性重置为自然值，也就是如果属性是自然继承那么就是 inherit，否则和 initial 一样

css
body {
  color: green;
}

.my-class-1 a {
  color: inherit;
}

.my-class-2 a {
  color: initial;
}

.my-class-3 a {
  color: unset;
}

重设所有属性值

CSS 的简写属性 all 可以用于同时将这些继承值中的一个应用于（几乎）所有属性。它的值可以是其中任意一个（inherit、initial、unset 或 revert）。这是一种撤销对样式所做更改的简便方法，以便回到之前已知的起点。

下面的示例中有两个块级引用元素。第一个用元素本身的样式，第二个设置 all 为 unset

html
<blockquote>
  <p>当前块引用设置了样式</p>
</blockquote>

<blockquote class="fix-this">
  <p>当前块引用未设置样式</p>
</blockquote>

blockquote {
  background-color: orange;
  border: 2px solid blue;
}

.fix-this {
  all: unset;
}

CSS 值和单位

CSS 中使用的每个属性都允许拥有一个或一组值，查看 MDN 上的任何属性页将帮助你理解对任何特定属性有效的值。在本节课中，我们将学习一些最常用的值和单位。

什么是 CSS 的值？

在 CSS 规范和 MDN 的属性页上，你将能够发现值的存在，因为它们将被尖括号包围，如 <color> 或 <length>。当你看到值 <color> 对特定属性有效时，这意味着你可以使用任何有效的颜色作为该属性的值，如 “ 参考页面所列。

备注： 你还将看到被称为数据类型的 CSS 值。这些术语基本上是可以互换的——当你在 CSS 中看到一些被称为数据类型的东西时，它实际上只是一种表示值的奇特方式。

备注： 是的，CSS 值倾向于使用尖括号表示，以区别于 CSS 属性（例如 color 属性和 数据类型）。你可能还会混淆 CSS 数据类型和 HTML 元素，因为它们都使用尖括号，但这不太可能——它们在完全不一样的上下文中使用。

在下面的例子中，我们使用关键字设置标题的颜色，使用 rgb() 函数设置背景：

h1 {
  color: black;
  background-color: rgb(197, 93, 161);
}

CSS 中的值类型是一种定义了一些可使用的值的集合的方式。这意味着如果你看到的 <color> 是有效的，那么你就不需要考虑可以使用哪种类型——不管是关键字、十六进制值还是 rgb() 函数等都是有效的。如果浏览器支持这些可用的 <color> 值，则可以使用它们当中的任意一个。MDN 上针对每个值类型的页面将提供有关浏览器支持的信息。让我们来看看你可能经常遇到的一些值和单位类型，并提供一些示例，以便你尝试使用各种值的可能性。

数字、长度和百分比

你可能会发现自己在 CSS 中使用了各种数值数据类型。以下全部归类为数值：

数值类型描述
<integer><integer> 是一个整数，比如 1024 或 -55。
<number><number> 表示一个小数——它可能有小数点后面的部分，也可能没有，例如 0.255、128 或 -1.2。
<dimension><dimension> 是一个 <number> 它有一个附加的单位，例如 45deg、5s 或 10px。<dimension> 是一个伞形类别，包括 <length>、<angle>、<time> 和 <resolution> 类型。
<percentage><percentage> 表示一些其他值的一部分，例如 50%。百分比值总是相对于另一个量。例如，一个元素的长度相对于其父元素的长度。

长度

最常见的数字类型是 <length>，例如 10px（像素）或 30em。CSS 中有两种类型的长度——相对长度和绝对长度。重要的是要知道它们之间的区别，以便理解他们控制的元素将变得有多大。

绝对长度单位

以下都是绝对长度单位——它们与其他任何东西都没有关系，通常被认为总是相同的大小。

单位名称等价换算
cm厘米1cm = 37.8px = 25.2/64in
mm毫米1mm = 1/10th of 1cm
Q四分之一毫米1Q = 1/40th of 1cm
in英寸1in = 2.54cm = 96px
pc派卡1pc = 1/6th of 1in
pt磅1pt = 1/72th of 1in
px像素1px = 1/96th of 1in

这些值中的大多数在用于打印时比用于屏幕输出时更有用。例如，我们通常不会在屏幕上使用 cm（厘米）。惟一一个你经常使用的值，估计就是 px（像素）。

相对长度单位

相对长度单位是相对于其他某些东西的。例如：

  • em 相对于本元素的字体大小，或者在用于 font-size 时相对于父元素的字体大小。rem 相对于根元素的字体大小。
  • vh 和 vw 分别相对于视口的高度和宽度。

使用相对单位的好处是，通过一些精心的规划，你可以使文本或其他元素的大小相对于页面上的任何指定的东西进行缩放。

在本节中，我们将探讨一些最常见的相对单位。

探索一个例子

在下面的示例中，你可以看到一些相对长度单位和绝对长度单位的行为。第一个框以像素为单位设置 width。作为一个绝对单位，这个宽度将保持不变，无论其他如何变化。

第二个框的宽度设置为 vw（视口宽度）单位。这个值相对于视口宽度，所以 10vw 是视口宽度的 10%。如果你更改浏览器窗口的宽度，那么框的大小应该会更改，但是这个示例使用 “ 嵌入到页面中，所以这将不起作用。要查看实际情况，你必须在打开示例的浏览器选项卡后尝试该示例。

第三个盒子使用 em 单位。这些是相对于字体大小的。

<div class="wrapper">
  <div class="box px">我的宽度为 200px</div>
  <div class="box vw">我的宽度为 10vw</div>
  <div class="box em">我的宽度为 10em</div>
</div>

cssCopy to Clipboardplay

.box {
  background-color: lightblue;
  border: 5px solid darkblue;
  padding: 10px;
  margin: 1em 0;
}

.wrapper {
  font-size: 1em;
}

.px {
  width: 200px;
}

.vw {
  width: 10vw;
}

.em {
  width: 10em;
}
em 和 rem

em 和 rem 是你在从框到文本调整大小时最常遇到的两个相对长度。了解这些方法是如何工作的以及它们之间的区别是很有意义的，尤其是当你开始学习更复杂的主题时，比如样式化文本或 CSS 布局。下面的示例提供了一个演示。

HTML 是一组嵌套的列表——我们总共有三个列表，并且两个示例都有相同的 HTML。唯一的区别是第一个类具有 em，第二个类具有 rem。

首先，我们将 16px 设置为 <html> 元素的字体大小。

概括地说，在排版属性中 em 单位的意思是“父元素的字体大小”。带有 ems 类的 ](https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/ul) 内的 [ 元素从它们的父元素中获取大小。因此，每一个连续的嵌套级别都会逐渐变大，因为每个嵌套的字体大小都被设置为 1.3em——是其父嵌套字体大小的 1.3 倍。

概括地说，rem 单位的意思是“根元素的字体大小”。（“根 em”的 rem 标准。）](https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/ul) 内的 [ 元素和一个 rems 类从根元素（<html>）中获取它们的大小。这意味着每一个连续的嵌套层都不会不断变大。

但是，如果你在 CSS 中更改 <html> 字体大小，你将看到所有其他相关内容都发生了更改，包括 rem 和 em 大小的文本。

<ul class="ems">
  <li>一</li>
  <li>二</li>
  <li>
    三
    <ul>
      <li>三 A</li>
      <li>
        三 B
        <ul>
          <li>三 B 2</li>
        </ul>
      </li>
    </ul>
  </li>
</ul>

<ul class="rems">
  <li>一</li>
  <li>二</li>
  <li>
    三
    <ul>
      <li>三 A</li>
      <li>
        三 B
        <ul>
          <li>三 B 2</li>
        </ul>
      </li>
    </ul>
  </li>
</ul>
html {
  font-size: 16px;
}

.ems li {
  font-size: 1.3em;
}

.rems li {
  font-size: 1.3rem;
}

百分比

在许多情况下，百分比与长度的处理方法是一样的。百分比的问题在于，它们总是相对于其他值设置的。例如，如果将元素的字体大小设置为百分比，那么它将是元素父元素字体大小的百分比。如果使用百分比作为宽度值，那么它将是父值宽度的百分比。

在下面的示例中，两个百分比大小的框和两个像素大小的框具有相同的类名。分别为 200px 和 40% 宽。

不同之处在于，第二组两个框位于一个 400px 宽的包装器中。第二个 200px 宽的盒子和第一个一样宽，但是第二个 40% 的盒子现在是 400px 的 40%——比第一个窄多了！

尝试更改包装器的宽度或百分比值，看看这是如何工作的：

<div class="box px">我的宽度为 200px</div>
<div class="box percent">我的宽度为 40%</div>
<div class="wrapper">
  <div class="box px">我的宽度为 200px</div>
  <div class="box percent">我的宽度为 40%</div>
</div>
.box {
  background-color: lightblue;
  border: 5px solid darkblue;
  padding: 10px;
  margin: 1em 0;
}
.wrapper {
  width: 400px;
  border: 5px solid rebeccapurple;
}

.px {
  width: 200px;
}

.percent {
  width: 40%;
}

下一个示例以百分比设置字体大小。每个 <li> 都有 80% 的字体大小，因此嵌套列表项在从父级继承其大小时将逐渐变小。

htmlCopy to Clipboardplay

<ul>
  <li>一</li>
  <li>二</li>
  <li>
    三
    <ul>
      <li>三 A</li>
      <li>
        三 B
        <ul>
          <li>三 B 2</li>
        </ul>
      </li>
    </ul>
  </li>
</ul>
li {
  font-size: 80%;
}

注意，虽然许多值接受长度或百分比，但也有一些值只接受长度。你可以在 MDN 属性引用页面上看到它能接受哪些值。如果允许的值包括 “，则可以使用长度或百分比。如果允许的值只包含 <length>，则不可能使用百分比。

数字

有些值接受数字，不添加任何单位。接受无单位数字的属性的一个例子是不透明度属性（opacity），它控制元素的不透明度（它的透明程度）。此属性接受 0（完全透明）和 1（完全不透明）之间的数字。

在下面的示例中，尝试将不透明度值更改为 0 到 1 之间的各种小数值，并查看框及其内容是如何变得透明或者不透明的：

<div class="wrapper">
  <div class="box">我是个具有 opacity 属性的盒子</div>
</div>
.wrapper {
  background-image: url(https://mdn.github.io/shared-assets/images/examples/balloons.jpg);
  background-repeat: no-repeat;
  background-position: bottom left;
  padding: 20px;
}

.box {
  margin: 40px auto;
  width: 230px;
  background-color: lightblue;
  border: 5px solid darkblue;
  padding: 10px;
  opacity: 0.6;
}

备注： 当你在 CSS 中使用数字作为值时，它不应该用引号括起来。

颜色

在 CSS 中指定颜色的方法有很多，其中一些是最近才实现的。在 CSS 中，相同的颜色值可以在任何地方使用，无论你指定的是文本颜色、背景颜色还是其他颜色。

现代计算机的标准颜色系统是 24 位的，它允许通过不同的红、绿、蓝通道的组合显示大约 1670 万种不同的颜色，每个通道有 256 个不同的值（256 x 256 x 256 = 16,777,216）。让我们来看看在 CSS 中指定颜色的一些方法。

备注： 在本教程中，我们将研究具有良好浏览器支持的常用指定颜色的方法；虽然还有其他的，但是他们没有很好的支持，也不太常见。

颜色关键词

在这学习示例或 MDN 上的其他示例中，你经常会看到使用的颜色关键字，因为它们是一种指定颜色的简单易懂的方式。有一些关键词，其中一些有相当有趣的名字！你可以在页面上看到 “ 值的完整列表。

在下面的示例中尝试使用不同的颜色值，以了解它们是如何工作的：

<div class="wrapper">
  <div class="box one">古董白（antiquewhite）</div>
  <div class="box two">靛色（blueviolet）</div>
  <div class="box three">黄绿色（greenyellow）</div>
</div>
.box {
  padding: 10px;
  margin: 0.5em 0;
  border-radius: 0.5em;
}
.one {
  background-color: antiquewhite;
}

.two {
  background-color: blueviolet;
}

.three {
  background-color: greenyellow;
}

十六进制 RGB 值

你可能遇到的下一种颜色值类型是十六进制代码。每个十六进制值由一个散列/磅符号（#）和六个十六进制数字组成，每个十六进制数字都可以取 0 到 f（代表 15）之间的 16 个值中的一个——所以是 0123456789abcdef。每对值表示一个通道——红色、绿色和蓝色——并允许我们为每个通道指定 256 个可用值中的任意一个（16 x 16 = 256）。

这些值有点复杂，不太容易理解，但是它们比关键字更通用——你可以使用十六进制值来表示你想在配色方案中使用的任何颜色。

同样，大胆尝试更改值，看看颜色如何变化：

<div class="wrapper">
  <div class="box one">#02798b</div>
  <div class="box two">#c55da1</div>
  <div class="box three">#128a7d</div>
</div>
.box {
  padding: 10px;
  margin: 0.5em 0;
  border-radius: 0.5em;
}

.one {
  background-color: #02798b;
}

.two {
  background-color: #c55da1;
}

.three {
  background-color: #128a7d;
}

RGB 和 RGBA 的值

我们将在这里讨论的第三种方案是 RGB。RGB 值是一个函数——rgb()——它有三个参数，表示颜色的红色、绿色和蓝色通道值，与十六进制值的方法非常相似。RGB 的不同之处在于，每个通道不是由两个十六进制数字表示的，而是由一个介于 0 到 255 之间的十进制数字表示的——这有点容易理解。

让我们重写上一个例子，使用 RGB 颜色：

<div class="wrapper">
  <div class="box one">rgb(2 121 139)</div>
  <div class="box two">rgb(197 93 161)</div>
  <div class="box three">rgb(18 138 125)</div>
</div>
.box {
  padding: 10px;
  margin: 0.5em 0;
  border-radius: 0.5em;
}
.one {
  background-color: rgb(2 121 139);
}

.two {
  background-color: rgb(197 93 161);
}

.three {
  background-color: rgb(18 138 125);
}

你可以向 rgb() 传递第四个参数，它代表颜色的 alpha 通道，控制不透明度。如果你把这个值设置为 0，它将使颜色完全透明，而 1 将使它完全不透明。介于两者之间的值会给你带来不同级别的透明度。

备注： 在颜色上设置 alpha 通道与使用我们前面看到的 opacity 属性有一个关键区别。当你使用不透明度时，你让元素和它里面的所有东西都不透明，而使用 RGB 与 alpha 参数的颜色只让你指定的颜色不透明。

在下面的例子中，我们添加了一个背景图片到我们的彩色方块的包含块中。然后我们设置了不同的不透明度值——注意当 alpha 通道值较小时，背景如何显示的。在本例中，尝试更改 alpha 通道值，看看它如何影响颜色输出。

<div class="wrapper">
  <div class="box one">rgb(2 121 139 / .3)</div>
  <div class="box two">rgb(197 93 161 / .7)</div>
  <div class="box three">rgb(18 138 125 / .9)</div>
</div>
.wrapper {
  background-image: url(https://mdn.github.io/shared-assets/images/examples/balloons.jpg);
  padding: 40px 20px;
}

.box {
  padding: 10px;
  margin: 0.5em 0;
  border-radius: 0.5em;
}

.one {
  background-color: rgb(2 121 139 / 0.3);
}

.two {
  background-color: rgb(197 93 161 / 0.7);
}

.three {
  background-color: rgb(18 138 125 / 0.9);
}

备注： 在旧版本的 CSS 中，rgb() 语法不支持 alpha 参数——你需要使用另一个叫 rgba() 的函数来实现。如今，你可以向 rgb() 传递一个 alpha 参数，但为了向后兼容旧网站，rgba() 语法仍然被支持，并且具有与 rgb() 完全相同的行为。

HSL 和 HSLA 的值

另一种指定颜色的方法是 HSL 颜色模型。hsl() 函数不接受红、绿、蓝值，而是接受色相、饱和度和亮度值，这些值用于区分 1670 万种颜色，但方式不同：

  • 色调：颜色的底色。这个值在 0 和 360 之间，表示 color wheel 周围的角度。
  • 饱和度：颜色有多饱和？它的值为 0–100%，其中 0 为无颜色（它将显示为灰色阴影），100% 为全色饱和度
  • 亮度：颜色有多亮？它从 0–100% 中获取一个值，其中 0 表示没有光（它将完全显示为黑色），100% 表示完全亮（它将完全显示为白色）

就像 rgb() 一样，你可以向 hsl() 传递一个 alpha 参数来指定不透明度。

图片

<image>数据类型用于图像为有效值的任何地方。它可以是一个通过 url() 函数指向的实际图像文件，也可以是一个渐变。

在下面的例子中，我们演示了一个图像和一个渐变作为 CSS background-image 属性的值。

.box {
  height: 150px;
  width: 300px;
  margin: 20px auto;
  border-radius: 0.5em;
}
.image {
  background-image: url(https://mdn.github.io/shared-assets/images/examples/big-star.png);
}

.gradient {
  background-image: linear-gradient(
    90deg,
    rgb(119 0 255 / 39%),
    rgb(0 212 255 / 100%)
  );
}

备注： <image> 还有一些其他可能的值，但是这些都是较新的，并且目前对浏览器的支持很差。

位置

position_value数据类型表示一组 2D 坐标，用于定位一个元素，如背景图像（通过 background-position）。它可以使用关键字（如 top、left、bottom、right 以及 center）将元素与 2D 框的特定边界对齐，以及表示框的顶部和左侧边缘偏移量的长度。

一个典型的位置值由两个值组成——第一个值水平地设置位置，第二个值垂直地设置位置。如果只指定一个轴的值，另一个轴将默认为 center。

在下面的示例中，我们使用关键字将背景图像从容器的顶部到右侧放置了 40px。尝试使用这些值，看看如何把这些图像移来移去。

.box {
  height: 100px;
  width: 400px;
  background-image: url(https://mdn.github.io/shared-assets/images/examples/big-star.png);
  background-repeat: no-repeat;
  background-position: right 40px;
  margin: 20px auto;
  border-radius: 0.5em;
  border: 5px solid rebeccapurple;
}

字符串和标识符

在上面的示例中，我们看到关键字被用作值的地方（例如 <color> 关键字，如 red、black、rebeccapurple 和 goldenrod）。这些关键字被更准确地描述为标识符，一个 CSS 可以理解的特殊值。因此它们没有使用引号括起来——它们不被当作字符串。

.box {
  width: 400px;
  padding: 1em;
  border-radius: 0.5em;
  border: 5px solid rebeccapurple;
  background-color: lightblue;
}

.box::after {
  content: "这是个字符串。因为它在 CSS 中被引号包裹了，所以我这么认为。";
}

函数

我们将查看的最后一种类型的值是一组称为函数的值。我们已经在颜色部分看到了函数的作用——rgb()、hsl() 等。用于从文件返回图像的值——url()——也是一个函数。

calc() CSS 函数的行为更像你在传统编程语言中可能找到的东西。这个函数使你能够在 CSS 中进行简单的计算。如果你想计算一些你在编写项目的 CSS 时无法定义的数值，并且需要浏览器在运行时为你计算，那么它特别有用。

例如，下面我们使用 calc() 使框宽为 20% + 100px。20% 是根据父容器 .wrapper 的宽度来计算的，因此如果宽度改变，它也会改变。我们不能事先做这个计算，因为我们不知道父类的 20% 是多少，所以我们使用 calc() 来告诉浏览器为我们做这个计算。

<div class="wrapper">
  <div class="box">我的宽度是计算出来的。</div>
</div>
.wrapper {
  width: 400px;
}
.box {
  padding: 1em;
  border-radius: 0.5em;
  border: 5px solid rebeccapurple;
  background-color: lightblue;
  width: calc(20% + 100px);
}

溢出的内容

什么是溢出？

我们知道，CSS 中万物皆盒，因此我们可以通过给 width 和 height（或者 inline-size 和 block-size）赋值的方式来约束盒子的尺寸。溢出是在你往盒子里面塞太多东西的时候发生的，所以盒子里面的东西也不会老老实实待着。

CSS 尽力减少“数据损失”

image-20250403143439393

只要有可能，CSS 就不会隐藏你的内容

overflow 属性

overflow 属性是你控制一个元素溢出的方式，它告诉浏览器你想怎样处理溢出。overflow 的默认值为 visible，这就是我们的内容溢出的时候，我们在默认情况下看到它们的原因。

如果你想在内容溢出的时候把它裁剪掉，你可以在你的盒子上设置 overflow: hidden。这就会像它表面上所显示的那样作用——隐藏掉溢出。这可能会很自然地让东西消失掉，所以你只应该在判断隐藏内容不会引起问题的时候这样做。

也许你还会想在有内容溢出的时候加个滚动条？如果你用了 overflow: scroll，那么你的浏览器总会显示滚动条，即使没有足够多引起溢出的内容。你可能会需要这样的样式，它避免了滚动条在内容变化的时候出现和消失。

在以上的例子里面，我们仅仅需要在 y 轴方向上滚动，但是我们在两个方向上都有了滚动条。你可以使用 overflow-y 属性，设置 overflow-y: scroll 来仅在 y 轴方向滚动。

和 scroll 一样，在无论是否有多到需要 用滚动条的内容的时候，页面上都会显示一个滚动条。

备注： 你可以用 overflow 属性指定 x 轴和 y 轴方向的滚动，同时使用两个值进行传递。如果指定了两个关键字，第一个对 overflow-x 生效而第二个对 overflow-y 生效。否则，overflow-x 和 overflow-y 将会被设置成同样的值。例如，overflow: scroll hidden 会把 overflow-x 设置成 scroll，而 overflow-y 则为 hidden。

如果你只是想让滚动条在有比盒子所能装下更多的内容的时候才显示，那么使用 overflow: auto。此时由浏览器决定是否显示滚动条。桌面浏览器一般仅仅会在有足以引起溢出的内容的时候这么做。

在 CSS 中调整大小

原始尺寸，或固有尺寸

在受 CSS 设置影响之前，HTML 元素有其原始的尺寸。一个直观的例子就是图像。一幅图像的长和宽由这个图像文件自身确定。这个尺寸就是固有尺寸。

如果你把图片放置在网页中的时候没有在 <img> 标签或 CSS 中设置其尺寸，那么将使用其固有尺寸显示。

一个空的 <div> 是没有尺寸的。如果你在你的 HTML 文件中添加一个空 “ 并给予其边框（就像刚才我们为图像做的那样），你会在页面上看到一条线。这是边框被压缩后的效果——它内部没有内容。在我们下面的例子中，边框宽度扩展到整个容器宽度，因为它是块级元素，而块级元素的行为就是这样的。它没有高度，或者说高度为 0，因为内部没有内容。

在上面的例子中，试着在空元素内部添加些内容。现在边框内包含一些文字了，因为元素的高度由其所含内容高度确定。再强调一次，这就是元素的固有尺寸——由其所包含的内容决定。

设置具体的尺寸

我们当然可以给设计中的元素指定具体大小。当给元素指定尺寸（然后其内容需要适合该尺寸）时，我们将其称为外部尺寸。以上面例子中的 <div> 举例——我们可以给它一个具体的 width 和 height 值，然后不论我们放什么内容进去它都是该尺寸。正如我们在上一课有关溢出的内容中所发现的，如果内容的数量超出了元素可容纳的空间，则设置的高度会导致内容溢出。

由于存在溢出问题，在网络上使用长度或百分比固定元素的高度需要非常小心。

使用百分比

许多时候，百分比是长度单位，正如我们在值和单位这节课中讨论的那样，它们常常可与长度互换。当使用百分比时，你需要清楚，它是什么东西的百分比。对于一个处于另外一个容器当中的盒子，如果你给予了子盒子一个百分比作为宽度，那么它指的是父容器宽度的百分比。

这是因为百分比是以包含盒子的块为根据解析的。如果我们的 <div> 没有被指定百分比的值，那么它会占据 100% 的可用空间，因为它是块级别的元素。如果我们给了它一个百分比作为宽度，那么这就是它原来情况下可以占据空间的百分比。

min- 和 max- 尺寸

除了让万物都有一个确定的大小以外，我们可以让 CSS 给定一个元素的最大或最小尺寸。如果你有一个包含了变化容量的内容的盒子，而且你总是想让它至少有个确定的高度，你应该给它设置一个 min-height 属性。盒子就会一直保持大于这个最小高度，但是如果有比这个盒子在最小高度状态下所能容纳的更多内容，那么盒子就会变大。

max-width 的常见用法为，在没有足够空间以原有宽度展示图像时，让图像缩小，同时确保它们不会比这一宽度大。

如果你设定一个图像的属性为 width: 100%，而且它的原始宽度小于容器，图像会被强制拉伸以变大，看起来像素更加明显。如果它的原始宽度大于容器，它则会溢出。两种情形都不是你想要看到的。

如果你使用了 max-width: 100%，那么图像可以变得比原始尺寸更小，但是不会大于原始尺寸的 100%。

视口单位

视口，即你在浏览器中看到的部分页面，也是有尺寸的。在 CSS 中，我们有与视口尺寸相关的度量单位，即意为视口宽度的 vw 单位，以及意为视口高度的 vh 单位。使用这些单位，你可以把一些东西做得随用户的视口改变大小。

1vh 等于视口高度的 1%，1vw 则为视口宽度的 1%。你可以用这些单位约束盒子的大小，还有文字的大小。

如果你改变了 vh 和 vw 的对应值，盒子和字体的大小也会改变；视口大小的变化也会让它们的大小变化，因为它们是依照视口来定大小的。想看到随着你改变视口大小的时候示例的变化的话，你需要在一个新浏览器视窗里面载入此示例，因为你可以控制该视窗的大小，同时上面示例所在的嵌入的 <iframe> 的大小即是对上面示例而言的视口。打开此示例，调整浏览器视窗的大小，观察在盒子和文本的大小上所发生的事情。

弹性盒模型 (flex box)

定义

弹性盒子是 css3的一种新的布局模式

这一种当页面需要适应不同的屏幕大小以及设备类型时，确保元素拥有恰当的行为的布局方式

内容

弹性盒子由弹性容器和弹性子元素组成

弹性容器通过设置 display 属性的值为 flex，将其定义为弹性容器

弹性容器内包含一个或多个弹性子元素

弹性容器外以及弹性子元素内是正常渲染的，弹性盒子只定义了弹性子元素如何在弹性容器内布局

<div class="father">
			<div class="a"></div>
			<div class="b"></div>
			<div class="c"></div>
		</div>
.father{
				width: 100%;
				height: 400px;
				background-color: aliceblue;
				display: flex;
			}
			.a{
				width: 50px;
				height: 50px;
				background-color: aqua;
			}
			.b{
				width: 50px;
				height: 50px;
				background-color: beige;
			}
			.c{
				width: 50px;
				height: 50px;
				background-color: chartreuse;
			}

5

弹性盒子默认是水平摆放

父元素上的属性

display 属性

display:flex;开启弹性盒子，开启后子元素默认水平排列

flex-direction属性

定义

flex-direction属性决定了弹性子元素在父元素中的位置

语法

flex-direction: row | row-reverse | column | column-reverse

row：横向从左往右排列

row-reverse：横向从右往左排列

column：纵向排列

column-reverse：反转纵向排列

justify-content属性

定义

内容对齐(justify-content)属性应用弹性容器上，把弹性上沿弹性容器和主轴线（main-axis）对齐

语法

justify-content: flex-start | flex-end | center

flex-start：弹性项目向行头紧挨着填充，这个是默认值。第一个弹性项的main-start外边距边线被放置在该行main-start的边线，而后续弹性项依次平齐摆放

flex-end：弹性项目向行尾紧挨着填充。第一个弹性项的main-end外边距边线被放置在该行main-end的边线，而后续弹性项依次平齐摆放

center弹性项目居中紧挨着填充（ 如果剩余空间是负的，则弹性项目将在两个方向上同时溢出）

align-item属性

定义

align-item实时或检索弹性盒子元素在纵轴方向的对齐方式(垂直摆放方式)

语法

align-items: flex-start | flex-end | center;

子元素上的属性

flex-grow/flex

根据弹性盒子元素所设置的拓展因子作为比例来分配剩余空间

默认为零，如果存在剩余，空间也不放大

如果只有一个子元素设置，那么按过程因子转化的百分比对其分配剩余空间。

0.1=10%，1=100%超出按照100%

.a{
				width: 100px;
				flex: 7;
				background-color: aqua;
			}
			.b{
				width: 100px;
				flex: 5;
				background-color: beige;
			}

浮动

CSS提供了三种传统布局方式

  • 标准流（普通流）

    文档流是文档中可显示对象在排列时所占用的空间，位置

    例如：块元素自上而下摆放，内联元素从左到右摆放

    标准流里面的限制非常多，导致很多页面效果无法实现

    • 高矮不齐，底部对齐
    • 空白折叠现象
      • 无论多少个空格、换行 tab，都会被折叠，成为一个空格
      • 如果我们想让 image 标签之间没有空隙，必须紧密连接

  • 浮动

  • 定位

为什么需要浮动？

  • 我们将多个块级盒子排成一行的时候，发现元素之间有空白空隙无法去除
  • 传统方式难以实现两个盒子的左右对齐

网页布局准则：块级元素纵向排列找标准流，多个块级元素横向排列找浮动

浮动的使用

float属性用于创建浮动框，将其移动到一边，直到左边缘或右边缘触及包含块或另一个浮动框的边缘。

值描述
left元素向左浮动
right元素向右浮动
浮动的特性
  1. 浮动的元素会脱离标准流
    • 浮动的盒子不再保留原先的位置（原来的位置就会空出来给其他元素使用）
  2. 不动的元素会在一行显示并且元素顶部对齐（标准流是底部对齐）
  3. 浮动的元素会具有行内块元素的特性

如果多个盒子都设置了浮动，他们会按照属性值一行内显示，并且顶部对齐排列

备注

浮动的元素是相互贴靠在一起，而不会有缝隙，如果父级宽度装不下这些浮动的盒子，多出的盒子会另起一行对齐

浮动的元素会具有行内块元素的特性

任何元素都可以浮动，不管原先是什么模式的元素添加浮动之后，具有行内块元素相似的特性{一行显示，并且可以设置宽高属性}

浮动的注意事项
  1. 浮动和标准流的父盒子搭配 先用标准流的负元素排列，剩下位置之后内部子元素再用浮动排列左右位置
  2. 一个元素浮动了，理论上其余的兄弟元素也要浮动

清除浮动

为什么需要

我们前面浮动元素有一个标准流的父元素，他们有一个共同的特点，就是都有高度的 但是有的时候父盒子不能设置高度，高度与内部元素有关，用子元素撑开父盒子 而浮动的元素不会撑开父盒子

清楚浮动的本质
  • 清除浮动的本质，是清除浮动元素造成的影响
  • 如果父元素本身有高度，则不需要清除浮动
  • 清除浮动之后，父级就会根据浮动的子盒子自动检测高度。父级有了高度，就不会影响下面的标准流

语法：

选择器{
clear:属性值;
}
属性值描述
left不允许左侧右浮动元素（清除左浮动的影响）
right不允许右侧右浮动元素（清除右浮动的影响）
both同时清除左右两侧浮动的影响
清除浮动的方法
  1. 额外标签法（W3C推荐的）
  2. 父级添加overflow属性
  3. 父级添加:after伪元素
  4. 父级添加双伪元素

额外标签法

这个方法会在服装元素末尾添加一个空标签。如<div style="clear:both;"></div>，或者其他标签（<br/>等）

注意

添加的这个空标签必须是块级元素

父级添加overflow属性

可以给父级元素添加 overflow 属性，将其属性值设置为 hidden 、auto 或者scroll。 父级元素的样式里添加：overflow:hidden;clear:both;

缺点：无法显示溢出的部分

“:after`伪元素法

:after方式是额外标签法的升级版，也是给父元素添加

css
.clearfix:after{
	content:"";
	display:block;
	height:0;
	clear:both;
	visibility:hidden;
}
.clearfix{	/*IE6、7专有*/
	*zoom:1;
}

双伪元素清除浮动

css
.clearfix::before,
.clearfix::after {
  content: "";
  display: table;
}

.clearfix::after {
  clear: both;
}

/* 在需要清除浮动的元素上添加 clearfix 类 */
<div class="clearfix">
  <!-- 这里放置需要清除浮动的内容 -->
</div>

CSS属性书写顺序

建议遵循以下顺序 1.布局定位属性：display/position/float/clear/visibility/overflow（建议display第一个写，毕竟关系到模式） 2.自身属性：width/height/margin/padding/border/background 3.文本属性：color/font/text-decoration/text-align/vertical-align/white-space/break-word 4.其他属性（Css3）: content/cursor/border-radius/box-shadow/text-shadow/background:linear-gradient..

CSS定位

定位的组成

定位：将盒子定在某一个位置，所以定位也是在摆放盒子，按照定位的方式摆放移动的盒子

定位 = 定位模式 + 边偏移

定位模式是指一个元素在文档中的定位方式。边偏移则决定了该元素的最终位置。

1.定位模式

定位模式决定元素的定位方式，它通过 css 的 position 属性来设置，其值可以分为4个

值语义
static静态定位
relative相对定位
absolute绝对定位
fixed固定定位
2.边偏移

边偏移就是定位的盒子移动到最终位置。有 top、bottom 、 left 、right 4种个属性

静态定位

静态定位就是position:static，这是元素的默认定位方式，无定位的意思

  • 静态定位按照标准流特性摆放位置，它没有边偏移
  • 静态定位在布局时很少用到

相对定位（relative）

相对定位是元素，在移动位置的时候，是相对于它原来的位置来说的

选择器{position:relative;}

相对定位的特点：

  • 它是相当于自己原来的位置来移动的，位置是参考自己原来的位置
  • 原来在标准流的位置继续占有（没有脱离标准流）

绝对定位 (absolute)

绝对定位是元素，在移动位置的时候，是相对于他祖先元素来说的

选择器{position:absolute;}

绝对定位的特点:

  • 如果没有祖先元素或者祖先元素没有定位，则以浏览器为准定位（document）
  • 如果祖先元素有定位（相对、绝对、固定定位），所以最近一级的有定位祖先元素为参考点移动位置
  • 绝对定位不再占有原来的位置。（脱离标准流）

备注

如果绝对定位相对于 Document 顶部，那么页面向下滑的时候，它仍然处于最顶端，不会固定在页面上

但是如果绝对定位相对于文档的底部，就有类似于固定定位的效果

子绝父相的由来

弄清楚这个口诀，就明白了绝对定位和相对定位的使用场景。 这个“子绝父相”太重要了，是我们学习定位的口决，是定位中最常用的一种方式这句话的意思是：子级是绝对定位的话，父级要用相对定位。 ①子级绝对定位，不会占有位置，可以放到父盒子里面的任何一个地方，不会影响其他的兄弟盒子。

②父盒子需要加定位限制子盒子在父盒子内显示。

③父盒子布局时，需要占有位置，因此父亲只能是相对定位。

这就是子绝父相的由来，所以相对定位经常用来作为绝对定位的父级

固定定位

固定定位是元素，固定于浏览器可视区的位置。主要使用场景：可以在浏览器页面滚动时，元素的位置不被改变。

  • 固定定位是脱离标准流的
position:fixed;

粘性定位

position:sticky;

粘性定位可以看作相对定位和固定定位的混合。

{position:sticky;top:10px;}

粘性定位特点：

  1. 以浏览器的可视窗口为参照移动元素（固定定位特点）；
  2. 粘性定位占有原先位置（相对定位特点）
  3. 必须添加top、left、bottom、right 其中一个才有效

定位叠放次序z-index

在使用定位布局时，可能会出现盒子重叠的情况。此时可以使用 z-index 来控制盒子的先后次序（z轴）

语法：

选择器{z-index:1;}
  • 数值可以是正整数，负数或者0，默认是auto，数值越大，盒子越靠上
  • 属性值相同的话，按照书写顺序，后来居上
  • 数字后面不能加单位
  • 只有定位的盒子才有z-index属性

拓展

绝对定位的盒子居中

加了绝对定位的盒子不能通过marge:0 auto;水平居中，但是可以通过下面的计算实现水平居中

  1. 设置位置为left:50%
  2. 再设置marge-left:-width/2即marge-left为盒子宽度的一般的相反数
垂直居中

和前面类似

  1. 设置位置为top:50%
  2. 再设置marge-top:-height/2即marge-left为盒子高度的一般的相反数
定位的特殊性

绝对定位和固定定位也和浮动类似。

  1. 行内元素添加绝对或固定定位，可以设置宽度和高度
  2. 块级元素添加绝对或固定定位。如果不给宽度或者高度默认大小是内容的大小（变成了行内块元素）

脱标的盒子不会触发外边距塌陷

浮动元素、绝对定位（固定定位）元素都不会触发外边距合并的问题

绝对定位（固定定位）会完全压住盒子

浮动元素不同，只会压住它下面标准流的盒子，但是不会压住下面标准流盒子里面的文字（图片）

但是绝对定位（固定定位）会压住下面标准流所有的内容

浮动之所以不会压缩文字的，因为浮动产生的目的是为了做文字环绕效果的，文字会环绕浮动元素

元素的显示与隐藏

类似网站广告当我们点击关闭就不见了，但是我们重新刷新页面就会重新出现

本质：让一个元素在页面中隐藏或者显示出来。

  1. display 显示隐藏
  2. visibility 显示隐藏
  3. overflow 溢出显示隐藏
display 属性
display:none;

与 visibility 属性的 hidden 值不同，其不为被隐藏元素保留其物理空间

  • display:none；隐藏元素
  • diaplay:block；除了转化为块级元素之外，同时还有显示元素的意思

display 隐藏元素后，不再占有原来的位置

visibility 可见性
值描述
inherit继承上一个父对象的可见性
visible对象可见
hidden对象隐藏
collapse主要用来隐藏表格的行和列

visibility 隐藏元素后，继续占有原来的位置

overflow 溢出

overflow 属性确定了，如果内容溢出一个元素的框（超过其指定高度及宽度）时，会发生什么。

值描述
hidden不显示超过对象尺寸的内容
visible默认值，不剪切内容也不添加滚动条
auto在需要时剪切内容并添加滚动条
scroll总是显示滚动条

vertical-align设置垂直对齐

这个属性用于设置一个元素的垂直对齐方式，但是它只针对于行列元素或行内块元素有效

值描述
baseline默认元素放置在父元素的基线上
top把元素的顶端与行中最高元素的顶端对齐
middle把此元素放置在父元素的中部
bottom把元素的顶部与行中最低元素的顶部对齐

有的时候图片距离下面的边框还有一定的距离，只要设置垂直对齐，只要修改，不是基线对齐，就可以去除这个小间隔11

精灵图

使用精灵图核心：

  1. 精灵技术主要针对于背景图片使用，就是把多个小背景图片整合到一张大图片上
  2. 这个大图片也被称为精灵图或者雪碧图
  3. 移动背景图片位置，此时可以使用 background-position
  4. 移动的距离就是这个图片的 x 和 y 坐标，注意网页中的坐标有所不同
  5. 因为一般情况下是往上左移动的，所以数值是负值

字体图标

  • 轻量级：一个图标字体要比一系列的图像要小，一旦字体加载了，图标，马上就会渲染出来，减少了服务器需求

  • 灵活性：本质其实是文字，可以随意改变颜色，产生阴影、透明、效果、旋转等

  • 兼容性：几乎支持所有的浏览器，请放心使用

推荐的网站

Iconmoon字库：http://iconfont.io

阿里iconfont字库http://iconfont.cn

引入方式

Unicode 引用

Unicode 是字体在网页端最原始的应用方式，特点是：

  • 支持按字体的方式去动态调整图标大小，颜色等等。
  • 默认情况下不支持多色，直接添加多色图标会自动去色。

注意：新版 iconfont 支持两种方式引用多色图标：SVG symbol 引用方式和彩色字体图标模式。（使用彩色字体图标需要在「编辑项目」中开启「彩色」选项后并重新生成。）

Unicode 使用步骤如下：

第一步：拷贝项目下面生成的 @font-face
css
@font-face {
  font-family: 'iconfont';
  src: url('iconfont.woff2?t=1713110849003') format('woff2'),
       url('iconfont.woff?t=1713110849003') format('woff'),
       url('iconfont.ttf?t=1713110849003') format('truetype');
}
第二步：定义使用 iconfont 的样式
css
.iconfont {
  font-family: "iconfont" !important;
  font-size: 16px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
第三步：挑选相应图标并获取字体编码，应用于页面
html
<span class="iconfont">&#x33;</span>

“iconfont” 是你项目下的 font-family。可以通过编辑项目查看，默认是 “iconfont”。

font-class 引用

font-class 是 Unicode 使用方式的一种变种，主要是解决 Unicode 书写不直观，语意不明确的问题。

与 Unicode 使用方式相比，具有如下特点：

  • 相比于 Unicode 语意明确，书写更直观。可以很容易分辨这个 icon 是什么。
  • 因为使用 class 来定义图标，所以当要替换图标时，只需要修改 class 里面的 Unicode 引用。

使用步骤如下：

第一步：引入项目下面生成的 fontclass 代码：
html
<link rel="stylesheet" href="./iconfont.css">
第二步：挑选相应图标并获取类名，应用于页面：
html
<span class="iconfont icon-xxx"></span>

” iconfont” 是你项目下的 font-family。可以通过编辑项目查看，默认是 “iconfont”。

Symbol 引用

这是一种全新的使用方式，应该说这才是未来的主流，也是平台目前推荐的用法。相关介绍可以参考这篇文章 这种用法其实是做了一个 SVG 的集合，与另外两种相比具有如下特点：

  • 支持多色图标了，不再受单色限制。
  • 通过一些技巧，支持像字体那样，通过 font-size, color 来调整样式。
  • 兼容性较差，支持 IE9+，及现代浏览器。
  • 浏览器渲染 SVG 的性能一般，还不如 png。

使用步骤如下：

第一步：引入项目下面生成的 symbol 代码：
html
<script src="./iconfont.js"></script>
第二步：加入通用 CSS 代码（引入一次就行）：
html
<style>
.icon {
  width: 1em;
  height: 1em;
  vertical-align: -0.15em;
  fill: currentColor;
  overflow: hidden;
}
</style>
第三步：挑选相应图标并获取类名，应用于页面：
html
<svg class="icon" aria-hidden="true">
  <use xlink:href="#icon-xxx"></use>
</svg>

CSS三角

可以使用边框制造出三角形

.a{
				height: 0;
				width: 0;
				border: 20px transparent solid;
				border-left: 20px red solid;
			}

效果：9

改变不同宽度比例制造不同的三角

.a{
				height: 0;
				width: 0;
				border: 20px green solid;
				border-right: 0;
				border-left: 60px red solid;
			}

10

css 用户界面样式

所谓界面样式，就是改变一些用户操作样式，以便提高更好的用户体验

  • 更改用户的鼠标样式
  • 表单轮廓
  • 防止表单域拖拽

鼠标样式 cursor

选择器{cursor:pointer;}
属性值描述
default小白，默认
pointer销售
move移动
text文本
not-allowed禁止

轮廓线

给表单添加 outline：0或者 outline：none 样式之后就会去除默认的蓝色边框(聚焦显示的)

如果设置border:0的话，就彻底没有边框了

防止文本域拖拽

实际开发中，我们文本域右下角是不可以拖拽的。

textarea{resize:none;}

溢出的文字省略号显示

单行文本溢出显示省略号—必须满足3个条件

/*1.先强制一行内显示文本*/
white-space:nowrap;(默认normal自动换号)
/*2.超出的部分隐藏*/
overflow:hidden;
/*3.文字用省略号代替艺术部分*/
text-overflow:ellipsis;

常见的布局技巧

  1. margin负值的应用
  2. 文字围绕浮动元素
  3. 行内块的巧妙运用

margin负值的应用

多个盒子摆放在一行，并且每个盒子都有边框的时候，壳子之间的部分边框会叠加，厚度会加倍

这时候我们将每个盒子都设置margin-left:-border的宽度

这个效果就类似于细线边框

文字围绕浮动元素

浮动元素默认是不会压住文字的，因此我们可以利用这个特性做文字环绕效果

CSS3其他特性

  1. 图片变模糊
  2. 计算盒子宽度 calc 函数

CSS3滤镜 filter

filter:函数();
例如filter:blur(5px);blur处理，数值越大越模糊

calc 函数

这个函数可以让你在声明 css 属性值之时执行一些计算

width:calc(100%-50px);
/*在这个小括号以内就可以做加减乘除运算了*/

CSS3过渡属性

过渡（transition）是 css3中具有颠覆性的特征之一。我们可以不使用flash动画或者 JavaScript 的情况下，当元素从一种样式变换成另外一种样式，是为元素添加效果。

过渡动画：是从一个状态渐渐过渡到另外一个状态

transition:要过渡的属性 花费时间 运动曲线 何时开始;

属性：有变化的 css 属性，宽度、高度、背景、颜色、内外边距都可以。如果想要所有的属性都过度变化，写一个all就行了

花费时间：单位是秒（必须写单位），比如说0.5s

运动曲线：默认是 ease，可以忽略

何时开始：单位是秒（必须写单位），可以设置延迟触发的时间，默认是0s

12

html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>宽度过渡动画</title>
<style>
  .expandable {
    width: 100px; /* 初始宽度 */
    height: 50px; /* 高度 */
    background-color: #3498db; /* 背景颜色 */
    transition: width 2s; /* 过渡效果，宽度变化在2秒内完成 */
  }

  /* 当鼠标悬停在元素上时，增加宽度 */
  .expandable:hover {
    width: 300px; /* 鼠标悬停时的宽度 */
  }
</style>
</head>
<body>

<div class="expandable"></div> <!-- 这里是可扩展的元素 -->

</body>
</html>

给谁过渡，就给谁添加这个属性

网站favicon制作

favicon.ico 一般作为微缩的网页标志，它显示在浏览器地址栏或者标签栏上，目前主要的浏览器都支持favicon.ico图标

  1. 制作favicon.ico图标 将 png 图像转化为 ico 图标，需要借助第三方转化为比如说彼特虫http://www.bitbug.net

  2. favicon.ico图标放在网站根目录下

  3. html 页面引入favicon.ico图标 在<head>标签内引入代码

    <link rel="shortcut icon" href="favicon.ico" type="image/x-icon"/>

    将压缩文件中的favicon.ico图像放在根目录下(也可以是其他目录) 在页面源文件的标签之间插入 <link rel="shortcut icon" href=" /favicon.ico" />

TDK三大标签SEO优化

Title网站标题

建议：网站名（产品名）——网站介绍

<title></title>

description 网站说明

简要说明我们网站主要是做什么的

<meta name="description" content="" />

keywords关键字

<meta name="keywords" content="" />

最好限制为六到8个关键词，关键词之间用英文逗号隔开，采用关键词1,逗号关键词2的样式

CSS3 2D转换

转换(transform)是CSS3中具有颠覆性的特性之一，可以实现位移，旋转、缩放等效果

  • 移动：translate
  • 旋转：rotate
  • 缩放：scale

translate

2D移动是2D转换里面的移动功能可以改变元素在页面中的位置，类似于相对定位

语法：

transform:translate(x,y);或者分开写
transform:translateX(x);
transform:translateY(y);

重点

  • 定义2d 转换中的移动沿 x 和 y 轴移动元素
  • 最大的优点就是不会影响到其他元素的位置和相对定位一样
  • translate 中的百分比单位是相对于自身元素的。
  • 对行内标签没有效果

rotate

2d 旋转指的是张元素在二维平面内顺时针或逆时针旋转

transform:	rotate(45reg(度数));
转换中心点：transform-origin

我们可以设置元素转换的中心点

transform-origin:x y;
  • 注意后面的参数 x 和 y 用空格隔开
  • 默认的转换中心点是元素的中心点，50% 50%
  • 还可以给 x y 设置像素或者方位名词(top center bottom left right)

scale

播放顾名思义，可以放大和缩小，只要给元素加上了这个属性，就能控制它放大还是缩小

transform:scale(x,y);
  • scale(1,1)：宽和高度放大一倍，相当于没有放大
  • scale(2,2)：宽和高都放大了两倍
  • scale(2)：相当于上面那个
  • 最大的优势：可以设置转换中心点缩放，默认以中心点缩放的，而且不影响其他盒子

综合写法

同时，使用多个转换器格式为 transform：translate（），rotate（）， scale（）…等等

动画

动画 (animation )是 css3中具有颠覆性的特征之一，可以通过设置多个节点来精准控制一个或一组动画，常用来实现复杂的动画效果

相比较过渡动画可以实现更多变化，更多控制、连续自动播放等效果

先定义动画，再使用动画

  1. 使用keyframes定义动画
css
@keyframes animationname{
	0%{
		
	}
	100%{
		
	}
}

动画序列

  • 0%是动画的开始，100%是动画的完成，这样的规则就是动画序列
  • 在keyframes中规定某项 css 样式就能创建由当前样式逐步改成新样式的动画效果
  • 请用百分比来规定变化发生的时间，或者用关键字 form 和 to 等同于0%和100%

动画的使用

动画名称
animation-name: name;
持续时间
animation-duration: 2s;

动画在元素被加载的时候，就会调用可以做元素的出现效果

属性描述
@keyframes规定通话
animation所有动画属性的简写属性除了 animation-play-state 属性
animation -name规定动画的名称(必须的)
animation-duration规定动画完成一个周期所花费的秒或者毫秒(必须的)
animation timing function规定动画的速度曲线默认是 ease
animation delay规定动画何时开始，默认是0
animation iteration can’t规定动画被播放的次数默认是一，还有 infinite
animation direction规定动画是否在下一周期逆向播放，默认是 normal，alternate逆播放
animation play state规定动画是否正在运行或暂停，默认是 running，还有 post
animation fill mode规定动画结束后，状态保持 forward 回到起始 backwards

动画简写属性

animation：动画名称 持续时间 运动曲线 何时开始 播放次数 是否反方向 动画起始或结束的状态

速度曲线

值描述
linear动画从头到尾的速度是相同的。匀速
ease默认。动画以低速开始，然后加快在结束前变慢
ease-in动画以低速开始
ease-out动画与低速结束
ease-in-out动画以低速开始和结束
steps()指定了时间函数中的间隔数量(步长)

steps()就是分几步来完成我们的动画

3D 转换

  • 3D 位移：translate3d（x，y，z）

  • 3d 旋转 rotate3d(x,y,z)

  • 透视：perspective

  • 3d 呈现：transform-style

3d 移动 translate3d

3d 移动在2d 移动的基础上多加了一个可以移动的方向，就是z轴方向

  • transform:translateX(100px);
  • transform:translateY(100px);
  • transform:translateZ(100px);
  • transform:translate3d(x,y,z);

透视：perspective

在2D平面产生近大远小视觉立体，但是只是效果二维的

  • 如果想要在网页产生3D效果需要透视（理解成3D物体投影在2D平面内）。
  • 模拟人类的视觉位置，可认为安排一只眼睛去看
  • 透视我们也称为视距：视距就是人的眼睛到屏幕的距离
  • 距离视觉点越近的在电脑平面成像越大，越远成像越小
  • 透视的单位是像素

13

透视写在被观察元素的父盒子上面的 d：就是视距，视距就是一个距离人的眼睛到屏的距离 z：就是Z轴，物体距离屏距离，z轴越大（正值）我看到以物体就越大

3d 旋转rotate3d

3D旋转指可以让元素在三维平面内沿着x轴，y轴，z轴或者自定义轴进行旋转

语法

  • transform:rotateX(45deg）：沿看x轴正万向旋转45度
  • transform:rotateY(45deg）：沿着y轴正方向旋转45deg
  • transform:rotateZ(45deg)：沿着Z轴正方向旋转45deg
  • transform:rotate3d(x,y,z,deg）：沿看自定义轴旋转deg为角度（了解即可）

备注

transform:rotate3d(x, y, z, deg)：沿着自定义轴旋转deg为角度（了解即可） xyz是表示旋转轴的矢量，是标示你是否希望沿着该抽旋转，最后一个标示旋转的角度。

3D呈现transfrom-style

  • 控制子元素是否开启三维立体环境。
  • transform-style:flat子元素不开启3d立体空间默认的
  • transform-style:preserve-3d;子元素开启立体空间
  • 代码写给父级，但是影响的是子盒子
  • 这个属性很重要，后面必用

浏览器私有前缀

浏览器私有前缀是为了兼容老版本的写法，比较新版本的浏览器无须添加。

1.私有前缀

  • -moz-：代表firefox浏览器私有属性
  • -ms-：代表ie浏览器私有属性
  • -webkit-：代表safari、chrome私有属性
  • -o-：代表Opera私有属性

移动WEB开发

视口

理想视口 （ideal viewport）

  • 为了使网站在移动端有最理想的浏览和阅读宽度而设定
  • 理想视口，对设备来讲进，是最理想的视口尺寸
  • 需要手动添与meta视口标签通知浏览器操作
  • meta视口标签的主要自的：布局视口的宽度应该与理想视口的宽度一致，简单理解就是设备有多宽，我们布局的视口就多宽

总结

  • 视口就是浏览器显示页面内容的屏幕区域
  • 视口分为布局视口、视觉视口和理想视口
  • 我们移动端布局想要的是理想视口就是手机屏幕有多宽，我的布局视现口就有多宽
  • 想要理想视口，我们需要给我们的移动端面添加meta视口标签

meta 视口标签

<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
属性说明
width宽度设置的是viewport宽度，可以设置device-width特殊值
initial-scale初始缩放比，大于0的数字
minimum-scale最小缩放比，大于0的数字
maximum-scale最大缩放比，大于0的数字
user-scalable用户是否可以缩放，yes或no（1或0）

物理像素&物理像素比

  • 物理像素点指的是屏幕显示的最小颗粒，是物理真实存在的。这是厂商在出厂时就设置好了，比如苹果6178是750*1334

  • 我们开发的时候的1px不是一定等于1个物理像素的

  • PC端页面，1个px等于1个物理像素的，但是移动端就不尽相同

  • 一个px的能显示的物理像素点的个数，称为物理像素比或屏幕像素比（很多两倍）

多倍图

  • 对于一张50px*50px的图片，在手机Retina屏中打开，按照刚才的物理像素比会放大倍数，这样会造成图片模糊

  • 在标准的viewport设置中，使用倍图来提高图片质量，解决在高清设备中的模糊问题

  • 通常使用二倍图，因为iPhone678的影响，但是现在还存在3倍图4倍图的情况，这个看实际开发公司需求

  • 背景图片注意缩放可题

CSS初始化 normalize.css

移动端CSS初始化推荐使用normalize.css/

  • Normalize.css：保护了有价值的默认值

  • Normalize.css：修复了浏览器的bug

  • Normalize.css：是模块化的

  • Normalize.css：拥有详细的文档

    官网地址：http://necolas.github.io/normalize.css/

特殊样式

/*cSs3盒子模型*/
box-sizing:border-box;
-webkit-box-sizing:border-box;
/*点击高亮我们需要清除清除设置为transparent完成透明*/
-webkit-tap-highlight-color:transparent;
/*在移动端浏览器默认的外观在iOS上加上这个属性才能给按钮和输入框自定义样式*/
-webkit-appearance:none;
/*禁用长按页面时的弹出菜单*/
img,a-webkit-touch-callout:none;}

移动端技术选型

移动端布局和以前我们学习的PC端有所区别：

1.单独制作移动端页面（主流）

  • 流式布局（百分比布局）
  • flex弹性布局（强烈推荐）
  • less+rem+媒体查询布局
  • 混合布局

2.响应式页面兼容移动端（其次）

  • 媒体查询

  • bootstarp

流式布局

  • 流式布局，就是百分比布局，也称非固定像素布局。

  • 通过盒子的宽度设置成百分比来根据屏幕的宽度来进行伸宿，不受固定像素的限制，内容向两侧填充

  • 流式布局方式是移动web开发使用的比较常见的布局方式

  • max-width最大宽度（max-height最大高度）

  • min-width最小宽度（min-height最小高度）

搜索栏自动适应：

  1. 使用标准流，盒子默认占满容器，设置margin值在左右设置空隙
  2. 使用flex:1

布局原理

flex是flexibleBox的缩写，意为”弹性布局”，用来为盒状模型提供最大的灵活性，任何一个容器都可以指定为flex布局。 当我们为父盒子设为flex布局以后，子元素的float、clear和vertical-align属性将失效。伸缩布局=弹性布局=伸缩盒布局=弹性盒布局=fex布局

采用Flex布局的元素，称为Flex容器（flexcontainer），简称”容器”。它的所有子元素自动成为容器成员，称为Flex项目（flexitem），简称”项目”。

  • 体验中div就是flex父容器
  • 体验中span就是子容器flex项目
  • 子容器可以横向排列也可以纵向排列

备注

总结flex布局原理： 就是通过给交盒子添加用ex属性，来控制子盒子的位置和排列方式

常见父项属性

  • flex-direction：设置主轴的方向
  • justify-content：设置主轴上的子元素排列方式
  • flex-wrap：设置子元素是否换行
  • align-content：设置侧轴上的子元素的排列方式（多行）
  • align-items：设置侧轴上的子元素排列方式（单行）
  • flex-flow：复合属性，相当于同时设置了flex-direction和flex-wrap

flex-direction设置主轴的方向

主轴与侧轴 在flex布局中，是分为主轴和侧轴两个方向，同样的叫法有：行和列、x轴和y轴

  • 默认主轴方向就是×轴方向，水平向右

  • 默认侧轴方向就是V轴方向，水平向下

属性值：

flex-direction属性决定主轴的方向（即项目的排列方向）

主轴和侧轴是会变化的，就看flex-direction设置谁为主轴，剩下的就是侧轴。而我们的子元素是跟看主轴来排列的

属性值描述
row默认值，从左到右
row-reserve从右到左
column从上到下
column-reserve从下到上

justify-content 设置主轴上的子元素排列方式

justify-content属性定义了项目在主轴上的对齐方式

注意：使用这个属性之前一定要确定好主轴是哪个

属性值描述
flex-start默认值从头部开始如果主轴是x轴，则从左到右
flex-end从尾部开始排列
center在主轴居中对齐（如果主轴是x轴则水平居中）
space-around平分剩余空间
space-between先两边贴边再平分剩余空间（重要）

flex-wrap设置子元素是否换行

默认情况下，项目都排在一条线（又称”轴线”）上。flex-wrap属性定义，flex布局中默认是不换行的。

属性值说明
nowrap默认，不换行
wrap换行

align-items设置侧轴上的子元素排列方式（单行）

该属性是控制子项在侧轴（默认是y轴）上的排列方式在子项为单项的时候使用

属性值描述
flex-start从下到上
flex-end从下到上
center挤在一起居中
stretch拉伸（默认值）【盒子不给高度】

align-content设置侧轴上的子元素的排列方式（多行）

设置子项在侧轴上的排列方式并且只能用于子项出现换行的情况（多行），在单行下是没有效果的。

属性值说明
flex-start默认值在侧轴的头部开始排列
flex-end在侧轴的尾部开始排列
center在侧轴中间显示
space-around子项在侧轴平分剩余空间
space-between子项在侧轴先分布在两头，再平分剩余空间
stretch设置子项元素高度平分父元素高度

align-content和align-items区别

  • align-items适用于单行情况下，只有上对齐、下对齐、居中和拉伸
  • align-content适应于换行（多行）的情况下（单行情况下无效），可以设置上对齐、下对齐、居中、拉伸以及平均分配剩余空间等属性值。
  • 总结就是单行找align-items多行找align-content

flex-flow

flex-flow属性是flex-direction和flex-wrap属性的复合属性

flex-flow:rowwrap;
  • flex-direction：设置主轴的方向
  • justify-content：设置生轴上的子元素排列方式
  • flex-wrap：设置子元素是否换行
  • align-content：设置侧轴上的子元素的排列方式（多行）
  • align-items：设置侧轴上的子元素排列方式（单行）
  • flex-flow：复合属性，相当于同时设置了flex-direction和flex-wrap

flex布局子项常见属性

  • flex子项目占的份数

  • align-self控制子项自己在侧轴的排列方获

  • order属性定义子项的排列顺序（前后顺序）

flex属性

flex属性定义子项目分配剩余空间，用flex来表示占多少份数

.item{flex:<number>;}/*defaulto*/

align-self控制子项自已在侧轴上的排列方式

align-self属性允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性 默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch

span:nth-child(2){
/*设置自己在侧轴上的排列方式*/ 
align-self:flex-end;
}

order属性定义项目的排列顺序

数值越小，排列越靠前，默认为0

注意：和z-index不一样。

rem单位

rem(rootem)是一个相对单位，类似于em，em是父元素字体大小。不同的是rem的基准是相对于html元素的字体大小。 比如，根元素（html）设置fdnt-size=12px;非根元素设置width2rem;则换成px表示就是24px。

媒体查询

媒体查询（MediaQuery）是CSS3新语法。

  • 使用@media查询，可以针对不同的媒体类型定义不同的样式
  • @media可以针对不同的屏幕尺寸设置不同的样式
  • 当你重置浏览器大尔的过程中，页面也会根据浏览器的宽度和高度重新渣染页面
  • 目前针对很多苹果手机、Android手机，平板等设备都用得到多媒体查询

语法规范

@media mediatype and | not | only(mediafeature){
	css-Code;
}
  • 用media开头注意@符号
  • mediatype媒体类型
  • 关键字and not only
  • media feature媒体特性必须有小括号包含

mediatype 查询类型

将不同的终端设备划分成不同的类型，称为媒体类型

值说明
all用于所有设备
print用于打印机和打印预览
scree用于电脑屏幕，平板电脑，智能手机等

关键字

关键字将媒体类型或多个媒体特性接到一起做为媒体查询的条件。

  • and：可以将多入媒体特性连接到一起，相当于“且”的意思。

  • not：排除某个媒体类型，相当于“非”的意思，可以省略

  • only：指定某入特定的媒体类型，可以省略。

媒体特性

每种媒体类型都具体各自不同的特性，根据不同媒体类型的媒体特性设置不同的展示风格。我们暂且了解三个。注意他们要加小括号包含

值描述
width定义输出设备中页面可见区域的宽度
min-width定义输出设备中页面最小可见区域宽度
max-width定义输出设备中页面最大可见区域宽度
/*这句话的意思就是：在我屏幕上并目最大的宽度是899像素设置我们想要的样式*/
max-width小于等于8oo*/
@media screen and (max-width:800px){

}

媒体查询+rem实现元素动态大小变化

rem单位是跟看htm来走的，有了rem页面元素可以设置不同大小尺寸媒体查询可以根据不同设备宽度来修改样式 媒体查询+rem就可以实现不同设备宽度，实现页面元素大小的动态变化

引入资源（理解）

当样式比较繁多的时候，我们可以针对不同的媒体使用不同stylesheets（样式表）。原理，就是直接在link中判断设备的尺寸，然后引用不同的css文件。

语法规范

<linkrel="stylesheet" media="media type and | not | only (mediafeature)" href="mystylesheet.css">

rem适配方案技术使用（市场主流）

技术方案1

  • less

  • 媒体查询

  • rem

    技术方案2（推荐）

  • flexiblejs

  • rem

总结： 1.两种方案现在都存在。 2.方案2更简单，现阶段大家无需了解里面的is代码。

rem实际开发适配方案1

动态设置html标签font-size大小

  1. 假设设计稿是750px?
  2. 假设我们把整个屏幕划分为15等份（划分标准不一可以是20份也可以是10等份）
  3. 每一份作为html字体大小，这重就是50px?
  4. 那么在320px设备的时候，字体大小为320/15就是21.33px
  5. 用我们质面完素的大小除以不同的html学体大小会发现他们比例还是相同的
  6. 比如我们以750为标准设计稿?
  7. 一个100*100像素的页面元素在750屏幕下，就是100/50转换为rem是2rem*2rem比例是1比1
  8. 320屏幕下，html字体大小为21.33则2rem=42.66px此时宽和高都是42.66但是宽和高的比例还是1比1
  9. 但是已经能实现不同屏幕下页面元素盒子等比例缩循放的效果

简洁高效的rem适配方案flexible.js

手机淘宝团队出的简洁高效移动端适配库 我们再也不需要在写不同屏幕的媒体查询，因为里面s做了处理 它的原理是把当前设备划分为10等份，但是不同设备下，比例还是一致的。我们要做的，就是确定好我们当前设备的html文字大小就可以了 比如当前设计稿是750px，那么我们只需要把html文字大小设置为75px(750px/10)就可以 重面页面元素rem值：页面元素的px值/75 剩余的，让flexible.js来去算

github地t址：https://github.com/amfe/lib-flexible

vw/vh

目标：能够使用vW单位设置网页元素的尺寸

  • 相对单位
  • 相对视口的尺寸计算结果
  • vw: viewport width 1vW=1/100视口宽度
  • vh: viewport height 1vh=1/100视口高度

备注

思考：开发中，会不会vw和h混用呢？不会。 vh是1/100视口高度，全面屏视口高度尺寸大，如果混用可能会导致盒子变形。

vw/vh和vmin/vmax

vmin可以照顾手机端横屏和竖屏的显示效果

备注

vh和vm与视口的高度和宽度有关 1vW就是视口的宽度的1%

备注

vmin和vmax是与当下屏幕的宽度和高度的最大值或最小值有关取决于哪个更大和更小

简化开发：

Swiper中文网-轮播图幻灯片js插件,H5页面前端开发

Bootstrap简化开发

MLuYao/lib-flexible: 可伸缩布局方案o

只需书写 HTML 代码，无需书写 CSS，即可快速构建美观的网站。

https://www.tailwindcss.cn/

本 CSS 框架本质上是一个工具集，包含了大量类似 flex、 pt-4、 text-center 以及 rotate-90 等工具类，可以组合使用并直接在 HTML 代码上实现任何 UI 设计。

CSS变量

🧩 一、什么是 CSS 变量？

CSS 变量是带有 -- 前缀的变量名，通常定义在 :root（全局作用域）中，用 var(--变量名) 调用。

✅ 定义变量：

:root {
  --main-color: #3498db;
  --padding: 16px;
  --font-size: 18px;
}

✅ 使用变量：

.button {
  background-color: var(--main-color);
  padding: var(--padding);
  font-size: var(--font-size);
}

🌓 三、动态切换主题（Bonus）

你可以定义两个主题变量集，比如：

:root {
  --bg: white;
  --text: black;
}

.dark-theme {
  --bg: black;
  --text: white;
}

然后通过 JS 切换：

document.body.classList.toggle('dark-theme');

🎯 一、CSS 变量作用域简介

CSS 变量的作用域是 “在哪些元素中可以使用这个变量” 的意思。它遵循和普通 CSS 属性类似的规则 —— 继承（cascade）+ 层级（scope）。

🧩 二、变量定义的位置决定作用范围

1. 全局变量（常见方式）：

在 :root 定义，所有元素都能使用。

:root {
  --main-color: #3498db;
}

h1 {
  color: var(--main-color); /* ✅ 有效 */
}

🔹 :root 是 HTML 的根元素（等同于 html 标签），在这里定义的变量是全局有效的。

2. 局部变量（限定在某个选择器内）：

.container {
  --main-color: red;
}

.title {
  color: var(--main-color); /* ❌ 无效（除非 .title 是 .container 的子元素） */
}

🔹 只有 .container 内的元素（包括 .container 本身和其后代）才能用它定义的变量。

3. 变量是可以继承的（只要定义在上级元素）：

.box {
  --text-color: green;
}

.box p {
  color: var(--text-color); /* ✅ 有效：p 是 box 的子元素 */
}
选择器类型优先级表示示例说明
内联样式（inline style）(1, 0, 0, 0)<div style="color:red">最高优先级
ID选择器(0, 1, 0, 0)#header优先级高于类和标签
类、伪类、属性选择器(0, 0, 1, 0).menu, :hover, [type="text"]中等优先级
元素选择器、伪元素(0, 0, 0, 1)div, p, ::before最低优先级
通配符、组合符、继承(0, 0, 0, 0)*, +, >, ~, （空格）不影响优先级

什么是 ::deep

在CSS中，::deep 是一个深度选择器（也叫穿透选择器），它的作用是穿透组件的样式隔离，让你能够修改子组件或深层嵌套元素的样式。

::deep 允许父组件的样式规则影响到子组件内部的元素，打破了CSS模块化或scoped样式的封装边界。

语法格式

css

css
/* Vue 3 中的写法 */
:deep(.child-class) {
  color: red;
}

/* 或者使用 ::deep */
::deep(.child-class) {
  color: red;
}

主要应用场景

1. Vue组件中修改子组件样式

<template>
  <div class="parent">
    <ChildComponent />
  </div>
</template>

<style scoped>
/* 普通写法无法影响子组件 */
.child-element {
  color: blue; /* 不会生效 */
}

/* 使用 deep 可以穿透到子组件 */
:deep(.child-element) {
  color: blue; /* 会生效 */
}
</style>

现代化CSS学习

Tailwind.md

CSS技巧.md

CSS技巧2.md

CSS技巧3.md

CSS技巧4.md

CSS现代选择器.md

CSS指令.md

CSS嵌套取代Sass&Less.md

评论

评论加载中……