HTML+CSS知识点总结
lang 显示是什么语言的网站，eg.
<html lang="zh-CN">//中文显示
但是同样在中文网站可以出现英文，在英文en网站中也可以出现中文，lang只是起到了一个类似提示的作用吧
字符集（charset）是多个字符的集合，以便计算机能够识别储存各种文字
用法：在《head》标签里 可用《meta》标签的charset来规定html文档该使用哪种字符编码
charset常用字符：GB2112 、BIG5、 GBK和UIT-8
charset=“UTF-8" 字符也被称为“万国符”，基本包含了全世界所有国家需要用到的字符
注：万国码必须要写，否则会有乱码出现
html常用标签
1.标题标签
《h1》是标题head的缩写，从1、2、3......开始分别是分级标签
一共只有六级标题，每个标题各占一行
2.段落标签
《p》是paragraphs的缩写，段落的文字会根据浏览器的大小自动换行，段落之间留有空隙
《p》的意义是将html文档分成若干个段落
3.换行标签（单标签）
<br>
br是英文break的缩写，作用是打断及换行
4.文本格式化标签
1.加粗
<strong> </strong> 或<b> </b>
两个都可以起到加粗的作用，但更加推荐strong 语义更加强烈
2.倾斜
<em> </em>或<i> </i>
两个起到了倾斜的作用，但是更多的em更加强烈
3.删除线
<del> </del>或者<s> </s>
类似，起到了删除的效果
4.下划线
<ins> </ins>或 <u> </u>
为文字下面加下滑线更加推荐前者
5.盒子标签
<div>
</div>
和<span> </span>
div 是division的缩写，表示分割分区 ，span是表示跨度、跨距
div可以理解为一个大盒子，一行只能放置一个div，一个div独占一行
span 就可以理解为一个小盒子，一行可以放置多个span 都是用来页面布局的标签
6.图像标签
| 属性 | 属性值 | 说明 |
|---|---|---|
| src | 图片路径 | 必须属性 |
| alt | 文本 | 替换文本，不显示图像时显示的文字 |
| title | 文本 | 提示文本，鼠标放在图像上，显示的文字 |
| width | 像素 | 设置图像的宽度 |
| height | 像素 | 设置图像的高度 |
| border | 像素 | 设置图像的边框粗细 |
1.img
<img src=""/>
src是img标签的属性，用于指定图像文件的路径和文件名
所谓属性，就是属于图像标签的特性
2.alt
<img src="" alt=""/>
用来图片不显示时说明的文字
3.title
<img src="" alt="" title=""/>
用来鼠标停留至图片时显示或解释图片的文字框
4.width和height
为图片设置高和宽，单位是px，但是一般只设置其中之一，让系统等比例扩大或缩小
如果都设置可能会出现图片模糊的情况
6.border
边框设置，为图片设置边框。但是一般边框在css中应用较多，所以具体在css中学习
图像标签可以拥有多个属性，必须在标签名的后面
属性之间不分前后顺序，且都用空格分隔开来
注意img后面不要忘记”/“
路径
相对路径
| 相对路径分类 | 符号 | 说明 |
|---|---|---|
| 同一级路径 | 图片文件位于同一级， | |
| 下一级路径 | / | 图片文件位于下一级， |
| 上一级路径 | ../ | 图片文件位于上一级, |
以引用文件为参考，其他文件与引用文件的相对位置分成同一级，上一级，下一级
绝对路径
电脑中的导航页路径称作为绝对路径，但是每个人的电脑不一样，很少应用绝对路径
绝对路径中的斜杠与相对路径的不一样
绝对路径也可以应用某网页中的图片地址
7.超链接标签
外部链接
<a href="目标" target="目标窗口的弹出方式"> </a>
a为单词anchor的缩写，意思为锚
| 属性 | 作用 |
|---|---|
| href | 指定目标的地址为超链接的必须属性，使其拥有超链接功能 |
| target | 指定链接页面的打开方式，其中_self为默认值，_blank为在新窗口的打开方式 |
内部链接
<a href="内部地址"> </a>
和外部链接相同，内部链接跳转到自己的内部的文件
空链接
当没有确定链接目标的时候
<a href="#"> </a>
可以利用#来代替链接地址
下载链接
href之中的地址是一个文件或者压缩包，会下载文件，此链接成为一个下载链接
网页元素的链接
在网页中的各种元素同样可以作为超链接，例如点击图片跳转至某一个网页
<a href="www.baidu.com"><img src="picture.jpg"></a>
此eg是把图片的单标签当作内容输出，效果是点击picture后跳转到了百度首页
锚点链接
快速跳到页面中的某个位置
在要点击跳转的文字时，要设置名字，在href的地方setting a name
eg.
<a href="#a">lalala</a>
<h3 id="a">
balabalabala
</h3>
特殊字符
| 特殊字符 | 描述 | 字符的代码 |
|---|---|---|
| 空格符 |   | |
| < | 小于号 | &It； |
| 大于号 | > | |
8.表格标签
作用：表格是用来展示数据，使数据展示清晰清楚。作用不是布局页面。
基本语法：
<table>//是用来定义表格的标签
<tr>//是用于定义表格中的行，必须放在table标签中
<td>//用来定义表格之中的单元格，嵌套在tr之中
</td>
</tr>
</table>
字母td是指表格数据（table data），即数据单元格的内容
eg
//做一个表格吧
<table>
<tr><td>1</td><td>2</td><td>3</td></tr>
<tr><td>1</td><td>2</td><td>3</td></tr>
<tr><td>1</td><td>2</td><td>3</td></tr>
<tr><td>1</td><td>2</td><td>3</td></tr>
<tr><td>1</td><td>2</td><td>3</td></tr>
</table>
表头单元格标签
<th></th>
经常在表格第一行，与td不同的是会居中加粗显示，显示出表头的重要性
表格属性
开发过程中不适用，常用css来设置
| 属性名 | 属性值 | 描述 |
|---|---|---|
| align | left、center、right | 规定的是表格相对周围元素的对齐方式 |
| border | 1或"" | 规定表格单元是否拥有边框，默认没有边框 |
| cellpadding | 像素值 | 规定的是内容与单元边框之间的空白，默认为1px |
| cellspacing | 像素值 | 规定的是边框与边框之间的距离大小，默认为2px |
| width/height | 像素值或百分比 | 规定的是表格的宽度或高度 |
表格结构标签
<thead>
</thead>
<tbody>
</tbody>
thead:作为表格头部
tbody:作为表格的身体
两者类似head 与 body 作用是使表格的结构更加清晰准确
合并单元格
特殊情况下，可以将多个单元格合并为一个单元格
合并单元格的方式：
1.跨行合并：rowspan=“合并单元格的个数”，将最上层的单元格作为目标单元格
2.跨列合并：colspan="合并单元格的个数"，将左侧的单元格作为目标单元格
步骤：1.确定跨行还是跨列
2.找到目标单元格，写上合并标志和数量
3.删除多余的单元格
<table>
<tr><th>姓名</th><th>年龄</th><th>性别</th></tr>
<tr><td>wb</td><td>19</td><td>男</td></tr>
<tr><td></td><td colspan="2"></td></tr>
</table>
将此表格做成了一个表头，和合并单元格的例子（以下是实践效果图）
9.列表标签
列表是用来布局的，是布局更加方便自由
分为三大类：无序列表、有序列表、自定义列表
无序列表 （重点）
<ul>
<li></li>
<li></li>
<li></li>
</ul>
1.无序列表没有先后顺序之分，同时各个单位都是并列的
2.ul标签之中只能放置li标签及文字
3.li中间可以容纳所有元素，没有要求
有序列表
各个元素之间有顺序关系进行有序排列
<ol>
<li></li>
<li></li>
<li></li>
</ol>
1.ol之中只能放置li
2.li可以容纳任何元素
3.有序有自己的样式，后续利用css来设置
自定义列表
<dl>
<dt>官方</dt>
<dd>是兄弟</dd>
<dd>就来砍我</dd>
<dd>我系渣渣辉</dd>
</dl>
1.dl中只能包含dt和dd
2.dt和dd个数没有显示
10.表单标签
目的：收集用户信息，传输后台
组成：表单域、表单控件（表单元素）、提示信息
表单域：包含表单元素的区域
目的：将范围内的表单信息送至服务器，实现信息的收集和传递
form标签
<form action="url地址" method="提交方式" name="表单域名称">
各种表单元素控件
</form>
| 属性 | 属性值 | 作用 |
|---|---|---|
| action | url地址 | 指定接收并处理表单数据的服务器的url地址 |
| method | grt/post | 设置表单数据的提交方式，取值为get或post |
| name | 名称 | 指定表单的名称，以及分同一个页面中的多个表单域 |
表单域就是form标签
表单标签
input标签用于收集用户信息
在input标签中拥有一个type属性，可以拥有多种的输入形式（文本字框、复选框、掩码后的文本控件、单选按钮、按钮等）。
<input type="属性值"/>
<form>
用户名：<input type="text"/>
密码：<input type="password"/>
....
...
..
.
</form>
该例子就是一个比较基础的表单结构啦，下面是input的类型列表要记住哦
| 属性值 | 描述 |
|---|---|
| button | 定义可点击按钮（常使用js设搭配使用） |
| checkbox | 定义复选框 |
| file | 定义输入字段和”浏览“按钮，供文件上传 |
| hidden | 定义隐藏的输入字段 |
| image | 定义图像形式的提交按钮 |
| password | 定义密码字段，该字段的字符被掩码 |
| radio | 定义单选按钮 |
| reset | 定义重置按钮，清除表单中的所有数据 |
| submit | 定义提交按钮，提交按钮会把表单数据发送到服务器 |
| text | 定义单行的输入字段，用户可在其中输入文本，默认宽度为20字符 |
对于单选和复选按钮点击后不恢复，切记要用同一name值
value是在输入框里选择后显示哪个值
| 属性 | 属性值 | 描述 |
|---|---|---|
| name | 自定义 | 定义input的名称 |
| value | 自定义 | 规定input的值 |
| checkbox | checked | 规定input元素首次加载时应被选中 |
| maxlength | 正整数 | 规定输入字段的最大输入长度 |
label标签
作用：用于绑定一个表单元素，当点击label的文本时会自动转到或选择对应的表单元素上，增加用户的体验
<input type="radio" name="nan"id="男"><label for="男"> 男<label>
<input type="radio" name="nv"id="女"><label for="女"> 女<label>
select表单元素
在页面中节约面积空间，可以使用select标签定义下拉列表
<select>
<option>选项1</option>
<option>选项2</option>
<option>选项3</option>
<option>选项4</option>
<option>选项5</option>
....
...
..
.
</select>
注意：1.”select中至少包含一对option“
2.在option中定义selected="selected"时，设置当前项为默认选中项
textarea表单元素
<textarea>
中间是留言框的默认文字
</textarea>
语法：可以利用col 和 rows 来定义高度及宽度但是html中并不推荐用，一般利用css来修饰
注释语句
<!--ndajndjandna-->
这个是注释语句的基本格式，同时拥有快捷键ctrl+/可以快速注释
注释语句并不会显示在网页之中，作用是帮我们想起和解释某一块的注释
css
把行内元素转化为块级元素
display：block；
可以方便把链接转化，使其拥有块级元素的特点：可以定义宽度和高度并且独占一行
把块级元素转化为行内元素
display：inline；
转化为行内块
display：inline-black；
一个小工具 snipaste
可以测量大小
贴图等等是一个方便的小工具
试试小米侧边栏
文字垂直居中怎么办？？？？？
让文字的行高等于盒子的高度
原理：行高=上空隙+文字本身高度+下空隙
css背景
一般情况下 div 的背景颜色都是透明的 （transprent）
添加背景颜色
background-color：。。。；
添加背景图片
background-image常见于logo的开发及装饰性小图片
优点是方便控制位置
background-image：none | url
| 参数值 | 作用 |
|---|---|
| none | 无背景图 |
| url | 使用绝对或相对地址指定背景图像 |
背景平铺
需要在html页面上对背景图片进行平铺，使用background：repeat；默认情况下都是平铺的
背景图片不平铺使用background：no-repeat；
| 参数值 | 作用 |
|---|---|
| repeat | 背景图像在纵向和横向上平铺 |
| no-repeat | 背景图片不平铺 |
| repeat-x | 背景图像在横向上平铺 |
| repea-y | 背景图片在纵向平铺 |
背景图片位置
利用background-position属性改变图片在背景中的位置
background-position： x y；
参数代表的意思是 x坐标和 y坐标，可以使用方位名词 或者精确单位
| 参数值 | 说明 |
|---|---|
| length | 百分数|由浮点数和单位标识符组成的长度值 |
| position | top|center|bottom|left|right 方位名词 |
如果只指定了一个方位名词，另一个值省略，第二个值默认居中对齐；
旧问题解决✔
如果遇到图片过大是可以设置图片no-repeat
位置为居中可以解决背景图片的问题！！！！！！
1.如果参数是精确坐标，那么第一个肯定是x坐标，第二个肯定是y坐标
2.如果只指定一个数值，那么一定是x坐标，另一个默认垂直居中
3.如果是混合单位 第一个是x坐标 第二个是y
背景图片固定（背景附着）
background -attachment 属性设置背景图片图像是否固定过着随着页面其余部分滚动
background-attachment可以用来制作视差滚动的效果
background-attachment：scroll| fixed
| 参数 | 作用 |
|---|---|
| scroll | 背景图片是随对象内容滚动 |
| fixed | 背景图像固定 |
背景图像默认是滚动的（scroll）
背景复合写法
为了简化代码，可将这些属性合并写在一个background里
当简写时没有特定书写顺序，一般的约定顺序为：background：背景颜色 背景图片地址 背景平铺 背景图像滚动 背景图片位置；
背景色透明
css3中的背景颜色半透明的效果
background：rgba（0，0，0，0.3）;
最后一个是透明度 取值范围：0-1 ；背景半透明不会影响内容
背景总结
| 属性 | 作用 | 值 |
|---|---|---|
| background-color | 背景颜色 | 预定义的颜色/16进制/rgb代码 |
| background-image | 背景图片 | url（图片路径） |
| background- repeat | 是否平铺 | repeat/no-repeat/repeat-x/repeat-y |
| background-position | 背景位置 | length/position |
| background-attachment | 背景附着 | scroll（背景滚动）/fixed（背景固定） |
| 背景简写 | 书写更简单 | 背景颜色 背景图片地址 背景平铺 背景滚动 背景位置 |
| 背景色半透明 | 半透明 | background：rgba（0，0，0，0.3）拥有第四个值 |
css三大特性
1.1层叠性
如果效果重叠，执行同一效果就近原则
1.2继承性
行高的继承性
body{
font:12px/1.5 Microsoft YaHei;
}
子元素没有设置行高会继承父元素行高的1.5倍
最大优势是 子元素可以根据文字大小自动调整行高
1.3 优先级
选择器相同 按照层叠性
选择器不同 按照选择器的权重
| 选择器 | 选择器权重 |
|---|---|
| 继承 或者* | 0，0，0，0 |
| 元素选择器 | 0，0，0，1 |
| 类选择器，伪类选择器 | 0，0，1，0 |
| ID选择器 | 0，1，0，0 |
| 行内样式 style=“” | 1，0，0，0 |
| ！important | ∞无穷大 |
继承的权重为0！！！权重会叠加 但是不会有进位的问题
复合选择器需要计算权重
外边距的典型应用
外边距使块级盒子水平居中，满足两个条件：
1.盒子必须指定宽度 2. 盒子左右的外边距都设置为auto
三种写法：
1.margin-left：auto ；margin-right：auto；
margon：auto；
margin：0 auto；
嵌套块元素垂直外边距的塌陷问题
解决方案：
1.可以为父元素定义上边框
2.可以为父元素定义内边距
3.可以为父元素添加overflow：hidden；
清除内外边距
*{
padding:0; //清除内边距
margin:0; //清除外边距
}
在产品的视图学会一些基本的ps操作
文件->打开：可以打开需要测量的图片
ctrl+R：可以打开标尺或者视图-->标尺
右击标尺，把里面的单位改为像素
Ctrl+加号可以放大视图，Ctrl+减号可以缩小视图
按住空格键，鼠标可以拖动PS视图
用选区拖动可以测量大小
Ctrl+D 可以取消选区，或在空白处点击一下取消选区
无序列表去除圆点
list-style：none
圆角边框
border-radius：length；
设置一个圆只需要数值为高度或宽度的一半即可
简写属性：分别代表左上角右上角右下角左下角
盒子阴影
为盒子添加阴影效果
box-shadow：h-shadou v-shadow blur spread color inset;
| 值 | 描述 |
|---|---|
| h-shadow | 必需 水平阴影的位置 允许负值 |
| v-shadow | 必需 垂直阴影的位置 允许负值 |
| blur | 可选 模糊距离 |
| spread | 可选 阴影的尺寸 |
| color | 可选 阴影的颜色 |
| inset | 可选 将外部阴影改为内部阴影 |
阴影不占用空间
浮动
1.1浮动（float）
多个块级元素纵向排列找标准流，多个块级元素横向排列找浮动
浮动盒子之间没有缝隙，在同一行排列，若排列不下会另起一行
浮动元素会具有行内块元素的特性
一般为了使浮动盒子不随浏览器的宽度而改变会加一父级盒子限制浮动盒子
浮动布局注意点
1.浮动和标准流的父盒子搭配
先用标准的父元素排列上下位置，之后内部子元素采取浮动排列左右位置
2.一个元素浮动了，理论上其余的兄弟元素也要浮动
一个盒子里面有多个子盒子，如果其中一个盒子浮动，那么其他兄弟也应该浮动。浮动的盒子只会影响盒子后面的标准流不会影响前面的标准流。
清除浮动本质
清除浮动元素造成的影响
父盒子有高度时，则不需要清除浮动
清除浮动之后，父盒子根据子盒子自动决定高度
清除浮动
选择器{
clear：值；
}
| 属性值 | 描述 |
|---|---|
| left | 不允许左侧有浮动元素（清除左侧浮动的影响） |
| right | 不允许右侧有浮动元素（清除右侧浮动的影响） |
| both | 同时清除左右两侧浮动的影响 |
平时几乎只用 clear：both 策略是闭合浮动
清除浮动的方法
1.额外标签法
在盒子的最后新建一个盒子利用clear：both关门打狗！！！要求必须是块级元素不能是行内元素
2.父级添加overflow
给父级添加overflow：hidden解决
属性值有hidden、auto、scroll
优点：代码简洁
缺点：无法显示盒子外部分
3.after伪元素法
.clearfix:after{
content:"";
display:block;
height:0;
clear:both;
visibility:hidden;
}
.clearfix{
*zoom:1;
}
4.双为元素清除浮动
.clearfix:before，.clearfix:after{
content:"";
display:table;
}
.clearfix:after{
clear:both;
}
.clearfix{
*zoom:1;
}
优点：代码更简洁
缺点：照顾低版本浏览器
什么是浮动呀？？
float就是创建浮动框，直到左边缘或者右边缘触及包含块或另一个浮动的边缘
语法：
选择器{float：属性值；}
浮动的默认为不浮动none具有left 和 right 两个属性值
浮动的特性
1.浮动元素会脱离标准流（脱标）
2.浮动的元素会一行内显示并且元素顶部对齐
3.浮动的元素会具有行内块的特性
脱标
脱离标准流的位置移动到指定位置
浮动的盒子不再保留之前的位置
2**.浮动元素会沿着上沿对齐直到一行之内装不下元素**
3.浮动元素具有行内块元素的特点
块级元素没有设置宽度的情况下，浮动后的宽度会由内容来决定
浮动的盒子中间没有缝隙，是紧挨着的
浮动元素经常和父级盒子标准流搭配使用
如果不设置标准流父盒子，那么浮动元素会随着浏览器的宽度变化而变化
为了使界面更加整齐美观，要搭配父盒子限制浮动元素
切图
常见的图片格式
jpg格式：JPEG(JPG)对色彩信息保留较好，高清色彩较多产品类土拍你用jpg格式
gif格式：gif格式最多只储存256色，通常用来显示简单图形及字体，常用于图片小动画效果
png格式：新型的网络图形格式，结合后jpg和gif的有带你，适合切成背景透明的图片
psd格式：使photoshop的专用格式，可以存放图层、通道、遮罩等多种格式的设计稿，最大的优点是可以从上面
复制文字，获得图片，测量大小和距离；
切图有三种方式：图层切图、切片切图、ps插件切图等等
图层切图：右键快速导出png
遇到文字和图片不是一图层时：shift选中两者按ctrl+e合并图层然后导出屏图片
切片切图：利用选中工具存储为web格式（选择格式和位置）
利用切片工具手动划出→文件菜单→导出→储存为web设备所用格式即可
想要切出透明的图片只需要把背景闭合后切片切图即可
ps插件切图：Cutterman插件
案例准备工作
1.创建study目录文件夹
2.建立image文件用来储存所有图片（位于study目录下）
3.新建首页文件index.html
4.新建style.css用来作为外链样式表
css属性书写顺序
1.布局定位属性：display/position/float/clear/visibility/overflow
2.自身属性：width/height/margin/padding/border/background
3.文本属性：color/font/text-decoration/text-shadow..
4.其他属性:content/cursor/border-radius/box-shadow
头部制作（nav）
在实际开发中不会直接用a而是利用li+a的做法
导航栏：1.li+a语义更加清晰
2.如果直接用a，搜索引擎易辨别为对齐关键字嫌疑（有网页降权风险）
让导航栏在一行显示应该给li加浮动，因为li是块级元素
定位
定位是让盒子自由在某个盒子移动位置，或固定在屏幕中的某个位置，可以压住其他盒子
定位：定位就是将盒子定在某一位置，定位就是摆放盒子，按照定位的方式移动盒子。
定位=定位模式+边偏移
定位模式指定元素在文档的定位方式、边偏移决定元素的最终位置
定位模式
指定元素在文档的定位方式，利用position设置
| 值 | 语义 |
|---|---|
| static | 静态定位 |
| relative | 相对定位 |
| absolute | 绝对定位 |
| fixed | 固定定位 |
定位模式属性
relative（相对定位）（重要）
相对定位是元素移动位置的时候，相对与自身原来的位置来说的
选择器{position：relative；}
特点：1.移动位置相对与原来位置移动的
2.原来的标准流位置依然保留
绝对定位absolute（重要）
绝对定位是元素在移动的时候，相对与祖先元素来说的
选择器{position：absolute；}
**特点：**1.如果没有祖先元素或祖先元素没有定位，以浏览器为准定位（Docunment）
2.如果祖先元素有定位，以最近一级带有定位的元素为准
3.绝对定位不占有原先位置（脱标）
固定定位fixed（重要）
固定定位是固定于浏览器可视区的位置，在浏览器页面滚动时位置不变
选择器{position：fixed}
固定定位的特点：
1.以浏览器的可视窗口为准移动
2.固定定位不再占有原来的位置（脱标）
固定定位小技巧：固定在版心右侧
算法：1.让固定定位的盒子left：50%，到浏览器版心一半的位置
2.让固定定位的盒子margin-left：版心宽度一半距离，多走版心宽度一半的位置
就可以实现让固定定位的盒子右侧对齐
粘性定位：sticky（了解）
粘性定位可以被认为是相对定位和固定定位的混合
选择器{position：sticky；top：10px；}
特点：1.以浏览器的可视窗口为参照（固定定位特点）
2.粘性定位占有原先的位置（相对定位）
3.必须添加top、left、right、bottom其中一个才有效
跟页面滚动搭配使用，IE不支持（IE 是啥手动滑稽哈哈哈哈哈哈哈）
边偏移
| 边偏移属性 | 示例 | 描述 |
|---|---|---|
| top | top：80px | 顶端偏移量，定义元素相对于其父元素上边线的距离 |
| bottom | bottom：80px | 底部偏移位置，定义元素相对于父元素下边线的距离 |
| left | left：80px | 左侧偏移量，定义元素相对与其父元素左边线的距离 |
| right | right：80px | 右侧偏移量，定义元素相对于其父元素右边线的距离 |
子绝父相
子级是绝对定位的话，父级要用相对定位
1.子级绝对定位，不会占有位置，可以放到父盒子中的任何一个地方
2.父盒子需要加定位限制子盒子只在父盒子中显示
3.父盒子布局时，需要占有位置，所以父盒子相对定位符合条件
**总结：**父级需要占有位置，因此是相对定位，子盒子不需要占有位置，则是绝对定位
定位叠放次序 z-index
在使用定位布局时，可能会出现盒子重叠的情况，可以使用z-index控制盒子的前后顺序（z轴）
选择器{z-index：1；}
数值可以是正整数，负整数或0，默认时auto，数值越大盒子越靠上
如果属性值相同，则按书写顺序，后来居上
数字后面不加单位
盒子的拓展
question1
加了绝对定位的盒子是不能通过margin： 0 auto；水平居中的，那我该怎么办呀？？？
水平居中
1.left走50%
2.margin赋值：eg.margin-left：-100px
垂直居中
1.top走50%
2.margin-top：-100px；
question2
绝对定位和固定定位与浮动相似
1.行内元素添加绝对值或者固定定位，可以设置高度和宽度
2.块级元素添加绝对或者固定定位，如果不设置高度和宽度，默认为内容大小
question3
脱标的盒子不会触发外边距塌陷
question4
浮动元素与绝对定位和固定定位不同会完全压住盒子，浮动元素只会压住标准流的盒子，而不会压住标准流盒子里面的文字和图片
浮动元素的目的是做类似于文字环绕的效果（不忘初心，牢记使命！）
元素的显示和隐藏（重点！！！）
1.display
display：none：隐藏对象 display不仅会隐藏，位置也会消失
display：block：除了转化为块元素还有显示元素的作用
2.visilility可见性
1.visilility：visible：元素可视
2.visilility：hidden：元素隐藏
元素隐藏后继续占有原来的位置，是visilility和display的区别；
3.overflow溢出
默认溢出的元素可以显示
overflow：hidden；将溢出的元素隐藏
overflow：scroll：溢出部分增加滚动条
overflow：auto：在需要时就增加滚动条
一般情况下不会让溢出的部分显示
对于有定位的盒子，谨慎使用overflow：hidden：会将多余的部分切掉
精灵图
为了有效的减少服务器接收和发送请求，提高页面的加载速度，出现了CSS精灵技术
精灵图（sprites）的使用
1.主要针对与背景图片的使用，就是把多个小背景图片整合到一张大图片中
2.大图片被称为 sprites 精灵图 或者 雪碧图
3.移动背景图片，此时可以使用background-position。
4.移动的距离就是这个目标图片的x和y坐标
5.一般情况下是往上往左运动，所以数值是负值（一般情况下是负值）
字体图标的本质是字体展示的是图标
字体图标的产生
主要用于网页中通用的小图标
缺点：1.图片文件较大
2.图片本身放大和缩小会失真
3.一旦制作完成想要更换非常复杂
所以我们引入一个解决问题的方式，就是字体图标iconfont
字体图标的优点
轻量级：图标字体要比一系列的图像要小，减少了服务器的请求
灵活性：本质是文字，可以随意的改变颜色、产生阴影、透明效果、旋转等等
兼容性：几乎支持所有浏览器
BUT，字体图标并不能代替精灵技术的使用，需要根据情况选择，字体图标只是优化的一种方法。
总结：复杂用精灵图、简单用字体图标icofont
字体图标的引入
1.将下载的fonts文件夹放入页面根目录下
2.在CSS样式中全局声明字体：简单理解把这些字体文件通过css引入到我们的页面中
css三角形
web中一些常见的三角形，使用CSS直接画出来，不必加载图片或者字体图标
div{
width:0;
height:0;
line-height: 0;
font-size: 0;
border: 50px solid transparent;
boder-left-color: pink;
}
flex弹性布局
操作方便，可以在移动端写web
初体验
div{
<span></span>
<span></span>
<span></span>
}
flex布局原理（flexible box）
弹性布局，为盒状模型提供最大的灵活性，任何一个容器都可以指定为flex布局
当设定盒子为flex以后，传统布局的子元素float、clear、vertical-align属性都将失效
采用为flex 的元素统称为容器（flex container）
通过为父盒子添加flex属性，控制子盒子的排列属性
常见的父项属性
1.flex-direction：设置主轴的方向
2.justify-content：设置主轴上的子元素排列方式
3.flex-wrap：设置子元素是否换行
4.align-content：设置侧轴上的子元素排列方式（多行）
5.align-items：设置侧轴上的子元素排列方式（单行）
6.flex-flow：复合属性，相当于同时设置了flex-direction和flex-wrap
设置主轴的方向
在flex中，是分为主轴和侧轴两个方向
默认主轴从左往右，侧轴从上往下
flex-direction设置主轴方向
flex设置的是主轴方向，剩下的一个就是侧轴
| 属性值 | 说明 |
|---|---|
| row | 默认值从左往右 |
| row-reverse | 从右往左 |
| column | 从上到下 |
| column-reverse | 从下到上 |
justify-content设置主轴上的子元素排列方式
| 属性值 | 说明 |
|---|---|
| flex-start | 默认值是头部开始，如果主轴是x，则从左往右 |
| flex-end | 从尾部开始排列 |
| center | 在主轴居中对齐 |
| space-around | 平分剩余空间 |
| space-between | 先两边再贴边，平分剩余空间 |
align-items设置侧轴上子元素的排列方式（单行）
| 属性值 | 说明 |
|---|---|
| flex-start | 从上到下 |
| flex-end | 从下到上 |
| center | 垂直居中 |
| stretch | 拉伸（默认值） |
align-content 设置侧轴上的子元素的排列方式（多行）
| 属性值 | 说明 |
|---|---|
| flex-start | 默认在侧轴头部开始排列 |
| flex-end | 在侧轴的尾部开始排列 |
| center | 在侧轴中间显示 |
| space-around | 子项在侧轴平分剩余空间 |
| space-between | 子项在侧轴先分布在两头，再平分剩余空间 |
| stretch | 设置子项元素高度平分父元素高度 |
flex-flow
flex-flow属性是flex-direction和flex-wrap属性的复合属性
flex-flow：row wrap；
align-self 控制子项自己在侧轴上的排列方式
允许单个项目与其他项目不一样的对齐方式，可覆盖align-items属性，默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch
order属性定义项目的排列顺序
数值越小，排列越靠前，默认值为0
和z-index不一样
