1，什么是盒子模型？
一个标签就是一个盒子，可以通过6大属性来设置这个盒子。
有margin，border,padding，widht，height，backgroum。
2，标签的分类，各自的特点？
块级标签: div h1 p li form table ---> 6大属性都起作用
行内标签: a span em storng -->width和height不起作用margin和padding在垂直方向上不起作用
行内块： img input --> 除了并排显示，其它和块级标签的一样
3，如何计算盒子模型在网页上占据的大小？ 这种盒子模型有什么不好的地方？
在网页上占据的宽度：左右的margin+左右的border+左右的padding+width
在网页上占据的高度：上下的margin+上下的border+上下的padding+height
如果一个div没有设置widht，它占父元素的100%。假如我的父元素是960px。div也占960px。div的这个960是指div的内容宽度还是指它在页面上占据的空间？
960px = 左右的margin+左右的border+左右的padding+width
这里面的div占960是指div所占用的空间。那如果我把这个div又加了一个10px的边框。
那么这个div的内容宽度width = 960-20px = 940px
如果一个块级盒子没有设置宽度，它的宽度是父元素的100%，这里的100%是指这个盒子所占页面宽度。
如果又增加了这个盒子的margin,padding,border，那么这个盒子的内容宽度一定会减小，如果margin,padding,border
不断地增加，盒子的内容宽度不断地被压缩，如果压缩到了极限，浏览器会强迫你元素的宽度增加。
所以默认情况下的盒子模型也有不足之处。
4，知道什么是margin的重叠吗？ 说一下
重叠前提：块级 垂直
兄弟元素之间的重叠：
上盒子的margin-bootom和下盒子的margin-top 会重叠 ---> 取大优先
解决： 块级-->非块级 浮动 设置一方盒子margin，不要两个都设置
父子（第1个子或最后1个子）元素之间的重叠：
父的margin-top 和 子的margin-top ---> 取大优先
父的margin-bottom 和 子的margin-bottom ---> 取大优先
解决： 块级-->非块级 border padding
5，如何实现一个小三角？
border:5px solid tranparent;
border-top:5px solid red;
6，常见的布局方案有哪些？
流动布局：遵循标准文档流（国家）
块级 行内
浮动布局：出国 如果一个元素浮动了，那么这个元素内部还是遵循标准文档流（国家）
float:left/right
层布局（定位）：
flex布局：
浮动：
默认的流式布局有不足。 浮动的目的就是为了让男标签可以并排显示。
格式：
float: left / right / none none默认的不浮动
特点：
0，浮动初衷是为了实现字围（如新闻），后面才发现，浮动可以让多个块级标签并排显示。
1，在一个父元素内部，如果一个元素浮动了，那么它就脱离了标准文档流，后面的元素就让向上排
2，浮动并没有完全地脱离了标准文档流，如果后面的元素内部有文字，这些文字会环绕在浮动元素的周伟，产生字围。
3，如果多个元素浮动了，那么这们就会并排显示，如果都是同一个方向的浮动，它们会紧紧地贴在一起。
4，如果一个元素浮动了，先向上移动，直到贴靠到父元素的边界，接着，如果是左浮动，就向左移动，直到移动到父元素的左边界，如果是向右浮动，就向右移动，直接移动到父元素的右边界。
5，如果一个元素没有设置高度，它的高度是靠里面的内容撑起来的。如果父元素内部元素都浮动了，那么会造成父元素的高度塌陷。
6，如果元素浮动了，那么它会造成影响：造成父元素高度塌陷。解决:显示加高度（加高法） 小偏方（overflow:hidden）
7，如果元素浮动了，它也会造成对后面的兄弟元素影响。解决：clear:both/left/right
8，应用：实现左右布局 小导航 多个规则盒子水平排列（行内块）
9，当一个浮动起来的男盒子，没有设置width，那么这个盒子的宽高会尽可能小，小到包裹住它里面的内容，这叫包裹性，
10，如果一个元素浮动了，它会悄悄地做一个变性手术。如果一个行内盒子浮动了，那么就可以设置宽高了，相当于把它变成块级标签。
11，如果父元素也浮动了，那么就不会出现高度塌陷了。
12，如果有左浮动，又有右浮动，那么你需要把右浮动的元素写在左左浮动的前面
13，写三个盒子，利用27种情况去讨论最后的显示。
14，浮动元素会从标准文档流中半脱离出来。证明：字围
15，一个元素浮动了，那么它也是受父元素的控制。当父元素宽度变小时，装不下所有的子元素时，后面的子元素有贴靠性。当父元素小到极限时，里面的浮动的子元素宽度是不会改变的。
元素浮动会造成影响（清除浮动）：
1，对父元素造成的影响
父元素高度塌陷
解决：显示加高度（加高法） 小偏方（overflow:hidden） clear:both
加高法：简单 基本不用 大部分情况情况下，父元素的高度是需要子元素撑起来
overflow:hidden : 简单 使用了overflow:hidden 父元素的高度会随着子元素的高度变化而变化 overflow:hidden本职工作是用来处理溢出 在使用过程中，需要注意子元素如果想要超出父元素高度，此时overflow:hidden就不适合了。
clear:both 在所有子元素后面加一个空的div 在这个div上面加clear:both ---> 内qiang法
优点：clear:both专业清除浮动的 缺点：多写一个代码
2，对后面兄弟元素造成的影响
兄弟元素会向上移动
解决：在受影响的元素上面的加 clear:both,
3，项目中最常用清除浮动的方法： 利用伪元素 after
说白了，就是写一个清除浮动的类，如下：
.clear:after{content=""; display:block; clear:both; height:0; overflow:hidden;}
flex ----> 干掉了float
四大概念：
容器，项目，主轴，交叉轴
容器：如果在一个盒子上面，设置display:flex，那么这个盒子就是一个容器
项目：容器的直接子元素，叫项目
主轴：在容器中，项目默认是按主轴方向排列，默认是从左向右排列
交叉轴：与主轴垂直的那个轴
容器相关的属性：
flex-direction：改变主轴方向 row column row-reverse column-reverse
flex-wrap:项目足够多的时候，是否换行 wrap nowrap
* flex-flow:flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap
justify-content:处理富余空间 flex-start flex-end center space-between space-around
align-items: 定义项目在交叉轴上如何对齐 flex-start flex-end center
align-content : 当有多根主轴时，多根主轴的对齐方式。相当于处理垂直方向上的富余空间。
项目相关的属性：
order：是用来改变项目的顺序的
flex-grow：让某个项目生长
flex-shrink：让某个项目压缩
flex-basis：项目在主轴上占据的大小
flex：上面几个属性的简写方式
align-self：单独设置某个项目的对齐方式,单独一个项目在交叉轴的对齐方式
