客户端
HTML(超文本标记语言):(英文全称: Hypertext Markup Language),通过将一段内容定义为标题、段落或者图像等，从而让该内容具有结构以及含义，用于定义文档结构。
W3C：万维网联盟(英文全称: World Wide web Consortium),它是Web最具权威和影响力的技术机构。
**CSS3：**层叠样式表(也简称：级联)，(英文全称：Cassading Style Sheets)，是一种是用字体，颜色等格式化内容的外观的表示型语言(“结构 样式 行为”)。
<h3>编程入门基础班</h3>
（开始标记） 元素内容 （结束标记）
在一个标签里面，标签开始的时候如果出现 = 号的话，= 号左边的是属性名右边是属性值。
<!DOCTYPE html>：文档类型定义。
"UTF-8":万国码，字符编码集（为获得更好的地域兼容性、避免乱码，该代码作为head的第一个子元素）。
<title>：表示写在在标签页的开头的内容。
API简称：应用程序接口。
引入CSS(Cassading Style Sheets)样式表：
分为以下两种：
1.<style></style>:内部样式表 内联。
2.<link rel="stylesheet" href="引入路径">：外联样式表 外联。
引入重入文件：
由于每个浏览器对同一个标签默认样式不同，即同一标签在不同浏览器中样式不一样。
是为了解决兼容性，统一标签样式。
CSS语法由选择器和一条到多条声明组成，组成成规则集。
/* div {
width: 100px;
height: 100px;
border: 1px solid pink;
border-radius: 50%;
} */
语义化化结构标记：
1.<header>:用于表示也面或某个区域的头部。
2.<nav>:由于表示导航栏。
3.<aside>:用于表示跟周围主题相关的附加信息。
4.<article>:用于表示文章或其他可独立页面存在的内容。
5.<section>:用于表示一个整体的一部分主图。
6.<footer>:用于表示页面或某个区域的脚注。
文本元素：
<h1>-<h6>:表示1级标题-6级标题。
<p>:段落。p标签不能包div h1
在检查器中查看，浏览器是否有添加东西，导致无法选中标签
<strong>:重要的文本。（表示加粗文本） <b>:应突出显示文本。（表示加粗文本） <i>:应区别对待的文本。
<blockquote>:整段引用。 <cite>:对参考文献的引用。 <q>:小段引用。 <abbr>:对缩写词的引用。
<abbr title="全称">简写</abbr>
<abbr title="hypertext markup language">HTML</abbr>
<em>:强调对应的文本。
<span>:跨越多个字符。
<a>:超链接。
代码格式：<a href="打开的路径" target="从新标签页打开"></a>
href:链接目标，页面地址（路径），锚点，功能连接。
target：点击后在哪里打开新文档。
内容位置：显示到页面的链接文字。
a标签设置鼠标手势： cursor:pointer;
<hr>:水平线
<sub> 下标</sub>
<sup>上标</sup>
<q>引用</q>
<bdo dir="rtl">使得段落反向显示
<del></del>删除字符 文字删除线
<ins>red</ins>文字下划线
<acronym>大写
乱数徦文：
lorem
选择器：
-
通配符选择器：匹配到当前文档所有元素。~~~~
* { margin: 0; padding: 0; } -
属性选择器： [属性=值]。
[type=text] { border: 10px solid red; } -
伪类选择器 ：
/* a 未访问 */ a:link { color: #000; } /* 访问后 */ a:visited { color: #ccc; } /* 移入 */ a:hover { color: red; } /* 点击时 */ a:active { font-size: 30px; } 如： p:nth-child(n):表示如果第n个是p则运用该样式。 p:nth-of-type(n):表示第n个p运用该样式。 -
伪元素：
- 伪选择器不是直接对应HTML中定义的元素，而是向选择器增加特殊的效果
/* 伪元素 CSS3 区分伪类伪元素，将伪元素改为 :: :first-letter 第一个字 :first-line 第一行 */ a::before{ content: "之前"; } a::after{ content: "之后"; } p::first-line{} 匹配文字内容的首字母 p:first-letter{ font-size: 50px; } -
组合 || 并集选择器：
h1, .box, div, #testId, h5, h6{ font-weight: normal; } -
子级选择器：
ul>li{ border: 1px solid; } -
元素选择器：元素选择器会应用到当前文档中所有该元素。
h1{ color:yellow; } //全都内容都会运用到yellow这个元素。 <h1>爷爷</h1> <h1>奶奶</h1> <h1>爸爸</h1> <h1>妈妈</h1> <h1>姐姐</h1> -
类选择器：类选择器会应用到所有拥有该类的元素。
.testClass{ border: 1px solid #000; } <a href="#" class="testClass">click me</a> -
后代选择器：
ul li{ font-size: 50px; } <ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> <ol> <li>9</li> <li>8</li> <li>7</li> </ol> </ul> -
ID选择器：ID选择器具有唯一性,不能具有同一ID。
border-left: 5px solid black; } <h4 id="demo">来了来了</h4>11.层次选择器
1.兄弟选择器
如：header+div{} 选中的是离header最近的div
格式：元素A+元素B{声明块}
表示选中紧挨着header元素的兄弟元素div。即选中div元素，它的前一个元素必须是header
2,通用选择器
如：header~div{} 选中header元素后的所有兄弟元素div
格式：元素A~元素B{声明块}
:nth-child(-n+3):选中前m个标签进行样式的添加，【一般写-n】
:not(:nth-child(4)) :not(:nth-child(2)){} 除了2和4其它都变
12
如div.box找的是所有类名为box的div。
颜色，长度单位：
颜色三种写法：
h1 {
color: red;
/* 十六进制 */
color: #fff;
/* rgb写法 */
color: rgb(255, 255, 255);
}
长度单位：
1.绝对长度：px；
2.相对长度：%；[占位符
3.em（当前元素字体大小）；
4.rem（相对于根元素的大小）；
声明冲突：
相同的属性，不同的属性值（规则之间）
层叠：
1，先比较优先级 2，再比较特殊性 3，特殊性相同比较源次序
在比较特殊性时，每一个冲突的声明会生成4个数字分组（a,b,c,d)，以比较特殊性。a越大，特殊性越高。若a相同，比较b。b越大，特殊性越高。
继承性：
子级会自动拥有某些父类CSS样式【In hereted from…】
一般是文本类样式
display
1 none:将元素隐藏并且不保留其物理空间
2 inline：指定元素为行级元素
3 block：块级元素
4 inlin-block：行内块元素 display：inlin-block；使元素变为行类块元素。可以并列排放，并且可以设置行高。【基线对齐】
盒模型
1，margin:与其它盒子距离【值可以为负值】，垂直方向两个盒模型外边距取最大值
2，padding：边框与内容之间的距离，取值不可以为负值
padding:10px;四周变化 padding:10px,20px;上下，左右
padding:10px,20px,30px;上 左右，下 padding:10px,20px,30px,40px;上右下左
3，top:上，right：右，left:左，bottom:下。可用来单独设置
4，border:1px solid red是对边框进行样式设置。{上下左右的边框都可以重设}
像素颜色可省略，像素默认3px，边框颜色继承父级文本样式。
border-width border-style border-color
当div未设置任何值时，其width:auto; height:auto;
常规流盒模块居中：margin:auto;
因为常规流水平方向上的尺寸必须等于包含块的宽度【当两边margin给固定值时，右边为margin:auto;】
w3c标准
元素自己大小=width+padding+border
占用页面大小=width+padding+border+margin
IE浏览器
总的元素宽度等于定义内容的宽度。其padding与border不变，就可以看出其在IE浏览器的内容大小有所变化。
box-sizing:border-box
当在给header设置宽度100%时，想要给内容或盒子加上内外边距，但此时会出现横向混动条。此时加上box-sizing:border-box；即可消除混动条，将盒子设置为在IE浏览器状态下的尺寸大小。
子盒子
内容盒：content
填充盒：padding+content
边框盒：border+padding+content
注：1内容溢出，需要将超出部分隐藏，则隐藏掉填充盒以外的内容
2 背景色的渲染区域是边框盒
overflow:hidden;内容溢出，需要超出部分隐藏
overflow:visible;默认值，超出部分可见
overflow:scroll;xy轴方向都会出现滚动条
overflow:auto;xy轴，哪个方向有溢出，哪个方向就会出现滚动条
overflow-x;设置x轴溢出显示方式
overflow-y;设置y轴溢出显示方式
设置 单行文本：溢出省略号（一般用于aside,相关文章）
overflow:hidden;
text-overflow:elipsis;
white-space:nowrap;(不换行)
三种定位体系
常规流**/文档流/标准流**：在没有css的干预下，块级元素独占一行，宽高可设，行类元素并排显示，宽高自动。
行类元素：
<i> <b> <strong> <cite> <q> <a>
块级元素：
<header> <nav> <aside> <article> <section> <footer>
<h1>-<h6> <p> <ul> <li> <ol>
行类块
<input>
表：
<table>
position:不可继承，默认值是static.
取值：static:静态位置，盒子在原本定位体系下的位置
相对位置 relative盒子在相对于原来的位置进行偏移
绝对定位 1 absolute绝对位置 2 fixed固定位置
1 定位体系-浮动
float:none 不浮动，不是浮动定位
float:left 左浮动
float:right 右浮动
1 子集浮动导致父级高度塌陷【浮动会脱离文档流】
2 行类元素，设置浮动，脱离文档流，高宽可设。
3 浮动会影响别的元素
clear 清除浮动： left right both(清除左右浮动)
父元素的实际高度为常规流元素之和
对最后一个元素使用clear:both 可防止父元素高度坍塌
浮动补充【文字环绕】
-
行内元素和文本元素都会考虑浮动元素的尺寸。
-
既行内元素和文本都会避让浮动元素的尺寸。
只要属性值有inline基本都要符合以上要求。
父级:after{
content:"";
display:block;
clear:both;
}
父元素实际高度为常规流元素之和，对最后一个元素使用clear:both 可防止父级元素高度塌陷
2 定位体系-绝对
1 absolute:绝对位置
2 fixed:固定位置【视口：浏览器可视区域】
起始点：绝对定位元素的包含快左上角。
position：absolute;依次判断元素是否拥有position不等于static的祖先元素（绝对定位的包含快）
如果没有任何最近的祖先元素有position不等于static，则包含块为初始化包含快，一般在页面的左上角。
3 定位体系-常规流[相对定位]
position:relative;相对于盒子在原来定位下的位置，原来的位置依然占用，盒子偏移后，不会对其它造成影响。
相对位置：1 依然占用原来位置 2 移动后不会影响其它元素
适用场景：当一个元素偏移后，原来位置依然会占用 【比如header，footer, 返回页面，侧边广告栏，客服等】
堆叠级别
- 决定元素谁显示在前，谁显示在后
- 堆叠级别越高，显示越靠前
- 通过z-index属性可设置元素的堆叠级别。取值：【正值向上，负值向下】负无穷到正无穷
不可继承
默认为：auto;
取值：auto-------自动 通常情况下，书写顺序靠后的元素靠前显示
数值-------手动 设置堆叠级别，堆叠级别越高的元素，靠前显示
只能用于绝对定位元素，常规流无效
列表
1，有序列表
<ol>
<li>...</li>
<li>...</li>
......
</ol>
2，无序列表
<ul>
<li>...</li>
<li>...</li>
......
</ul>
3，定义列表
<dl>
<dt>...</dt>
<dd>...</dd>
......
</dl>
列表项可更改样式
1 如：list{list-style:none}是去掉项目标记符号。
circle:空心圆 disc:实心圆 square:实心方块 decimal:数字
lower-alpha:小写字母 upper-alpha大写字母
2 如：li:nth-child(n){}选中单独的列表项，设置该项的样式（用于匹配父元素的第n个元素）【伪类选择器】
:first-child{}第一个 nth-child(odd){}奇数项 nth-child(eve){}偶数项
nth-child(3n){}3的倍数项，n从0开始。
:not(:nth-child(n)){}所有的列表项处了n项，其它都执行设置的此样式。
以上也可以设置并集选择器
3 列表中的hover
li:hover a{} 和 li:hover{} 移入Li里的a文字和li同时发生变化
4
在li里设置line-height等于行高可以使li的文字上下居中
在li里设置浮动，可以使得li元素并排显示
不给li设置宽度，直接加上样式margin:0 数值；可以使得左右边距一致。
表格
<table>
<thead>//表格头部
<tr> <td></td>
<td></td>
<td></td> </tr>
</thead>
<tbody>//表格内容
<tr> <td></td>
<td></td>
<td></td> </tr>
</tbody>
</table>
tr:表示一行 td:表示一列
合并单元格： 行：rowspan=""[水平方向] 列：colspan=""[竖直方向]
背景图设置
背景位置：background-position:
left top; center bottom;
可取值：（x,y） x:代表横坐标 y:表示纵坐标
背景图片大小：background-size: cover contain (100% 100%) (100%)
固定背景图：background-attachmemt:fixed
background:color url repeat(attachment) position;
background:size;
设置背景线性渐变色： background:liner-gradient();
线性过渡： transition:all liner .5s
旋转角度： transfrom: ratate(~deg);
块级格式化上下文
（Block Formatting Content,简称BFC）
一 如何触发BFC:
1根元素（html）
2浮动和绝对定位元素
3overflow不等于visible的盒
4display:inline-block,flex,inline-flex,table-cell,table-caption
二 规则【只适用于创建BFC的子元素，不包括自身】
1 创建BFC的元素，会考虑浮动元素的尺寸，即父级不会高度塌陷.
功能：找回浮动元素父亲的高
2 它的边框盒不会与浮动元素重叠
3 不会与它的子元素进行外边距合并
三 BFC特点
1，常规流块盒在水平方向上，必须撑满包含块
2，常规流块盒在包含块的垂直方向上依次摆放
3，常规流块盒若外边距无缝相邻，则进行外边距合并
4，常规流块盒的自动高度和摆放位置，无视浮动元素
表单
form属性：
1 action:提交地址
2 method:提交方式【1 get:输入内容显示在地址栏中 2 post:输入内容不会显示在地址栏中】
input类型
text:单行文本输入框
<p>
<label for="zqs">
用户名 <span>*</span>：
</label>
<input type="text" name="username" id="zqs" value="abc" >
</p>
设置lable可以调整距离还有鼠标点击文字后，自动影响到表单框。给用户好的体验
password:密码输入框
<p>
<label for="hwj">
密码：
</label>
<input type="password" name="pwd" id="hwj" placeholder="请输入数字" required>
</p>
submit:提交框
<input type="submit">
radio:单选框【1，type=“redio” 2，name的值要相同】
<p>
<label>
性别：
</label>
<input type="radio" name="gender" value="female">女
<input type="radio" name="gender" value="male">男
</p>
注：用于该属性的值是用户选择的，而不是用户输入的，因此后台无法显示
获取到当前选择的值，需要把相应的值，添加到value属性中，以便于提交数据
input的value属性，提交后的值【键值对】
1 当在输入框中给value代表默认值
2 当在选择框给value代表传给后台的值
3 input的maxlength属性限制输入字符的最大长度（比如：手机号只有输入11位）
<p>
<label for="lc">
手机：
</label>
<input type="text" name="pwd" id="lc" placeholder="请输入11位手机号" pattern="" maxlength="11">
</p>
多选框
checkbox多选框：
type=“checkbox”; name的值要相同
<p>
<label>
爱好：
</label>
<input type="checkbox" name="hobby" value="eat">吃饭
<input type="checkbox" name="hobby" value="sleep">睡觉
<input type="checkbox" name="hobby" value="XXX"> XXX
</p>
数字框
number(只需要输入0-9)
<p>
<label for="cll">
数量：
</label>
<input type="number" name="pwd" id="cll" pattern="">
</p>
下拉列表
父元素：select
子元素：optgroup【分组】
optgroup的后代元素是option【下拉列表可选】
select添加multiple属性，实现内容可以多项选择
<select name="my" multiple>
<option value="cll">one</option>
<option value="ll">tuo</option>
<option value="lpf">three</option>
</select>
<select name="my">
<optgroup label="市场部">
<option value="cll">A</option>
<option value="ll">b</option>
</optgroup>
<optgroup label="教学部">
<option value="lpf">c</option>
</optgroup>
</select>
多行文本输入框
评论区或留言区域
<textarea name="" id="" cols="30" rows="10"></textarea>
<input type="submit">提交
<input type="reset">重置
<buttom>提交</buttom>可以代替提交功能【是H5新增提交按钮】
普通按钮：<input type="buttom"> 设value值即可
注：默认值选中
1，在单选框和多选框中用checked=“checked”,后面可以只用checked
2,设置选中某一个选项，在下拉列表中，在option中添加selected属性
给父级设置font-size=0;去除子集行类标签之间间距
设置提示信息样式：input:-webkit-input-placeholder{}
CSS文本样式
text-shadow:文本阴影 值： 1，x轴偏移量 2，y轴偏移量 3，模糊值 4 spread:阴影尺寸 5，颜色
box-shadow:盒子阴影
text-overflow:clip 文本溢出属性指定应向用户显示溢出内容
word-wrap:允许文本换行 如：p{word-wrap}
word-break:单词拆分换行 注：不兼容opera
box-shadow 的取值依次顺序是：
1 h-shadow:水平阴影 2 v-shadow:垂直阴影 3 blur：模糊
4 spread:阴影尺寸 5 color颜色 6 insect 外阴影转到内阴影
简单动画
过渡：transition【css属性 ，在一定时间内，从一个值变化到另一个值】
包括初始属性 元素 hover
对background height 应用过渡，并非所有的属性都支持过渡，一般为颜色，尺寸，透明度的属性
trabsition-property:background,height transition-duration:过渡时间
以上可以简化为transition:all ~s;
透明度：
opacity设置元素的透明度，取值0-1
注：opacity设置的透明度，不仅会设置当前元素的透明度，并且还会涉及到子元素和后代元素，可以理解为具有继承性。
与rgba的区别：opacity设置一次透明度，会应用当前元素和后代元素
rgba可以分别设置某个元素的颜色（字体，背景）
visibility:hiddle 当前元素在页面不显示。但元素尺寸依然保留，并且可以适用过渡
设置过渡的函数
transition-timing-function:linear
取值：（贝塞尔曲线）
linear线性渐变
ease:平滑过渡
ease-in:由慢到快
ease-out:由快到慢
ease-in-out:由慢到快,再到慢
设置过渡延迟
取值：
正值：正值后的秒数开始过渡效果
0：立即执行过渡效果
负值：详情W3C
transition-delay: 2s;
动画animation
同样可用delay{延迟}
设置动画步骤
step1:定义一个动画
格式： @keyframes 自定义动画名称
如：
@keyframes F63{
0%{
left: 0px;
border-radius: 0;
}
20%{
left: 100px;
border-radius: 50%;
}
50%{
left: 500px;
border-radius: 50%;
}
70%{
left: 100px;
border-radius: 50%;
}
100%{
left: 0px;
border-radius: 0;
}
}
step2:使用动画
格式：
动画名称：animation-name:F63;
动画时间：animation-duration:10s;
动画函数：animation-timing-fuction:linear;
动画次数：animation-iteration-count: 2;
缩写： animation: F63 linear 10s 2;
无限循环次数取值为：infinite
如 animation: F63 linear 10s infinite;
设置元素变形 transform
不会影响其他的标签
取值：
scale缩放
缩小：0-1;
注：1以上的值是放大，1以下的值是缩小。默认值1
transform: scale(2)；
rotate旋转
默认值是Z轴旋转
rotate(ndeg) n取正值是顺时针，n取负值是逆时针。
rotateY(90deg); 设置Y轴旋转
rotateX(90deg); 设置X轴旋转
skew倾斜
transform: skew(45deg);
skewx(45deg)；y轴宽不变
skewy(45deg)；x轴宽不变
translate偏移
transform: translate(100xp,50px);
第1个参数：X轴的偏移方向，正数是向右，负数是向左。
第2个参数：Y轴的偏移方向，正数是向下，负数是向上。
响应式
媒体查询
响应式:根据浏览器的宽度不同（设备终端）来进行同一个区域，不同布局的展示。即同一个网站，可认兼容不同的浏览器（设备）
min-width:800px；
代表样式应用的起始尺寸为800px
max-width:500px；
代表样式应用的最大尺寸为500px
如：<link rel="stylesheet" href="./chaxun1.css" media="screen and (max-width:799px)" >
如
@media screen and (min-width:501px) {
header {
width: 500px;
border: 1px solid red;
margin: 100px auto;
display: flex;
justify-content: space-between;
}
}
当浏览器大于800px
header {
width: 500px;
border: 1px solid red;
margin: 100px auto;
display: flex;
justify-content: space-between;
background-color: #fff;
}
扩展
栅格系统（class前缀）
1200px以上大屏幕（投影仪、电视等） .col-lg-
992-1200px中屏幕（笔记本） .col-md-
768-992px小屏幕（平板） .col-sm-
768px以下超小屏幕（手机） .col-xs-
外部引用JS文件
一般写在body底部font-size:2em;当前字体大小的2倍
font-size:2rem;当前根元素（html）字体大小的2倍。
考虑雪碧图，一般取背景图片大小，url("~");
设置字体
font-family:serif 衬线字体（有笔锋）
font-family:scans-serif 非衬线字体
引用字体
step1:下载一个字体到项目中
step2:使用关键词@font-face，创建新字体（引用新字体）
step3:使用关键词font-family,为新字体名命。
header {
font-family: "F63";
letter-spacing: 10px;
word-spacing: 20px;
}
@font-face {
font-family: "F63";
src: url("../Fonts/digital-7_mono.ttf");
}
圆角边框
取1个值：4个角的弧度半径（即4个角弧度一样）
取2个值：
第1值代表左上和右下
第2值代表左下和右上
取3个值：
第1值代表左上
第2值代表左下和右上
第3值代表左右上
取4个值：
第1值代表左上
第2值代表右上
第3值代表右下
第4值代表左下
border-radius: 10px 20px 30px 40px;
border-radius: n/m;
n代表X轴半径
m代表Y轴半径
即如果两个值不相等，最终画出一个椭圆
图片跳转
一张图片，在点击不同区域，链接到不同页面。
step1：img与map相关
map的那么值与img的usemap的值相同，并且usemap的值前面要加#号
注：为了解决兼容性，在map中再添加一个与name相同值的id。
因为有些浏览器用map的name值与img的usemap相匹配
有些浏览器用map的id值与img的usemap相匹配
step2：在map中添加子元素area
设置区域类型：shape
取值：
rectangle 矩形【rect】
circle 圆形
poly 多边形
step3：
设置区域坐标：coords
1、rectangle ：设置左上角和右下角的xy轴，每个值用逗号来分隔
2、circlr ：设置中心点的xy轴和半径
3、poly ：每个连接点的xy轴
step：设置点击的链接地址 href
音频 视频
音频：
controls//展示播放控件
lopp//循环播放
autoplay//自动播放（谷歌浏览器自动播放无效，可以添加muted属性使其可以自动播放）
muted//静音
<audio src="地址" controls lopp autoplay></audio>
视频：
controls//展示播放控件
lopp//循环播放
autoplay//自动播放（谷歌浏览器自动播放无效，可以添加muted属性使其可以自动播放）
muted//静音
兼容性
解决兼容性：
1、重置文件
2、不同浏览器内核不同，在属性前加前缀解决兼容性
3、html第一行需要写<!DOCTYPE html>，如果不写则进行怪异模式，浏览器会用低版本解析当前页面。
低版本会不识别高版本的元素。但文字依然显示。
4、开发思维【渐进增强，优雅降级】
以上两点是一个设计理念，为的是提供更好的用户体验
根据用户群体与业务流程进行设置。
a>渐进增强：先针对低版本浏览器进行开发，保证页面内容的展示（核心功能）
再针对高版本浏览器进行效果、交互、动画功能是添加。
为用户提供更好的体验。
b>优雅降级：先针对高版本浏览器进行开发，构建一个完整的页面（带交互与特效的功能）
再针对低版本浏览器进行功能的删减。
【推荐：兼容性】
w3help.org
chrome:__webkit__ 谷歌
firefox:__moz__ 火狐
微软：__ms__
欧鹏： __o__
图片属性
1 排列图片
在img里加属性 align=bottom align=middle align=top align=center(与文字同高居中)
当img在文字旁边时，
图片相对于文字的高度
图像映射
一张图片，在点击不同区域，链接到不同页面。
step1:img与map相关联
map的name值与img的usemap的值相同，并且usemap的值前面要加#
注：为了解决兼容性，在map中再添加一个与name相同值的id.
因为有些浏览器用map的name值与img的usemap相匹配
有些浏览器用map的id值与img的usemap相匹配
step2:在map中添加子元素area
设置区域类型：shape
取值：
rectangle 距形
circle 圆形
poly 多边形
step3: 设置区域坐标：coords
1、rectangle ：设置左上角和右下角的XY轴，每个值用逗号来 分隔
2、circle ：设置中心点的XY轴和半径
3、poly ：每个连接点的XY轴
step4: 设置点击的链接地址 href
如：
<img src="../IMG/icon.png" alt="" usemap="#F63">
<map name="F63" id="F63">
<area shape="rectangle" coords="0,0,82,68" href="./Flex.html" alt="">
<area shape="circle" coords="221,27,35" href="./animation.html" alt="">
<area shape="poly" coords="277,95,351,48,392,103,277,154" href="./BFC.html" alt="">
</map>
响应式布局
[媒体查询]
响应式:根据浏览器的宽度不同（设备终端）来进行同一个区域，不同布局的展示。
即同一个网站，可认兼容不同的浏览器（设备）
min-width:800px
代表样式应用的起始尺寸为800px
max-width:500px
代表样式应用的最大尺寸为500px
1200px以上大屏幕（投影仪、电视等）
992-1200px中屏幕（笔记本）
768-992px小屏幕（平板）
768px以下超小屏幕（手机）
Boostrap
<div class="container">
<div class="row">
<p class="col-lg-4 col-sm-12">1</p>
<p class="col-lg-5 col-sm-12">2</p>
<p class="col-lg-4 col-sm-12">3</p>
</div>
</div>
鼠标移入样式
：hover{
cursor:pointer【手】
cursor:wait;【等待】
}
sass【scss】
为了简化代码，减少冲突。一般申明并且直接调用变量。
使用考拉执行转化。
一，创建变量
二，使用变量
创建变量
$F63_color: deeppink;
header{
color:red;
nav{
使用变量
color:$F63_color;
ul{
color:palevioletred;
li{
&代表当前标签
&:hover>p{
color:black;
}
color:goldenrod;
p{
color:$F63_color;
span{
color:skyblue;
i{
color:$F63_color;
}
}
}
}
}
}
}
创建混合器
$F64: blue;
创建混合器
@mixin F63($w,$h,$m,$bc){
width: $w;
height: $h;
margin: $m;
background-color: $bc;
}
不带参的混合器
.border-bc{
border:2px solid red;
background-color: aquamarine;
}
article{
display: flex;
width: 600px;
flex-wrap: wrap;
引用不带参的混合器
@extend .border-bc;
div{
引用混合器（使用混合器）
可以批量添加，并且添加不同样式
@include F63(200px,200px,10px,deeppink);
}
}
$width-p:200px;
p{
引用混合器（使用混合器）
可以批量添加，并且添加不同样式
@include F63(100px,100px,0px,$F64);
变量可以进行算术运算（+ - * /）
width: $width-p - 50;
}
注：@extend：继承 定义一个类名
background-color:$beijingcolor,变量 批量修改
行盒
断词规则
取值：normal
break-all 1，英文按字母进行阶段换行 2，中文文字之间进行换行
keep-all 所有字符按照空格和标点符号进行换行
word-break: keep-all
由于去掉幽灵空白，父级会设置font-size: 0;
在此，子元素是行盒的元素，需要再次设置字体大小。便于展示内容。
由于两个相邻行盒元素会出现空格（因为开发方便打了回车）[幽灵空间]
去掉该空格，再要在父级设置font-size: 0
图片属性：不改变图片尺寸的情况下，如何等比例缩放
1 默认值：根据设置尺寸进行显示
object-fit:fill;
2 会进行缩放，并且不会超出边框盒
object-fit:contain;
3 会进行缩放，超出部分不会显示
object-fit:cover;
4 不会进行缩放，即图片原始尺寸
object-fit:none;
缩放中心控制点，默认是center;
background-origin:改变图片中心点
行盒的尺寸
可替换元素
1 可以进行W和H的设置
2 图片等比例缩放
非可替换元素
1 设置W和H无效
2 垂直方向上的margin\padding\border无效（不占位）
3 line-height 基线
当前字体的2倍：font-size：2em , 200%, 2 【取值】
行盒IFC
文本类内容必须放在行内元素中
如果包含在块级元素中，会自动生成一个匿名行盒
行盒的位置
1 行内元素必须属于常规流体系中，如果不是常规流，display会自动变为
block;
2 遇到浮动元素和常规流盒会进行避让（即考虑尺寸）
3 可以在盒块中使用text-align进行行盒对齐方式的设置
4 行盒之间的对齐方式
verticle-align
取值：baseline基线（图片下部间隙）
top 顶线对齐
bottom 底线对齐
middle 中线对齐
行内块：inline-block
1 多个标签在一行显示
2 设置高，宽有效
3 垂直方向上的margin\padding\border有效
4 可以包含块盒元素
5 自动创建BFC
grid布局
Grid和Flex对比
Grid：
全局进行布局时，推荐Grid;
网格布局：二维布局，以布局为基础，布局自适应，多维联动特点突出
网格分层：可以用z-index进行设置。（三维）
Flex：
局部进行布局时，推荐Flex;
弹性布局：以内容为基础，内容自适应，单行联动
网格容器属性
grid-template-columns: 设置网格容器中列的个数与尺寸
grid-template-rows:设置网格容器中行的个数与尺寸
也可使用其它的单位：fr ,rem , fr是分成几个等分占比
grid-template-columns: 1fr 2fr 2fr 1fr;
grid-template-columns: 3rem 25% 2fr 1fr;
grid-template-columns: 3rem 25% 1fr minmax(100px,auto);
grid-template-rows: 100px 100px;
也可设置：
grid-template-columns: repeat(3,100px);列重复三列
grid-template-rows: repeat(2,100px);行重复两行
设置网格容器的起点和终点
这样可以移动网格项目到任意区域
因此需要先定义每个网格线的名字。除开头和结尾，每个网格线即是起点也是终点。
grid-template-columns:[col1-star]100px [col1-end col2-start] 100px [col2-end col3-start]100px [col4-end]
grid-template-rows:[row1-start]100px [row1-end row2-start]100px[row2-end]
如：grid-column-start:col3-start;
grid-column-end:col4-end;
设置行与列尺寸的同时对网格线经行自定义命名（一个和多个命名）
默认值是（1，2，3…n）
设置网格间隙
grid-column-gap:两个项目列向的距离（列间距）
grid-row-gap:两个项目行向的距离（行间距）
grid-gap:行，列
如：grid-column-gap:10px;
grid-row-gap:15px;
gride-gap:15px 10px;
网格区域的设置
1 gride-template-areas:"h h h h"
"c . as as"
"f f f f"
其中.表示没有任何内容显示，留出空位
对网格项进行网格区域的设置
.hx{grid-area:h;} .as{gride-area:as;}
.c{gride-area:c;} .f{grid-area:f;}
2 也可以写成为：gride-area:2/1/3/2;
其中第一个值是行的起始，第二个值是列的起始，第三个值是行的结束，第四个值是列的开始
调整网格项目的位置
gride-column:n/m; n是起始网格线，m是结束网格线
gride-column:n/span m(合并网格项)；n是起始网格线，span m 是在n的基础上加上m的结果为结束网格线。
对齐
1 每行的对齐方式
取值：start center end strentch
2 每列的对齐方式： start center end strentch
隐式网格
当超出预设值的区域后（超出容器）
行和列的尺寸根据grid-auto-columns和gride-auto-rous来取值
如：grid-auto-columns:50px;
ate-rows:设置网格容器中行的个数与尺寸
也可使用其它的单位：fr ,rem , fr是分成几个等分占比
grid-template-columns: 1fr 2fr 2fr 1fr;
grid-template-columns: 3rem 25% 2fr 1fr;
grid-template-columns: 3rem 25% 1fr minmax(100px,auto);
grid-template-rows: 100px 100px;
也可设置：
grid-template-columns: repeat(3,100px);列重复三列
grid-template-rows: repeat(2,100px);行重复两行
## 设置网格容器的起点和终点
这样可以移动网格项目到任意区域
因此需要先定义每个网格线的名字。除开头和结尾，每个网格线即是起点也是终点。
grid-template-columns:[col1-star]100px [col1-end col2-start] 100px [col2-end col3-start]100px [col4-end]
grid-template-rows:[row1-start]100px [row1-end row2-start]100px[row2-end]
如：grid-column-start:col3-start;
grid-column-end:col4-end;
设置行与列尺寸的同时对网格线经行自定义命名（一个和多个命名）
默认值是（1，2，3...n）
## 设置网格间隙
grid-column-gap:两个项目列向的距离（列间距）
grid-row-gap:两个项目行向的距离（行间距）
grid-gap:行，列
如：grid-column-gap:10px;
grid-row-gap:15px;
gride-gap:15px 10px;
## 网格区域的设置
1 gride-template-areas:“h h h h”
“c . as as”
“f f f f”
其中.表示没有任何内容显示，留出空位
对网格项进行网格区域的设置
.hx{grid-area:h;} .as{gride-area:as;}
.c{gride-area:c;} .f{grid-area:f;}
2 也可以写成为：gride-area:2/1/3/2;
其中第一个值是行的起始，第二个值是列的起始，第三个值是行的结束，第四个值是列的开始
## 调整网格项目的位置
gride-column:n/m; n是起始网格线，m是结束网格线
gride-column:n/span m(合并网格项)；n是起始网格线，span m 是在n的基础上加上m的结果为结束网格线。
## 对齐
1 每行的对齐方式
取值：start center end strentch
2 每列的对齐方式： start center end strentch
## 隐式网格
当超出预设值的区域后（超出容器）
行和列的尺寸根据grid-auto-columns和gride-auto-rous来取值
如：grid-auto-columns:50px;
grid-auto-rows:50px;
212
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
