盒子模型：
一、盒模型
1.两个盒子嵌套
通过设置margin-top/right/bottom/left将内部盒子上下左右移动,
想要水平居中，则可以左右同时设置auto（自适应） ：margin-left: auto;margin-right: auto;
也可以简写为 margin;0 auto;
若想不影响底部其他元素 需要写成margin:100px auto 0;也就是3个值，则下面的其他元素不进行干扰。
2.margin 外边距 边框和外界的距离
4个值的时候 margin设置的顺序是top/right/bottom/left(上 右 下 左)
3个值的时候 margin设置的顺序是margin: 0 50px 10px; 上0 左右50 下10
2个值的时候 margin设置的顺序是 margin: 50px 10px;上下20 左右10
1个值的时候 margin设置的顺序是 margin:10px; 全部都为10px
3.padding 内边距 内容contet和边框border之间的距离
4.border 盒子边框设置
宽度、颜色、样式都在border：；里面进行设置
border-radius: 50%;圆角设置，数值越大，边角越圆，宽度一半或者直接定义50%为正圆，也可以border-top-left-radius: 50%;进行单角设置
5三角形设置方法
在很多页面中可以看到一些三角符号，一样可以通过盒子模型来制作具体方法如下：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title></title> <style type="text/css"> #div1{ width: 0; height: 0;/*规定宽高为0，若不设置则由于是块元素会继承父元素，设置后可让下面border决定圆四分之一周长*/ border-top: 50px solid rgb(255, 255, 255); border-bottom: 50px solid green; border-right: 50px solid transparent; border-left: 50px solid rgba(0, 0, 0, 0); } </style> </head> <body> <div id="div1"> </div> </body> </html>
rgba(0, 0, 0, 0)、 rgb(255, 255, 255)和transparent效果一样都是产生透明效果。
产生三角原理就是，这个盒子宽高都为0，就是一个没有的盒子，但是他的border决定他的存在，如上图border为50px，所以一条边就为50px，总计四条边，即周长为100px的圆。
二、行块属性
1.块标签：（div,ul,li,ol,h1~h6,p...）此类标签具有以下特点：
1.可以设置宽和高
2.不可以与别的标签共处一行
3.不设置宽度的情况下,默认宽度是100%(具体取决于父元素)
2.行内标签（span,strong...）此类标签具有以下特点：
1.不可以设置宽高
2.可以与别的标签共处一行
3.其宽高由内容撑开(也就是里面有什么内容,宽高就会自适应其内容来定义宽高)
3.行内块标签（img,input...）此类标签具有以下特点：
1.可以设置宽高
2.可以与别的标签共处一行
4.属性转换元素的行块属性并不是一成不变的，三者之间可以使用display:;进行相互转换。
display:inline;转换为行内标签
display:block;转换为块标签
display:inline-block;转换为行内块属性
在页面布局的时候,可以选择合适的属性来进行布局
三、浮动
1.文档流
文档流也就是文本的布局，遵循从上往下，从左往右的顺序。
使用float脱离文档流时，其他盒子会无视这个元素，产生覆盖效果。但其他盒子内的文本依然会为这个元素让出位置，环绕在该元素的周围。
2.使用浮动的原因
首先定义三个盒子
1 <div id="father"> 2 <div id="son1"></div>
3 <div id="son2"></div> 4 </div>
然后定义CSS样式
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1"> 6 <title></title> 7 8 <style type="text/css"> 9 #father{ 10 width: 700px; 11 height: 30px; 12 background: lightblue; 13 margin: 100px auto 0; 14 } 15 #son1{ 16 width: 500px; 17 height: 100%; 18 background: lightcoral; 19 } 20 #son2{ 21 width: 100px; 22 height: 100%; 23 background-color: lightgreen; 24 25 } 26 </style> 27 </head> 28 <body> 29 <div id="father"> 30 <div id="son1"></div> 31 <div id="son2"></div> 32 </div> 33 </body> 34 </html>
如此之后，会默认呈现三个盒子，但是son2会在盒子之外，这是因为son1、son2虽然都是father的子元素，但也都是块标签，默认独占一行，所以相互排斥。
当设置display: inline-block;之后，虽然能改变为行内块，son1和son2也能都在father之内，但son1和son2之间会默认存在一个空格，这是因为在div设置时两个div没有紧挨着，而是独立成行，中间默认存在一个空格，后续无论多少空格也只呈现一个，当把两个div紧挨着则可以实现son1和son2之间没有空格。
除此之外，还可以使用浮动属性，当定义了浮动之后，则不再需要进行行块属性转换。
float的四种取值：
| left | 元素向左浮动。 |
| right | 元素向右浮动。 |
| none | 默认值。元素不浮动，并会显示在其在文本中出现的位置。 |
| inherit | 规定应该从父元素继承 float 属性的值。 |
同样，也可以设置一个元素附近不存在浮动元素：
| left | 在左侧不允许浮动元素。 |
| right | 在右侧不允许浮动元素。 |
| none | 默认值。允许浮动元素出现在两侧。 |
| both | 在左右两侧均不允许浮动元素。 |
| inherit | 规定应该从父元素继承 clear 属性的值。 |
