01-初始HTML CSS
1.web的第一门编程语言：JavaScript
html是一种标记语言（超文本标记语言）
2.html、css、js的关系:
网页三要素：
html:网页框架构建 结构
css：样式调整 表现
js：响应操作（事件动态） 行为
3.html5结构：
生成文档结构的快捷键! html5 html:5
html5标准网页声明(文档声明)
<!DOCTYPE html>
html根标签，一个页面中有且只有一个根标签
属性lang是单词language的缩写，意思是语言，”en”代表英语，”zh-CN”代表中文
<html lang="en">
只有两个子标签 head:浏览器设置 body：可视区展示
head帮助浏览器解析页面
<head>
字符编码，浏览器会根据字符编码进行解析
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
body标签用来设置网页的主体内容
<body>
</body>
</html>
4.属性：
id：唯一标识（id名不可重复）
class：标识一类元素（类名可重复）
5.实体
空格
< <
> >
6.块级、行内元素
块级元素：
html body div p h1~h6 ul-li(无序列表) ol-li(有序列表) dl->dd/dt
特点：
* 独占一行空间
* 默认宽度为100%，如果有父元素的话宽度100%相对父元素而言，否则相对浏览器视图区而言
* 高度由子元素或内容决定
* 可以通过css指定其宽度，块级可以直接设置宽高
* 块级可以包含块级、行内
行内元素：
span img a strong b i em sub sup...
a：链接外部或内部网址
href="相对路径/绝对路径"
相对路径：./(当前文件夹) ../(上一级文件)
绝对路径：http://ip:端口号、项目、文件名(https)
应用：锚点 定义锚点、连接锚点
1.<div id="center"><div/>
2.<a href="#center">返回顶部<a/>
target：定义加载后页面加载的位置 默认取值_self(当前窗口打开超链接) _blank(新窗口打开超链接)
img:放图片
src：放图片
weight：宽度
height：高度
alt：图片加载不出来或有问题时的文字替换
title：鼠标悬停时的文字提示
特点：
* 与其他行内元素共享一行空间
* 宽高由自身决定
* 由于不用来搭建网页结构，所以也无需通过css指定其宽度
* 行内元素中不可以嵌套块元素
7.块级、行内的区别 面试题80%
1.经典：块级元素独占一行 行内元素与其他行内元素共享一行
2.宽高：块级可直接设置宽高 行内元素不可直接设置宽高需要通过display改变属性来设置
img、input 特殊的行内元素 置换函数
- 块级可包含行内、块级 行内不可包含块级
02-功能元素
1.列表元素
无序列表 ul-li
给一堆数据添加列表语义, 并且这一堆数据中所有的数据都没有先后之分
<ul>
<li>要展示的数据<li/>
<ul/>
<ul type="value"></ul>
type取值：
disc 默认值 实心圆
circle 空心圆
square 实心方块
有序列表 ol-li
有序列表的作用: 给一堆数据添加列表语义, 并且这一堆数据中所有的数据都有先后之分
<ol type="A"></ol>
type
1 默认值。数字有序列表。（1、2、3、4）
a 按字母顺序排列的有序列表，小写。（a、b、c、d）
A 按字母顺序排列的有序列表，大写。（A、B、C、D）
i 罗马字母，小写。（i, ii, iii, iv）
I 罗马字母，大写。（I, II, III, IV）
定义列表 dl-dt/dd
给一堆数据添加列表语义，先通过dt标签定义列表中的所有标题, 然后再通过dd标签给每个标题添加描述信息
<dl>
<dt></dt>
<dd></dd>
<dt></dt>
<dd></dd>
</dl>
2.表格标签
table 一个表格
tr 表格的一行
td 一行中的一个单元格
<table>
<tr>
<td>姓名</td>
<td>年龄</td>
<td>身高</td>
</tr>
</table>
注意：
border边框属性:用在table标签上 属性之间用;隔开 属性属性值用等号（=）
table/tr/td要一起出现
宽高：
表格的宽度和高度：table的width、height 默认是通过内容的尺寸来调整的
单元格的宽高：td的width、height
表格内单元格的水平垂直对齐：
水平 align table、tr、td
table：整个表格水平对齐
tr：当前行中所有单元格内容水平对齐
td：当前单元格水平对齐
垂直 valign tr、td
tr：前行中所有单元格内容垂直对齐
td：当前单元格垂直对齐
表格的内边距与外边距属性：
cellspacing外边距：单元格和单元格之间的距离 默认外边距的距离是2px
cellpadding内边距：单元格的边框和文字之间的间隙 默认情况下内边距是1px
单元格合并
colspan 水平方向（合并列）
rowspan 垂直方向（合并行）
3.form表单
<form action="提交的服务器接口地址">
<表单元素>
</form>
基本表单元素：
明文输入框
<input type="text" name="account" placeholder="请输入用户名">
暗文输入框
<input type="password" name="password" placeholder="请输入密码">
name:表单提交时，会作为参数的名称，结合输入的值进行匹配，组成参数名(name)=参数值的(输入的值)结构
输入框设置默认值
<input type="xxx" value="xxx">
单选框
<input type="radio" name="xx" value="xxx">
单选框互斥：name设置一样的值
<input type="radio" name="gender" id="" value="male" checked>男
<input type="radio" name="gender" id="" value="female">女
多选框
<input type="checkbox" name="xxx" value="xxx">
单选框、多选框默认选中 checked
多选框、单选按钮传递给接口的值是value的值
提交按钮
<input type="submit">
将表单中已经填写好的数据, 提交到远程服务器
普通按钮
<input type="button" value="xxx">
可以通过value属性来给按钮指定标题
作用: 配合JS完成一些操作
图片按钮
<input type="image" src="">
作用: 配合JS完成一些操作
重置按钮
<input type="reset" value="xx">
作用: 用于清空表单中已经填写好的数据
注意点:
如果想想改重置按钮默认的按钮标题可以通过value属性来修改
隐藏域
<input type="hidden" name="xx" value="xxx">
隐藏域
作用 : 配合提交按钮将一些数据默默的悄悄的提交到服务器
H5新增元素
datalist标签
<input type="text" list="xxx">
<datalist id="xxx">
<option>待选项内容</option>
</datalist>
datalist的id对应的值赋值给list属性即可 input的list属性值=datalist的id属性值
进度条
progress <progress value="70" max="100">70%</progress>
progress表示任务的完成情况，常用于进度条
max 定义进度元素所要求的任务的工作量，默认值为1
value 定义已经完成的工作量，如果max值为1，该值必须是介于0~1之间的小数。
4.HTTP协议
HTTP是一种能够获取如 HTML 这样的网络资源的 protocol(通讯协议)。它是在 Web 上进行数据交换的基础，
是一种 client-server 协议，也就是说，请求通常是由像浏览器这样的接受方发起的。
HTTP报文：1请求报文 客户端向服务端发送请求的信号
由请求行、请求头、空行和请求体组成
请求行 GET /index.php HTTP/1.1 GET是请求方法，/index.php是URL，HTTP/1.1表示使用的HTTP版本为1.1
常用请求方式:
get 传输数据量小 传输数据携带在URL后面 没有请求体 没有数据保密性 例如，/index.php?id=100&slec=yes
post 传输数据量大 参数携带在请求体里 数据保密性强 swagger-login/regi
请求头：告知服务器所有有关于**客户端请求的信息**
Host：请求的主机名
cookie:把用户的喜好在电脑本地创建了一个记录（小型存储空间），当下次用户再浏览相同网页时，
会在电脑本地拿到cookie，进行喜好筛选推荐。
存储于客户端扩展字段，向同一域名的服务端发送属于该域的cookie
空行：请求头、请求体内容分割
请求体：请求体包含的就是请求数据（get请求数据在url后直接显示，所以没有请求体）
2响应报文 服务端响应处理后回传给客户端的信号
状态行、消息报头、空行和响应正文
状态行：状态代码由三位数字组成，第一个数字定义了响应的类别
告诉前端请求是否正确 若错误通过状态码分析错误原因调整bug
200 成功
4xx 前端请求错误 url（404）、请求数据格式错误、语法错误(400)
5xx 后端错误
响应头：服务器响应信息
Content-Type：返回的资源类型 (MIME)；
Connection：连接方式；
close：连接已经关闭；
keep-alive：连接已保持，在等待本次连接的后续请求；
空行：响应头、响应体内容分割
响应体：返回给前端的数据
03-CSS简介与选择器
1.CSS3
css层叠样式表修饰文档（html）
2.语法
3.CSS的引入方式
（1）内联样式（行内样式）
把css代码直接写在HTML标签中
多条样式代码用分号隔开
<div style="color:red;font-size:14px">
设置字体颜色为红色，并且字体大小为14px
</div>
（2）内部样式表
编写到head中
<style type="text/css">
p{
color:red;
background-color:yellow;
}
</style>
（3）外部样式表
通过link标签将外部文件引入
<link rel="stylesheet" type="text/css" href="文件的路径"/>
@import url()
<style>
/*要写在style标签的最前面，否则不会生效 或者直接在外部css文件中直接使用*/
@import url('./style.css');
</style>
引入方式的优先级
行内样式>内部样式/外部引入
就近原则：近的优先级高
4.CSS选择器
（1）标签选择器
找到当前界面所有对应名称标签并设置属性
格式: 标签名称{ 属性:值; }
（2）id选择器
id名称找到对应标签，设置属性
#id名称{ 属性:值; }
注意点：
1.每个标签都可以设置id
2.id名称不可重复
3.id名称的规范：子母、数字、下划线 不能以数字开头 不能是HTML标签名称
4.id一般是留给js用的
5.一个标签只能绑定一个id名称
（3）类选择器
类名称找到对应标签，设置属性
格式: .类名{ 属性:值; }
注意：
1.每个标签都可以设置类名
2.class名称可以重复
3.专门用来给CSS设置样式的
4.可以同时绑定多个类名：<标签名称 class="类名1 类名2 ...">
<p class="box1 box2">
5.一个标签可以绑定多个class名称
（4）后代选择器 找到所有特定的标签
找到指定标签的所有特定后代标签
例如：div p{}
注意：
1.不仅只会找到儿子还会找到孙子重孙子。后代：儿子、孙子、重孙子......
2.后代选择器可以通过空格一直延续下去
（5）子元素选择器 找到所有特定儿子标签
指定标签所有特定的直接子元素
格式: 标签名称1>标签名称2{ 属性:值; }
注意：
1.只会找到儿子
2.可以通过>符号一直延续下去
（6）交集选择器
作用: 给所有选择器选中的标签中, 相交的那部分标签设置属性 格式: 选择器1选择器2{ 属性: 值; }
（7）并集选择器
作用: 给所有选择器选中的标签设置属性
格式: 选择器1,选择器2{ 属性:值; }
（8）兄弟选择器
1.相邻兄弟选择器 选择目标元素的下一个元素
格式: 选择器1+选择器2{ 属性:值; }
.div1+div{
color: aquamarine;
}
2.通用兄弟选择器 CSS3 目标元素后的的全部选择的标签
格式: 选择器1~选择器2{ 属性:值; }
.div1~div{
color: brown;
}
（9）伪类选择器
伪类以":"开头，用在选择器后，用于指明元素在某种特殊的状态下才能被选中
1.序选择器（结构伪类选择器）
（1）同级别中的第几个 :first-child 选中同级别中的第一个标签 :last-child 选中同级别中的最后一个标签 :nth-child(n) 选中同级别中的第n个标签 :nth-child(odd) 选中同级别中的所有奇数 :nth-child(even) 选中同级别中的所有偶数 :nth-child(xn+y) x和y是用户自定义的, 而n是一个计数器, 从0开始递增
例如(3n+1)分别对应1,4,7..... :nth-last-child(n) 选中同级别中的倒数第n个标签 :only-child 选中父元素仅有的一个子元素E。仅有一个子元素时生效 注意点: 不区分类型
（2）同级别同类型中的第几个 :first-of-type 选中同级别中同类型的第一个标签 :last-of-type 选中同级别中同类型的最后一个标签 :nth-of-type(n) 选中同级别中同类型的第n个标签 :nth-last-of-type(n) 选中同级别中同类型的倒数第n个标签 :only-of-type 选中父元素的特定类型的唯一子元素
2.动态伪类选择器
1.链接伪类选择器
E:link 超链接并未被访问过
E:visited 超链接并已被访问
2.用户行为选择器
E:active 元素被激活 用于链接描点和按钮上
E:hover 修改鼠标悬停在标签上状态下的样式
3.a标签的伪类选择器
格式 :link 修改从未被访问过状态下的样式 :visited 修改被访问过的状态下的样式 :hover 修改鼠标悬停在a标签上状态下的样式 :active 修改鼠标长按状态下的样式
注意： a标签的伪类选择器如果一起出现, 那么有严格的顺序要求 默认状态:link->被访问状态:visited->鼠标悬停状态:hover->鼠标长按状态:active
4.否定伪类
作用：可以从已选中的元素中剔除出某些元素 语法： :not(选择器) 例如: p:not(.hello){ background-color: yellow; }
（10）伪元素选择器
表示元素中的一些特殊的位置
::after 表示元素的最后边的部分 一般需要结合content这个样式一起使用， 通过content可以向after的位置添加一些内容 ::before 表示元素最前边的部分 一般需要结合content这个样式一起使用， 通过content可以向before的位置添加一些内容 ::first-letter 为第一个字符来设置一个样式 ::first-line 为第一行设置一个样式
(11)属性选择器
作用: 根据指定的属性名称找到对应的标签, 然后设置属性 格式: [attribute]
[attribute=value] 作用: 找到有指定属性, 并且属性的取值等于value的标签, 然后设置属性 最常见的应用场景, 就是用于区分input属性
input[type=password]{}
<input type="text" name="" id="">
<input type="password" name="" id="">
-属性的取值是以什么开头的 [attribute|=value] CSS2 [attribute^=value] CSS3 两者之间的区别: CSS2中的只能找到value开头,并且value是被-和其它内容隔开的 CSS3中的只要是以value开头的都可以找到, 无论有没有被-隔开
input[name^=user]{
color: lightcoral;
}
<input type="text" name="username" id="">
<input type="text" name="x-username" id="">
-属性的取值是以什么结尾的 [attribute$=value] CSS3
-属性的取值是否包含某个特定的值得 [attribute~=value] CSS2 [attribute*=value] CSS3 两者之间的区别: CSS2中的只能找到独立的单词, 也就是包含value,并且value是被空格隔开的 CSS3中的只要包含value就可以找到
（12）通配符选择器
作用: 给当前界面上所有的标签设置属性 格式: *{ 属性:值; }
（13）组合选择器
多个选择器组合使用。例如 "div.one" 表示class为one的div元素
04-字体及文本样式
1.文本装饰的属性
text-decoration: underline;
underline 下划线
line-through 删除线
overline 上划线
none 什么都没有, 最常见的用途就是用于去掉超链接的下划线
2.文本缩进的属性
text-indent: 2em;
em:宽度，一个em代表缩进一个文字的宽度
3.设置或者取消字体改变
text-transform：允许字体改变，文本变形
none 防止任何改变
uppercase 将文本转换为大写
lowercase 将文本转换为小写
capitalize 将所有单词第一个字母转换为大写
full-width 转换为类似于一个等宽字体
4.字体阴影
格式: text-shadow: h-shadow v-shadow blur color;
取值:
none:取消所有阴影
h-shadow :必需。水平阴影的位置。允许负值。
v-shadow :必需。垂直阴影的位置。允许负值。
blur:可选。模糊的距离。
color:可选。阴影的颜色。
5.其他样式
line-height
设置文本的行高 取值为绝对单位或者相对单位
display
显示方式的切换
inline 行内显示，宽高无效
block 块级显示，宽高有效
inline-block 为了能够让元素既能够不独占一行, 又可以设置宽度和高度,
那么就出现了行内块级元素，行内显示同时宽高有效
none 不显示，不占据屏幕空间
flex 伸缩盒布局
visibility
显示与隐藏
hidden 隐藏，占据屏幕空间
visible 显示
opacity
透明度，0-1之间的取值，取值为0的时候隐藏，占据屏幕空间
overflow 溢出处理
hidden 超出内容隐藏
auto 超出产生滚动条
scroll 滚动条
cursor
指定光标的样式
05-CSS盒模型
1.外边距合并问题
父子级：给父元素添加边框
给父元素清除浮动 overflow：hidden
给父子元素一方设置display：inline-block
兄弟级：设置margin设置到一个元素上
2.盒模型
W3C（默认盒子，内容盒子） box-sizing：content-box
内容区的宽：width
内容区的高：height
盒子的宽、高：height/width+padding+border
所占屏幕空间：height/width+padding+border+margin
IE盒子模型
盒子的宽：width
盒子的高：height
内容区的宽/高：width/height=padding+border
所占屏幕空间：height/width=padding+border+margin
3.嵌套元素水平垂直居中：
水平垂直居中
1.通过外边距调整，根据父子元素的宽高来计算外边距的值。
2.定位/定位+浮动
水平方向居中 margin：0 auto
4.布局
搭建网页结构，自上而下，由外向内，顺序
5.清除浮动
给父元素设置overfloat:hidden
给末尾添加一个空白的块元素如何对其清除
.clearfix::after{
/*添加一个内容*/
content: "";
/*转换为一个块元素*/
display: block;
/*清除两侧的浮动*/
clear: both;
}
6.块级元素父子级给子集设置浮动为什么父元素会受到影响
块级元素：宽默认100% 高由内容撑起
子元素设置浮动会脱离文档流，与父元素的普通流就不在同一个文档中了，父元素没有内容了会受到影响。
7.布局原则
框架搭建：自上而下
06-CSS布局-浮动布局
1.标准流（文档流/普通流）排版方式
标准流：在网页的最底层，我们所创建的元素都默认处在标准流中。
元素在标准流的特点：
1.块级元素：
* 独占一行，自上向下排列
* 默认宽度是父元素的100%
* 高度默认被内容撑开
2.内联元素
* 只占自身的大小，会默认从左向右排列，如果一行中不足以
容纳所有的内联元素，则换到下一行，继续自左向右。
* 宽度和高度默认都被内容撑开
CSS中元素分为三类：块级元素/行内元素/行内块级元素
标准流排版方式
1.垂直排版：块级元素垂直排版
2.水平排版：行内元素/行内块级元素水平排版
块级元素水平排列：
方法：使用float浮动
none，默认值，元素默认在标准流(文档流/普通流)中排列
left，元素会立即脱离标准流(文档流/普通流)，向页面的左侧浮动
right，元素会立即脱离标准流(文档流/普通流)，向页面的右侧浮动
使用float注意：
1.一个元素设置浮动后（float属性时一个非none值），元素会立即脱离文档流，它下面的
元素会立即向上移动，这时前一个元素会盖住后面一个元素。
2.元素浮动以后，会尽量向页面的左上或者是右上漂浮，直到遇到父元素的边框或者其他的浮动元素
3.**如果浮动元素上边是一个没有浮动的块元素，则浮动元素不会超过块元素。**
4.浮动的元素不会超过他上边的兄弟元素，最多最多一边齐。
2.浮动流
（1）浮动流是一种"半脱离标准流"的排版方式
（2）浮动流只有一种排版方式, 就是**水平排版**. 它只能设置某个元素左对齐或者右对齐
浮动元素自围现象
浮动元素不会挡住没有浮动元素中的文字, 没有浮动的文字会自动给浮动的元素让位置
注意点：
（1）浮动流中没有居中对齐, 也就是没有center这个取值
（2）在浮动流中是不可以使用margin: 0 auto;
特点：
(1)在浮动流中是不区分块级元素/行内元素/行内块级元素的
无论是块级元素/行内元素/行内块级元素**都可以水平排版**
(2)在浮动流中无论是块级元素/行内元素/行内块级元素**都可以设置宽高**
(3)综上所述, 浮动流中的元素和标准流中的行内块级元素很像
高度塌陷（子脱离文档流，父无内容撑开，导致父无高度、下面的元素也会向上移动）
在文档流中，父元素的高度默认是被子元素撑开的，也就是子元素多高，父元素就多高。
但是当为子元素设置浮动以后，子元素会完全脱离文档流，此时将会导致子元素无法撑起父元素的高度，导致父元素的高度塌陷。
由于父元素的高度塌陷了，则父元素下的所有元素都会向上移动，这样将会导致页面布局混乱。
解决方法：
（1）将父元素高度写死，但是父元素的高度将不能自动适应子元素的高度（不推荐使用）
(2)给父级元素设置一个overflow:hiddden 解决了第一种方法的弊端
（3）在父元素的最后面添加一个空白的div，由于这个div并没有浮动，所以他是可以撑开父元素的高度的，
然后在对其进行清除浮动，这样可以通过这个空白的div来撑开父元素的高度，基本没有副作用。
但是会在页面中添加多余的结构。
清除浮动的属性为clear：
none: 默认取值, 按照浮动元素的排序规则来排序(左浮动找左浮动, 右浮动找右浮动)
left: 不要找前面的左浮动元素
right: 不要找前面的右浮动元素
both: 不要找前面的左浮动元素和右浮动元素
（4）通过after伪类
可以通过after伪类向元素的最后添加一个空白的块元素，然后对其清除浮动，这样做和添加一个
div的原理一样，可以达到一个相同的效果，而且不会在页面中添加多余的div，这是我们最推荐使用的方式，几乎没有副作用。
.clearfix::after{
/*添加一个内容*/
content: "";
/*转换为一个块元素*/
display: block;
/*清除两侧的浮动*/
clear: both;
}
（5）BFC：解决浮动元素令父元素高度坍塌的问题
方法：给父元素开启BFC
原理：计算BFC的高度时，浮动子元素也参与计算
MDN的定义：
块格式化上下文（Block Formatting Context，BFC） 是Web页面的可视化CSS渲染的一部分，是块盒子的布局过程发生的区域，也是浮动元素与其他元素交互的区域。
BFC(block formatting context)块级格式化上下文，它是页面中的一块渲染区域，并且有一套属于自己的渲染规则，它决定了元素如何对齐内容进行布局，以及与其
他元素的关系和相互作用。 当涉及到可视化布局的时候，BFC提供了一个环境，HTML元素在这个环境中按照一定规则进行布局
简短的总结：**BFC是一个独立的布局环境，BFC内部的元素布局与外部互不影响**
BFC的布局规则
1. 内部的Box会在垂直方向一个接着一个地放置。
2. Box垂直方向上的距离由margin决定。属于同一个BFC的两个相邻的Box的margin会发生重叠。
3. 每个盒子的左外边框紧挨着包含块的左边框，即使浮动元素也是如此。
4. BFC的区域不会与float box重叠。
5. BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素，反之亦然。
6. 计算BFC的高度时，浮动子元素也参与计算。
哪些元素会生成BFC
1.根元素
2.float属性不为none
3.position 为absolute或fixed
4.display为inline-block table-cell table-caption flex inline-flex
5.overflow不为visible
BFC的作用
- 解决浮动元素令父元素高度坍塌的问题
方法：给父元素开启BFC
原理：计算BFC的高度时，浮动子元素也参与计算
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
/* 父元素 */
.div1 {
width: 1000px;
border: 10px solid red;
/* BFC */
overflow: hidden;
}
/* 子元素 */
.div2 {
width: 200px;
height: 400px;
background-color: blue;
float: left;
}
</style>
</head>
<body>
<div class="div1">
<div class="div2"></div>
</div>
</body>
</html>
```
- 两栏自适应布局
方法：给固定栏设置固定宽度，给不固定栏开启BFC。
原理：BFC的区域不会与float box重叠
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.left {
float: left;
width: 300px;
background-color: blue;
}
.right {
/*
overflow:auto;(隐藏溢出的内容)利用BFC
*/
overflow: auto;
background-color: red;
}
</style>
</head>
<body>
<div class="left">左边定宽</div>
<div class="right">
右边自适应右边自适应右边自适应右边自适应右边自适应右边自适应右边自适应右边自适应右边自适应右边自适应右边自适应右边自适应右边自适应右边自适应右边自适应右边自适应右边自适应右边自适应右边自适应右边自适应右边自适应右边自适应右边自适应右边自适应右边自适应右边自适应右边自适应右边自适应右边自适应右边自适应右边自适应右边自适应右边自适应右边自适应右边自适应
</div>
</body>
</html>
```
三列布局：两边定宽，中间自适应
```html
*{
margin: 0;
padding: 0;
}
.left,.right {
width: 200px;
height: 200px;
background-color: #999;
}
.left {
float: left;
}
.right {
float: right;
}
.center {
/* 中间模块空出左右距离，设置浮动 */
margin: 0 200px;
height: 300px;
background-color: #f00;
}
<div class="left">left</div>
<div class="right">right</div>
<div class="center">center</div>
```
兄弟级 给受影响的元素设置clear属性。
07-定位布局
08-Flex布局
09-transition
- Animation
1.面试题
两列，实现左边定宽，右边自适应
三列，实现左右定宽中间自适应 -----阿里
2.块级元素父子级，给子级设置浮动，为什么父级会受到影响？
块级元素：宽默认100%，高由本身及子元素内容撑起
子元素设置浮动，脱离文档流，父元素高度无法被撑起
【注意】 浮动流中不区分行内、块级、行内块级元素，都可以实现水平排列
普通流/文档流中区分行内、块级
3.布局原则：
1.框架搭建：自上而下，由外向内
2.通配符选择器重置全局样式：
*{
margin:0,
padding:0
}
3.由外向内布局，每一块元素依然遵循自上而下，由外至内的原则
4.清除浮动
父子级：
1.在子级元素后添加一个空元素，为其添加clear:both 弊端：增加了无意义的元素结构
2.给父级元素设置一个overflow:hiddden 解决了第一种方法的弊端
3.::after 为需要清除浮动元素的伪对象中设置height:0，
#layout:after{
clear:both;
content:”";
visibility:hidden;
height:0;}
（用伪类清除浮动时用after，并且加上content：""可以加内容也可以不加，但是一定要加上display： block；同时还要写clear：both；）
【最推荐使用第二种】
兄弟级：
给当前元素（被浮动影响的元素）设置css属性clear,值可为left、right，both。作用分别为清除左浮动元素带来的影响，清除右浮动元素带来的影响，清除左右两侧浮动元素带来的影响。
5.老生常谈，块级行内区别：
块独占一行，行内与其他元素共享一行
块可以包含行内和块，行内只能包含行内
块可以设置宽高，行内不可以，但可以通过CSS的display属性改变。
6.水平垂直居中问题：
1.margin移动
2.父相对定位+子绝对定位，绝对定位top、left为50%，其余使用margin-left和margin-top移动
3.父相对+子绝对，且left、top、bottom、right为0，margin：auto
4.给父元素设置display:flex，且align-items:center;justify-content:center;
881
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
