背景图片

background-size

background-size:（父盒子——为装背景图片的当前盒子）

-  contain(图片等比例缩放，当宽度或高度充满父盒子时，就不再拉伸了，会出现有空白区域的情况) 
-  cover(图片等比例缩放，直到完全铺满父盒子，会出现图片显示不全的情况) 
-  2个px(精确的宽高比例会改变) 
-  1个px(以宽度进行等比例缩放) 
-  %(相对于父盒子的百分比)

应用场景

• 小的装饰类的icon，一般用背景图片，设置background-position：left，center来达到靠左对齐，垂直居中

• 超大的图片，超出屏幕时，如果用img的话会出现水平滚动条，而背景图片会直接隐掉超出的图片（因为背景不会撑开盒子），为了不影响中间核心显示的内容，设置背景图片为center top即可

background-attachment

background-attachment: fixed; 
background-position: center;
/*此时背景图片是相对于**整个窗口居中**的，而不是相对于盒子居中*/

三大特性

继承性｜层叠性｜优先级

层叠性

同一个选择器多次设置同一样式时，后面的覆盖前面的

优先级

/* 权重 虽然有叠加但是 不会进位 ：10个类选择器相加都不及1个id选择器。*/
ul/h等标签自带样式 -1
*和继承           0
手动设置的标签     1
类/属性/伪类  10
id  100
行内样式  1000
!important;无穷大

/* 当对某个元素的 CSS 选择符样式定义的越具体，层级越明确，该定义的优先级就越高。 */

/应用/

行内样式的优先级>外链样式优先级，可以给外链css加!important提高优先级

继承性

/* 会继承和文字相关的样式，如**文本颜色**、**字体属性**、行高等。*/

- `a`标签不会继承字体颜色color
- `h1-6、p`不能继承父级的font-size
- span不会继承font-size

行内｜行内块｜块

行内元素的宽度

行内元素可以通过padding值撑开，只是不能直接给width；块元素宽度默认为父盒子的宽度

设置居中

/*垂直居中*/
只有一行文字可以设置line-height垂直居中；
行高不跟单位表示 /文字大小的倍数/。例如 1.5 表示以文字大小的 1.5 倍作为行高。
应用：在 body 中指定行高 1.5，子元素可以根据自己的文字大小 自动调整行高。

/*水平居中*/
让 *行内元素/行内块元素* 中实现水平居中：
给父盒子添加 text-align: center,该属性所有子元素都会继承，但input因为本身有设置，所有会被默认设置所覆盖

让 *块元素* 实现水平居中：
盒子必须有宽度且margin: 0 auto;

行内块应用

场景：轮播图下面的小圆点，个数不确定（或是页面底部页码）；
如果用float没有办法撑开父盒子，可以直接写入a标签，display转换为inline-block。

input

属性

/focus/

- 聚焦时的边框样式:
input:focus{
    border: 1px solid #FE5B02; 
    outline: 0; 
}

/placeholder/

- 改变**placeholder**的样式:
input::placeholder{ 
    color: red;
}

/required/

/*必填*/
required: required;

/autofocus/

/*自动聚焦*/
autofocus: autofocus

/multiple/

/*可以多选文件提交*/
multiple：multiple 

/autocomplete/

/*是否应该启用自动完成功能。默认已经打开，需要放在表单内，同时加上 name 属性，同时成功提交过*/
autocomplete: on / off

居中

`label和input水平居中`
通过给input { vertical-align:top/middle/bottom;}

input行内块

如果input盒子掉下去了，是因为input行内块，input的font-sizeinput::placeholder字体大小不一致，导致有间隙，解决方案：

- 1:*{font-size: 16px}给通配符统一设一个字体大小
- 2: input{font-size: 0},input::placeholder{ font-size: 16px}
- 3.input{font-size: 16px}直接给input设font-size，这样placeholder会继承
- 综上，input的字体最好就设在input盒子里面；即字体大小通常加给父元素身上，子元素继承就好

border

/border-radius/

- border-radius: 50%——正方形盒子是**圆形**/长方形盒子是**椭圆**。

- border-radius: 高度的一半——**圆角矩形**。

/border-collapse/

/*仅适用于表格，把相邻的边框合并到一起。*/
- border-collapse: collapse; (bdcl)

/*表格的**边框合并**要写在table里面*/
table{ bordere-collapse：collapse}

float

- 行内元素和行内块元素不会被浮动的盒子**压住**，块元素会被压住

- 浮动的盒子只会**影响后面的标准流**，不会影响前面的

- 脱标的盒子（浮动、绝对定位、固定定位）不会触发`外边距合并`（塌陷问题）。

- 使用空标签（**clear: both**）清除浮动，这个空标签必须是**块元素**，且写在浮动元素**后面**

- 实现**文字环绕效果**，给左侧的图片设置float: left; 因为float了之后会把文字往右边挤!

- 当浮动元素的**父级元素是浮动**的，则该元素可以被撑开高度

position

子绝父相

父级相对定位（不脱标，在标准流中占据空间），子级使用绝对定位（脱标，不影响其他元素的摆放）

居中

仅针对于**父盒子的宽高>子盒子的宽高**的情况
{
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    top: 0;
    margin: auto;
}

/水平居中/

定位盒子有宽度，可以通过left: 0; right: 0; margin: auto，使其定位到中间

文字&对齐问题

/文字环绕/

 浮动定位（半脱标）只会压住他下面的块元素盒子，**不会压住**下面标准流盒子里面的**文字（图片）**
 
 绝对定位/固定定位（完全脱标）会压住下面标准流里面的盒子，不会影响前面的盒子

/vertical-align/

只能运用于行内块元素/行内元素，应用于img/textarea和文字垂直居中对齐 
img{
    vertical-align: middle; 
}

/图片底部空隙/

/*原因：因为行内块元素和文本默认按照基线对齐。*/
解决方案<div><img></img><div>：

- 给图片添加 `vertical-align：middle | top | bottom`（推荐使用）；
- 把图片转换为块级元素 display: block;
- 给父盒子div设置font-size：0;

/图片垂直居中/

- 给img外面的盒子div设置 line-height=height

- 图片与盒子里面文字的对齐问题，如果`图片占有区域变大`，就需要将font-size:0 

/定位垂直居中/

- top: calc(50% - 16px)
/*50%——父盒子高度的一半；16px——当前盒子高度的一半 */

- top:50%; transform: translateY(-50%)
/*translateY(-50%)，向上移自己盒子高度的一半*/

/input框对齐/

搜索框和搜索按钮对齐：都左浮动

/小图标/

vertical-align：0; 即基线对齐
给字体图标vertical-align: -1px，即将字体图标向下移动

/等间距对齐/

- 多行文字
/*实现多行文字之间的间距根据盒子宽度自适应调整：<div>我是文字<div>*/
text-align: justify;

![截屏2021-05-17 下午2.44.23.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/dec782c1b090492abe96a8e12e645f60~tplv-k3u1fbpfcp-watermark.image)
- 单行文字
div{ 
    text-align: justify;  
    height:36px; 
    line-height:36px;
}   
div::after { 
    content:''; 
    display:inline-block; 
    width:100%;
    height:0 
}
因为text-align: justify只能实现多行文字的宽度调整，**所以添加after，制造多行文字的假象**
注意：盒子必须要有高，且文字的高度等于盒子的高度，即需要把盒子高度占满

/文字换行/

汉字会默认自动换行（white-space: normal;）；
但是一长串没有空格的英文，系统会默认是一个单词，不会换行，可以通过设置word-break强制换行。

/文字限制/

/限制文字单行显示，多出用省略号/

{
    white-space: nowrap;//把文本限制在一行
    overflow: hidden;// 溢出部分隐藏
    text-overflow: ellipsis;// 出现省略号

}

/限制文字两行显示，多出用省略号/

{
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

选择器

结构伪类

- nth-child(n) ——n从0开始，孩子是从1开始，且n要写在前面

  - nth-child(5n)——5n即为0，5，10，15..；选择第5、10、15个孩子（因为孩子从1开始，所以5n为0时没有对应的孩子
  - nth-child(n+16)——n+16即为16，17，18，19，20...；选择第16、17、18、19、20个孩子

兄弟选择器

- 兄弟选择器：+ 相邻兄弟，紧跟着前一个之后的兄弟；
- ~ 后续兄弟，前一个之后的所有兄弟。

<input type="search">
<input type="button" >
    
/*达到seach框聚焦时，给button按钮改变边框颜色的效果*/
input[type="search"]:focus+input

伪/伪类元素

/伪元素/

/*权重*/
::before、::after——伪元素
例如：div::before 权重是2

/伪类元素/

/*权重*/
:hover、 :focus 、:placeholder——伪类元素
权重10

显示/隐藏

三种方式

/*不占位置*/
- display: none(隐藏) / block(显示)

/*占位置*/
- visiblity: hidden(隐藏) / visible(显示)

/*透明度*/
- opacity:0（完全透明）/1（不透明）

过渡效果

显示和隐藏切换的过渡效果实现——opacity:0（完全透明）/1（不透明）
.tudou::before{
    opacity: 0; 
    transition: .5s; 
}
.tudou:hover::before{ 
    opacity: 1; 
}

渐变效果

/*如果不加浏览器前缀，方向用方位名词表示，前面需要加to(to right等价与left，即从左到右*/
background:linear-gradient(to right,blue,red)

/*如果加浏览器前缀，方向用方位名词表示，默认是top*/
background:-webkit-linear-gradient(left,blue,red)
/*从左上角到右下角*/
background:-webkit-linear-gradient(left top,blue,red)
/*径向（由中心向四周扩散)*/
background:-webkit-radial-gradient(center,blue,red)

SEO优化

    <!-- SEO优化，提高网站的自然排名 -->
    <!-- SEO-title -->
    <title>品优购商城-综合网购首选-正品低价、品质保障、配送及时、轻松购物！</title>

    <!-- SEO-description -->
    <meta name="description" content="品优购商城-专业的综合网上购物商城,销售家电、数码通讯、电脑、家居百货、服装服饰、母婴、图书、食品等数万个品牌优质商品.便捷、诚信的服务，为您提供愉悦的网上购物体验!">

    <!-- SEO-keywords -->
    <meta name="keywords" content="网上购物,网上商城,手机,笔记本,电脑,MP3,CD,VCD,DV,相机,数码,配件,手表,存储卡,品优购">

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

运用场景

/*ul>li>a*/
是为了搜索引擎优化（SEO），用户有可能可以搜到这个a；
直接放a，就意味着这部分不需要SEO，用户不需要直接搜到它

transform(2D转换)

translate不会影响其他盒子的位置，对行内元素时无效的

transform-origin

/*转化中心点*/
transform-origin:x y;  
- 默认中心点是 50% 50%，
- 左下角则为left bottom
- 也可以精确到10px 20px

scale

transform: scale(x,y)
- xy是倍数，不带单位，可以只写一个数
- 默认以中心点进行缩放，不会影响其他盒子

/应用/

通过`transform: scale(1.14)`， 让font-size在hover时从14px变为16px，且不会影响后面的盒子

简写

transform: translate(100px,50%)  totate(45deg)  scale(1.2);

- x轴移动100px，y轴移动自己高度的一半，旋转45度，大小缩放1.2倍

- 有顺序，先旋转会改变坐标轴的方向，记!!将位移放到最前面

- 如果要形成立体盒子，则适合先旋转，再位移，因为这样都是沿 z轴 位移

animation(动画)

@keyframes

- duration在decay前面

- 可以添加多组动画，中间用，隔开

steps()

animation-timing-function：steps() 初始状态也算一步

- 如running-bear，有8个状态，1600px，初始200px，steps（8）末尾-1600px，且infinite，这样到最后一刻会马上跳回到起始状态
- 打字机，10个字，字号20px，长度共200px，起始0，末尾200px，如果是forwards，停留在末尾，则为steps（10）；如果是其他，比如backwards或infinite，则末尾220px，且steps（11）

3d转换

3d立体效果：

- 近大远小
- 被挡住（超出屏幕）的部分看不到

perspective

/* 透视：眼睛到屏幕的距离d， 越近即d越小，成像越大*/
perspective: 400px;

写在父级上，且通常只给复盒子加一个固定的值

perspective-origin

/* 眼睛默认是在正中央50% 50%的位置，但是可以修改位置 */
perspective-origin: x y; 

可以是方位名词/精确单位/相对于自己的百分比

transform-style

/*让子元素保持3d立体空间（默认值是flat平面）*/
transform-style：preserve-3d；

**只能给亲爸添加**，

translateZ()

/* z物体到屏幕的距离,z轴越小，成像越小 */
transform: translateZ(100px); 

rotate3d

- rotate3d旋转方向，左手准则.大拇指指向旋转轴的正方向，4指弯曲的方向则为旋转正方向

- 自定义轴：transform: rotate3d(x, y, z, 度数)，如(1,1,0,45deg)沿着斜二测轴旋转45度

- 盒子不论如何旋转，面向的轴始终都是z轴正向轴，案例：正方体盒子，都是先rotate，后transform:translateZ(宽度的一半)

应用案例

- 由中间从两边延伸。
如果进度条，要从中间往两边延伸，则可以先用绝对定位定位到水平中间，再将宽度由0-100%进行动画演变，且可以加上opacity，视觉效果更流畅。（垂直方向同理）

移动web

处理webkit内核浏览器即可

视口

- 布局视口（默认980px，盒子实际的宽度），视觉视口（能看到的网站区域，理想视口/缩放倍数），理想视口（设备的宽度）

- meta视口标签的目的：`布局视口宽度=理想视口宽度`，即设备有多宽，布局就有多宽。<meta name="viewport" content="width=device-width,  uer-scalable=no,  initial-scale=1.0,  maximum-scale=1.0, minimum-scale=1.0">

- 缩放只会影响视觉视口，initial-scale=2.0，即放大了2倍，这样视觉视口（能看到的网站区域变小）会缩小2倍。

二倍图

- 物理像素：设备的分辨率；越多看到的越清晰，把2个物理像素压到1个px中，显示的会更细腻
- 物理像素比：1px所占的物理像素点的个数，通常是2

- 在移动端时，对于iPhone8来说，1px开发像素 = 2个物理像素（分辨率），375即为开发时的px单位，对应750物理像素。开发时的单位即为理想视口的宽口
- 准备的图片（100x100）要比实际需要的图像（50x50）的尺寸大2倍，然后将图片缩小2倍至需要的尺寸（background-size=50px 50px），放入即可

Flex布局

当父盒子设置为display: flex时，子元素的float、clear、vertical-align属性都将失效

父元素的相关属性

选择器 {
	display: flex;
    /* 设置主轴 */
    flex-direction: row(默认-水平向右) | row-reverse(水平向左) | column(垂直向下) | column-reverse(垂直向上);
 
  
    /* 设置子元素在主轴上的排列方式 */
    justify-content: flex-start(默认) | flex-end | center | space-around(剩余空白部分平均分配在每个子元素的左右两侧) | space-between(左右贴边，中间的子元素再平分剩余空间) |space-evenly(平分剩余空间);
    
    /* 控制子元素是否换行(子元素的宽度超过父元素的宽度) */
    flex-wrap: nowrap(默认, 不换行) | wrap(换行，前提是盒子手动设置了宽度) | wrap-reverse(逆向换行);

  
    /* 设置单行所有子元素在侧轴上的排列方式(子元素在一行排列) */
    align-items: stretch(如果子元素没有设置高度(主轴是x轴)或者宽度(主轴是y轴), 默认就会将子元素的高度或者宽度拉伸和父元素一样) | flex-start | flex-end | center;
    
    /* 设置多行所有子元素在侧轴上的排列方式(一定有换行 flex-wrap: wrap), 如果不换行, 此属性无效 */
    align-content: flex-start | flex-end | center | stretch | space-around | space-between |space-evenly;
    
    /* 复合写法: 主轴方向以及是否换行*/
    flex-flow: flex-direction flex-wrap;
}

子元素的相关属性

- 如果子元素同时设置了width和flex：1，则width将不会生效
- 同时设置flex-grow和width，父盒子先减去所有盒子的基础width，再根据份数平分剩余空间
- 同时设置flex-shrink和width，子元素所有的基础width相加减去父盒子，再根据份数对子元素进行缩减

/* 如果盒子本身有宽度，那就是盒子的基础宽度即为盒子本身的宽度*/
flex-grow: 数字；表示的是父元素剩余空间分配时子元素占有的份数

/* 如果盒子本身有宽度，那就是盒子的基础宽度即为盒子本身的宽度*/
flex-shrink: 数字；表示的是子元素超出父元空间时，按份数将子元素进行缩减

/*当盒子同时设置了flex-basis和width，flex-basis生效*/
flex-basis: 基础宽度；代表的是盒子的基础宽度或者高度（主轴是y轴），可以用百分比或者精确单位
		

/* 设置子元素在分配父元素的剩余空间时所占的份数 */
/* flex-basis默认为auto，没有特别写出来时，不会覆盖盒子本身的width*/
/* flex-grow flex-shrink的默认值为0 */
flex: flex-grow flex-shrink flex-basis;
flex: 数字 >=0;
/* 禁止子元素压缩，应用于部分子元素被隐藏的场景 */
flex-shrink:0;

/* 设置自己在侧轴上的排列方式 */
align-self: flex-start | center | flex-end | stretch;
    
/* 设置子元素自己的排列次序 -1——前移一位，1——后移一位 */
order: 数字, 数字越小, 越靠前显示, 默认是 0;
}

应用案例

/aligin-items/

flex盒子aligin-items默认值是stretch；
所以子元素没有设置高度的话，默认就是父盒子的高度。当flex父盒子主轴宽度/高度变小时，里面的子元素会被压缩；
注意padding、margin、以及字体的line-height都不会被压缩。

/水平禁止压缩/

flex-shrink: 0（子元素属性）禁止压缩

/flex：20%/

ul>li*10

.subnav-entry {
    display: flex;
    flex-wrap: wrap;
    border-radius: 8px;
    background-color: #fff;
}
.subnav-entry li {
    flex: 20%;/*flex-basis:20% 等价于 width:20%*/
}

/屏幕不出现滚动条/

给屏幕添加背景图片并铺满整个屏幕，且不能出现滚动条，自适应效果

/* vw 是一个相对单位（始终是相对于设备屏幕），在css3中，将设备的宽度分成了100份，一份的宽度就是1vw*/
/* vh 是一个相对单位（始终是相对于设备屏幕），在css3中，将设备的高度分成了100份，一份的高度就是1vw */
div{
    /* 最大宽度、最小宽度和margin也需要设置在div上*/
    max-width: 750px;
    min-width: 320px;
    margin: 0 auto;
  
    width: 100vw;
    height: 100vh;
    background-color: cornflowerblue;
}

<body>
    <div></div>
</body>

Rem布局

rem基础

相对单位，1rem=html元素文字的大小
解决需求：针对不同的屏幕尺寸。设置不同的html文字大小，从而改变rem单位的大小，网页中元素的尺寸都用rem为单位进行表示

em是相对于自己继承的父元素的文字大小等比例缩放的
rem是相对于**html**根元素的文字大小等比例缩放

媒体查询

解决问题：根据不同的屏幕尺寸来改变不同的样式

/* 屏幕尺寸<=800px的样式 */  
/* min-width: 300px即>=300px */
/* screen and px 都不能省略！ */
/* 建议用min-width从小到大开始写,这样样式不会被层叠掉 */
@media screen and｜not|only (max-width: 800px) {
	html {
		font-size: 15px;
	}
}

/*引入资源就是 针对于不同的屏幕尺寸 调用不同的css文件*/
<link rel="stylesheet" href="style320.css" media="screen and (minwidth: 320px)">
<link rel="stylesheet" href="style640.css" media="screen and (minwidth: 640px)">

Less

# 定义：css扩展语言，也称为css预处理器，扩展了css的动态特性

# less变量
/* 变量名：以@开头，以;结尾，只能包含字母｜数字｜_，不能以数字开头，区分大小写 */
@变量名：值;

# less嵌套
父元素选择器{
  // 如果不加任何符号，解析为后代选择器
  子元素{
    
  }
  
  // 如果添加&，解析为伪类/伪元素/交集选择器
  &:hover{
    
  }
  
  // 添加>，解析为子代选择器，或者&>
  >子元素{
    
  }
}

# less运算 + - * /
/* 注意：
1.运算符左右有个空格隔开；
2.有不同的单位时，运算结果取第一个值的单位；
3.只有一个值有单位，就取该单位 */
@变量名: 10px + 5;
/* 除法/要用()括起来*/
@变量名: (10px / 5);

rem适配方案

**方案1：rem+媒体查询+less
1.设计稿是750px
2.确定屏幕分的份数（15），从而确定在750px下html文字大小 = 750px/份数
3.在750px的设计稿中，测量元素的大小，把80px单位转换为rem单位，即82/html文字大小

其他屏幕尺寸根据份数，设置不同的html文字大小即可

**方案2：媒体查询+pxcook（基数 和 小数点设置）+rem

**方案3：flexible.js+rem+cssrem插件（设置字体基数大小）
通过flexible.js动态地为html 设置字体大小，将屏幕划分为10份
/*需要对最大屏幕进行限制*/
@media screen and (min-width: 750px) {
    html {
        /* 行内样式的优先级>外链样式优先级 */
        font-size: 75px!important;
    }
}

**方案4：html字体大小通过calc(100vw / 10)来设置
/*将屏幕大小始终都是100vw，并划分为10份*/
html{
  font-size: calc(100vw / 10);
}
/*用这种方法，也需要对最大屏幕进行限制*/
@media screen and (min-width: 750px) {
    html {
        font-size: 75px;
    }
}


**总结
1.根据不同的屏幕尺寸设置不同的html字体大小
- 媒体查询（份数自己决定）
- flexible.js(默认将屏幕划分为10份)
- font-size: calc(100vw / 份数);（份数自己决定）

2.将元素的尺寸单位的px转换为rem
- less运算
- cssrem插件(修改 rem基数)
- pxcook测量工具(修改 rem基数 和 小数点精确度)

less导入

@import "less路径";

// 在index.less中导入common.less文件
// 如果common.less改变，那index.less文件也需要重新编译
@import "common";

// @import 可以把一个样式文件导入到另一个样式文件中
// link 是把一个样式文件引入到html文件中

响应式布局

不同的屏幕尺寸通过*媒体查询*改变布局容器的大小，设置元素不同的大小和布局样式

屏幕的划分：

- 超小屏幕  [0, 768px)       容器width:100%
- 小屏幕    [768px, 992px)   容器width:750px
- 中等屏幕  [992px, 1200px)  容器width:970px
- 大屏幕    [1200px, +∞)     容器width:1170px

Bootstrap

.container：
- 用于固定宽度并支持响应式布局的容器。
- 适合web端响应式布局
- 左右有15px的padding

.container-fluid：
- 类用于 100% 宽度，占据全部视口（viewport）的容器。
- 适合移动端100%布局
- 左右有15px的padding

栅格系统
- column 12份
- 超小屏幕  [0, 768px)              .col-xs-   >=0
- 小屏幕    [768px, 992px)  750px   .col-sm-   >=768
- 中等屏幕  [992px, 1200px)  970px  .col-md-   >=972px
- 大屏幕    [1200px, +∞)     1170   .col-lg-   >=1200conpx

如果份数不会根据屏幕大小改变，则直接设置col-xs即可

		</div>
</div>

<!--列偏移-->
<div class="row">
		<div class="col-md-6"></div>
		<div class="col-md-4 col-md-offset-2"></div>
</div>

<!--列排序-->
<div class="col-md-4 col-ly-push-8">
<div class="col-md-8 col-ly-pull-4">

<!--响应式工具-->
- .hidden-xs 只在超小屏隐藏  ———— .visible-xs
- .hidden-sm 只在小屏隐藏    ———— .visible-sm
- .hidden-md 只在中等屏隐藏   ———— .visible-md
- .hidden-lg 只在大屏隐藏    ———— .visible-lg

实际案例

tab栏

`tab_list`——tab栏；  
`tab_content`——tab栏下的内容

导航栏效果实现

/*ul>li>a*/

ul{
    height: 36px;  
    line-height: 36px;
}

a{
    padding:0 10px;
} 

li::after{
    content:'|'
}

a::after{
    content: '\e91e'; 
    margin-left: 10px; 
    vertical-align: -2px
}

margin-left:auto

让标准流中的盒子在最右边：margin-left:auto。即把块元素的剩余空间全部分配到盒子的左边

左-中-右效果实现

  - 左右两边的盒子绝对定位，中间的盒子标准流，不给宽度，给左右margin值

  - 左右两边盒子浮动，且要写在标准流盒子前面
  - 父盒子display:flex, 左右盒子固定宽度，中间盒子flex:1;

顶部固定定位

`固定定位`默认的是最小宽度/内容宽度，所以一定要给宽度

position: fixed;
width: 100%;
min-width: 320px;
max-width: 640px;

图片(max-width:100%)

<div class="pic"><img src="./images/logo.png" alt=""></div>

.pic img{
    /* 如果图片超过父盒子，图片宽度就是父盒子宽度，如果没有超过，则保持自己原有的宽度 */
    max-width: 100%;
    /*如果在标签选择器中写了 width:100% ,则需要用initial层叠掉该值*/
    width: initial;
}

避免页面刷新的过渡效果(transition)

- 给页面加一个<script>0</script>标签
- 或者引入已有的script文件