什么是doctype：
Doctype是document type的简写，它不是一个标签，没有结束标签。它是一种标记语言的文档类型声明，即告诉浏览器当前HTML是用什么版本编写的。
注意：doctype或DocType doctype
Doctype的作用
声明文档的解释类型，避免浏览器出现怪异模式。
怪异模式：浏览器使用自己的怪异模式解释页面。正常模式：使用w3c的标准解释渲染页面。
HTML标签按照标签结构可分为两种：
单标签：
<xxx>
<xxx/>html5之前，需要加闭合斜杠，函数html5之后不这样写了
双标签
<xxx>yy</xxx>双标签由开始标签，标签内容，结束标签组成。
不能自定义标签
HTML可以添加标签属性
<xxx p1=”v1” p2=”v2” p3>yyy</xxx>
开始标签{标签属性（属性名=“属性值”）}标签内容 结束标签
Html标签的开始标签可以添加属性，在标签名后面加空格然后添加属性，一个标签可以添加多个属性，多个属性用空格隔开。
标题heading：
h1-h6
h1为最大，h6为最小
默认样式：
字体加粗；标题标签带有上下外边距，撑出元素之间的间距。
hr：水平分割线。
作用：
分割内容
默认样式：
1px的边框线，上下有8px的外边距。
p标签：
段落标签，块标签。
默认样式：
文本大小为16px，根据文本大小来调整外边框。
注意：浏览器会自动在段前段后添加空行。
br:换行标签
img图片插入标签：
属性：
Src：源，图片的路径。
图片路径：
相对路径：
同级： ./ 直接写图片名
父级：../
绝对路径：
包括盘符的路径。
直接在网上复制图片地址。
alt:图片加载失败时的替换文本。
Title：图片标题，鼠标移动图片显示图片名称。
<!-- 相对路径 -->
<!-- <img src="星空.webp" alt="图片加载失败" title="星空"> -->
<!-- <img src="../向日葵.webp" alt=""> -->
<!-- <img src="./img/柯基.jpg" alt=""> -->
<!-- 绝对路径 -->
<!-- <img src="C:\Users\Administrator\Desktop/小猫.webp" alt=""> -->
<!-- <img src="https://img1.baidu.com/it/u=724179003,4096104503&fm=253&fmt=auto&app=138&f=JPEG?w=750&h=500" alt=""> -->
a超链接标签
作用：实现页面的跳转。点击标签内容，跳转指定链接地址
属性：href超文本的指向，设置跳转到指定链接地址。
Target：设置网页的打开方式，默认在本页面打开。
值：
Self：在本窗口打开页面
Blank：在新窗口打开页面
Title：超链接的名称
注意：当a标签没有添加href属性时，是占位符，标签累的文本为普通文本。
Tabindex：规定当前是中tab按键进行导航时元素的顺序值：number
div:
标签的快标签
注意：
块元素在没有设置宽度的情况下，宽度默认为父元素的100%，高度靠内（如果没有内容，高度为0）
Span：普通文本标签
默认样式：
文本默认大小为16PX，靠文本内容撑出大小
HTML文本格式化标签
b:粗体文本，没有特殊意义。
Strong：粗体文本，具有很强的强调意义，用于表示文本的重要性
i:斜体文本，没有特殊意义。
em:斜体文本，具有很强的强调意义，用于表示文本的重要性。
Sup定义上标。
Sub定义下标。
S：删除线文本，没有特殊意义。
del:删除线文本，具有很强的删除意义，表示被遗弃的内容。
U：表示查入文本，添加下划线，没有特殊意义
Ins：添加，插入文本，具有很强的添加意义，表示增加的内容。
Small：小号文本。
<nav>标记导航，对页面中重要的链接群使用
<header>页眉，通常包括logo，主导航，全站链接以及搜索框。
<main>页面的主要内容，一个页面只能使用一次，如果是微博应用，则包括其只要内容
<section>定义文档中的节点，比如：章节，页眉，页脚等。
<footer>页脚，只有父元素为body时才是整个页面的页脚
<articler>定义外部内容，显示像报纸一样的文章内容
<aside>定义所有内容之外的部分，如侧边栏，广告，产品相关的列表等
Css：
全称：css层叠样式表，是描述标记语言页面格式的标准（或语言）
Css使用开发人员对页面内容和可视化元素分离，实现刚好的页面和灵活
Css使用方法：
1. 内联样式：<p style=“color: red”;也叫行间样式，行间样式。在标签的开始标签内添加style属性设置CSS样式
2. 内嵌样式：也叫内部样式。在html的head标签并按照固定格式设置CSS样式如：
H2{
}
3外部样式：也叫做外联样式。在为外部创建个css文件，在HTML文件中的head标签中使用link引入
优先级：
正常情况：
行内样式——内部样式——外部样式
特殊情况：
行内样式————内部样式/外部样式（按照在头标签的先后顺序，以浏览器的执行顺序判断优先级）
Css选择器：
通配符选择器：选择页面所有元素
格式： *{ }
标签名选择器；选择页面中所有标签名为p的标签
格式：标签名{ }；如p{ }
id选择器：选中页面中id值为first的元素,<p id=”first ”
格式：#id值{ }
class选择器：类选择器，选中的是页面中所有class值中line的元素，class里面有多个元素
格式： .class值{ }
id和class的区别：
1前缀不同，在css中class以”.”id以“#”为前缀。
2class可以添加多个类名，中间以空格隔开。Id只能有一个
3优先级:给同一个元素设置class类和id设置相同的css样式，优先级执行的是id选择器内的css样式。
4id的唯一性：在整个HTML页面中，一个ID值只能出现一次
HTML语义化标签：
根据内容的结构(内容语义化)，选择合适的标签(代码语义化)。
便于开发者阅读和理解，写出更好的更优雅的代码的同时，让浏览器的爬虫和机器更好的解析。
HTML语义化的好处：
1.为了在没有css的情况下，页面也能呈现出很好地网页结构和代码结构。
2.代码结构清晰，方便阅读，有利于团队开发。
3.方便搜索引擎识别页面，有利于SEO(搜索引擎优化)。
4.方便其它设备解析(例如：屏幕浏览器，盲人阅读器，移动设备)以语义化的方式渲染页面。auto&app=138&f=JPEG?w=750&h=500" alt="">
选择页面中id值line，并且class中包含line的p标签。
*/
/* p#line.line{
background-color: aquamarine;
}
<p id="line" class="line">第三行</p>页面。auto&app=138&f=JPEG?w=750&h=500" alt=""> -->
兄弟选择器：地位平等，给两个或者多个设置css样式相同时使用(节省代码空间)。
*/
/* p,#box{
font-size: 50px;
color: cadetblue;
}
<p id="first">第一行</p>
<p class="line bold">第二行</p>
<p id="line" class="line">第三行</p>
<h4>第四行</h4>
<div id="box" class="box">这是一个块
<div>
<span>文本内容</span>
</div>
</div> -->->
"+" 相邻兄弟选择器，兄弟+兄弟
选择所有紧接着p标签元素之后的第一个div标签。
*/
div p+div{
background-color: brown;
“~” 兄弟选择器，兄弟~兄弟
选择同一个div父元素下的p元素之后的每一个ul元素的背景颜色。
*/
div p~ul{
background-color: burlywood;
}
子选择器：
格式：
">"指向子元素。在嵌套中通过外层元素一层一层找到某个后代元素。
*/
/* #box>div>h4{
background-color: coral;
} */
<div id="box" class="box">这是一个块
<div>
<h4>标题</h4>
</div>
</div>
后代选择器：祖孙选择器。
在嵌套在通过外层元素直接找到/一层一层找到某个后代元素。
*/
/* #box span{
background-color: darkolivegreen;
} */
<div id="box" class="box">这是一个块
<div>
<span>文本内容</span>
</div>
</div>
Style（规定元素的行内样式inline style）
如<div style=“width：200px； height：300px；”
Contenteditable（HTML新增）：指定元素内容是否可以编辑
值：true 指定元素可编辑状态
False 当元素没有设置contenteditable属性时元素将从父元素继承
如：
<div contenteditable=”true”>
<p>可以随便编辑</p>
</div>
Dir:规定元素内容的文本方向
值：auto：浏览器的判断文本方向，仅在文本方向未知时使用
Ltr：默认值，从左到右的文本
Rtl：从右到左的文本
<p dir=“rtl”>正常文本，从左至右</p>
bdo定义字体的方向
<bdo dir=”rtl”>正常文本，从左到右
draggable(html5新增）：固定元素是否可拖动。
值：true 定义元素为可拖动状态
False 定义元素不可推动状态
Auto 浏览器默认特征
<p draggable=””>
hidden隐藏一个元素
<p hidden>这是一段隐藏文本</P>
在HTMl中，如果需要显示< >或 & 等特殊符号时：不能直接使用，否则浏览器会将它们误认为一个标签，需要使用惠特米勒转义字符进行转义
 ；英文空格
&emsp；中文空格
©；版权
®；注册商标
&； &
¥ ￥
°；。
样式继承：
1. 当父元素设置相同CSS样式，子元素会有相同的CSS样式
2. 当子元素和父元素相同的css样式时，子元素将覆盖父元素的css样式
3. 一般情况下，只有字体存在继承
通常会影响元素的位置的属性，元素的外边距，背景颜色，边框的属性不会被继承
Css基本样式
fong-size:设置元素的字体大小。
值：
number，数字。
单位：
Px像素
text-decoration:文本装饰，可以设置下滑线或删除线。
值：
none:清除
Underline：添加下滑线
overLine：添加顶部线
Line-through：添加删除线
text-align:设置元素文本的对齐方式
值：
center：文本水平居中。
Left/start：水平居左
Right/end:水平居右。
注意：当前属性对行内元素无效
background-color：设置元素的背景颜色
font-weight:设置字体加粗。
值：
normal:默认值，定义标准字体
bold:粗体文本
bolder:特粗体，相当于strong和b对象的作用。
lighter:定义细体文本。
100-900:定义字符的粗细，400等同于normal，700等同于bold
a标签默认有下划线，可以通过使用text-decoration：none；清除。
text-indent:设置段落首行缩进的距离
值：
number,数字
单位：em，相当于元素的字体大小。
Width：宽度
值：number
单位：
Px，像素
百分比%：占父元素宽度是父元素宽度的100%。行内元素的宽度靠文本撑开
height:高度
值：number
单位：px，像素
百分比%：占父元素高元素的百分之多少（要在父元素有固定高度的情况下使用）
注意：
当元素没有设置高度时，靠内容撑开，内容是浮动元素/绝对定位/固定定位情况除外。
font-family:宋体（设置字体类型）
font-style: 设置字体风格
值：
normal:默认值，标准字体样式。
italic:定义斜体文本
inherit:规定当前元素继承父元素的字体样式
Oblique：文本为倾斜的状态
lin-height：设置行高，行间距
作用：
让文本在行间距内垂直居中，不允许使用负值
值：
Normal：默认值，设置和你的行间距
Number：数字。此数字会于字体大小相乘来设置行间距
百分比：%当前文字大小的百分比进行行间距
Letter-spacing:字间距，设置字符与字符之间的距离。
Letter-transform：文本转换
值：
Uppercase：大写英文
Lowercase：小写英文。
Capitalize：单词首字母大写
margin:元素的外边距。表示相邻元素或边距的距离。
值：
一个值：表示四个方面的外边距。
两个值：分别表示上下，左右
三个值：分别表示上、左右、下
四个值：分别表示上、右、下、左
auto：表示间距平分
如：margin: 50px; */
/* margin: 50px 100px; */
/* margin: 50px 100px 150px; */
/* margin: 50px 60px 70px 80px; */
/* 定宽居中 */
margin: 0 auto;
1使用颜色名：不建议直接使用颜色名，因为浏览器对颜色取值有差异
.color-name{
Clocr
}
2百分比：
三个值最大：白色
三个值最小：黑色
三个值相等灰色
那个百分比大就偏向那个颜色
如：
.percentage{
color: rgb(33%,50%,90%);
}
3数值：
范围：0-255
如：
.number{
color: rgb(150,60,80);
4十六进制
使用前面添加#颜色符号。
如
.system{
Color：#FFFFFF；
}
5.rgba
a：控制颜色的透视度
取值范围：
0-1
0为完全透视，1为完全不透视
如：
.box{
height: 100px;
background-color: rgba(255, 0, 0, 0.205);
}
<body>
<div class="color_name">颜色名</div>
<div class="percentage">百分比</div>
<div class="number">数值</div>
<div class="system">十六进制</div>
<div class="box"></div>
hover显示隐藏文件（点击nnn显示fff的内容
如.nnn:hover>.fff{
display: block;
/* 插入背景图片 */
background-image: url(./img/bg.jpg);
/* 设置背景图片的尺寸 */
background-size: 2000px 400px;
/* 设置背景图片的位置，50%可以实现居中。 */
background-position: 50% 50%;
display:block 设置元素的布局方式
值：
none:隐藏一个元素，隐藏后不会显示
block:块元素
inline：行元素
inline-block：行内块元素
HtML标签按照布局方式可以分为三类:
行元素，块元素，行内块元素
块元素:
1. 独占一行;
2．可以设置宽高
2.1设置宽高，则显示默认宽高
2.2没有默认宽高，则显示内容的宽高
布局方式默认为块元素的有div，p, h1-h6等行元素:
行元素
1.不独占一行
2．不能设置宽高，宽高取决于自身内容
3．多个元素之间会左右排列，一行到最后排列不下时会自动换行布局方式默认为行元素的有:语义化标签，span, a等
行内块元素
1. 不独占一行
2．可以设置宽高
3．多个元素之间会左右排列，一行到最后排列不下时会自动换行布局方式默认为行内块元素有: button，img等
间隔：行元素和行内快元素
原因：
htmp代码在书写的时候，为了保存美观，每个元素会单独写一行，所以元素之间会有很多空格和回车，这些空格和回车就会被浏览器解释成为一个空格。
解决方法：
1. 清楚元素之间的回车；例如把元素写在一行，或者把下一行的开始标签写在上一行的尾部。
2. 在文本后加空格。
3. 给元素添加间距
4. 给元素设置font-size:0;然后在单独设置文本大小。
基线对齐：
正常情况下是为了让文本和图片进行对齐。
两个或者多个元素在一行显示，会按照默认的对齐规则对齐(基线对齐)。
基线：
图片和空块的基线在元素的底部，文本的基线在文本的中下部分(四线三格的第三条线)。
注意：
元素中带有文本，默认元素的基线以文本的基线为准。
vertical-align: 基线对齐方式。
值：
auto：默认值，按照浏览器的默认执行状态执行。
middle：中线对齐。
top：顶部对齐。
bottom：底部对齐。
baseline：文本基线对齐(四线三格的第三条线)。
Position：元素的定位方式
值：
1：static：默认值，静态定位
静态定位采用流试布局进行定位.不能通过方向（top，right，bottom，left）进行定位。
2：relative：相对定位
相对定位的元素还在文档的原有位置上，并且可以通过方向（top，right，bottom，static）进行定位
relative定位元素，相当于其在文档流中原有的位置进行定位。
3： absolute：绝对定位。
绝对定位的元素会脱离文档流，不在参与父元素的流式布局，不能撑开父元素，也不能知道参照父元素进行尺寸设置。
absolute定位之后，如果不使用方向(top，right，bottom，left)进行定位，那么元素会在它原有的位置。
absolute定位的元素，相对于离自己最近的position为非static的祖先元素进行定位。
子绝父相：
如果想要绝对定位的元素相对于父元素进行定位，那么最简单的方法就是将父元素设置为相对定位。
4：fixed固定定位
固定定位的元素会脱离文档，相当于根元素进行定位，页面滚动不随页面，免的滚动而滚动。
Top：0；（上），right：0；（左），bottom：0；（下），static
表格：
Table：定义表格
Table不设置宽度时，宽度被内容撑开。
设置了宽度且内部的td不设置宽度时，td会按照内容的比例拉伸
Caption：表格标题（文本默认在表格水平居中的位置）。
Thead：定义表格表头。可以省略，浏览器解释时会自动添加。
tr:表格的行
th:定义表格行
tbody表格的主体部分。 可以省略，浏览器解析时会自动添加
td:定义标准单元格
rowspan：用于设置本单元格占几行
<td rowspan="6">金肯2班</td>
colspan：用于设置本单元格占几列
<td colspan="2">59</td>
/* 删除列表的前缀 */
list-style: none;.
列表：
1.无序列表（常用在导航）
ul：定义无序列表
默认样式：
有上下外边距16px，值会根据内容的文本大小改变。
左内边距40px。
li：列表的项。
注意：
默认样式为“圆点”，可以通过css样式改变。
2.有序列表
ol：定义有序列表
默认样式：
有上下外边距16px，值会根据内容的文本大小改变。
左内边距40px。
li：列表的项。
注意：
默认样式为“阿拉伯数字”，可以通过css样式改变。
type：列表的类型。
值：
1：阿拉伯数字
A：大写英文字母
a：小写英文字母
I：大写罗马数字
i：小写罗马数字
3.自定义列表（定义底部导航群）
dl：定义自定义列表。
默认样式：
有上下外边距16px，值会根据内容的文本大小改变。
dt：定义列表项。
dd：定义列表项的描述。
默认样式：
左外边距40px。
伪类：在一定条件下才能触发的样式
：hover 当鼠标指针在元素上悬停时触发
：visited a标签的作用伪类，表示访问。
：focus 当元素成为焦点时出发。用户可以交互的元素才还能称为焦点，一个页面中同一时刻只有一个元素能成为焦点。
：active 当元素被鼠标按下时触发
：：first-line 第一行
：：first-letter元素文本内容的第一个字
::after 后缀伪元素
Content 后缀内容
：：berore 前缀伪元素
Content前缀内容
Button按钮
Padding：内边距
border:是边框属性
值
| 值 | 说明 |
| 指定边框的宽度 | |
| 指定边框的样式 | |
| 指定边框的颜色 | |
| 指定应该从父元素继承border属性值 |
border-bottom: none添加低边框
List-style-type：设置列表标记的类型
值：disc：默认值，标记是实心圆
None：无标记
Circle：标记是空心小圆点
Square:标记是小方块。
Decimal：标记数据
Decimal-leading-zero：标记是0开头的数字标记。01，02，03等
Lower-romaan:标记是小写罗马数字i，ii，iii等。
Upper-roman:标记是大写罗马数字I，II，III，等
Lower-alpha：标记小写英文
upper-alpha：标记是大写英文
把标签的hre数字设置为#XXX时，点击a标签里面立即滚动到id值为xxx的元素的位置
如：
<ul>
<li><a href="#box1">第一块</a></li>
</ul>
<div id="box1" class="box">第一块</div>
Form：创建表单
action:当表单提交时将表单的内容发往何处
如：<form action="#">
input：定义输入框，按钮等。
属性：
Text：文本输入框
Password:密码输入框。
Button：按钮
Submit：提交按钮，会把表单内的内容提交给服务器
Reset：重置按钮，清单表单内所有的数据
file:文件上传按钮
image：定义图片形式的提交按钮。必须把sru属性和image结合使用
radio：单选框。
Name：定义input输入框的名称
Value：定义input的初始值
Placeholder：定义文本输入的提示音
Required：必须输入内容，不能为空。
Readonly:定义input为只读模式
Dissabled：禁用input元素。
Maxlangth：最多可输入多少字符
Size：文本框的宽度。
如<input type="text" name="" id="" disabled>
<input type="submit">
label：给input添加标注。
for：为了让input和label进行绑定。
for的值跟input的值相同。
<label for="account">账号：</label>
<input type="text" name="account" id="account" placeholder="请输入账号" maxlength="11">
<input type="button" value="按钮">
button：按钮。
value：按钮的标题。
submit：提交按钮，会把表单内的 内容提交给服务器。
reset：重置按钮，清空表单内所有的数据
file：文件上传按钮
accept：规定了文件上传的类型
<label for="checkbox1">复选框1</label>
<input type="checkbox" id="checkbox1">
checkbox：定义多选框，复选框
radio：单选框
<input type="radio" name="fruit" id="fruit1" value="苹果">
<label for="fruit1">苹果</label>
下拉菜单
<select name="" id="">
<option value="1">火狐</option>
<option value="1">谷歌</option>
</select>
fieldset：将表单内容进行分组，会产生一个2px边框，内边距10px，12px，左右外边距2px。
legend：legend是fieldset元素定义的标题。默认在分组框的上边框内，可以左右移动。
optgroup：定义选项组。
label：添加选项组的描述。
option：定义类表中的一个选项内
<fieldset>
<legend>分主标题</legend>
</fieldset>
<!-- 分组下拉菜单 -->
<select name="" id="">
<optgroup label="上午">
<option value="1">语文</option>
<option value="2">数学</option>
<option value="3">英语</option>
</optgroup>
<optgroup label="下午">
<option value="1">语文</option>
<option value="2">数学</option>
<option value="3">英语</option>
</optgroup>
设置背景图片
注意：当图片比较小的时，默认会以平铺的方式铺满整个背景区域。
Background-image:url( )
Background-image:设置背景图片是否重复显示。
值：
Repeat：默认值，重复显示。
no-repeat:不重复
Repeat-x:水平方向重复
Repeat-y：垂直方向重复
Round：保存图片的完整性，根据背景区域的大小图片相对应拉伸填。
Space：保存图片大小平铺满整个背景区域，剩余空间作为图片之间额间隙平分。
Background-attachment:背景固定，背景图片时候随着页面的其余部分滚动
值：
Scroll：默认值，背景图片会随着滚动条滚动。
fixed：背景图片不会随着滚动
Backgroud-position:设置背景图片横向和纵向的位置；默认为0 0
Background-size:设置背景图片的尺寸，分别表示宽和高。
设置背景图片仅设置一个方向就可以，另一个方向根据大小自动缩放。
值：
Number：
一个值：该值将作用于X轴，高度为auto。此时高度以x轴为参考经行比例缩放。
两个值：分别作于x轴和y轴。
单位：
Px：像素。
百分比%：以容器的大小作为标准计算。
Contain:更具图片的最小值设置图片的大小。将图片比例收缩，图片会始终在容器之内，容器范围有可能会完全被覆盖。
Cover：根据图片的最大值设置图片的大小。将图片比例收缩至安全覆盖整个容器，图片可能会超出容器
元素内容溢出
Overflow：设置溢出的内容显示方式
值：visible：默认值，元素溢出的内容不会隐藏，溢出内容会出现在元素大小之外
Hidden：元素内容溢出隐藏
Scroll:溢出的内容可以滚动查看
auto:隐藏溢出的内容，出现滚动条
单独设置方向
Overflow-x:hidden
Overflow-y：hidden
text-overflow：溢出文本以什么方式隐藏（配合overflow：hidden;)
Ellipsis:隐藏溢出文本元素，以。。。。为尾缀
white-space: nowrap;文本不换行
p:nth-of-type(2)指定每个p元素匹配同类型中的第2个同级兄弟元素
什么是精灵图片：
精灵图片就是把多张图片放到一张大的图片上。
当做背景图片插入。
之所以要将多张图片放到一张图片上，是因为很多背景图片是放到服务器上面的，当需要使用某张图片的时候需要向服务器发送请求，如果图片过多时服务器的压力就比较大，所以精灵图片可以减轻服务器压力。
css精灵图片也叫雪碧图，是一种网页图片应用处理方式，它允许将一个页面中涉及到的所有零星图片都包含到一张大图片上。
如： width: 50px;
height: 50px;
background-size: 350px 350px;
background-position: 150px 250px;
background-position: -200px -100px;
background-size: 700% 700%;
background-position: 300% 500%;
background-position: -400% -200%;
Px单位设计50*50
7*7
50*7=350px
%比设计：元素大小287px=100%
7*100%=700%
700%*700%
border边框
Border-style:边框样式
值：solid：定义实线
Double：定义双实线
Dashed：定义虚线
None：定义无边框
Dotted：定义点状线
groove:3D隆起效果
border-width:边框粗细，元素只添加border-style时，默认宽度是3px
Border-color:边框颜色，元素添加border-style时，默认颜色是黑色或灰色（3D）。
圆角设置：
border-radius:圆角。
百分比，最大值50%之后不再会有变化
box-shadow: inset px px px red,-5px -5px 5px green;
第一个数值：阴影距离盒子左右的距离，正值往右，负值相反，0盒子正下方
第二个数值：阴影距离盒子上下的距离，正值往下，负值相反，0盒子正下方
第三个数值：阴影的清晰度，值不能为负。值越大阴影会以渐变的形式呈椭圆形向外扩散。
第四个值：阴影的颜色
可以给一个元素添加多个阴影，值之间以逗号隔开。
text-shadow：5px 5px 5px red，-5px，-5px 5px green；
第一个数值：阴影距离文本左右的距离，正值往右，负值相反，o文本正方
第二数值：阴影距离文本上下的距离，正值往下，负值相反，0盒子正下方
第三个数值：阴影的清晰度，值不能为负。值越大阴影会以渐变的形式呈椭圆形向外扩散。
第四个值：阴影的颜色
可以给一个元素添加多个阴影，值之间以逗号隔开。
Border-radius：30%
圆角设置仅仅是设置了边框和背景颜色，元素内容还是原来的矩形
盒子模型
1内容盒子content-box，标准盒子模型
改变内边距和边距的大小，内容不变
标签的大小=content(width+height) + padding + border。
2.边框盒子border-box，IE盒模型。
改变内边距和边框的大小，内容也会发生改变。
标签的大小=content(width+height)
注意：
当边框盒内边距的值超出content的大小，也能撑大盒子。
box-sizing: 标签尺寸的设置方式。
值：
content-box：默认值，标准盒子模型，计算宽高时按照内容的宽高进行计算。
border-box：怪异盒子模型，计算宽高时，把边框盒内边距计算到元素之内。
一个元素从内到外可分为四部分：
内容(content)，内间距(padding)，边框(border)，外间距(margin)。
margin：外边距
作用：
元素添加外间距后，会移动元素之间的位置，调整元素与元素之间的距离。
距离：
从只是的边框开始，到另一个元素边框之间的距离。
padding：内边距
作用：
能撑大盒子，调整元素内容的位置。
距离：
从元素的边框开始到内部内容之间的距离。
默认情况下，给元素设置宽高，设置的是元素内容的宽高，不包含边框和内边距。
margin的合并：快级元素的上外边距和下外边距有时候会进行合并。
Margin合并只发送在块级元素（浮动或绝对值或固定定位除外）之间。
Marhion合并的几种情况：
1. 相邻兄弟之间的margin合并；
2. 父级元素中的第一个元素和最后一个元素外边距会穿透父元素，表现为父元素的外边框，距离，这个情况叫做父盒子塌陷（给子元素设置margin-top父元素跟着一起移动）。
解决方法：
1. 给父元素添加边框
2. 给父元素添加padding（值不能小于或等于0即可）
3. 给父元素添加overflow:hidden;溢出元素部分的内容会隐藏。
空快元素的margin合并
Margin合并的规则：
正正取最大，正父值相加，负负取最小。
Margin-top合并解决方法：
1. 父元素设置为快状格式化上下文
2. 给父元素设置border-top值
3. 给父元素设置padding-top值
4. 父元素和第一个子元素之间添加内联元素进行分割
margin-bottom合并解决方法：
1.父元素设置为块状格式化上下文。
2.父元素设置border-bottom值。
3.给父元素设置padding-bottom值。
4.父元素和最后一个子元素之间添加内联元素进行分割。
快状格式上下文：BFC
如果一个元素符合BFC的条件，该元素内部会行成一个独立的容器，元素内部元素会垂直沿着父元素的边框排列，和外部元素互不干扰。
触发BFC的条件：
1. 浮动元素，float：none；除外。
2. 绝对定位和固定定位，position： absolute/fixed；
3. Display 为以下之中一个值inline-block等出快级元素之外。
4. Overflow除了visible以外的值
不让空div有margin合并的操作：
1.设置垂直方向的边框border；
2.设置垂直方向的padding；
3.在元素内部添加内联元素；
4.设置height。
使用浮动布局，在最后一个浮动元素结束的地方清除浮动，会影响后续的页面，与会导致元素不能根据内容显示高度。
Clear：both
什么是浮动：
浮动元素本意是为了让文本环绕图片，但是发现浮动元素可以宽高或内联排序，是介于inline和block之间的一个特别的存在，再inline-block出来之后，浮动都有自己独特的使用场景。直接遇到父级元素或者同级浮动元素的边沿时停下，多个浮动元素相遇会按照内容排列方式进行排列。
使用方式：
给元素直接添加float：left/right/none；
值：
none：默认值，元素不浮动，并会显示其文档流中出现的位置。
Left：向左浮动，会在页面会父元素的左侧。
Right：向右浮动，会在页面会父元素的右侧。
清除浮动的方法：
1.父级div定义 height
原理：
父级div手动定义height，就解决了父级div无法知道获得高度的问题。
优点：
简单，代码少，容易掌握。
缺点：
只适合高度固定的布局，要给精确的高度，如果高度和父级div不一样时，会产生新问题。
建议：
只建议在高度固定的布局使用。
2.结尾处添加空div clear: both;
原理：
添加一个空div，利用css提供的clear: both;清除浮动，让父元素知道获取到高度。
优点：
简单，代码少，容易掌握，浏览器支持。
缺点：
不明白原理；如果页面浮动布局较多，就要增加很多空div，给人感觉很不好。
建议：
初学者使用较多。
3.父级div定义:after 和zoom
原理：
IE8以上和非IE浏览器才支持:after，原理和方法2有点类似，zoom是IE的专有属性，可以解决IE6，IE7，浮动问题。
优点：
浏览器支持，不容易出现怪问题。
缺点：
代码多；原理不理解；要两句结合使用菜能让主流浏览器都支持。
建议：
推荐使用，建议设置公共类，一件事css代码。
.clear-fix::after{
content: "";
display: block;
clear: both;
visibility: hidden;
height: 0;
}
.clear-fix{
zoom: 1;}
4.父级元素定义 overflow: hidden;
原理
必须从定义width或zoom: 1;同时不能定义height，使用overflow: hidden;浏览器会自动检测浮动区域的height。
优点：
代码少，浏览器支持。
缺点：
不能喝position结合使用，因为超出的部分会隐藏。
建议：
没有使用position或对overflow: hidden;理解比较深刻的人使用。
5.父级div定义 overflow: auto;
原理：
必须从定义width或zoom: 1;同时不能定义height，使用overflow: auto;浏览器会自动检测浮动区域的height。
优点：
代码少，浏览器支持。
缺点：
内部高度超过父div时，会出现滚动条。
建议：
不建议使用，如果你能确保不出现滚动条或你需要出现滚动条使用。
6.父级div 也一起浮动
原理：
所有代码一起浮动，就变成了一个整体。
优点：无
缺点：会产生新的浮动问题。
建议：
制作了解。
7.父级div 定义display: table;
原理：
将div属性变成表格。
优点：无
缺点：会产生新的未知问题。
建议：
制作了解。
8.结尾处添加br标签 clear: both;
原理：
父级div定义zoom: 1;来解决IE浮动问题，结尾处添加br标签 clear: both;
弹性布局：
display: flex
又称为flex布局，是css3.0新增的布局方式。弹性布局，用来给盒模型提供最大的灵活性。任何一个容器都有可以被设置为弹性布局。
采用flex布局的标签，父元素被称为flex容器，简称“容器”。成为容器成员，子元素被称为flex项目，简称“项目”
flex布局默认有：容器属性和项目属性。
容器默认存在两根轴线：容器属性和项目属性。
容器默认存在两根轴线：水平方向的主轴，垂直方向的交叉轴
flex布局，设置给父元素。设置给父元素。会影响本元素的子元素的布局方式。
flex中，子元素不再使用原有的流试布局，而是参与flex布局。无论是快元素还是行元素，都会按照flex的方向进行排列。
Flex-direction:设置flex布局项目的排列方向。
值：
row:默认值，项目从左往右主轴排列，起点在左端。
row-reverse：项目从右往左主轴排列，起点在右端。
Cloumn：项目从上往下交叉排列，起点在顶点。
Column-reverse：项目从下往上交叉轴排序，起点在底端。
注意：
项目从左往右排列，起始线在左端，反之则在右端。
Justify-content：定义项目在主轴上的对齐方式
值：flex-start：使用项目在起始线对齐。
Flex-end：所有项目在终止线对齐。
Center:所有项目在中间线对齐；居中。
Space-around：项目两端间距对齐，项目之间的间距相等，是项目到两端的2倍。
space-between：项目两端对齐，项目中间的间距相等。
space-evenly：项目之间的间距与项目到两端的间距相等。
align-items：定义项目在交叉轴如何对其。
值：
Center：项目在交叉轴中点对齐。
flex-start：项目在交叉轴的起点对齐
flex-end：项目在交叉轴的终点对齐
flex-wrap:定义项目在主轴一行排列下不时如何换行
值：nowrap：默认值，不换行
Wrap：换行显示，第一行在上方。
Wrap-reverse：换行显示，第一行在下方。
align-content: 定义多根轴线在交叉轴如何对齐。
如果项目只有一根轴线，则该属性不起作用。
值：
flex-start：多根轴线在交叉轴的起始点对齐。
flex-end：多根轴线在交叉轴的终点对齐。
center：多根轴线在交叉轴的中点对齐；居中。
space-around：轴线两端间距对齐，轴线之间的间距相等，是轴线两端的2倍。
space-between：多根轴线在交叉轴两端对齐，轴线之间的间距相等。
space-evenly：轴线两端的间距与轴线之间的间距相等。
order：定义项目的排列顺序。
值：
number，数字，默认值为0，值越小越靠前
flex-grow: 定义项目的放大比例。允许单个项目与其他的项目在交叉轴有不同的对齐方式
值：
number，存在剩余空间，也不放大。放大的空间为主轴的剩余空间。
Center：项目在交叉轴中点对齐。
flex-start：项目在交叉轴的起点对齐
flex-end：项目在交叉轴的终点对齐
flex-basis: 定义项目占据的主轴
flex-shrink:定义项目的缩小比例。
值：
number，默认值为1。当空间不足时，该项目将缩小。
如果所有项目flex-shrink都为1，表示当前空间不足时，都将等比例缩小。
如果flex-shrink属性取值为0时，表示当空间不足时，项目不缩小。
flex-shrink:属性取值越大，表示当空间不足时，项目缩小的越快，空间缩小的越厉害。
过度写到本身上，谁做动画给谁加
如：transition：all 0.3s；
时间差
Animation-delay：0.4S；
2D转换
Ransform (css3中具有颠覆性的特征之一，可以实现元素的位移，旋转，缩放等效果）
值:translate(X,Y), x就是x轴上位移 y就是y轴上移动位置，中间用逗号分隔，单位px ，%(盒子往上（负）走自己的高度的%）或translateX(n);X大写或translateY(y);y大写
Rotate（xdeg,ydeg）：旋转度数单位deg
Origin:旋转中心点（默认中心点)如：transform-origin：left bottom（可以跟方位名词定位 ）ransform-origin：50px 50px；（可以根据px像素）
Scale（x,y）：里面写的数字不跟单位，就是倍数的意思1就是1倍 2就是两倍，写一个数字宽高的改变，负数就是缩小
Ransform ：translate(X,Y) Rotate（xdeg,ydeg）Origin（）同时转换
动画是CsS中具有颠簸性的特征之一，可通过设置多个节点来精确控制一个或一组动画，常用来实现复杂的动画效果
1定义动画:
@keyframes 动画名词{
/*开始标签*/
0%{
Width：100px（可以换成其他要求，不一定非要使用width）
}
/*结束状态*/
100%{
Width：2000px（可以换成其他要求，不一定非要使用width）
}
}
2调用动画：
Div{
/*调用动画*/
animation-name: 动画名称；
/*持续时间*/
Animation-duration: 持续时间S ；
}
动画序列
1可以做多少个状态的变化keyframe
2里面的百分比要是整数
3里面的百分比就是总数时间的刮分
动画常用属性：
animation-name规定@keyframes动画的名称（必须要的）
animation-duration规定动画完成一个周期所花费的秒，默认是0（必须要的）
animation-timing-function规定动画的速度曲线默认是ease
值：linear动画从头到尾的速度是相同的，匀速
Ease默认，动画以低速开始，然后加快，在结束前变慢。
Ease-in动画以低速度开始
ease-out动画抵速结束
ease-in-out动画以低速开始和结束
Steos（）指定了时间函数中的间隔数量（步长）
animation-delay规定动画何时开始，默认是0。
animation-iteration-count规定动画被播放的次数，默认是1，还有infinite（无数次）
animation-direction规定动画是否在下一个周期逆像播放，默认是normal，逆像播放alternate
animation-play-state：规定动画是否正在运行或暂停，默认是running，还有paused暂停状态
animation-fill-mode规定动画结束后状态，保持foewaeds，回到起始backwaeds
3D必须加的transform-style：preserve-3d；
3D位移：transform：Translate3d( x,y,z )单位px
值：translateZ（）
TranslateX（）
Ranslatey（）
Translate3d( x,y,z )
透视
Perspective:1200px;(在父元素中使用
Transform：perspective（1200px）（在子元素中使用）
如果当你的视线距离物体足够远的时候，基本上就不会有近大远小的感觉
Perspective-origin：left right top botten （观察3d元素角度位置）
旋转
Transform：rotate3d（x ，y，z）
值rotateX()
rotateY()
rotateZ()
3D缩放
Transform：scale3d（X,Y,Z） 单位deg
值： scaleX
ScaleY
scaleZ
注意：scale（）和scale3d（）函数单独使用没有任何效果，需要配合其他的变形函数一起使用采有效果
1063
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
