盒模型

• a行内元素：不会独占一行，没有宽高，有边框，有行高，有背景颜色，没有效果box-sizing。
• div块元素：独占一行，有行高，有边框，有行高，有背景颜色，有内边距和外边距。
• input行内块元素：不会独占一行，可以设宽高，可以设边框，可以设行高，可以设背景颜色，可以设内边距和外边距，可以设box-sizing。

元素(块、行内、行内块)排列方式

• display:inline;(块元素转换成行内元素)
• display:block;(将其他元素转换成块元素，宽度100%)
• display:table;(将其他元素转换成块元素，宽高默认被内容撑起，(可以处理外边距重叠问题))
• display:inline-block;(将其他元素转换成行内块元素)
• display:none;(页面中隐藏，页面中不占空间)
• display:flex;(弹性布局)(强力推荐你们去学习，很好用。想要其他弹性布局样式自己找！)

水平居中

行内块和行内：父容器字体居中：text-align:center;

使用修改排列方式： 其他元素转换成行内块元素，并列时会有3px的外边距间隙，间隙是换行符造成的，间隙大小会随着父元素容器字体大小变化。解决方法:在父元素设一个字体为0，完成后，再给子元素设字体大小,就可以了。
省流:父元素

子元素设：font-size:20px

文档流

• 文档最底层的排列 文档流上面的层次元素，叫脱离文档流。文档上边的元素分成，行内，块，行内块排列。脱离文档流后会丢失宽高。
• 脱离文档流后，父元素会出现高度塌陷的问题
  解决高度塌陷的方法：在父元素下面添加一个块元素，不设置高度，且添加清除浮动。缺点:(会添加一个没有用的元素)

给父元素添加一个伪元素::before（最前）/::after（最后）的空白区域添加空内容——content，设置空白内容变为块元素block和table都可以，最后在添加清除浮动就可以了。

floaf(浮动布局)

left(👈左浮动)； right(右浮动👉)

清除浮动影响

clear:left(左👈) ; clear:right(右👉) ; clear:both;(清除浮动影响最大的浮动)

浮动遇到问题:1.宽高丢失 2.脱离文档流 3.产生符高度塌陷

解决问题：在父容器添加一个块元素，块元素没有高度，清除浮动。(缺点:文档中添加了一个没有用的元素) 想解决塌陷问题和外边距重叠问题 ::

开发规范

给需要解决塌陷和重叠问题的元素，添加一个clearfix类，然后在clearfix使用上面描述的方法。