一、css（Cascading style sheets）层叠样式表
1.CSS
1.1 CSS语法
规则：head标签里，title标签下面的style标签
形式：选择器 {属性名:属性值;}//多个样式键值对构成
作用：给页面中的html标签设置样式
1.2 CSS引入方式
（1）内嵌式
css写在style标签里（style标签虽然可以写在页面任何位置，但是通常约定写在head标签中）
作用范围：当前页面
使用场景：小案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
p {
/* 文字颜色 */
color:red;
}
</style>
</head>
<body>
<p>你好</p>
</body>
</html>
（2）外联式
css写在一个单独的.css文件中（通过link标签在网页中引入）
作用范围：多个页面
使用场景：项目中
//.css文件中
p {
/* 文字颜色 */
color:red;
}
//.html文件中
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="./01.css">
</head>
<body>
<p>你好</p>
</body>
</html>
（3）行内式
css写在标签的style属性中
作用范围：当前标签
使用场景：配合JS使用
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <p style="color: aqua;">你好</p> </body> </html>
2.Chrome调试工具修改和检查样式
（1）打开方式
浏览器右击->检查
（2）选择元素
在Elements区域选择/左上角点击箭头->直接点击网页中元素
（3）控制样式
需要回代码修改才会永久保留
1.修改属性值：Style区点击所需样式进行修改
2.添加属性值：点击当前Style区域样式的分号
3.控制样式生效:Style区域中点击或取消样式前的框
4.查看选择器：查看Style区域
5.查看标签继承性：查看style，灰色代表不能继承，高亮代表可以继承
（4）特殊情况
出现删除线：当前属性被覆盖/注释
出现小三角感叹号：语法问题，鼠标停留给出错误原因
3.基础选择器
选择器作用：选择页面中对应的标签（找他），方便后续设置样式（改他）
3.1 标签选择器
结构：标签名 {属性名:属性值;}
作用：通过标签名，找到页面中所有这类标签，设置样式
//标签选择器选择的是一类标签不是单独某一个
//标签选择器无论嵌套关系有多深，都能找到对应的标签
<head>
<title>标签选择器</title>
<style>
p {
color:red;
}
</style>
</head>
<body>
<p>你好</p>
</body>
3.2 类选择器
结构：.类名 {属性名:属性值;}
作用：通过类名，找到页面中所有带这个类名的标签，设置样式
//所有标签都有class属性，其值称为类名
//类名组成为数字，字母，下划线，中划线，其中字母、中划线不能开头
//一个标签可以有多个类名，类名之间空格隔开
//类名可以重复，一个类选择器可以选中多个标签
//适合冗余代码的抽取操作
<head>
<title>类选择器</title>
<style>
.red {
color: red;
}
.size {
font-size: 30px;
}
</style>
</head>
<body>
<p class="red size">你好</p>
<p class="red">世界</p>
</body>
3.3 id选择器
结构：#id属性值 {属性名:属性值;}
作用：通过id属性值，找到页面中所有带这个id属性值的标签，设置样式
//所有标签上都有id属性，一个标签只有一个不可重复的id属性值，一个id选择器只能选中一个标签
//一般配合JS使用
<head>
<title>id选择器</title>
<style>
#red {
color: red;
}
#size {
font-size: 30px;
}
</style>
</head>
<body>
<p id="size">你好</p>
<p id="red">世界</p>
</body>
3.4 通配符选择器
结构：* {属性名:属性值;}
作用：找到页面中所有的标签，设置样式
//使用极少，可用于去除标签默认的margin和padding
<head>
<title>通配符选择器</title>
<style>
* {
color: red;
font-size: 30px;
margin:0;
padding:0;
}
</style>
</head>
<body>
<p>你好</p>
<div>世界</div>
</body>
4.选择器进阶
4.1 复合选择器
（1）后代选择器
选择器1 选择器2 {css}
结果：在选择器1所找到标签的后代（儿子、孙子、重孙子…）中，找到满足选择器2的标签，设置样式
<head>
<style>
/* 注意空格 */
.father p{
color: red;
}
</style>
</head>
<body>
/* 里面和里里面变红 */
<div class="father">
<p>里面</p>
<div>
<p>里里面</p>
</div>
</div>
<p>外面</p>
</body>
（2）子代选择器
选择器1>选择器2 {css}
结果：在选择器1所找到标签的子代中，找到满足选择器2的标签，设置样式
<head>
<style>
.father>p{
color: red;
}
</style>
</head>
<body>
/* 里面变红 */
<div class="father">
<p>里面</p>
<div>
<p>里里面</p>
</div>
</div>
<p>外面</p>
</body>
4.2 并集选择器
格式：选择器1，选择器2 {css}
结果：找到选择器1和选择器2选中的标签设置样式
/*并集选择器的每组选择器通常一行放一个*/
/*并集选择器的每组选择器可以是基础选择器,也可是复合选择器*/
<head>
<style>
/* 全变红 */
div,
p,
.red,
.father p{
color:red;
}
</style>
</head>
<body>
<div class="father">
<p>子代</p>
<div>
<p>孙子</p>
</div>
</div>
<p>父代同辈</p>
</body>
4.3 交集选择器
格式：选择器1选择器2 {css}
结果：找到页面中既被选择器1选中又被选择器2选中的标签设置样式
/*若有，标签选择器必须写在最前面*/
<head>
<style>
p.red{
color:red;
}
</style>
</head>
<body>
<p>p</p>
<div class="red">red</div>
/*这条变红*/
<p class="red">p和red</p>
</body>
4.4 Emmet选择器
结果：通过简写语法，快速生成代码
<body>
<!-- 标签名：div -->
<div></div>
<!-- 类选择器：.red -->
<div class="red"></div>
<!-- id选择器：#one -->
<div id="one"></div>
<!-- 交集选择器：p.red#one -->
<p class="red" id="one"></p>
<!-- 子代选择器：ul>li -->
<ul>
<li></li>
</ul>
<!-- 内部文本：ul>li{内容} -->
<ul>
<li>内容</li>
</ul>
<!-- 创建多个：ul>li{内容}*3 -->
<ul>
<li>内容</li>
<li>内容</li>
<li>内容</li>
</ul>
</body>
4.5 hover伪类选择器
格式：选择器:hover {css}
结果：选中鼠标悬停在元素上的状态，设置样式
<head>
<style>
a {
text-decoration: none;
color:blue;
}
a:hover {
text-decoration:underline;
color:red;
}
.box {
width:100px;
height:100px;
background-color:blue;
}
.box:hover {
width:150px;
height:150px;
background-color:red;
}
</style>
</head>
<body>
<a href="#">链接</a>
<div class="box"></div>
</body>
5.字体和文本相关样式属性
5.1 字体样式属性
⭐常见字体系列：
无衬线字体(sans-serif):文字笔画粗细均匀，首尾无装饰，网页中大多采用，常见该系列字体如黑体，Arial
衬线字体（serif）:文字笔画粗细不匀，首尾有笔锋装饰，报刊中广泛应用，常见该系列字体如宋体，Times New Roman
等宽字体(monospace):每个字母或文字的宽度相等，一般用于程序代码编写，有利于代码的阅读与编写，常见该系列字体如Consolas,fira code
<style>
/* 1.文字大小：数值+px，谷歌默认16px */
font-size: 30px;
/* 2.字体粗细：数值：100-900的整百数;关键字:normal(正常400)/bold(加粗700)*/
/*不是所有都提供九种粗细，故部分页面无法变化*/
/*不设情况下为normal*/
font-weight: 100;
/*3.字体样式：normal(默认正常)/italic(斜体) */
font-style: italic;
/*4.字体族：具体字体1，具体字体2......字体系列(serif衬线字体/sans-serif非衬线字体/monospace等宽字体) */
/*字体选择从左到右依次解析当前设备是否存在，直至最后一个字体系列，显示其默认字体*/
/*字体单词存在空格则''起来，字体序列不需要*/
/*windows默认字体微软雅黑，macOS默认字体苹方*/
font-family: 'Times New Roman',隶书,宋体 sans-serif;
/*5.属性font的连写；style,weight,size/line-height,family(口诀：稍微舒服)*/
/*只能省略前两个，相当于设置默认值*/
/*同时设置单独和连写，要么把单独样式放在连写里，要么把单独样式放在连写下*/
font:italic 700 30px 'Times New Roman',隶书,宋体 sans-serif;
/*6.颜色:(1)关键词:如red.green...*/
/* (2)rgb表示法:红绿蓝，每项0-255，如rgb(0,0,0)*/
/*(3)rgba表示法:红绿蓝+a表示透明度，a取值范围0-1,越大越不透明，如rgba(255,255,255,0.5)*/
/*(4)十六进制表示法:#开头，将数字转换为十六进制表示，两个数表示一个颜色，如：#000000三组都相等可简写#000 */
background-color: aqua;
color: red;
}
</style>
5.2 文本样式
<style>
/* 1.文本缩进:数字+px（像素）/em（font-size大小） */
text-indent: 2em;
/* 2.水平对齐:left左对齐/center居中对齐/right右对齐 */
/* 文本、行内元素、行内块元素的父元素设置 */
text-align: left;
/* 3.装饰线:none无/underline下划线/overline上划线/line-through删除线 */
/* 常用none消除超链接的下划线 */
text-decoration: none;
/* 4.行高：数字+px（像素）/em（font-size大小） */
/*(1)通过行高设置单行文本的垂直居中效果：值和父元素的高相等*/
/*(2)网页精准布局，消除原有行距：在body中设置值为1*/
line-height: 1;
/*5.文字阴影*/
/*h-shadow必须，水平偏移量，允许负值;v-shadow必须，垂直偏移量，允许负值;blur可选，模糊度;color可选，阴影颜色*/
/*阴影可以叠加设置，每组阴影取值逗号隔开*/
text-shadow:20px 20px 100px red;
}
</style>
6.背景相关属性
<style>
/* 1.背景颜色：默认透明，值为transparent或rgba(0,0,0) */
/* 取值为：关键字，rgb表示法，rgba表示法，十六进制 */
background-color: red;
/* 2.背景图片：默认无，值为url(路径，引号可省略) */
/* 默认水平和垂直方向平铺 */
/* 与img标签的区别：img是一个标签，不设置宽高，默认原尺寸显示；使用div盒子+背景图片则需要设置盒子宽高，因为背景图片只是装饰的CSS样式，不能撑开div标签 */
background-image: url(./car.jpg);
/*3.设置背景图片大小：数字，百分比，contain包含（背景图片等比例缩放直到不超过盒子的最大）,cover覆盖（背景图片等比例缩放至覆盖满盒子）*/
background-size:宽度 高度；
/* 4.背景重复：默认平铺，值为repeat */
/* 取值为：repeat，repeat-x（方向x上平铺），repeat-y（方向y上平铺），no-repeat（不平铺） */
background-repeat: no-repeat;
/*5. 背景位置：默认左上角，值为top，bottom，left，right，center */
/* 取值为：方位名词/精确值 ，可以混合使用*/
/* 方位名词：水平方向名词 垂直方向名词 */
/* 精确值(左上角为原点)：水平方向px 垂直方向px*/
background-position: center center;
/* 6.背景属性连写 */
/* 背景颜色 背景图片 背景重复 背景位置 背景图片大小*/
/* 可以按照需求省略 */
/* PC端中，若背景图片和盒子大小相同，可直接写成background: url() */
/* 需要设置单独的样式则把单独的样式写进连写或者写在连写的下面 */
background: red url(./car.jpg) no-repeat center center/400px 400px;
}
</style>
7.Html元素显示模式
7.1 块级元素
属性：display:block
特点：独占一行；宽度默认是父元素的宽度，高度默认有内容撑开，可以设置宽高
代表标签：div,p,h系列,ul,li,dl,dt,dd,form,header,nav,footer
查看：检查->Computed->搜索display
7.2 行内元素
属性：display:inline
特点：一行可以显示多个，高度和宽度默认由内容撑开，不可以设置宽高
代表标签：a,span,b,u,i,s,string,ins,em,del
7.3 行内块元素
属性：display:inline-block
特点：一行可以显示多个，可以设置宽高
代表标签：input,textarea,button,select(img有行内块元素特点，但谷歌调试工具显示inline)
7.4 元素显示模式转换
改变元素默认的显示特点，让元素符合布局要求
<style>
/*转成块级元素*/
display:block;
/*转成行内块元素*/
display:inline-block;
/*转成行内元素*/
display:inline;
/*元素隐形*/
display:none;
/*例子：d点击.app出自现.code*/
.code {
display:none;
position:absolute;
top:40px;
right:50px;
border: 1px solid black;
}
.app:hover .code{
display:block;
}
</style>
/*1.HTML嵌套规范注意点：p标签不要嵌套div,p,h等块级元素*/
<body>
<p>
<div></div>
</p>
</body>
浏览器自动补为
<body>
<p></p>
<div></div>
<p></p>
</body>
/*2.a标签可以嵌套任何元素，但不能嵌套自己*/
<body>
<a href="#">
<a href="#">我是一个a标签</a>
</a>
</body>
浏览器自动转表为
<body>
<a href="#"></a>
<a href="#">我是一个a标签</a>
</body>
8.CSS三大特性
8.1 继承性
⭐特性
子元素有默认继承父元素样式的特点
⭐可以继承的常见属性
color;font-style;font-weight;font-size;font-family;text-indent;text-align;text-transform;line-height;letter-spacing;word-spacing;
⭐好处
可以在一定程度上减少代码
⭐应用场景
/*1.可以直接给ul或者li设置list-style:none属性，从而去除列表默认的小圆点样式*/
<style>
ul {
list-style:none;
}
</style>
<body>
<ul>
<li>111</li>
<li>222</li>
<li>333</li>
</ul>
</body>
/*2.直接给body标签设置统一的font-size,从而统一不同浏览器默认文字大小*/
<style>
body{
font-size:20px;
}
</style>
<body>
<ul>
<li>111</li>
<li>222</li>
<li>333</li>
</ul>
</body>
⭐继承失效的特殊情况
/*1.如果元素有浏览器默认样式，此时继承性依然存在，但是优先显示浏览器的默认样式*/
/*a标签的文字颜色会继承失效*/
/*h系列标签的font-size会继承失效*/
/*div标签的高度、宽度不能继承，但是宽度有类似于继承的效果*/
<head>
<style>
.father {
color: red;
font-size: 20px;
width: 200px;
height: 200px;
background-color: pink
}
.son {
width: 100px;
height: 100px;
background-color: blue;
}
</style>
</head>
<body>
<div class="father">
<a href="#">这是一个a标签</a>
<h1>这是一个h1标签</h1>
<div class="son"></div>
</div>
</body>
8.2层叠性
⭐特性
给同一个标签相同的样式，此时样式重叠覆盖，最终写的样式生效；给同一个标签设置不同的样式，此时样式层叠叠加，共同作用在标签上
（当样式冲突时，只有当选择器优先级相同时，才能通过层叠性判断结果）
8.3优先级
⭐特性
不同选择器具有不同的优先级，优先级高的选择器样式会覆盖优先级低的选择器样式
⭐优先级公式
继承<通配符选择器<标签选择器<类选择器\伪类选择器<id选择器<行内样式<!important
<!-- !important写在属性值的后面，分号的前面 --> <!-- !important不能提升继承的优先级，只要是继承优先级最低 --> <!-- 实际开发中不建议使用!important -->
（1）权重叠加计算
针对于复合选择器判断最终哪个选择器优先级最高会生效
权重叠加公式（0，0，0，0）->(第一级，第二级，第三级，第四级)
->(行内样式的个数，id选择器的个数，类选择器的个数，标签选择器的个数)
比较规则：逐级比较，比较出来则不往后看了；若数字全相同，表示优先级相同，则比较层叠性（!important 如果不是继承，则权重最高）
<head>
<style>
/* 0,1,0,1 */
div #one {
color:orange;
}
/* 0,0,2,0 */
.father .son {
color:blue;
}
/* 0,0,1,1 */
.father p {
color:yellow;
}
/* 0,0,0,2 */
div p {
color:green;
}
</style>
</head>
<body>
<div class="father">
<p class="son" id="one">hello world</p>
</div>
</body>
权重计算题解题步骤：先判断选择器是否直接选中标签，如果不能直接选中则是继承，优先级最低，直接pass掉；其次通过权重公式判断谁权重最高；权重相同看层叠行；若某标签其选择器全是继承，则分析该标签的父标签重新进行选中和权重分子
<head>
<style>
/*0,2,0,0*/
#fathrer #son {
color: red;
}
/*0,1,1,1*/
#father p.c2{
color: blue;
}
/*0.0.2,2*/
div.c1 p.c2{
color: green;
}
/*继承 pass*/
#father{
color: yellow !important;
}
/*继承 pass*/
div#father c1 {
color: pink;
}
</style>
</head>
<body>
<div id="father" class="c1">
<p id="son" class="c2">hello world</p>
</div>
</body>
实际开发中尽量避免多个选择器同时选中一个标签的情况
（2）PxCook工具测量数据图
使用其从psd文件中直接获取尺寸和颜色
打开设计图：打开软件，拖入设计图，新建项目
常用快捷键：放大（ctrl++），缩小（ctrl+-），移动(空格＋鼠标拖动)，删除标注（点击+delete）
常用工具：量尺寸（左侧距离标注工具，拖长度），吸颜色（吸管工具+点击颜色）
从psd文件中直接获取数据：上方点击开发栏，通过点击获取数据
（3）盒子模型
CSS规定每个盒子分四个区域：内容区域(content)，内边距区域(padding)，边框区域(border)，外边距区域(margin)
布局顺序：从外往内，从上往下，每一个盒子再布局宽高、辅助背景颜色、盒子模型部分（margin\border\padding）、其他样式(color\text-\font-)
/*盒子阴影*/ /*h-shadow必须，水平偏移量，允许负值;v-shadow必须，垂直偏移量，允许负值;blur可选，模糊度;spread可选，阴影扩大;color可选，阴影颜色;inset可选，将阴影改为内部阴影*/ box-shadow: 10px 10px 15px 20px black inset;
（3.1）盒子实际大小
⭐宽度和高度内容的宽高：width/height:数字+px
⭐盒子实际大小计算公式
盒子宽度=左边框+左内边距+内容宽度+右内边距+右边框
盒子高度=上边框+上内边距+内容高度+下内边距+下边框
解决方法：手动内减，自动内减
<style>
/* 自动内减：只要设置一个属性，浏览器会自动计算多了多少，自动在内容中减去 */
/* CSS3盒模型： */
box-sizing: border-box;
</style>
（块级元素不会撑大盒子的情况：子盒子没有设置宽度，此时宽度默认是父盒子的宽度，此时子盒子设置左右border和padding不会撑大）
（3.2）边框border
<style>
/* 1.边框粗细：数字+px */
border-width: 20px;
/* 2.边框样式：solid实线/dashed虚线/dotted点线 */
border-style: solid;
/* 3.边框颜色：颜色取值*/
border-color: red;
/* 4.边框合并：collapse合并/separate分开为默认值*/
border-collapse:collapse;
/* 5.边框圆角：数字+px ，越大越圆 */
/*从左上角顺时针赋值，无赋值看对角*/
/*应用：画正圆（正方形盒子50%取值），画胶囊（长方形盒子，值为盒子高度一半），画三角形（设置一个盒子，设置四周不同颜色的边框，将盒子宽高设置为0，仅保留边框，得到四个三角形，选择其中一个后其他三个边框颜色设置透明transparent,可以通过边框宽度调整三角形的形态）*/
border-radius: 50px;
/* 6.边框的连写：border:width style color */
border: 20px solid red;
/* 7.单方向边框设置：border-top/bottom/right/left:连写值 */
border-top: 20px solid red;
</style>
（3.3）内边距padding
记忆规则：从上开始赋值，然后顺时针赋值，没有赋值看对面
<style>
/* 一个值：上下左右10px */
padding: 10px;
/* 两个值：上下10px左右20px */
padding: 10px 20px;
/* 三个值：上10px左右20px下30px */
padding: 10px 20px 30px;
/* 四个值：上10px右20px下30px左40px */
padding: 10px 20px 30px 40px;
/* 单方向取值:left,right,top,bottom */
padding-left: 10px;
</style>
(3.4)外边距margin
记忆规则与padding相同
/*块级元素水平居中直接在当前元素本身设置即可*/
/*margin:0 auto;一般用于固定宽度盒子*/
/*无固定宽度的大盒子会默认占满父元素宽度,margin不起作用*/
margin:0 auto;
<style>
/* 一个值 */
margin:10px;
/* 两个值 */
margin:10px 20px;
/* 三个值 */
margin:10px 20px 30px;
/* 四个值 */
margin:10px 20px 30px 40px;
/* 单方向设置*/
/* margin-left:当前盒子向右移动
margin-top:当前盒子往下移动
margin-right:右边盒子向右移动
margin-bottom:下面的盒子向下移动*/
margin-left:10px;
</style>
⭐清除默认外边距：去掉浏览器默认的padding和margin,例如body自带8px的margin,p标签默认有上下的margin:16px,ul标签默认有上下的margin:16px和padding-left：40px
<style>
*{
padding:0;
margin:0;
}
</style>
⭐ 外边距正常现象：水平布局两盒子最终距离为左右margin的和
外边距折叠现象：
1.合并现象：垂直布局的块级元素，上下margin会合并，最终距离为margin最大值，解决方法为只给其中一个盒子设置margin就好
2.塌陷现象：互相嵌套的块级元素，子元素的margin-top会合并作用在父元素上，最终导致父元素也一起往下移动，解决方法为：给父元素设置border-top或者padding-top（分割父子元素的margin-top）/给父元素设置overflow:hidden/给父元素转换成行内块元素/设置浮动
⭐padding和margin无效情况：行内元素设置时，水平方向布局中有效，垂直方向布局中无效
9.CSS布局
9.1 结构伪类选择器
作用：根据元素在html中的结构关系查找元素
优势：减少对于html中类的依赖，有利于保持代码整洁
场景：常用于查找某父级选择器中的子元素
<style>
/* 1.选择第一个子元素 ,并且为li标签*/
li:first-child{
color: red;
}
/* 2.选择最后一个子元素 ,并且为li标签*/
li:last-child{
color: blue;
}
/* 3.选择第n个子元素 ,这里为3,并且为li标签*/
/* n可以组成常见公式：偶数(2n/even)、奇数(2n+1/2n-1/odd)、找到前五个(-n+5)、找到从第五个往后（n+5）*/
li:nth-child(3){
color: green;
}
/* 4.选择倒数第n个子元素 ,这里为3,并且为li标签*/
li:nth-last-child(3){
color: pink;
}
/* 5.通过该类型找到符合的一堆子元素，然后在这堆子元素中数个数 */
:nth-of-type(n){
color: red;
}
/*注意：易错写法-查找第一个a标签 */
li a:first-child{
color:re11d;
}
/* 正确写法 */
li:first-child a{
color:red;
}
</style>
⭐选择器扩展
（1）链接伪类选择器
常用于选中超链接的不同状态
<head>
<style>
/* link为选中a链接未被访问过的状态，visited访问之后的状态，hover鼠标悬停状态，active鼠标按下状态 */
/*四种都设置的顺序LVHA*/
a:link{
color:red;
}
</style>
</head>
<body>
<a href="#">111</a>
</body>
（2）焦点伪类选择器
用于选中元素获取焦点时状态，常用于表单控件
/*表单控件获取焦点时默认会显示外部轮廓线*/
<head>
<style>
input:focus {
background-color: aqua;
}
</style>
</head>
<body>
<input type="text">
</body>
</html>
（3）属性选择器
通过元素上的HTML属性来选择元素，常用于选择input标签
/*E[attr]选择具有attr属性的E元素*/
/*E[attr="val"]选择具有attr属性且值等于val的E元素*/
<head>
<style>
input[type="text"]{
background-color: pink;
}
</style>
</head>
<body>
<input type="text">
</body>
9.2 伪元素
一般页面中的非主体内容可以使用伪元素，伪元素默认是行内元素
⭐区别：元素是html设置的标签，伪元素是由CSS模拟出的标签效果
⭐条件：必须设置给content属性才能生效
<head>
<style>
.father {
width:300px;
height:300px;
background-color:orange;
}
/* ::before在父元素内容的最前添加一个元素 */
/* ::after在父元素的最后添加一个伪元素 */
.father::before {
content:'伪元素';
display:block;
width:100px;
height:100px;
background-color:red;
}
</style>
</head>
9.3 标准流
又称文档流，是浏览器在渲染显示网页内容时默认采用的一套排版规则，规定了应该以何种方式排列元素
⭐常见标准流排版规则：
1.块级元素：从上往下，垂直布局，独占一行
2.行内元素或行内块元素：从左往右，水平布局，空间不够自动换行
9.4 浮动float
作用：让垂直布局的盒子变成水平布局
<!DOCTYPE html>
<html lang="en">
<head>
<style>
/* 左浮动left,右浮动right */
img {
float:left;
margin-right:10px;
}
.left {
float:left;
width:300px;
height: 300px;
background-color: red
}
.right {
float:right;
width:300px;
height: 300px;
background-color: red
}
</style>
</head>
<body>
<!-- 1.图文环绕 -->
<img src="./iphone.jpg" alt=""> 11111111111111111111111111111111111111111111111111111111111111111111111111111111111
<!-- 2.网页布局:垂直布局->水平布局 -->
<div class="left"></div>
<div class="right"></div>
</body>
</html>
⭐特点：1.浮动元素会脱离标准流（脱标），在标准流中不占位置
2.浮动元素比标准流高半个级别，可以覆盖标准流中的元素
3.浮动找浮动，下一个浮动会在上一个浮动元素后面左右浮动
4.浮动元素会受上面元素边界的影响
5.浮动元素有特殊的显示效果：一行可以显示多个；可以设置宽高
注意：浮动元素不能通过margin:0 auto和text-align:center让浮动元素本身水平居中，但可以使用其让浮动元素的内容居中
9.5 清除浮动
清除浮动带来的影响（如果子元素浮动了,此时子元素不能撑开标准流的块级父元素，父元素高度为0）
目的：需要父元素有高度，从而不影响其他网页元素的布局
方法：
（1）直接设置父元素高度
/*特点：简单粗暴，便捷，但有些布局中不能固定父元素高度*/
<head>
<style>
.father{
width: 200px;
height: 200px;
background-color: red;
}
.son{
width: 100px;
height: 100px;
background-color: blue;
float:left;
}
</style>
</head>
<body>
<div class="father">
<div class="son"></div>
</div>
</body>
（2）额外标签法
/*特点：会在页面中添加额外的标签，使一面的html结构变得更复杂*/
/*操作：在父元素内容的最后添加一个块级元素，给添加的块级元素设置clear:both*/
<head>
<style>
.father{
width: 200px;
background-color: red;
}
.son{
width: 100px;
height: 100px;
background-color: blue;
float:left;
}
.clear{
clear: both;
}
</style>
</head>
<body>
<div class="father">
<div class="son"></div>
<div class="clear"></div>
</div>
</body>
（3）单伪元素清除法
/*特点：项目中使用，直接给标签加类即可清除浮动*/
<head>
<style>
.father{
width: 200px;
background-color: red;
}
.son{
width: 100px;
height: 100px;
background-color: blue;
float:left;
}
/* 基本写法 */
.clearfix::after{
content:'';
display:block;
clear: both;
}
/* 补充写法 */
.clearfix::after{
content:'.';
display:block;
clear:both;
height:0;
visibility:hidden;
}
</style>
</head>
<body>
<div class="father clearfix">
<div class="son"></div>
</div>
</body>
（4）双伪元素清除法
/*特点：项目中使用，直接给标签加类即可清除浮动*/
/*after能清除浮动影响，before能解决margin的塌陷现象*/
<head>
<style>
.father{
width: 200px;
background-color: red;
}
.son{
width: 100px;
height: 100px;
background-color: blue;
float:left;
}
.clearfix::before,
.clearfix::after{
content:'';
display:table;
}
.clearfix::after{
clear: both;
}
</style>
</head>
<body>
<div class="father clearfix">
<div class="son"></div>
</div>
</body>
（5）给父元素设置overflow-hidden
/*特点：方便*/
<head>
<style>
.father{
width: 200px;
background-color: red;
overflow: hidden;
}
.son{
width: 100px;
height: 100px;
background-color: blue;
float:left;
}
</style>
</head>
<body>
<div class="father">
<div class="son"></div>
</div>
</body>
</html>
⭐快格式化上下文(Block Formatting Context):是web页面的可视CSS渲染的一部分，是块盒子的布局过程发生的区域，也是浮动元素与其他元素交互的区域
1.创建BFC方法：
(1)html、浮动元素、行内块元素都是BFC盒子
(2)overflow属性取值不为visible,如auto、hidden…
2.BFC盒子常见特点：
(1)BFC盒子会默认包裹住内部子元素（标准流、浮动）->应用：清理浮动
(2)BFC盒子其本身与子元素之间不存在margin塌陷现象->应用：解决margin塌陷问题
9.6 定位position
（1）应用场景
可以解决盒子鱼盒子之间的层叠问题；始终让盒子固定在屏幕中的某个位置
（2）方法
1.设置定位方式：
⭐静态定位static：默认值,就是标准流,不能通过方位属性偏移值进行移动
⭐相对定位relative：自恋型定位，配合方位属性实现移动，相对于自己原来位置进行移动，相对定位的元素在原来的位置还是占的，没有脱标，应用场景为配合绝对定位组CP(子绝父相)；用于小范围移动
⭐绝对定位absolute：拼爹型定位，相对于非静态定位的父元素进行定位移动，配合方位属性实现移动，祖先元素中没有定位（静态定位不算），默认相对于浏览器可视区域进行移动，祖先元素中有定位，相对于最近的有定位的祖先元素进行移动，在页面不占位置，已脱标，应用场景为配合绝对定位组CP(子绝父相)
/*子绝父相*/
/*子绝父绝的特殊场景：在使用子绝父相时，发现父元素已经有绝对定位了，此时直接子绝即可*/
/*子绝父相水平居中：先让子盒子往右移动父盒子的一半（left:50%），再让子盒子往左移动自己的一半(margin-left负的子盒子宽度的一半，但子盒子宽度变化后需要重新改代码，优化写法transform:translateX(-50%))*/
/*子绝父相垂直居中：先让子盒子往下移动父盒子的一半（top:50%），再让子盒子往上移动自己的一半(transform:translateY(-50%))，水平垂直同时居中会覆盖，使用连写形式translate（-50%，-50%）*/
<head>
<style>
.father{
width:600px;
height:600px;
background-color: red;
position:relative;
}
.son {
width:400px;
height:400px;
background-color: blue;
position:absolute;
right:0;
bottom:0;}
</style>
</head>
⭐固定定位fixed：死心眼定位，相对于浏览器进行定位移动，需要配合方位属性实现移动，相对于浏览器可视区域进行移动，在页面中不占位置，已经脱标
2.设置偏移值:水平和垂直方向各选一个，就近原则
（3）元素层级问题
不同布局方式元素的层级关系：标准流<浮动<定位
不同定位之间的层级关系：相对、绝对、固定默认层级相同，html中根据书写顺序覆盖
⭐更改定位元素层级z-index:数字越大，层级越高
9.7 装饰
（1）垂直对齐方式
基线baseline:浏览器文字类型元素排版中存在用于对其的基线，拼音格的第三根线
⭐文字对齐问题：解决行内/行内块元素垂直对齐问题，图片和文字在一行显示时底部不对齐，适用情景有文本框和表单按钮无法对齐问题，input和img无法对齐问题，div中的文本框无法贴顶问题，div不设置高度会由img撑开，此时img下面存在额外间隙问题，可以使用line-height配合垂直对齐方式让img垂直居中
<head>
<style>
img {
/* 垂直对齐：baseline默认基线对齐,top顶部对齐,middle中部对齐,bottom底部对齐 */
vertical-align: middle;
}
</style>
</head>
<body>
<img src="./iphone.jpg" alt="">
111
</body>
（2）光标类型cursor
设置鼠标光标在元素上时显示的样式
default:默认箭头；pointer：小手效果提示用户可以点击；text：工字形，提示用户可以选择文字；move：十字光标，提示用户可以移动
（3）overflow溢出部分显示效果
溢出部分指的是盒子内容部分所超出盒子范围的区域
visible默认值溢出部分可见,hidden溢出部分隐藏,scroll无论是否溢出都显示滚动条,auto根据是否溢出自动显示或隐藏滚动条
（4）元素本身隐藏
⭐visibility:hidden元素隐藏后网页中占位置
⭐display:none元素隐藏后网页中不占位置->显示block
（5）元素透明度opacity
元素整体包括内容一起变透明，1完全不透明，0完全透明
相较于display:none，opacity虽然透明但仍占据空间，也支持动画和过渡效果。
（6）精灵图
项目中将多张小图片合并成一张大图片
优点：减少服务器发送次数，减少服务器的压力。提高页面加载速度
使用步骤：创建一个盒子，通过PxCook量取小图片大小，将小图片的宽高设置给盒子，将精灵图设置为盒子的背景图片，通过PxCook测量小图片左上角坐标，分别取负值设置给盒子的background-position:x y
<head>
<style>
div {
width:24px;
height:24px;
background: url('./jinglingtu.png') 0 -264px;
}
</style>
</head>
<body>
<div></div>
</body>
（7）过渡transition
让元素样式慢慢的变化，常配合hover使用
/*条件：默认状态和hover状态样式不同；属性给需要过渡的元素本身加；给默认状态设置鼠标移入移出都有过渡效果；给hover状态设置鼠标移入有过渡效果，移出没有过渡效果*/ /*属性：all能过渡的属性都过渡，具体属性则只有该属性过渡*/ /*时长：数字+s（秒）*/ transition：all 1s; transition：width 1s,background-color 2s;
二.项目
1.网页与网站的关系
多个同主题网页整合成网站，网站时提供特定服务的一组网页集合
2.骨架结构标签
<!--文档类型说明，告诉浏览器该网页的html版本,此处为html5,DOCTYPE需要写在页面第一行。不属于HTML标签-->
<!DOCTYPE html>
<!--标识网页使用语言，作用：搜索引擎分类+浏览器翻译，常见语言：zh-CN简体中文/en英文 -->
<html lang="en">//
<head>
<!-- 标识网页使用的字符编码，作用：保存和打开的字符编码需要统一设置，否则可能出现乱码，常见字符编码：UTF-8:万国码，国际化字符编码，收录全球文字，开发中统一使用;GB2312：6000+汉字;GBK：20000+汉字 -->
<meta charset="UTF-8">
<!--视口-->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!--题目，web网页上边栏显示，移动上侧标题-->
<title>Document</title>
<style>
div {
width:24px;
height:24px;
background: url('./jinglingtu.png') 0 -264px;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
3.SEO三大标签
Search Engine Optimization 搜索引擎优化
作用：让网站在搜索引擎上的排名靠前
方法：1.竞价排名 2.将网页制作成html后缀 3.标签语义化（合适的地方使用合适的标签）
三大标签：1.title网页标题标签 2.description网页描述标签 3.keywords网页关键词标签
4.ico图标设置
显示在标签页标题左侧的小图标，习惯使用.ico格式的图标
使用方法：在head中添加
<link rel="shortcut icon" href="ico图标路径" type="image/x-icon">
5.版心
把页面的主体内容约束在网页中间
作用：让不同大小的屏幕都能看到页面的主体内容
/*版心类名常用container,wrapper,w*/
.container {
width:1240px;
margin:0 auto;
}
6.CSS书写顺序
(1)布局属性：display,position,float,clear,visibility,overflow
(2)盒子模型+背景：width,height,margin,padding,border,background
(3)文本内容属性：color,font,text-decoration,text-align,line-height
(4)点缀属性：cursor,border-radius,text-shadow,box-shadow
对于选择器来说，推荐多用类+后代，一个选择器中类选择器的个数推荐不要超过三个
7.项目结构
（1）建造工程文件夹，所有项目相关文件放置在这里
（2）ico图标放在项目根目录/新建lib文件夹，下面放icofont外部引用样式
（3）新建index.html在根目录
（4）imges存放网站固定使用的图片素材 ，如logo.样式
uploads存放网站非固定使用的图片素材，如商品宣传图
（5）新建css文件夹，保存网站样式，base.css(基础公共样式),common.css(重复样式),index.css(首页样式)
（6）新建Less文件夹
（7）编写index.html和复制base.css
（8）header，footer开发
三、移动web
1.字体图标
基于iconfont网站
<!-- 1.引用样式表（svg文件和iconfont文件） 2.调用类名 -->
<head>
<link rel="stylesheet" href="./iconfont/iconfont.css">
<style>
//生效
/* .iconfont {
font-size: 60px;
} */
//不生效，标签选择器优先级低于类选择器
i {
font-size: 60px;
}
.blue {
color:blue;
}
</style>
</head>
<body>
/*打开iconfont-demo_index.html网页，直接替换favorites-fill*/
<i class="iconfont icon-favorites-fill"></i>
/*修改颜色：写设置字体颜色的类选择器*/
<span class="iconfont icon-QRcode blue"></span>
</body>
若图标库没有所需图标，则在IconFont网站上传矢量图（SVG格式）生成字体图标
2.平面转换
使用transform属性实现元素的位移、旋转、缩放等效果
坐标轴右下方向为正
<style>
.father {
width: 500px;
height: 300px;
margin: 100px auto;
border: 1px solid #000;
}
.son {
width: 200px;
height: 100px;
background-color: pink;
/*1.移动速度*/
transition: all 0.5s;
}
.father:hover .son {
/*2.位移：transform: translate(X轴, Y轴)，可实现双开门效果*/
transform: translate(100px, 50px);
/* 百分比: 盒子自身尺寸的百分比 */
transform: translate(100%, 50%);
transform: translate(-100%, 50%);
/* 只给出一个值表示x轴移动距离 */
transform: translate(100px);
transform: translateX(100px);
}
/*3.旋转：transform:rotate(角度)，角度单位为deg*/
img {
width: 250px;
/*旋转必须有过渡属性*/
transition: all 2s;
}
img:hover {
/* 顺 */
transform: rotate(360deg);
/* 逆 */
transform: rotate(-360deg);
}
/*4.转换原点：transform-origin:原点水平位置 原点垂直位置*/
img {
width: 250px;
border: 1px solid #000;
transition: all 2s;
/*改变转换的中心点*/
transform-origin: right bottom;
transform-origin: left bottom;
}
img:hover {
transform: rotate(360deg);
}
/*可使用位移+旋转实现轮胎滚动效果*/
.box {
width: 800px;
height: 200px;
border: 1px solid #000;
}
img {
width: 200px;
/*不想受padding对位置的影响，可以写标签+时间。如：transition:transform .5s*/
transition: all 8s;
}
.box:hover img {
/* 边走边转 */
transform: translate(600px) rotate(360deg);
/* 旋转可以改变坐标轴向，所以不能先写旋转 */
/* transform: rotate(360deg) translate(600px); */
/* 层叠性 */
/* transform: translate(600px);
transform: rotate(360deg); */
}
/*5.缩放：tansform:scale(x轴缩放倍数，y轴缩放倍数)，大于1放大，小于1缩小*/
</style>
3.渐变
利用background-image属性，常用于渐变mask
<style>
.box {
width: 300px;
height: 200px;
/* background-image: linear-gradient(
pink,
green,
hotpink
); */
background-image: linear-gradient(
/*transparent透明*/
transparent,
rgba(0,0,0, .6)
);
}
</style>
4.空间转换/3D转换
x,y,z三条坐标轴构成立体空间，z轴与视线方向相同，屏外为正方向
perspective属性实现透视，近大远小的视觉效果，加给父级，取值一般800-1200px，数值越小距离越近图越大
/*空间平移*/ transform: translate3d(X轴, Y轴,z轴) transform: translateX() transform: translateY() transform: translateZ() /*空间旋转：左手法则*/ transform:rotateZ(角度)//正数中心点为原点顺时针旋转 transform:rotateX(角度)//正数向屏幕里倒进去 transform:rotateY(角度)//正数向右倒 拓展：transform:rotate3d(x,y,z)//自定义旋转轴位置角度旋转，0-1取值 /*立体呈现:添加到父元素，再设置子盒子的位置=*/ transform-style:preserve-3d 1.两个面定位垂直分布 2.其中一个面沿着x轴旋转90° 3.一个面向上移动，一个面向前移动 4.对整体进行hover旋转 /*空间缩放：*/ transform:scaleX(倍数) transform:scaleY(倍数) transform:scaleZ(倍数) transform:scale3d(x,y,z)
/*PERSPECTIVE越小越扁平，越3d;越大越2d*/
/*perspective 属性定义了 3D 空间中观察者的距离（即“视点”距离屏幕的距离*/
/* perspective 和 transform 属性来控制元素在 3D 空间中的位置和视觉效果。*/
<style>
body {
/* perspective: 1000px; */
perspective: 200px;
/* perspective: 10000px; */
}
.box {
width: 200px;
height: 200px;
margin: 100px auto;
background-color: pink;
transition: all 0.5s;
}
.box:hover{
transform: translateZ(200px);
/* transform: translateZ(-200px); */
}
</style>
/*立体呈现*/
<style>
.cube {
position: relative;
width: 200px;
height: 200px;
margin: 100px auto;
background-color: pink;
transition: all 2s;
transform-style: preserve-3d;
}
.cube div {
position: absolute;
left: 0;
top: 0;
width: 200px;
height: 200px;
}
.front {
background-color: orange;
/* 向我走近200px */
transform: translateZ(200px);
}
.back {
background-color: green;
}
/* cube hover 为了看空间感效果 */
.cube:hover {
transform: rotateY(90deg);
}
</style>
5.动画
多个状态间的变化过程，动画过程可控
5.1 定义动画
@keyframes 动画名称 {
from {/动画的开始状态和盒子的默认样式相同时可以省略代码/}
to{}
}
@keyframes 动画名称 {
0% {}
10% {}
15% {}
100% {}
}
<style>
.box {
width: 200px;
height: 100px;
background-color: pink;
/* 使用动画 */
animation: change 1s;
}
/* 定义动画：200 到 500*300 到 800*500 */
/* 百分比指的是动画总时长的占比 */
@keyframes change {
0% {
width: 200px;
}
50% {
width: 500px;
height: 300px;
}
100% {
width: 800px;
height: 500px;
}
}
</style>
5.2 使用动画
animation:动画名字 花费时长；
/*animation复合属性*/ /*名称、时长必须赋值，取值不分前后，两个时间值，第一个表动画时长，第二个表延迟时间*/ animation: 动画名称 动画时长 速度曲线（linear匀速、steps(数值)分步动画） 延迟时间 重复次数（无限infinite） 动画方向（反向alternate） 执行完毕状态(backwards默认停留在开始状态，forwards停留在结束状态); /*animation拆分*/ animation-name动画名称 animation-duration动画时长 animation-delay延迟时间 animation-fill-mode动画执行完毕时状态 animation-timing-function速度曲线 animation-iteration-count重复次数 animation-direction动画执行方向 animation-play-state暂停动画(paused为暂停,配合：hover用)
5.3 逐帧动画
animation-timing-function:steps(数字)，一般配合精灵图使用
1.设置盒子尺寸是一张小图的尺寸，背景图为当前精灵图
2.改变背景图的位置，移动的距离就是精灵图的宽度
3.添加速度曲线steps(N)，N与精灵图上小图个数相同，添加无限重复效果
5.4 多组动画
animation属性给一个元素添加多个动画效果
animation: 动画1,动画2,动画N;
5.5 走马灯
<head>
<style>
* {
padding: 0;
margin: 0;
}
li {
list-style: none;
}
img {
width: 200px;
}
.box {
width: 600px;
height: 112px;
border: 5px solid #000;
margin: 100px auto;
}
.box ul {
width: 2000px;
animation:move 5s infinite linear;
}
.box li {
float:left;
}
@keyframes move {
0% {
transform: translateX(0);
}
100% {
transform: translateX(-1400px);
}
}
.box:hover ul{
animation-play-state: paused;
}
</style>
</head>
<body>
<div class="box">
<ul>
<li><img src="./images/1.jpg" alt="" /></li>
<li><img src="./images/2.jpg" alt="" /></li>
<li><img src="./images/3.jpg" alt="" /></li>
<li><img src="./images/4.jpg" alt="" /></li>
<li><img src="./images/5.jpg" alt="" /></li>
<li><img src="./images/6.jpg" alt="" /></li>
<li><img src="./images/7.jpg" alt="" /></li>
</ul>
</div>
</body>
6.移动端特点
PC屏幕大，网页固定版心;手机屏幕小，网页宽度多数为100%
PC中使用谷歌模拟器调试移动端：检查->左上角第二个->刷新
手机屏幕尺寸指的是对角线的长度（英寸）
分辨率分为硬件分辨率（出厂设置->物理分辨率：固定不可变）和缩放调节分辨率（软件设置->逻辑分辨率：软件驱动决定）
->iphone6/7/8物理分辨率750x1334，逻辑分辨率375x667
视口：适配不同设备宽度
->pc端默认分辨率和逻辑分辨率相同，移动端默认为980必须加视口meta
二倍图：使用像素大厨测量二倍图中元素的尺寸->开发模式设计图2x
->设计师按照物理分辨率设计，软件代码则按照逻辑分辨率编写
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7.百分比布局/流式布局
宽度自适应，高度固定
/*底部导航栏*/
<style>
* {
margin: 0;
padding: 0;
}
li {
list-style: none;
}
.toolbar {
position: fixed;
left: 0;
bottom: 0;
/* 百分比布局 流式布局 */
width: 100%;
height: 50px;
background-color: pink;
border-top: 1px solid #ccc;
}
.toolbar li img {
height: 100%;
}
.toolbar li {
float: left;
width: 20%;
height: 50px;
}
</style>
8.Flex布局
是一种浏览器提倡的布局模型，布局网页更快速、灵活，避免浮动脱标问题
设置方式：父元素（亲爹）添加display:flex;子元素自动挤压或者拉伸
效果：默认主轴在水平，弹性盒子沿着主轴排列
组成部分：弹性容器（父集）、弹性盒子（子集）
/*设置盒子间距：若盒子没有宽高，则由其内容撑开*/
/*1.主轴对齐:justify-content*/
justify-content:flex-start默认值，起点开始排列
justify-content:flex-end终点开始依次排列
justify-content:center沿主轴居中排列
justify-content:space-around主轴均匀排列，空白间距均分在弹性盒子两侧
justify-content:space-between主轴均匀排列，空白间距均分在相邻盒子（子集）之间
justify-content:space-evenly主轴均匀排列，弹性盒子与容器之间间距相等（所有地方距离相等）
/*2.侧轴对齐：align-items(添加到弹性容器)*/
align-items:flex-start默认值起点开始依次排列
align-items:flex-end终点开始依次排列
align-items:center沿侧轴居中排列
align-items:stretch默认值,弹性盒子沿着主轴被拉伸至充满容器(子集没高度时才会发生)
/*3.侧轴对齐：align-self（添加到弹性盒子）*/
align-self:flex-start默认值，起点开始依次排列
align-self:flex-end终点开始依次排列
align-self:center沿侧轴居中排列
align-self:stretch默认值，弹性盒子沿着主轴被拉伸至铺满容器
/*4.伸缩比flex:值，只占用父盒子剩余尺寸的份数*/
/*好处：适用不同尺寸窗口屏幕*/
/*5.更换主轴方向*/
.box li {
display: flex;
/* 1. 先确定主轴方向; 2. 再选择对应的属性实现主轴或侧轴的对齐方式 */
/* 修改主轴方向: 列 */
flex-direction: column;
/* 视觉效果: 实现盒子水平居中 */
align-items: center;
/* 视觉效果: 垂直居中 */
justify-content: center;
width: 80px;
height: 80px;
border: 1px solid #ccc;
}
/*6.弹性盒子换行*/
flex-wrap: wrap;
9.移动适配
rem:目前多数企业在用的解决方案
vm/vh:未来的解决方案
9.1 rem
1.rem单位设置网页元素的尺寸
2.效果：屏幕宽度不同，网页元素尺寸不同（等比缩放）
3.px和rem的转换：目前设计稿适配375px视口，rem=px/font-size，小数后取三位
4.区别：px是绝对单位；百分比布局特点宽度自适应，高度固定；rem是相对单位，相对于html标签的字号计算结果(在rem布局方案时，将网页等分成十等份，HTML标签的字号为视口宽度的1/10)
/*1rem=1html字号大小，所以使用rem前提为html标签有字号样式*/
html {
font-size: 20px;
}
.box {
width: 5rem;
height: 3rem;
background-color: pink;
}
5.移动适配：添加媒体查询设置差异化CSS样式（媒体查询可以检查视口的宽从而编写差异化CSS）
@media (媒体属性) {
选择器 {
CSS属性
}
}
/* 使用媒体查询, 根据不同的视口宽度, 设置不同的根字号 */
@media (width:320px) {
html {
font-size: 32px;
}
}
@media (width:375px) {
html {
font-size: 37.5px;
}
}
@media (width:414px) {
html {
font-size: 41.4px;
}
}
6.flexible.js阿里巴巴开发的一个用来适配移动端的js框架，使用其配合rem实现在不同宽度的设备中，网页元素尺寸等比缩放效果，核心原理就是根据不同的视口宽度给网页中html根节点设置不同的font-size
<body>
<div class="box"></div>
<script src="../js/flexible.js"></script>
</body>
7.Less快速编译生成CSS代码（CSS不支持计算算法），Less是一个CSS预处理器，Less文件后缀是.less,Less使CSS具备一定的逻辑性，计算能力，浏览器不识别Less代码，网页需要引进对应的CSS文件
/*语法*/
1.注释：
// 单行注释【ctrl+/】，无法生成到CSS中
/* 【shift+alt+A】
块注释
第二行
第三行
*/
2.计算（加减直接写计算表达式，除法需要添加小括号或.）
.box {
width: 100 + 10px;
width: 100 - 20px;
width: 100 * 2px;
// 除法:.方法爆红不影响，更推荐括号，less4.0版本
// 68 > rem
width: (68 / 37.5rem);
height: 29 ./ 37.5rem;
}
3.嵌套：快速生成后代选择器
.father {
width: 100px;
.son {
color: pink;
// & 表示当前选择器
&:hover {
color: green;
}
}
&:hover {
color: orange;
}
}
4.变量：存储数据，方便使用和修改
// 1. 定义：@变量名:值; 2.使用:CSS属性:@变量名
@colora:green;
.box {
color: @colora;
}
.father {
background-color: @colora;
}
.aa {
color: @colora;
}
5.导入:导入公共样式，如果是less文件可以省略后缀
@import './01-体验less.less';
@import './02-注释';
6.导出CSS文件
/*配置EasyLess插件,实现所有Less有相同的导出路径：设置->搜索EasyLess->在setting.json中编辑->添加代码（双引号）*/
/*单独导出则在该Less文件开头加out:../css/（没有双引号）*/
{
"Codegeex.Privacy": true,
"files.autoSave": "afterDelay",
"open-in-browser.default": "chrome, google chrome, google-chrome, gcl",
"typescript.disableAutomaticTypeAcquisition": true,
"less.compile": {
"out":"../css/"
}
}
7.禁止导出
/*在该Less文件开头加out:false*/
9.2 vm/vh
1.vm单位设置网页元素的尺寸,相对视口的尺寸计算结果
2.viewport width/viewport height=1/100视口宽度/高度
/*宽高不能vw,vh混用，全面屏会产生影响*/
.box {
width: 50vw;
height: 30vw;
background-color: pink;
}
.box2 {
width: 50vh;
height: 30vh;
background-color: pink;
}
3.vw/vh=px/font-size
10.响应式页面
一套代码可以兼容适配不同的屏幕宽度，甚至设备
10.1 媒体查询
根据条件不同设置CSS的样式
@media (媒体特性) {
选择器 {
CSS属性
}
}
完整写法：@media 关键词 媒体类型 and (媒体特性) {CSS代码}
外链式CSS引入：<link rel+=stylesheet" media="逻辑符 媒体类型 and (媒体特性)" href="xx.css">
<!-- 视口宽度 >= 992px，网页背景色为粉色 -->
<!-- 视口宽度 >= 1200px，网页背景色为绿色 -->
<link rel="stylesheet" href="./one.css" media="(min-width: 992px)">
<link rel="stylesheet" href="./two.css" media="(min-width: 1200px)">
电商式网站响应使用隐藏：
@media (max-width: 768px) {
.left {
display: none;
}
}
/*媒体特性:描述媒体类型的具体特征*/
max-width小于等于（从大到小写），min-width大于等于（从小到大写）
max-height,min-height视口最大/最小高
orientation屏幕方向(横屏landscape,竖屏portrait)
/*关键词*/
and多个条件
only一个条件
not不是该条件
/*媒体类型*/
屏幕screen，带屏幕的设备
打印预览print，打印预览模式
阅读器speech，屏幕阅读模式
不区分类型all,默认值包括上三种
10.2 BootStrap
快速开发响应式网页的前端UI框架,封装CSS，Html，JavaScript
/*使用*/
1.引入：BootStrap提供的CSS代码
<link rel="stylesheet" href="./bootstrap-3.3.7/css/bootstrap.css">
2.调用类:使用BootStrap提供的样式
/*container响应式布局版心类:指定宽度并居中，自带左右内边距15px*/
<div class="container">1</div>
/*container-fluid宽度均为100%，自带左右内边距15px*/
/*row栅格布局的行，自带外边距-15px，可用来抵消container的15px的内边距*/
/*col栅格布局的列*/
<body>
<!-- 版心样式:自带左右各15px的padding -->
<div class="container">1</div>
<!-- row类作用就是抵消container类的15px的内边距, row有-15px的外边距 -->
<div class="container">
<div class="row">2</div>
</div>
<!-- 宽度100%:自带左右各15px的padding -->
<div class="container-fluid">3</div>
</body>
-
BootStrap栅格系统：BootStrap3将网页等分为12份，超小屏幕<768px（类前缀：col-xs-份数），小屏幕>=768px（类前缀：col-sm-份数），中等屏幕>=992px（类前缀：col-md-份数），大屏幕>=1200px（类前缀：col-lg-份数）,可以实现元素水平排列（追根是float,float不兼容低版本浏览器）
<!-- 需求: 大屏: 一行排列4个内容; 中屏:一行排列2个内容 -->
<div class="container">
<div class="col-lg-3 col-md-6">1</div>
<div class="col-lg-3 col-md-6">2</div>
<div class="col-lg-3 col-md-6">3</div>
<div class="col-lg-3 col-md-6">4</div>
</div>
全局CSS样式：BootStrap定义好的标签的样式，控制单独标签的样式
组件：网页常见的区域
JavaScript插件：交互效果
定制：框架样式不能满足时，修改成自己喜欢的样式
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
