1、重点内容
1.1 web标准组成
结构 html：对网页元素进行整理和分类
表现 css：设计网页元素的版式、颜色、大小等外观样式
行为 javascript：指网页模型的定义及交互的编写
1.2 html基本格式
<html>
<head>
<title></title>
</head>
<body>
</body>
</html>
1.3 img标签和属性
<img src="" alt="" width="" title="" />
src：路径
alt：找不到图片时，对图片的说明
width:图片宽度
title：鼠标悬停时对图片的说明
1.4 超链接基本语法
<a href="" target="" />
href： 将要跳转页面路径
target：_self当前窗口跳转
_blank跳转到新窗口
1.5 假链接
<a href="#">假链接</a>
<a href="javascript:;">假链接1</a>
<a href="javascript:void(0);">假链接2</a>
占位符#： 地址栏会出现#
javascript:; 和 javascript:void(0); 地址栏无任何变化
1.6 本页面跳转
<a href = "#id名">跳转到p</a>
<p id = "id名"></p>
给标签设置id名
href属性值： #id名
注意：页面最大到哪，就能跳转到哪
1.7 路径
相对路径：上级目录 …/
下级目录 ./
同级目录 文件名
绝对路径: 本地路径 从盘符出发
互联网路径 http://www.baidu.com
注意: 向上两级目录 …/…/
1.8 列表
1.有序列表
<ol>
<li></li>
</ol>
2.无序列表
<ul>
<li></li>
</ul>
3.自定义列表
<dl>
<dt></dt>
<dd></dd>
</dl>
1.有序列表
（1）每个列表项前面都有一个有序数字
（2）每个列表项都是独占一行，表示是块盒
2.无序列表
（1）每个列表项前面都有一个小黑点表示无序
（2）每个列表项独占一行，表示是块盒
3.自定义列表
（1）dt表示标题
（2）dd表示内容
1.9 css基础选择器
1.标签选择器
ul li 表示ul里面所有的后代li元素；ul>li 表示ul下面的第一级的li标签
div {
color: red;
}
2.类选择器
多类名之间用空格隔开（名字）
.first {
color: pink;
}
<p class="first">我是段落</p>
3.id选择器
给目标标签设置id属性，在css中用#修饰id名（身份证号）
#firstLi {
color: skyblue;
}
<li id="firstLi">这是第1个li</li>
4.通配符选择器
清除页面中大多数元素共有的样式，或者默认不需要的样式
* {
margin: 0; 清除外边距
padding: 0; 清除内边距
list-style: none; 清除列表元素的.
text-decoration: none; 去掉a的下划线
}
1.10 css复合选择器
1、后代选择器
用空格隔开，可选中该标签下的所有后代元素
li a{
font-size: 20px;
font-weight: 700;
}
2、子元素选择器
（1）> 选中该标签下的子元素，不包括子后代元素
（2）可使用通配符“*”选中所有的子元素
（3）也可使用同级元素用 “,” 相连选中子元素（权重大于通配符）
.box>p {
color: pink;
}
3、并集选择器
并集选择器用 “,” 隔开
p.one,p.three {
color: aquamarine;
font-size: 50px;
}
<p class="one">这是一个段落</p>
<p class="two">这是一个段落</p>
<p class="three">这是一个段落</p>
4、交集选择器
同类标签中选中一个类名，进行单独选中并进行设置
p.two {
color: pink;
font-size: 50px;
}
<p class="one">这是一个段落</p>
<p class="two">这是一个段落</p>
<p class="three">这是一个段落</p>
5、伪类选择器
a:link { 链接访问前的颜色
color: pink;
}
a:visited { 链接访问后的颜色
color: orange;
}
a:hover { 鼠标悬停在链接上时的颜色
color: aqua;
}
a:active { 鼠标点击还未松开时的颜色
color: skyblue;
}
记忆：lv 包包 ha
1.11 css字体属性
字体
font-family: 华文行楷;
字体粗细
font-weight: 700; //700=bold、400=normal
字体样式
font-style: italic;
字体大小
font-size: 20px;
字体属性的综合写法 样式 粗细 大小/行高 字体
font: italic 400 30px/50px 楷体;
1.12 文本属性
文本颜色
color: aqua; 英文颜色
color: rgb(100, 200, 255); 红 绿 蓝
color: rgba(0, 0, 0, .5); 红 绿 蓝 透明度
color: #4F4F4F; 十六进制颜色值
文本对齐
text-align: center; 文本居中
text-align: right; 文本右对齐
text-align: left; 文本左对齐
文本修饰线
text-decoration:line-through; 删除线
text-decoration: underline; 下划线
text-decoration: overline; 上划线
text-decoration: none; 没有修饰线
文本缩进
text-indent: 2em; 按照当前字体大小缩进两字符
text-indent: 20px;
行间距
line-height: 50px; 设置行高，只有一行文字表示垂直居中
1.13 css三种引入方式
1.行内式：一般用于临时调试，控制一个标签
<div style="color: red;">这是一个块盒</div>
2.内嵌式：一般放在</head>上方，只能控制当前页面
<style>
div {
color: red;
font-size: 12px;
}
</style>
3.链接式：使用最多，可控制多个页面
<link rel="stylesheet" href="css文件路径">
1.14 元素显示模式
display:block; 块级元素
display:inline; 行内元素
display:inline-block; 行内块元素
块级元素(block)：<h1>~<h6>、<p>、<div>、<ul>、<ol>、<li>
1.独占一行
2.可以调高宽、内外边距
3.自动充满父容器auto
4.里面可以放行内或块级元素
行内元素(inline)：<a>、<strong>、<b>、<em>、<i>、<del>、<s>、<ins>、<u>、<span>
1.一行可显示多个，不独占一行
2.无法设置高宽
3.默认宽度就是本身内容的宽度
4.只能容纳文本或者其他行内元素
行内块元素(inline-block)：<img />、<input />、<td>
1.一行可显示多个，不独占一行
2.默认宽度就是它本身内容的宽度
3.可以调高宽、内外边距
1.15 盒子背景设置方式
背景颜色
background-color: #cfc; 英文颜色 rgb颜色 十六进制颜色
背景图片
background-image: url(./images/bg1.png);
背景铺满
background-repeat: no-repeat; 背景图不重复（默认是铺满整个盒子）
background-repeat: repeat-x; 背景图横向铺满
background-repeat: repeat-y; 背景图纵向铺满
背景位置
1.只写一个方位词，后面一个词默认为center
2.写两个方位词，顺序随便颠倒，位置不发生改变
3.只写一个数值，默认为x轴，后面一词默认为center
4.写两个精确数值（px），顺序为x y
5.只写一个百分值，后面一词默认为center
6.写两个百分值，顺序为x y
background-position: left bottom;
背景尺寸
contain 背景显示完整，但不一定铺满整个盒子
cover 图片铺满盒子，但不一定显示完整
背景综合写法 颜色 背景图 背景重复 背景位置/背景尺寸
background-size: cover;
背景附着
附着在盒子里，盒子消失，它消失，在浏览器窗口的位置不变
background-attachment: fixed;
固定在盒子里，在盒子和浏览器窗口的位置都不变
background-attachment: scroll;
背景简写
颜色 图片 平铺 位置或者附着（两者不能同时出现）
background: #cfc url(./images/bg1.png) no-repeat center;
多背景
用“，”隔开
background: url(./images/fafa.webp) no-repeat left top/100px,url(./images/fafa.webp) no-repeat left bottom/100px;
线性渐变（相当于背景图片）
background: linear-gradient（角度，颜色1，颜色2，……）
background:渐变色 铺满 位置/背景尺寸
径向渐变
圆形：circle
椭圆形：ellipse
background: radial-gradient（circle,颜色1，颜色2，……）;
1.16 盒子边框
设置边框宽度
border-width: 10px;
设置边框（样式）
solid：实线 dashed:虚线 dotted：点线 double:双实线
border-style: double;
设置边框颜色
border-color: pink;
综合属性：颜色 样式 宽度 （顺序要求）
border: 10px double pink;
border-left: 10px double green;
1.17 盒子内外边距
盒子模型组成部分：内外边距 边框 内容
内边距
padding-left: 5px;
padding: 25px 15px;
padding: 12px 10px 0px 25px;
外边距
margin-left: 20px;
margin-top: 20px;
版心的制作
.w {
width: 1190px;
margin: auto;
}
1.一个值：上下左右
2.两个值：上下，左右
3.三个值：上，左右，下
4.四个值：上，右，下，左（顺时针）
外边距默认情况下只设置上和左
注意：两个相邻的盒子只需要给一个盒子设置外边距即可，因为会发生合并现象
盒子居中的两个必要条件:
1.要居中的盒子必须设置固定的宽
2.设置要居中的盒子margin:auto;
注意： 一般情况下用于网页版心的制作
1.18 嵌套盒子外边距塌陷及解决
解决方法：
1.给父级盒子定义上边框
2.给父级盒子添加overflow：hidden;（溢出：隐藏；）
3.给父级元素定义上内边距
1.19 盒子内减属性
不改变盒子整体大小
box-sizing: border-box;
1.20 盒子自适应
width: calc(100% - 200px);
cala (符号左右需要空格才能生效)
减去左边固定的宽度，右边的宽度自适应浏览器首屏宽度
1.21 清除浮动
清除浮动目的：
（1）、解决父级元素因为子级浮动引起内部高度为0 的问题。
（2）、清除浮动之后， 父级就会根据浮动的子盒子自动检测高度。
清除浮动
1.给父盒子加高
2.给父盒子添加overflow属性值（任意一个）
3.隔墙法：在浮动元素下面添加空标签设置clear：both；
4:伪元素清除浮动:浮动元素的父盒子::after{content:"" height:0,clear:both,display:block}
为元素清除浮动方式（通用方法）
.box::after {
content:"";
height: 0;
display: block;
clear: both;
}
溢出隐藏
属性：overflow:;
值: hidden 影藏
auto 超出盒子自动加滚动条
scroll 滚动条（无论是否超出，都会加滚动条）
清除浮动影响，给受到浮动影响的标签添加
属性：clear: ;
值 ： left 清除左侧浮动影响
right 清除右侧浮动影响
both 同时清除左右两侧浮动
1.22 垂直对齐属性
基准线对齐方式设置给行内块元素
属性：vertical-align: ;
值： top 上
middle 中
bottom 下
baseline 默认值
图片标签img下方有默认缝隙，可以设置vertical-align的值为非baseline即可去掉，也可转换成块级标签去掉
1.23 显示隐藏
需求：默认图片是隐藏的，页面上有文字可以操作这个图片
img {
display: none;
}
div:hover img {
display: block;
}
（1）、display: none; 将元素隐藏，不占位，hover无效
（2）、visibility: hidden; 可见性设置，占位，hidden表示不可见/隐藏
（3）、opacity: 0; 透明度 0表示透明，1表示不透明，占位
1.24 定位
定位的祖成：定位模式（position: 值;） + 边偏移
1、相对定位：是相对于元素本身之前的位置进行移动的
position: relative;
2、绝对定位：定位的位置是根据浏览器首屏决定的，不占位置
position: absolute;
3、子绝父相：子元素相对于父元素进行定位，父元素占位、子元素不占位
div {
position:relative;
}
div span {
position:absolute;
}
4、固定定位：以浏览器左上角为参照，可改变元素位置，不占位
position: fixed;
left | right | top | bottom: 值;
1.25 定位居中
方法一
div {
width: 200px;
height: 200px;
background-color: #cfc;
position: absolute;
top: 50%;
left: 50%;
margin-top: -100px;
margin-left: -100px;
}
方法二
div {
width: 200px;
height: 200px;
background-color: pink;
position: absolute;
top:0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
}
方法三
div {
width: 200px;
height: 200px;
background-color: skyblue;
position: absolute;
top: 50%;
left: 50%;
/* 设置位移 */
transform: translate(-50%,-50%);
}
1.26 定位层级关系
只有定位的元素才有层级关系，值越大，层级越高（最上面显示层级最高的标签）
z-index: 9;
1.27 表格
<table>
<tr>
<td>单元格</td>
<td>单元格</td>
<td>单元格</td>
</tr>
</table>
标签
table 表格
caption 写在table里面 默认在表格上方居中
th 单元格文本剧中且加粗,通常用在表格头部
tr 行
td 单元格
属性
border 边框
bgcolor=“pink” 背景颜色
align=“center” 给table(整个表格居中在浏览器首屏),给tr/td(单元格中文本居中)
background:“路径” 表格背景图片
cellspacing=“0” 合并表格和单元格边框
横向合并和纵向合并
rowspan=“n” 行合并 纵向
colspan=“n” 列合并 横向
行/列合并的步骤
1.找到要合并的第一个单元格
2.给这个单元格加上合并属性 属性值写数字（要合并多少个）
3.（先执行效果）将多出去的那个单元格进行删除即可（整行中的任意一个，除了合并的那个单元格）
1.28 表单
表单组成 = form + 表单项
书写表单项的简写形式：input:类型值 + 回车键
例如:input:password + 回车键
input类型表单
<form action="提交按钮点击后的路径">
1:明文输入框
用户名：<input type="text">
2:密码框
<input type="password">
3:数字框
<input type="number">
4:单选按钮（性别的选择）name属性值必须一样
<input type="radio" name="gender">
5：复选按钮，一般用于选择爱好上面
<input type="checkbox">
6:文件域（上传文件）
<input type="file">
7:按钮
<input type="button" value="普通按钮">
<input type="reset" value="重置按钮">
<input type="submit" value="提交按钮">
8:时间日期
<input type="date" name="" id="">
</form>
非input类型的表单项
<form action="">
1:下拉项(选择地区,选择出生年月等)
<select name="" id="">
下拉项
<option value="0">请选择</option>
<option value="1">成都校区</option>
</select>
2:文本域(多行文本框)留言板 评论区
<textarea name="" id="" cols="30" rows="10"></textarea>
</form>
表单分组
<form action="">
<fieldset> 字段集
<legend>表单分组说明</legend> 说明
</fieldset>
</form>
label 点击文字可以选中可选项
官方建议使用关联的方法 for="名字"
在需要关联的标签中设置 id="名字"
也可以直接使用label标签将关联的标签及文字包裹起来
<label for="">
<input type="radio" name="gender" id="">男
</label>
属性
type 表示表单项的类型
value 就是代表的默认值
placeholder 提示文字
disabled 禁用
checked 表示是否默认选中的属性
selected 用于选择默认下拉项
outline: none; 去掉点击输入框之后的边框
属性选择器
语法 input[属性：“属性值”] input后面不能有空格
input[type="text"] {
border: 1px solid pink;
/* 去掉点击输入框之后的边框 */
outline: none;
}
h5新增input标签
| 类型 | 使用示例 | 含义 |
|---|---|---|
<input type="email"> | 输入邮箱格式 | |
| tel | <input type="tel"> | 输入手机号码格式 |
| url | <input type="url"> | 输入url格式 |
| number | <input type="number"> | 输入数字格式 |
| search | <input type="search"> | 搜索框（体现语义化） |
| range | <input type="range"> | 自由拖动滑块 |
| time | <input type="time"> | 小时分钟 |
| date | <input type="date"> | 年月日 |
| datetime | <input type="datetime"> | 时间 |
| month | <input type="month"> | 月年 |
| week | <input type="week"> | 星期 年 |
1.29 过渡
transition: width 3s ease,height 3s linear;
将过渡属性添加到元素本身上
linear 匀速
ease 慢快慢
ease-in 慢快
ease-out 快慢
ease-in-out 慢快慢
1.30 优先级计算方法
行内式 1，0，0，0
id 0，1，0，0
类选择器 0，0，1，0
标签选择器 0，0，0，1
继承或者* 0，0，0，0
!important ∞ 无穷大（仅在同级中）
值从左到右，左面的最大，一级大于一级，数位之间没有进制，级别之间不可超越。
1.31 child系列
:first-child 父元素中第一个子元素（位置）
:last-child 父元素中最后一个子元素（位置）
:nth-child(n) 父元素中第n个子元素（位置）
:nth-last-child(n) 父元素中倒数第n个子元素（位置）
:nth-of-type(n) 父元素中某一类标签的第n个子元素
选中偶数的li标签
ul li:nth-child(2n) {
background-color: pink;
}
选中技术的li标签
ul li:nth-child(2n-1) {
background: #cfc;
}
选中前3个li标签
ul li:nth-child(-n+3) {
background-color:#cfc;
}
1.32 H5标签布局
<header>头部</header>
<nav>导航栏</nav>
<section>
<aside>侧边栏</aside>
<article>文章内容</article>
</section>
<footer>底部</footer>
1.33 视频音频
<video src="./medias/video.mp4" muted controls poster="./images/fafa.webp" width="500"></video>
<!-- 音频必须添加控件 -->
<audio src="./medias/mon.m4a" controls></audio>
autoplay 自动播放（谷歌浏览器不支持，必须同时设置muted 禁音）
controls 控件
loop 循环播放
poster 封面
1.34 2D转换
1、位移
transform: translate(x,y) x表示横向 y表示纵向
transform: translate(200px,100px);
2、旋转
正数表示顺时针旋转 负数表示逆时针旋转
transform: rotate(90deg);
设置旋转中心 值可以是方位名词 也可以是像素或百分比
transform-origin: 100px 100px;
3、缩放
数值大于1放大 数值小于1大于0缩小 逗号隔开分别表示（宽度，高度）缩放
transform: scale(1，2)
4、倾斜
度数
transform: skew(180deg);
5、复合写法
transform: rotate(360deg) translate(50px);
1.35 3D转换
1、开启3D维度空间（添加给父元素）
目的是让元素移动之后留在移动后的位置能够保证立体的效果
transform-style: preserve-3d;
2、给body添加视距属性才能看到效果
body {
/* 特点 数值越小距离越近 给父级元素添加 */
perspective: 500px;
}
3、移动
transform: translateZ(-100px);
4、旋转
transform: rotateY(70deg);
5、缩放 x缩放宽度 y缩放高度
transform: scaleX(1.5) scaleY(0.5);
1.36 动画
1.animation这个属性加给目标元素
目标元素 {
animation：名称 动画持续时间
}
2.要搭配@keyframes这个关键帧来实现动画的效果
@keyframes 名称 {
0% {
初始状态
}
……
100% {
完成状态
}
}
animation: run 3s linear 0s 10 forwards;
@keyframes run {
0% {
transform: rotate(180deg) translate(1500px,1000px);
}
30% {
transform: translate(1000px,500px) rotate(360deg);
}
100% {
transform: translate(1000px) rotate(180deg);
}
}
多动画
动画之间使用","隔开，属性不能够重复，否则会被覆盖掉
animation: square 5s linear infinite,revolve 5s linear infinite;
@keyframes square {
0% {
transform: translate(0,0) rotate(0);
}
100% {
transform: translate(0,0) rotate(360deg);
}
}
@keyframes revolve {
0% {
background-color: pink;
}
100% {
background-color: #cfc;
}
}
animation综合写法的顺序：
1.动画名称
2.动画持续时间
3.动画曲线
4.动画延时时间
5.循环次数（整数）infinite无限循环
6.循环方向
7.动画结束之后的停留forwards停留在百分百的位置
8.动画的暂停和播放
1.37 flex布局
（1）、display: flex; 开启弹性布局 默认沿主轴方向排列，纵向铺满
（2）、flex-direction: column; 沿纵轴方向排列 横向铺满
（3）、flex-wrap: wrap; 设置子元素换行
（4）、justify-content: ; 设置子元素在主轴上的排列方法
属性值：
flex-start 默认是从前到后（左→右\上→下）
flex-end 从后往前（右→左\下→上）顺序依然是从左至右
center 在主轴的中间排列
space-around 等均分配主轴上的空间
space-between 左右（上下）各一个 其他等均分配
space-evenly 所有盒子间距相等
（5）、align-content: ; 设置多行子元素排列方式(多行)，只能用于子项换行情况，在单行下没有效果
属性值：
stretch 默认值 拉伸（子元素高度平分父元素高度）
flex-start 从侧轴头部开始排列
flex-end 从侧轴尾部开始排列
center 在侧轴的中间排列
space-around 等均分配侧轴上的空间
space-between 左右（上下）各一个 其他等均分配
space-evenly 所有盒子间距相等
（6）、align-items: ; 设置单行子元素排列方式
属性值：
stretch 拉伸
flex-start 从侧轴头部开始排列
flex-end 从侧轴尾部开始排列
center 在侧轴的中间排列
（7）、 order: -1; 数值越小，排列越靠前，默认为0。 （控制子元素本身）
1.38 网格布局
网格布局语法
display:grid;
盒子里面的内容默认纵向排列，并且横向铺满
属性1： grid-template-columns:； 表式每一列的宽度，有多少个值表示有多少列（不超过盒子内容）
属性2： grid-template-rows:； 表示每一行的高度
grid-template-columns: repeat(2，1fr);
表示两列等分（自适应）
设置高自适应需要父盒子有高度设置,没有设置就是内容撑开的高度
属性3： grid-column: span n; 合并列
属性4： grid-row: span n; 合并行
属性5： grid-area: span 行数/span 列数; 合并行列
值 span是固定写法，后面写一个数字表示合并的列数 (最好删除被合并的盒子)
属性6： gap:; 网格之间的间距
grid-column:; 列距
grid-row :; 行距
1.39 媒体查询引入方式
（1）、写在style标签中
语法
@media screen and (条件1) and (条件2) {
内容
}
注意点：从大到小写条件，选择器一定要统一使用，不然会出现权重问题（也可用于盒子，使盒子能够任意撑开）
（2）、写在style标签里面，当做style的一个属性， style标签可以出现多个
<style media="(条件1) and (条件2)"></style>
（3）、link引入媒体查询（可引入多个link）
<link rel="stylesheet" href="./css/pc.css" media=" (条件)">
1.40 媒体查询方式
（1）、当屏幕是横屏时执行
@media all and (orientation:landscape) {
内容
}
属性： orientation：；
属性值：landscape 横屏
portrait 竖屏
（2）、not 取反
@media not screen and (条件) {
内容
}
当不符合条件时，被选中执行
（3）、or 或者 （代码中体现为 逗号","）
@media (条件1),(条件2) {
内容
}
意思屏幕为符合条件1或者符合条件2的时候被选中
（4）、only
@media only screen and (条件) {
内容
}
更好的兼容，符条件时的时候被选中
1.41 字体图标引入方式
iconfont-阿里巴巴矢量图标库：https://www.iconfont.cn/
本地引入方式
方法一：Unicode的引入（不常用）
<style>
@font-face {
font-family: 'iconfont';
src: url('./font/iconfont.woff2') format('woff2'),
url('./font/iconfont.woff') format('woff'),
url('./font/iconfont.ttf') format('truetype');
}
.iconfont {
font-family: "iconfont" !important;
font-size: 16px;
font-style: normal;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
</style>
<i class="iconfont"></i>
方法二：Font class的引入（推荐）
<link rel="stylesheet" href="./font/iconfont.css">
<i class="iconfont icon-icon-"></i>
方法三：Symbol的引入（图标带颜色）
<script src="./font/iconfont.js"></script>
<style>
.icon {
width: 1em;
height: 1em;
vertical-align: -0.15em;
fill: currentColor;
overflow: hidden;
}
</style>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-weixin"></use>
</svg>
在线引入方式
<link rel="stylesheet" href="http://at.alicdn.com/t/c/font_3959237_v3dx7c39eqr.css">
<i class="iconfont icon-weixin"></i>
1.42 less变量写法
变量的定义 @变量名:值;
@base-color: pink;
div {
background-color: @base-color;
}
要求：
必须有@为前缀
不能包含特殊字符
不能以数字开头
大小写敏感
1.43 less交集伪类嵌套写法
&表示选中当前标签
a{
&:hover{
color:red;
}
&.aaa{
color:red;
}
}
1.44 less运算
任何数字、颜色或者变量都可以参与运算
@w:300px;
@color1:green;
@color2:red;
div{
width: @w - 100;
width: @w - 200px ;
background-color: @color1 + @color2;
background-color: @color1 + 15;
background-color: @color1 + yellow;
}
1、乘号（*）和除号（/）的写法 ，除法需要书写在小括号内
2、运算符中间左右有个空格隔开
3、对于两个不同的单位的值之间的运算，运算结果的值取第一个值的单位
4、如果两个值之间只有一个值有单位，则运算结果就取该单位
1.45 em rem vw vh的单位含义
绝对单位： px 像素
相对单位：
em 相对于当前盒子或自身font-size的大小
rem 相对于html的大小
vw 相对于视窗的宽度等比缩放，一视窗=100vw
vh 相对于视窗的高度等比缩放，一视窗=100vh
vmin 相对于视窗宽高中较小的（确保横屏竖屏参照物一致，文字大小一致）
vmax 相对于视窗宽高中较大的（确保横屏竖屏参照物一致，文字大小一致）
% 相对于父元素
2、需要理解的内容
2.1 标签之间的关系
嵌套（父子）关系：一个标签包含其他标签，例如：父和子
并列（兄弟）关系：标签之间不存在嵌套关系，例如：和
注意：单标签不能当父级元素
2.2 传统布局三种方式
1、标准流（普通流、文档流）
2、浮动（float）：浮动后脱标，不存在（块级、行内、行内块元素）
3、定位(position)：absolute、fixed脱标
脱标特点：
（1）、行内块模式，可以设置有效宽高，如果没有宽高默认由内容撑开，一行可显示多个
（2）、不占位置
（3）、不会出现外边距塌陷的情况
（4）、无法使用margin: 0 auto;
3、需要了解的内容
3.1 特殊字符
3.2 css三大特性
1、层叠性
层叠规律：后来者居上
何时层叠：相同元素，相同属性的值存在层叠性
属性不同，元素相同情况下是样式合并
2、继承性
继承性是选择继承的元素不一样，可能继承的属性就不一样
3、优先级
id选择器>class>标签选择器>继承和*(通配符选择器)
多个标签不大于类
3.3 创建.less文件
安装Easy LESS插件
（1）、创建后缀名为.less的文件
（2）、在less中编写css
（3）、保存会生成后缀为.css的文件
（4）、引入.css即可生效
link引入文件为自动的生成的.css文件
配置less步骤
（1）、vscode左下角点开设置
（2）、打开设置右上角有打开设置json3:点进去之后将下面这段代码粘贴进去
"less.compile" : {
"out" : "../ css/",
"sourceMap" : true
}
“out” : “…/ css/”, 表示生成的.css文件的路径
“sourceMap” : true 检查页面时，会提示在less文件中的行数
3.4 响应式布局的核心原理
利用媒体查询搭配百分比布局（华为商城）
vmax 相对于视窗宽高中较大的（确保横屏竖屏参照物一致，文字大小一致）
% 相对于父元素
6825
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
