CSS盒模型

盒模型基本概念

• 所有html标签都可以看成矩形盒子，由width、height、padding、border构成，称为盒模型
• width和height不是盒子总宽高，是内容宽高
• 盒子的总高度=height+上下padding+上下border

标签	详解
width	单位通常是px，移动端涉及百分数，em 当块元素（div，h系列，li等）没有设置width属性时，它将自动撑满，不意味着可以继承
height	没有设置height值时，将自动被其内容撑开，如果没有内容，则height默认为0
padding	block-start上 block-end下 inline-start左 inline-end右
margin	竖直方向上的margin有塌陷现象，两个盒子margin不会叠加，会以大的为准计算距离
box-sizing	将盒子添加 box-sizing:border-box; 之后，盒子的width、height数字就表示盒子实际占有的宽高（不含margin） 即padding、border变为“内缩” 不再“外扩”

竖直方向上的塌陷 上面盒子下外边距40px 下面盒子上外边距30px 不叠加 以较大值为准计算距离

• 一些元素（比如body，ul，p等）都有默认的margin，在开始制作网页的时候，要将他们清除
• 盒子水平居中方式：margin:0 auto 将左右margin设为auto
• 盒子的垂直居中，需要使用绝对定位技术来实现

box-sizing属性大量应用于移动网页制作中，因为它结合百分比布局、弹性布局等非常好用，再PC页面开发中使用较少

行内元素和块级元素

display属性类型	是否能并排显示	是否能设置宽高	当不设置width属性时	举例
块级元素	否	是	width自动撑满	div、section、header、h系列、li、ul等
行内元素	是	否	width自动收缩	a、span、em、b、u、i等
行内块	是	是		img和表单元素

• 行内元素和块级元素的相互转换
• 使用display：block；转换成块元素
• 使用display：inline；转换成行内元素
• 使用display：inline-block；转换成行内块元素
• 元素的隐藏
  • 使用display：none；可以将元素隐藏，元素将彻底放弃位置，如同没有写它的标签一样
  • 使用visibility：hidden；可以隐藏元素，但是元素不放弃自己的位置
•