CSS & CSS3

L小Ray想有腮

已于 2022-05-24 11:03:23 修改

阅读量1.3k

点赞数 1

分类专栏： HTML 与 CSS 文章标签： css css3

于 2020-11-13 13:02:51 首次发布

本文链接：https://blog.csdn.net/weixin_42480750/article/details/109607638

版权

HTML 与 CSS 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

一、基础

CSS 与文档流

CSS 全称为 Cascading Style Sheets，层叠样式表。
网页实际上是一个多层的结构，通过 CSS 可以分别为网页的每一个层来设置样式，而最终我们能 看到只是网页的最上边一层。
这些层中，最底下的一层称为文档流，文档流是网页的基础，我们所创建的元素默认都是在文档流中进行排列。
对于我们来元素主要有两个状态：在文档流中的和不在文档流中的（脱离文档流）。

元素在文档流中有什么特点

对比项	块级元素	行级元素
场景	主要对页面进行布局	主要用来包裹文字
空间	块元素会在页面中独占一行（自上向下垂直排列）	行内元素与其它行内元素共占一行（自左向右水平排列并会自动换行）
宽高	可控，默认铺满整行	不可控，只占自身的大小
默认宽度	父元素的全部（会把父元素撑满）	被内容撑开
默认高度	被内容撑开（子元素）	被内容撑开
互转	`<p style="display:inline"></p>`	`<span style="display:block"></span>`

1.1 引用

优先级：外部样式 < 内部样式 < 内联样式

行间(内联)样式：直接在标签上书写样式

	<div>行间样式测试</div>
	<div style="color: olive;width: 100px;border: 1px solid blue;">行间样式测试</div>

内部样式：放置在头部中

<head>
	<style type="text/css">
		p{
			background-color: #eeeeee;
			font-size: 18px;
			font-style: italic;
		}
	</style>
</head>
<body>
	<p>内部样式测试</p>
</body>

外部样式

<!-- style.html -->
<head>
	<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
	<span>外部样式测试</span>
</body>

<!-- style.css -->
span {
	font-size: 15px;
	color: rgba(65, 206, 110, 0.79);
}

导入外部样式：先创建一个CSS文件，再在style标签中用import导入。

<!-- style.html -->
<head>
	<style type="text/css">
		@import "style.css"
	</style>
</head>
<body>
	<div>导入外部样式测试</div>
	<span class="box">导入外部样式测试</span>
</body>

<!-- style.css -->
.box {
	font-weight: bold;
	font-size: 16px;
}

外部样式和导入外部样式的区别

对比项	外部样式	导入外部样式
加载范围	link是XHTML标签，除了加载CSS外，还可以定义RSS等其它事务	@import属于CSS范畴，只能加载CSS
加载时机	在页面载入时同时加载	页面完全载入以后加载
兼容问题	HTML标签，无兼容问题	@import是在CSS2.1提出的，低版本的浏览器不支持
JS交互	link支持使用Javascript控制DOM去改变样式	@import不支持

1.2 单位

长度单位

单位	说明
像素	屏幕实际上是由一个一个的小点点（1px）构成，不同屏幕的像素大小是不同的，像素越小的屏幕显示的效果越清晰。
百分比	相对于其父元素属性的百分比，设置百分比可以使子元素跟随父元素的改变而改变。
em	相对于元素的字体大小来计算的，`1em = 1 font-size`，em会根据字体大小的改变而改变。
rem	相对于根元素的字体大小来计算的

颜色单位

单位	说明
RGB值	通过三种颜色的不同浓度来调配出不同的颜色，每一种颜色的范围在 0 - 255 (0% - 100%) 之间。
RGBA	就是在rgb的基础上增加了一个a表示不透明度，1表示完全不透明 0表示完全透明 .5半透明。
十六进制的RGB值	语法：#红绿蓝，颜色浓度通过 00-ff；如果颜色两位两位重复可以进行简写 #aabbcc --> #abc。
HSL值 & HSLA值	H 色相(0 - 360)；S 饱和度，颜色的浓度 0% - 100%；L 亮度，颜色的亮度 0% - 100%；A 不透明度。

在这里插入图片描述

1.3 字体

属性

列表中展示的属性值仅为举例，完整列表请参考 Zeal或 W3C。

属性	说明	设置
font-size	字号	`10px` 固定值尺寸像素、`75%` 基于包含块字号的百分比
font-family	字体	`"Segoe UI",Tahoma,sans-serif` 从左到右依次匹配第一个浏览器支持的字体，否则使用默认
font-style	样式	normal：正常、italic：斜体（特殊字体使用 oblique 元素强制使其倾斜）
font-weight	加粗	lighter、normal、bold、bolder
font-variant	变体	`small-caps` 字母大写但大小比常规的要小
color	颜色	通过颜色单位指定

复合属性

语法 font: [font-style] [font-variant] [font-weight] font-size[/line-height] font-family;
实例 font: italic small-caps bolder 18px/1.5 宋体;
顺序不可颠倒，font-size和 font-family必填

font-face

当有特殊的字体效果渲染需求，浏览器已有字体不能满足时，可以自定义字体。
通过 font-face将服务器中的字体直接提供给用户去使用：

@font-face {
     /* 指定字体的名字 */
    font-family:'myfont' ;
    /* 服务器中字体的路径 */
    src: url('./font/ZCOOLKuaiLe-Regular.ttf') format("truetype");
}

定义后的字体可以直接通过 font-family进行引用：

p{
    font-family: myfont,sans-serif;
}

1.4 文本

属性	说明	设置
line-height	行高	`10px` 固定值尺寸像素、`1.5` 字体大小的倍数
text-decration	修饰	underline(下划线)、line-through(贯穿线)、overline(上划线)
text-align	水平对齐	left、center、right、justify（两端对齐）
vertical-align	垂直对齐	baseline（基线对齐）、top、bottom、middle
text-tansform	转换	capitalize(单词首字母大写)、uppercase(全部大写)、lowercase(全部小写)
text-indent	缩进	`10px` 首行缩进10个像素、`2em` 首行缩进2个字符
text-shadow	阴影	`2px 3px 5px #bfa` 水平偏移距离垂直偏移距离 [模糊距离] [颜色]
word-wrap	换行	`normal \| breakword` 单词不拆分直到下个换行、自动拆分换行

white-space: normal | nowarp | pre 设置网页如何处理空白：正常 | 不换行 | 保持原有格式（不处理换行和空格）

在这里插入图片描述

单词拆分

word-break	说明
normal	使用浏览器默认的换行规则
break-all	允许在单词内换行
keep-all	只能在半角空格或连字符处换行

	<p class="normal">This is a veeeeeeeeeeeeeery long word.</p>
	<p class="break">This is a veeeeeeeeeeeeeery long word.</p>
	<p class="keep">This is a veeeeeeeeeeeeee-ry long word.</p>

在这里插入图片描述

文本溢出：text-overflow: clip（修剪文本）| ellipsis（显示省略号来代表被修剪的文本）

	<style>
        p {
			width: 200px;
			border: 1px solid #bfa;
            margin-left: 100px;
            white-space: nowrap;
            overflow: hidden;
		}
        .clip {
			text-overflow: clip;
        }
        .ellipsis {
            text-overflow: ellipsis;
        }
    </style>
    
    <p class="clip">用于匹配父元素中兄弟子元素，可以用于子元素非连续的情况用于匹配父元素中兄弟子元素，可以用于子元素非连续的情况</p>
	<p class="ellipsis">用于匹配父元素中兄弟子元素，可以用于子元素非连续的情况用于匹配父元素中兄弟子元素，可以用于子元素非连续的情况</p>

在这里插入图片描述

1.5 背景

属性	说明
background-color	设置背景颜色 transparent/color
background-image	设置背景图片 url(‘./img/some.png’)
background-repeat	背景图像铺排方式 repeat(默认)/no-repeat/repeat-x/repeat-y

background-position 用来设置背景图片的位置

用两个表示方位的词 top | left | right | bottom | center 来设置背景图片的位置，如果只写一个则第二个默认是 center。
也通过偏移量来指定背景图片的位置：-50px 300px。

设置背景的范围

background-clip 用来规定背景（包含背景图像和背景色）的绘制区域，background-origin 设置背景图像的起始位置，这两个属性的取值相同；
border-box：background-clip 的默认值，用来指示背景会覆盖到边框下面；
padding-box：background-origin 的默认值，用来指示背景只会覆盖到内边距；
content-box：用来指示背景仅会覆盖到内容区；

background-size 设置背景图片的大小

可以 230px 1500px 特别指定宽高，也可以只指定一个则另一个会自动根据原图片比例进行调整；
cover：图片的比例不变，将元素铺满（图片可以能展示不全）；
contain：图片比例不变，将图片在元素中完整显示（背景可能铺不满）；

background-attachment 背景图片是否跟随元素移动

scroll 默认值，背景图片会跟随元素移动。
fixed 背景会固定在页面中，不会随元素移动。

复合属性

所有背景相关的样式都可以通过 background 来设置并且该样式没有顺序要求，也没有哪个属性是必须写的；
background-size必须写在 background-position的后边，并且使用/隔开 background-position/background-size；
background-origin、background-clip 两个样式，orgin 要在 clip的前边；

1.6 边框

属性	说明
border-radius	设置边框角的弧度，可以通过 border-`top-left \| top-rigth \| bottom-left \| bottom-right`-radius 分别设置
box-shadow	设置边框的阴影，`水平偏移距离垂直偏移距离 [模糊距离] [阴影的尺寸] [颜色]` 举例 `2px 2px 2px 1px rgba(0, 0, 0, 0.2)`
border-image	设置边框的图片，`图片向内偏移距离宽度图像区域超出边框的距离重复效果`

1.7 渐变

简介

通过渐变可以设置一些复杂的背景颜色，可以实现从一个颜色向其他颜色过渡的效果
渐变是图片，需要通过 background-image来设置
线性渐变颜色沿着一条直线发生变化，径向渐变则呈现放射性的效果

linear-gradient: [direction], color1 [positions], [position,] color2 [positions] (, ..., [position,] colorN [positions])

direction 可以通过 to top | right | bottom | left 或其组合的方式 to top left 来指定，也可以通过 45deg 角度或 .25turn 圈数来指定
position 指的是每种颜色发生渐变的范围：哪个位置开始渐变、哪个位置到达两种颜色渐变的中部、哪个位置结束渐变
background-image: linear-gradient(45deg, orange 0% 10%, 30%, #bfa 50% 60%, 75%, purple 90% 100%);
从左下角到右上角，0-10%保持 orange纯色，10%-50%发生 orange->#bfa渐变并在 30%处到达中值，接着 50%-60%保持 #bfa纯色，60%-90%发生 #bfa->purple渐变并在 75%处到达中值，最后 90%-100%保持 purple纯色
还可以通过 repeating-linear-gradient 设定重复排列的线性渐变

radial-gradient: [size] [at position,] color1 position1, color2 position2 [, ..., colorN positionN]

size 可以通过 circle | ellipse 形状或 closest-side | closest-corner | farthest-side | farthest-corner 渐变到边界来指定，也可以直接通过长度单位来指定
position 则是通过 to top | right | bottom | left 或其组合的方式 to top left 来指定
background-image: radial-gradient(200px 200px at top left, yellow , rgba(130, 165, 249, 0.497));
从左上角的位置渐变出一个半径为 200px的圆
同样的，还可以通过 repeating-radial-gradient 设定重复排列的径向渐变

1.8 默认样式

浏览器都会为元素设置一些默认样式，其存在会影响到页面的布局，通常情况下需要清除或统一。

reset.css 直接去除了浏览器的默认样式
normalize.css 对默认样式进行了统一

二、选择器

2.1 样式选择器

分类

选择器	说明
*	用来匹配所有的标签
标签选择器	针对指定的标签
类选择器	用来选择class命名的标签
id选择器	用来选择用id命名的标签
派出选择器	根据上下文确定要选择的标签

<body>
	<p>全匹配：p标签</p>
	<strong>全匹配：strong标签</strong>
	<span>标签匹配：span标签</span>
	<div class="wrapper">类匹配：div标签</div>
	<p id="content">id匹配：p标签</p>
	<ul>
		<li>li01</li>
		<li>li01</li>
	</ul>
	<ul class="list">
		<li>li02</li>
		<li>li02</li>
	</ul>
</body>

/* 1. * */
* {
	color: red;
}
/* 2. 标签选择器 */
span {
	display: block;
	margin-right: 20px;
	border: 1px solid gray;
}
/* 3. 类选择器 */
.wrapper {
	color: aqua;
}
/* 4. id选择器 */
#content {
	color: pink;
}
/* 5. 派出选择器：类list下的li标签 */
.list li {
	color: blue;
}

分组：让多个选择器(元素)具有相同的样式，一般用于设置公共样式。

<body>
	<h1>h1</h1>
	<div class="box">class box</div>
	<p>p</p>
</body>

h1, .box, p {
	color: red;
}
p {
	width: 100px;
	background-color: #999999;
}

继承与覆写

<body>
	<div class="extend">这是一段<span>继承测试</span></div>
	<div class="override">这是一段<span>覆写测试</span></div>
</body>

.extend {
	font-size: 28px;
}

.extend span {
	font-weight: bold;
}
.override {
	color: red;
}

.override span {
	color: blue;
}

优先级

样式	权重
!important	10000
内联样式	1000
id选择器	100
类、伪类选择器	10
标签选择器	1

<head>
	<link rel="stylesheet" type="text/css" href="style.css">
	<style type="text/css">
		p {
			color: blue;
		}
		strong {
			color: blue!important;
		}
	</style>
</head>
<body>
	<strong style="color: yellow;">1. !important &gt; 内联样式</strong>
	
	<p style="color: yellow;">2. 内联样式 &gt; 内部样式</p>
	
	<p>3. 内部样式 &gt; 外部样式</p>
	
	<div id="content">
		<div class="main_content">
			<h2>4. 复杂情况需依次累加计算权重</h2>			
		</div>
	</div>
</body>

p {
	color: red;
}

/* 复杂情况下的优先级判断 */
#content div.main_content h2 {
	/* 权重：100+1+10+1=112 */
	color: red;
}

#content .main_content h2 {
	/* 权重：100+10+1=111 */
	color: blue;
}

2.2 伪类选择器

伪类：专门用来表示元素的一种特殊状态

伪类选择器	说明
a:link	未访问状态
a:visited	已访问状态
a:hover	鼠标悬停状态
a:active	用户激活（单击）
input:disabled	表单禁用时触发样式
input:enabled	表单启用时触发样式
input:checked	表单勾选时触发样式
input:focus	表单获得焦点时触发样式
:first-child	第一个子元素
:last-child	倒数第一个子元素
:nth-child(n)	正数第N个子元素
:nth-last-child(n)	倒数第N个子元素
:nth-child(2n)	偶数
:nth-of-type(n)	匹配父元素中兄弟子元素，可以用于子元素非连续的情况
:nth-last-of-type(n)	倒数
:only-child	父元素中仅有它一个子元素（不允许其它元素存在）
:only-of-type	父元素中仅有它一个这样类型的子元素（不允许同类型元素出现）
:empty	没有元素，包含文本元素，即查找空元素

<body>
	<a href="#">多变的伪类选择器</a>
	<input type="text">
	<ul>
		<li>aaa</li>
		<li>bbb</li>
		<li>ccc</li>
	</ul>
</body>

a:hover {
	color: yellow;
}
input:focus {
	outline: 1px solid #f00;
}
ul li:first-child {
	color: red;
}
ul li:nth-child(2) {
	color: green;
}
ul li:last-child {
	color: blue;
}

2.3 属性选择器

写法	说明
属性名	包含有指定属性名的元素
属性名=值	属性名的值为指定值的元素
属性名~=值	属性名的值包含指定值的元素
属性名^=值	属性名以指定值开头的元素
属性名$=值	属性名以指定值结尾的元素

<body>
	<div class="content" title="内容">content0</div>
	<div class="content">content1</div>
	<form>
		<input type="text" name="account">
		<input type="text" name="usr">
	</form>
	<div class="box public">public</div>
	<div class="box private">private</div>
</body>

div.content[title] {
	font-weight: bolder;
}
input[name=usr] {
	background-color: #eee;
}
div[class~=public] {
	font-size: 30px;
}

2.4 关系选择器

选择器	说明
空格	后代选择器
>	只选择儿子元素
+	只选择兄弟元素

<body>
	<h1>
		<strong>关系1</strong>
		<span>
			<strong>关系2</strong>
		</span>
	</h1>
	<ul>
		<li>aaa</li>
		<li>bbb</li>
		<li>ccc</li>
	</ul>
</body>

/* 后代选择器 */
h1 strong {
	color: red;
}
/* 儿子选择器 */
h1>strong {
	background-color: black;
}
/* 兄弟选择器 */
ul li+li {
	list-style-type: none;
	color: red;
}

2.5 伪元素选择器

伪元素与伪类的区别

css引入伪类和伪元素概念是为了 格式化文档树以外的信息。
伪类用于当已有元素处于某个状态时，为其添加对应的样式，这个状态是根据用户行为而动态改变的。它只有处于dom树无法描述的状态时才能为元素添加样式，所以将其称为伪类。
伪元素用于创建一些不在文档树中的元素，并为其添加样式。比如说，我们可以通过 ::before 来在一个元素前增加一些文本，并为这些文本添加样式。虽然用户可以看到这些文本，但是这些文本实际上不存在于文档树中。

伪类和伪元素的特点

伪元素和伪类都不会出现在源文档或文档树中；
伪类允许出现在选择器的任何位置，而一个伪元素只能跟在选择器的最后一个简单选择器后面；
伪元素名和伪类名都是大小写不敏感的
有些伪类是互斥的，而其它的可以同时用在一个元素上。（在规则冲突的情况下，常规层叠顺序决定结果）

伪元素的使用

伪元素	说明
::before	在元素之前添加内容
::after	在元素之前添加内容
::first-letter	在元素第一个字母前添加内容
::first-line	在元素第一行前添加内容
::selection
::placeholder
::backdrop

<body>
	<p>伪类用于当已有元素处于某个状态时，为其添加对应的样式，这个状态是根据用户行为而动态改变的。它只有处于dom树无法描述的状态时才能为元素添加样式，所以将其称为伪类。</p>
</body>

p::before {
	content: "Today is a good day!"
}
p::first-letter {
	font-size: 30px;
	font-family: 黑体;
	color: blue;
}
p::first-line {
	text-decoration: underline;
}
p::after {
	content: ".....";
}

三、盒子模型

一个页面中，应该使用浮动来完成整体的布局，在局部内通过定位来调整布局。
简介

CSS 将页面中的所有元素都设置为了一个矩形的盒子，每个盒子由 margin（外边距），border（边框线），padding（内边距）和 content（内容）组成。
将元素设置为矩形的盒子后，对页面的布局就变成将不同的盒子摆放到不同的位置。

在这里插入图片描述

display 属性：用来设置元素的显示方式

属性值	说明
none	不显示元素
block	块显示，在元素前后设置换行符，将行级标签转换为块级标签
inline	行显示，将块级标签转换为行级标签
inline-block	将块级或行级标签转换为行内块级标签

visibility 属性：用来设置元素的显示状态

属性值	说明
visible	默认值，元素在页面中正常显示
hidden	元素在页面中隐藏不显示，但是依然占据页面的位置

box-shadow 属性：用来设置元素的阴影效果，阴影不会影响页面布局

属性值	说明
第一个值	水平偏移量设置阴影的水平位置正值向右移动负值向左移动
第二个值	垂直偏移量设置阴影的水平位置正值向下移动负值向上移动
第三个值	阴影的模糊半径
第四个值	阴影的颜色

box-sizing 属性：设定盒子宽高属性生效的范围

  div {
    width: 100px;
    height: 100px;
    padding: 5px;
    border: 7px solid #fff;
    margin: 10px;
    // box-sizing: xxx;
  }

content-box（默认值）：宽高 = 内容区的宽高
border-box：宽高 = 内容区 + 内边距 + 边框的宽高

3.1 组成

内容区：元素中的所有的子元素和文本内容都在内容区中排列，大小由 width 和 height 决定

.box1{
  width: 200px;
  height: 200px;
  background-color: #bfa;
}

边框：属于盒子边缘，其大小会影响到整个盒子的大小

常用的有三个属性 style|width|color 如 border: 10px red solid；
可以通过如 border-color: red 分别指定，也可以通过 top|right|bottom|left 指定每边如 border-left: 10px red solid，甚至可以通过如 border-left-width: 10px 精细到每边的每种属性；
还可以通过如 border-radius: length|% 为盒子设置圆角，更精细化的设置方式是 border-(top-left|top-right|bottom-right|bottom-left)-radius；
outline 用来设置元素的轮廓线，用法和border一模一样，轮廓和边框不同的点，就是轮廓不会影响到可见框的大小；
盒子有四边和四角，书写样式时会触发简写模式，如 border-width: 10px 30px 表示上下边10px、左右边30px；

传值	边	角
四个值	(上、右、下、左)	(左上、右上、右下、左下)
三个值	(上、左右、下)	(左上、右上/左下、右下)
两个值	(上下、左右)	(左上/右下、右上/左下)
一个值	(上下左右)	(左上/右下/右上/左下)

内边距：内容区和边框之间的距离

一共有四个方向的内边距：padding-top|right|bottom|left；
内边距的设置会影响到盒子的大小，背景颜色会延伸到内边距上；
盒子的可见框大小由内容区、内边距和边框共同决定；
内边距的简写属性规则和 border-width 一样；

外边距：边框之外的距离，默认为8px

不会影响盒子可见框的大小，但是会影响盒子的位置和盒子的实际占用空间
共有四个方向的外边距（可以设置负值即往相反的方向移动）：

方向	说明
margin-top	上外边距，设置一个正值，元素会向下移动
margin-right	默认情况下不会产生任何效果
margin-bottom	下外边距，设置一个正值，其下边的元素会向下移动
margin-left	左外边距，设置一个正值，元素会向右移动

元素在页面中是按照自左向右的顺序排列的，所以默认情况下如果我们设置的左和上外边距则会移动元素自身，而设置下和右外边距会移动其他元素；
简写方式和规则和 border-width 一样；

行内元素的盒模型

行内元素不支持设置宽度和高度
行内元素可以设置 padding，但是垂直方向 padding 不会影响页面的布局
行内元素可以设置 border，但是垂直方向 border 不会影响页面的布局
行内元素可以设置 margin，但是垂直方向 margin 不会影响页面的布局

.s1{
  background-color: yellow;
  width: 100px;
  height: 100px; 
  padding: 50px; 
  border: 20px solid red; 
  margin: 30px;
}

在这里插入图片描述

3.2 元素的布局

水平方向

元素在父元素中水平方向的位置由 margin-left + border-left + padding-left + width + padding-right + border-right + margin-right 共同决定且 和必须等于父元素内容区的宽度。
当等式不成立时浏览器会根据设置的 auto 情况对 width | margin-left | maring-right 进行自动调整，这种行为称为 过渡约束。

auto 场景	说明
无 auto	自动调整 margin-right 值以使等式满足
1 个 auto	自动调整为 auto 的那个值以使等式成立
width: auto	宽度会调整到最大，外边距都是 0
width: XXpx; margin: 0 auto	`元素在其父元素中水平居中`

垂直方向

父元素在没有设置高度时，默认情况下被内容撑开。
子元素是在父元素的内容区中排列的，如果子元素的大小超过了父元素，则子元素会从父元素中溢出。
使用 overflow 属性来设置父元素如何处理溢出的子元素：

属性值	说明
visible	默认值子元素会从父元素中溢出，在父元素外部的位置显示
hidden	溢出内容将会被裁剪不会显示
scroll	生成两个滚动条，通过滚动条来查看完整的内容
auto	根据需要生成滚动条

3.3 垂直外边距的折叠

相邻的垂直方向外边距会发生折叠现象。

兄弟元素

兄弟元素间的相邻垂直外边距会取两者之间的较大值（两者都是正值）。
如果相邻的外边距一正一负，则取两者的和；如果相邻的外边距都是负值，则取两者中绝对值较大的。
兄弟元素之间的外边距的重叠，对于开发是有利的，所以我们不需要进行处理。

父子元素

父子元素间相邻外边距，子元素的会传递给父元素（上外边距），这时外边距的折叠会影响到页面的布局，需要进行处理。
如想要通过设置外边距让子元素与父元素的下边框对齐，可以通过以下方式解决：

<style>
    .outer {
        width: 200px;
        height: 200px;
        background-color: #bfa;
    }
    .outer::before {
        content: '';
        display: table;
    }
    .inner {
        width: 100px;
        height: 100px;
        background-color: orange;
        margin-top: 100px;
    }
</style>

<div class="outer">
  <div class="inner"></div>
</div>

未添加 `::before` 父子同时下移	添加 `::before` 来隔离父子元素以完成布局

四、浮动

4.1 简介

说明

通过 float: none | left | right 属性可以使一个元素向其父元素的左侧或右侧移动。
元素设置浮动以后，会 完全从文档流中脱离，元素下边还在文档流中的元素会自动向上移动，水平布局的等式便不需要强制成立。
浮动的主要作用就是让页面中的元素可以水平排列，以制作一些水平方向的布局。

div {
	font-size: 30px;
	height: 100px;
	width: 100px;
	float: left;
}
.box1 { background-color: #fba; }
.box2 { background-color: aliceblue; }
.box3 { background-color: aquamarine; }

特点

浮动元素会完全脱离文档流，但默认不会从父元素中移出。
浮动元素向左或向右移动时，不会超过它前边的其他浮动元素（依次排列）。
如果浮动元素的上边是一个没有浮动的块元素，则浮动元素无法上移。
浮动元素不会盖住文字，文字会自动环绕在浮动元素的周围，可以利用浮动来设置 文字环绕图片 的效果。
无论块元素或行内元素设置浮动以后都会从文档流中脱离，默认被内容撑开不会独占一行。

4.2 布局

<!-- 创建头部 -->
<header></header>

<!-- 创建网页的主体 -->
<main>
    <!-- 左侧导航 -->
   <nav></nav>

   <!-- 中间的内容 -->
   <article></article>

   <!-- 右边的边栏 -->
   <aside></aside>

</main>

<!-- 网页的底部 -->
<footer></footer>

在这里插入图片描述

header, main, footer{
    width: 1000px;
    margin: 0 auto;
}

/* 设置头部 */
header{
    height: 150px;
    background-color: silver;
}

/* 设置主体 */
main{
    height: 500px;
    margin: 10px auto;
}

nav, article, aside{
    float: left;
    height: 100%;
}

/* 设置左侧的导航 */
nav{
    width: 200px;
    background-color: yellow;
}

/* 设置中间的内容 */
article{
    width: 580px;
    background-color: orange;
    margin: 0 10px;
}

/* 设置右侧的内容 */
aside{
    width: 200px;
    background-color: pink;
}

/* 设置底部 */
footer{
    height: 150px;
    background-color: tomato;
}

4.3 高度塌陷

问题引出

在浮动布局中，父元素的高度默认是被子元素撑开的。
当子元素浮动后，其会完全脱离文档流，将会无法撑起父元素的高度。
父元素高度丢失以后，其下的元素会自动上移，导致页面的布局混乱。

<div class="outer">
    <div class="inner"></div>
</div>

<div class="box3""></div>

.outer {
    border: 10px red solid;
}
.inner {
    width: 100px;
    height: 100px;
    background-color: #bfa;
    float: left;
}
.box3 {
	width: 200px;
	height: 200px;
	background-color:yellow;
}

方案一：BFC（Block Formatting Context）块级格式化环境

CSS 中的隐含属性，开启后会为元素开辟 独立的布局区域。
元素开启 BFC 后的特点：不会被浮动元素所覆盖、子元素和父元素外边距不会重叠、可以包含浮动的子元素。
元素开启 BFC 的方式：

方式	说明
`float: left;`	设置元素的浮动（不推荐）
`display: inline-block;`	将元素设置为行内块元素（不推荐）
`overflow: hidden;`	将元素的overflow设置为一个非 visible 的值

.outer {
    border: 10px red solid;
    /* float: left; */
    /* display: inline-block; */
    /* overflow: hidden; */
}

（了解）IFC

IFC的元素会在一行中从左至右排列，在一行上的所有元素会在该区域形成一个行框
行宽的高度为包含框的高度，高度为行框中最高元素的高度
浮动的元素不会在行框中，并且浮动元素会压缩行框的高度
行框的高度容纳不下子元素时，子元素会自动会换下一行显示，并且会产生新行框
行框的元素内遵循 text-align和 vertical-align

方案二：clear: left | right | both 清除浮动元素对当前元素所产生的影响

/* 
 * 1. 在父元素后添加空伪元素并以块元素方式显示以独占一行；
 * 2. 该块级伪元素清除浮动后，会排列在浮动元素之下；
 * 3. 因该块级伪元素未脱离文档流，父元素会自动适配其大小；
 */
.outer::after {
	content: '';
	display: block;
	clear: both;
}

方案二（扩展）：clearfix 同时解决高度塌陷和外边距重叠的问题（CSS 权威指南中介绍到的方案）

.clearfix::before, .clearfix::after {
    content: '';
    display: table;
    clear: both;
}

<div class="outer clearfix">
    <div class="inner"></div>
</div>

<div class="box3""></div>

五、定位

简介

定位是一种更加高级的布局手段，通过定位可以将元素摆放到页面的任意位置。
使用 position: static | relative | absolute | fixed | sticky; 属性来设置定位。
当元素开启了定位以后，可以通过偏移量属性 top | bottom | left | right 来设置元素的位置。

5.1 相对定位

说明

元素开启相对定位以后，如果不设置偏移量元素不会发生任何的变化
相对定位是 参照于元素在文档流中的位置进行定位 的
相对定位会提升元素的层级
相对定位 不会使元素脱离文档流
相对定位不会改变元素的性质块还是块，行内还是行内

<div class="box1">1</div>
<div class="box2">2</div>
<div class="box3">3</div>

body{
    font-size: 60px;
}
div{
    width: 200px;
    height: 200px;
}
.box1{
    background-color: #bfa;
}
.box2{
    background-color: orange;
    position: relative;
    left: 200px;
    top: -200px;
}
.box3{
    background-color: yellow;
}

5.2 绝对定位

说明

开启绝对定位后，如果不设置偏移量元素的位置不会发生变化
开启绝对定位后，元素会 从文档流中脱离
绝对定位会改变元素的性质，行内变成块，块的宽高被内容撑开
绝对定位会使元素提升一个层级
绝对定位元素是 相对于其包含块进行定位 的

包含块

正常情况下包含块就是离当前元素最近的祖先块元素
绝对定位的包含块就是 离它最近的开启了定位的 祖先元素
如果所有的祖先元素都没有开启定位则 html（根元素、初始包含块）就是它的包含块

<div class="box1">1</div>
<div class="box3">
    3
    <div class="box2">2</div>
</div>

body{
   font-size: 60px;
}
div{
    width: 200px;
    height: 200px;
}
.box1{
    background-color: #bfa;
}
.box2{
    background-color: orange;
    position: absolute;
    left: 200px;
    top: 200px;
}
.box3{
    width: 400px;
    height: 400px;
    background-color: blanchedalmond;
    position: relative;
}

5.3 固定定位

说明

固定定位也是一种绝对定位，所以固定定位的大部分特点都和绝对定位一样
唯一不同的是固定定位永远 参照于浏览器的视口 进行定位
即：固定定位的元素不会随网页的滚动条滚动

<div class="box1">1</div>
<div class="box2">2</div>
<div class="box3">3</div>

body{
   font-size: 60px;
    height: 2000px;
}
div{
    width: 200px;
    height: 200px;
}
.box1{
    background-color: #bfa;
}
.box2{
    background-color: orange;
    position: fixed;
    top: 100px;
}
.box3{
    background-color: yellow;
}

5.4 粘滞定位

说明

粘滞定位和相对定位的特点基本一致，不同的是粘滞定位可以在元素 到达某个位置时将其固定
IE 浏览器不支持，如需兼容请考虑其它方案

在这里插入图片描述

<div class="box1">1</div>
<div class="box2">2</div>
<div class="box3">3</div>

body{
   font-size: 60px;
    height: 2000px;
}
div{
    width: 200px;
    height: 200px;
}
.box1{
    background-color: #bfa;
}
.box2{
    background-color: orange;
    position: sticky;
    top: 100px;
}
.box3{
    background-color: yellow;
}

5.5 绝对定位元素的布局

水平方向

当开启了绝对定位后，水平方向的布局等式就需要添加 left 和 right 两个值，即：left + margin-left/right + border-left/right + padding-left/right + width + right = 包含块的内容区的宽度
过渡约束：如果没有 auto 则自动调整 right 值以使等式满足（left 和 right的值默认是 auto），如果有auto，则自动调整auto的值以使等式满足
据此特征可以通过以下样式将元素在其包含块中水平居中：

.box {
	margin: 0 auto;
	left: 0;
	right: 0;
}

垂直方向

垂直方向布局的等式的也必须要满足：top + margin-top/bottom + padding-top/bottom + border-top/bottom + height = 包含块的高度
据此特征可以通过以下样式将元素放置在其包含块的正中：

.box {
	margin: auto;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
}

5.6 层级

说明

对于开启了定位元素，可以通过 z-index 属性来指定元素的层级
z-index 需要一个整数作为参数，值越大元素的层级越高，元素的层级越高越优先显示
如果元素的层级一样，则优先显示靠下的元素
祖先的元素的层级再高也不会盖住后代元素

<div class="box1">1</div>
<divclass="box2">2</div>
<div class="box3">3
    <div class="box4">4</div>
</div>

body{
	font-size: 60px;
}
div{
    width: 200px;
    height: 200px;
    position: absolute;
}
.box1{
    background-color: rgba(255 , 0, 0, .6);
    z-index: 3;
}
.box2{
    background-color: #bfa;
    top: 50px;
    left: 50px;
}
.box3{
    background-color: yellow;
    top: 100px;
    left: 100px;
    z-index: 999;
}
.box4{
    width: 100px;
    height: 100px;
    background-color: orange;
}

六、动态效果

6.1 过渡

通过过渡可以指定一个属性发生变化时的切换效果。

引入：常见的移入下拉效果

在这里插入图片描述

<style type="text/css">
    .box1 {
    	/* 设置初始值及渐变 */
        height: 10px;
        overflow: hidden;
        transition: height 0.3s;
        
        width: 100px;
        background-color: #bfa;
        margin: 100px auto;
    }

    .box1:hover {
    	/* 设置触发 */
        height: 100px;
    }
</style>

<div class="box1">
</div>

transition-property：设置要执行过渡的属性

transition-property: height, width;
transition-property: all;

多个属性间使用 ',' 隔开
如果所有/ 很多属性都需要过渡，可以直接使用 all关键字
过渡时必须是从一个有效数值向另外一个有效数值进行过渡，不能使用 auto

transition-duration：设置过渡效果的持续时间，s/ ms
transition-timing-function：设置过渡的时序函数

属性值	说明
ease	默认值，慢速开始，先加速，再减速
linear	匀速运动
ease-in	加速运动
ease-out	减速运动
ease-in-out	先加速后减速
cubic-bezier()	来指定时序函数（参考：https://cubic-bezier.com）
steps(num, end/start)	分步执行过渡效果，通过 end/start 指定在时间结束/开始时执行过渡

transition-delay：过渡效果的延迟，等待一段时间后再执行过渡
transition：复合属性，可以同时设置过渡相关的所有属性，只有一个要求，如果要写延迟，则两个时间中第一个是持续时间，第二个是延迟。
行走的米兔

在这里插入图片描述

div {
    height: 271px;
    width: 132px;
    margin: 200px auto;
    background-image: url(./img/bigtap-mitu-queue-big.png);
    background-position: 0 0;
    transition: 0.3s steps(3);
}

div:hover {
    background-position: -396px 0;
}

6.2 动画

过渡需要在某个属性发生变化时才会触发，动画可以自动触发动态效果。

引入：颜色的不断变化

.box1 {
    height: 100px;
    width: 100px;
    border-radius: 50%;
    margin: 100px auto;
    animation: change-color 1s infinite alternate;
}

@keyframes change-color {
    from /* 或 0% */ {
        background-color: red;
    }

    to /* 或 100% */ {
        background-color: yellow;
    }
}

关键帧：动画效果必须指定一个关键帧，关键帧设置了动画执行每一个步骤

from 指定动画开始时元素的状态，等价于 0%
to 指定动画结束时元素的状态，等价于 100%
from和 to之间还可以引入多个 帧，使用对应的百分比来表示

常用属性

属性	说明
animation-name	要对当前元素生效的关键帧的名字
animation-duration	执行时间
animation-delay	延时
animation-timing-function	时序函数
animation-iteration-count: n/ infinite	执行的次数

animation-direction：指定动画运行的方向

属性值	说明
normal	默认值从 from 向 to 运行每次都是这样
reverse	从 to 向 from 运行每次都是这样
alternate	从 from 向 to 运行重复执行动画时反向执行
alternate-reverse	从 to 向 from 运行重复执行动画时反向执行

animation-play-state: running/ paused：设置动画的执行状态，默认 running 可以设置事件使其暂停
animation-fill-mode：动画的填充模式

属性值	说明
none	默认值动画执行完毕元素回到原来位置
forwards	动画执行完毕元素会停止在动画结束的位置
backwards	动画延时等待时，元素就会处于开始位置（即直接将 from 设置的属性给到元素）
both	结合了forwards 和 backwards

奔跑的少年

在这里插入图片描述

div {
   width: 256px;
   height: 256px;
   margin: 200px auto;
   background-image: url('./img/bg2.png');
   animation: run 0.5s steps(6) infinite;
}

@keyframes run {
   from { background-position: 0 0; }
   to { background-position: -1536px 0; }
}

6.3 变形

简介

变形就是指通过 CSS来改变元素的形状或位置
变形不会影响到页面的布局
通过 transform: translateX(px/xx%) translateY() translateZ() 来设置元素的变形效果

引出：选中浮出效果

在这里插入图片描述

div {
    width: 200px;
    height: 200px;
    margin: 200px auto;
    background-image: url('./img/4.jpg');
    transition: 0.3s;
}

div:hover {
    transform: translateY(-4px);
    box-shadow: 0 0 10px rgba(0, 0, 0, .3);
}

利用变形让大小不固定的元素居中

div {
   position: absolute;
   /* 
       这种居中方式，只适用于元素的大小确定
   top: 0;
   left: 0;
   bottom: 0;
   right: 0;
   margin: auto; */

   left: 50%;
   top: 50%;
   transform: translateX(-50%) translateY(-50%);
}

Z 轴平移

调整元素在z轴的位置，正常情况就是调整元素和人眼之间的距离，距离越大，元素离人越近。
z轴平移属于立体效果（近大远小），默认情况下网页是不支持透视，如果需要看见效果必须要设置网页的视距。
通过 html { perspective: 800px; } 来设置视距，取值范围一般为 600 - 1200。

6.4 旋转

简介

旋转可以使元素沿着 x y 或 z 旋转指定的角度。
通过 transform: rotateX(.25turn) rotateY(45deg) rotateZ(100px) 进行设置。
通过 backface-visibility: hidden 设置是否展示元素的背面。

制作时钟效果

    <style>
        .clock-wrapper {
            height: 300px;
            width: 300px;
            margin: 100px auto;
            border-radius: 50%;
            position: relative;
            background-image: url(./img/13/bg3.jpg);
            background-size: cover;
        }

        /* 设置元素重叠居中 */
        .clock-wrapper>div {
            position: absolute;
            top: 0;
            bottom: 0;
            left: 0;
            right: 0;
            margin: auto;
        }

        .hour-wrapper {
            height: 60%;
            width: 60%;
            /* 转动指针的容器而不是转动指针 */
            animation: clock 43200s linear infinite;
        }

        .hour {
            height: 50%;
            width: 6px;
            margin: 0 auto;
            background-color: black;
        }

        .minute-wrapper {
            height: 70%;
            width: 70%;
            animation: clock 3600s steps(60, end) infinite;
        }

        .minute {
            height: 50%;
            width: 4px;
            margin: 0 auto;
            background-color: black;
        }

        .second-wrapper {
            height: 90%;
            width: 90%;
            animation: clock 60s linear infinite;
        }

        .second {
            height: 50%;
            width: 3px;
            margin: 0 auto;
            background-color: black;
        }
        
        @keyframes clock {
            from {
                transform: rotateZ(0);
            }

            to {
                transform: rotateZ(360deg);
            }
        }
    </style>
    
    <div class="clock-wrapper">
        <div class="hour-wrapper">
            <div class="hour"></div>
        </div>

        <div class="minute-wrapper">
            <div class="minute"></div>
        </div>

        <div class="second-wrapper">
            <div class="second"></div>
        </div>
    </div>

制作魔力方块

    <style>
        /* 取消图片间产生的间隙 */
        img {
            vertical-align: top;
        }

        .cube {
            width: 200px;
            height: 200px;
            margin: 200px auto;
            /* 设置3D变形效果 */
            transform-style: preserve-3d;
            animation: rotate 15s linear infinite;
        }

        .cube > div {
            opacity: .8;
            position: absolute;
        }

        .box1 { transform: rotateY(90deg)  translateZ(100px); }
        .box2 { transform: rotateY(-90deg) translateZ(100px); }
        .box3 { transform: rotateX(90deg)  translateZ(100px); }
        .box4 { transform: rotateX(-90deg) translateZ(100px); }
        .box5 { transform: rotateY(180deg) translateZ(100px); }
        .box6 { transform: rotateY(0deg)   translateZ(100px); }

        @keyframes rotate {
            from {
                transform: rotateX(0) rotateZ(0);
            }
            to {
                transform: rotateX(1turn) rotateZ(1turn);
            }
        }
    </style>
    
    <div class="cube">
        <div class="box1"><img src="./img/14/1.jpg"></div>
        <div class="box2"><img src="./img/14/2.jpg"></div>
        <div class="box3"><img src="./img/14/3.jpg"></div>
        <div class="box4"><img src="./img/14/4.jpg"></div>
        <div class="box5"><img src="./img/14/5.jpg"></div>
        <div class="box6"><img src="./img/14/6.jpg"></div>
    </div>

6.5 缩放

简介

即字面的含义，将元素进行放大和缩小。
通过 transform: scale()/ scaleX() scaleY() 进行设置。
通过 transform-origin: center; 来设置缩放的源点。

移入放大效果

在这里插入图片描述

    <style>
        .img-wrapper{
            width: 200px;
            height: 200px;
            margin: 100px auto;
            border: 1px black solid;
            overflow: hidden;
        }

        img {
        	width: 100%;
            transition: .2s;
        }

        .img-wrapper:hover img {
            transform: scale(1.2);
        }
    </style>

    <div class="img-wrapper">
        <img src="an.jpg">
    </div>

七、弹性布局

Flex 是 Flexible Box 的缩写，意为“弹性布局”或者“弹性盒子”，是 CSS3 中的一种新的布局模式，可以简便、完整、响应式地实现各种页面布局，当页面需要适应不同的屏幕大小以及设备类型时非常适用。

7.1 简介

概念

采用 Flex 布局的元素，称为 Flex 容器（flex container），即弹性容器。它的所有子元素自动成为容器成员，称为 Flex 元素（flex item），即弹性元素。
容器默认存在两根轴，弹性元素的排列方向称为主轴（main axis）、主轴的垂直方向称为侧轴/交叉轴（cross axis）。
主轴的开始位置叫做 main start，结束位置叫做 main end；侧轴的开始位置叫做 cross start，结束位置叫做 cross end。
单个元素占据的主轴空间叫做 main size，占据的交叉轴空间叫做 cross size。

引入

通过 float: left 进行布局
通过 display: flex 进行布局

    <style>
        * {
            margin: 0;
            padding: 0;
            list-style: none;
        }
        
        ul {
            width: 800px;
            border: 10px red solid;
            margin: 100px auto;

            display: flex;
        }

        li {
            /*float: left;*/
            width: 200px;
            line-height: 100px;
            font-size: 50px;
            text-align: center;
        }
        li:nth-child(1) {
            background-color: #bfa;
        }
        li:nth-child(2) {
            background-color: pink;
        }
        li:nth-child(3) {
            background-color: orange;
        }
    </style>

     <ul>
         <li>1</li>
         <li>2</li>
         <li>3</li>
     </ul>

弹性相关属性

弹性容器：flex-direction、flex-wrap、flex-flow、justify-content、align-items、align-content
弹性元素：order、align-self、flex、flex-grow、flex-shrink、flex-basis

属性	描述
display	指定 HTML 元素的盒子类型
flex-direction	指定弹性盒子中子元素的排列方式
flex-wrap	设置当弹性盒子的子元素超出父容器时是否换行
flex-flow	flex-direction 和 flex-wrap 两个属性的简写
justify-content	设置弹性盒子中元素在主轴（横轴）方向上的对齐方式
align-items	设置弹性盒子中元素在侧轴（纵轴）方向上的对齐方式
align-content	修改 flex-wrap 属性的行为，类似 align-items，但不是设置子元素对齐，而是设置行对齐
order	设置弹性盒子中子元素的排列顺序
align-self	在弹性盒子的子元素上使用，用来覆盖容器的 align-items 属性
flex	设置弹性盒子中子元素如何分配空间
flex-grow	设置弹性盒子的扩展比率
flex-shrink	设置弹性盒子的收缩比率
flex-basis	设置弹性盒子伸缩基准值

7.2 容器属性

flex-direction：用来决定主轴的方向（即元素的排列方向）

值	描述
row	`默认值`，主轴沿水平方向从左到右
row-reverse	主轴沿水平方向从右到左
column	主轴沿垂直方向从上到下
column-reverse	主轴沿垂直方向从下到上

在这里插入图片描述

flex-wrap：用来设置当弹性盒子的子元素超出父容器时是否换行

值	描述
nowrap	`默认值`，表示元素不会换行
wrap	表示元素会在需要时换行
wrap-reverse	表示元素会在需要时换行，但会以相反的顺序

在这里插入图片描述

justify-content：用于设置弹性盒子中元素在主轴（横轴）方向上的对齐方式

值	描述
flex-start	`默认值`，左对齐
flex-end	右对齐
center	居中
space-between	两端对齐，项目之间的间隔是相等的
space-around	每个项目两侧的间隔相等

在这里插入图片描述

align-items：用来设置弹性盒子中元素在侧轴方向上的对齐方式

值	描述
stretch	`默认值`，项目将被拉伸以适合容器
center	项目位于容器的中央
flex-start	项目位于容器的顶部
flex-end	项目位于容器的底部
baseline	项目与容器的基线对齐

在这里插入图片描述

align-content：与 justify-content 属性类似，可以在弹性盒子的侧轴还有多余空间时调整容器内项目的对齐方式

值	描述
stretch	`默认值`，将项目拉伸以占据剩余空间
center	项目在容器内居中排布
flex-start	项目在容器的顶部排列
flex-end	项目在容器的底部排列
space-between	多行项目均匀分布在容器中，其中第一行分布在容器的顶部，最后一行分布在容器的底部
space-around	多行项目均匀分布在容器中，并且每行的间距（包括离容器边缘的间距）都相等

在这里插入图片描述

7.3 元素属性

order：通过 order: number 设置元素在容器中出现的顺序

     .flex div:nth-child(1) {
         order: 5;
     }
     .flex div:nth-child(2) {
         order: 3;
     }
     .flex div:nth-child(3) {
         order: 1;
     }
     .flex div:nth-child(4) {
         order: 2;
     }
     .flex div:nth-child(5) {
         order: 4;
     }

在这里插入图片描述

align-self：单独设置自身的对齐方式，用于覆盖 align-items 属性

值	描述
stretch	`默认值`，项目将被拉伸以适合容器
center	项目位于容器的中央
flex-start	项目位于容器的顶部
flex-end	项目位于容器的底部
baseline	项目与容器的基线对齐

在这里插入图片描述

flex-grow：设置弹性元素伸展的系数

使用场景 - 当父元素有多余的空间时，子元素如何伸展，默认为 0 不伸展
当属性值设置为一个具体的长度时，子元素会按照比例进行分配

flex-shrink：设置弹性元素收缩的系数

使用场景：当父元素中的空间不足以容纳所有的元素时，子元素如何收缩，默认为 1 等比例收缩

flex-basis：设置元素在主轴上的基础长度

如果主轴是 横向的，则该值指定的就是元素的 宽度
如果主轴是 纵向的，则该值指定的是就是元素的 高度
如果传递了一个具体的数值，则以该值为准
默认值是 auto，表示参考元素自身的高度或宽度

flex：flex: flex-grow flex-shrink flex-basis; 三个属性的简写

initial == 0 1 auto
auto == 1 1 auto
none == 0 0 auto 弹性元素没有弹性

八、移动端

8.1 视口

像素

屏幕是由一个一个发光的小点构成，这一个个的小点就是 像素；分辨率 1920 x 1080 说的就是屏幕中小点的数量。
像素分为 CSS像素 和 物理像素：上述所说的小点点就属于物理像素，而编写网页时所用像素是CSS像素。
浏览器在显示网页时，需要将CSS像素转换为物理像素然后再呈现。
一个CSS像素最终由几个物理像素显示，由浏览器决定：默认情况下在PC端，一个CSS像素 = 一个物理像素。

视口（viewport）

视口就是屏幕中用来显示网页的区域，可以通过查看视口的大小，来观察CSS像素和物理像素的比值。
PC端默认情况下CSS像素和物理像素的比是 1:1，即如果屏幕分辨率 1920 x 1080，那么视口宽度也为 1920px（CSS像素）。
可以通过改变视口的大小，来改变CSS像素和物理像素的比值。

移动端

智能手机的像素点远远小于计算机的像素点，如24寸的电脑显示器像素为 1920 x 1080px，而4.7寸的手机就可达到 750 x 1334px。
为了显示完整、移动端会自动对网页进行缩放，如网页的宽度为 1260px，在 750px的移动端则会缩放 1260/750 倍，也可以说这时的 750/1260 个CSS像素才对应 1个物理像素。
移动端本身像素高，却为了适配 PC而用多个 CSS像素对应 1个物理像素；所以基本大部分的pc端网站都可以在移动端中正常浏览，但是往往都不会有一个好的体验。
为了解决这个问题，大部分网站都会 专门为移动端设计网页。

VW 适配

由于不同设备视口和像素比不同，所以在移动端开发时，就不能再使用px来进行布局了。
vw 表示的是视口的宽度，100vw = 一个视口的宽度，假设设计图的宽度为 750px，那么如何构造一个 45 * 60px 的盒子呢？
一般通过 less 将 html 的 font-size 设置为大于 12px（浏览器限制）的一个值，如 html { font-size: 100vw/750 * 40; }，即先把 100vw分给 750像素再取 40份作为字体大小，这时 1rem 就相当于设计图的 40px。
构造盒子时，只需要通过 less 进行运算 width: 45/40rem; 即可得出宽度为 45px 的盒子。
这样，在任何移动端展示出来的页面效果/ 比例都是相同的。

完美视口

可以通过 meta标签 来设置视口大小，如 <meta name="viewport" content="width=375px"> 即将视口设置 375px，这时 1 CSS像素对应两个物理像素。
每一款移动设备设计时，都会有一个最佳的像素比。
<meta name="viewport" content="width=device-width, initial-scale=1.0"> 即是将网页的视口设置为完美视口。

8.2 媒体查询

为了在移动端获得良好的网页阅读效果，除了可以通过 VW适配来专门为移动端设计网页外，还可以通过媒体查询来进行响应式布局。

使用媒体查询： @media 查询规则 { /* css 样式 */ }
媒体类型

类型	说明
all	所有设备
print	打印设备
screen	带屏幕的设备
speech	屏幕阅读器

可以使用 , 连接多个媒体类型，这样它们之间就是一个或的关系
可以在媒体类型前添加一个only，表示只有

媒体特性

特性	说明
width	视口的宽度
height	视口的高度
min-width	视口的最小宽度（视口大于指定宽度时生效）
max-width	视口的最大宽度（视口小于指定宽度时生效）

断点：样式切换的分界点称其为断点，也就是网页的样式会在这个点时发生变化
常用断点

断点	说明
小于768	超小屏幕 max-width=768px
大于768	小屏幕 min-width=768px
大于992	中型屏幕 min-width=992px
大于1200	大屏幕 min-width=1200px

在这里插入图片描述

/* width < 768px */
@media only screen and (max-width: 768px) {
    body {
        background-color: #bfa;
    }
}
/* 768px < width < 992px */
@media only screen and (min-width: 768px) and (max-width: 992px) {
    body {
        background-color: #ffa;
    }
}
/* 992px < width < 1200px */
@media only screen and (min-width: 992px) and (max-width: 1200px) {
    body {
        background-color: #bff;
    }
}
/* width > 1200px */
@media only screen and (min-width: 1200px) {
    body {
        background-color: #bba;
    }
}