layout 排版
box model 盒子模型
css 中把内容用一个类似于盒子的容器装起来，想象有一个盒子像千层饼一样一层套一层，从内向外分别是 content、padding 、border、margin。但准确的说 margin 它是盒子有的属性，但它不属于盒子，margin 是盒子的外边距，它不包含在为盒子设定的高度宽度中。
顺带一提，chrome 默认的页面的上下外边距是16px。
padding 、border 、margin 都可以上右下左的指定边距或是样式，总之就是顺时针。
margin 和 padding
如果给俩紧靠的元素的 padding 都设置为10px，那么从俩盒子呈现的效果是：内容部分相距20px；给俩盒子的 margin 设置为10px的话，呈现的效果是盒子上下相接的地方竟然是10px耶，和我们预想的不同，这个坑就叫做外边距塌陷。
明智的做法是，用外边距隔开元素，用内边距增加内容空间。
content-box & border-box
盒子是有两种模型的，就是 content-box 和 border-box 。
content-box 宽高 = 内容宽高
border-box 宽高 = 内容+内边距+边框
目前常用且符合逻辑的是 border-box 模型。举个栗子来说，如果用内容盒的话，我们需要在页面上开辟一个宽高100px 的方形，意思是这个地方可以让它使用， 但是不能更多了。然后突然觉得要加个边框，几个内边距，然后就超过100px的限制了，很烦。但是用边框盒的话，它的宽高包括了内边距和边框，这样怎么设置它都和动态的调整宽高，使总宽高保持在100px内。
box-sizing 可以改变是 border-box 还是 content-box 。
另外，开发需要 reset 或者说是 normalize ，需要设置一下初识条件，常会用到通配符 * 来设置一下盒模型 box-sizing:border-box; ，如果只这样设置也不是万能的，因为伪元素 ::before 和 ::after 是不适用的，所以完整的写法是这样的 *,*::before,*::after{box-sizing:border-box;} 。
inline & block
行内元素是无法设置宽高的，要设置宽高，就要改一下属性 display:block; 。
VSCode 快捷键：选中一个词组后，按 ctrl + D 可以继续选中下一个相同词组。
display:inline-block; 这个属性值是行内块，它具有行内元素和块元素的特点，可以像块元素一样设置宽高，也像行内元素一样不会另起一行，很优秀。
overflow
当内容大过容器的时候会溢出。
overflow 可以应对这种情况。接下来看几个常用的属性值，请注意溢出代表着两种情况，水平和垂直方向，所以其实与大部分样式属性一样，也有两个属性值来代表水平、垂直方向，如果只写一个属性值的话，代表横纵都如此设置
visible一般这是默认的，就是允许溢出，挺难看的其实hidden溢出部分会被隐藏，一般也用不到，但也许也会有妙用scroll滚动条auto溢出发生的时候会出现滚动条，但是没有发生的时候不会出现
绝对单位与相对单位
绝对单位这里介绍一种，就是像素。如果想要在不同尺寸的设备上固定的显示某些样式的时候，就可以采用像素，它不会变的，这是最忠诚的诺言。
相对单位就有很多了，百分制、视域（vh、vw）、em、rem啥的，使用相对单位可以做到响应式，很圆滑，但也许这才是生存之道吧。百分制的意思就是，是父元素的百分之多少。视域就是当前视图的百分之多少。em就是当前字符的大小。
rem是指根元素字符的大小，根元素字符的大小是16px，通常用这个的话会把根元素字符尺寸设置为 html{font-size:62.5%;} 也就是16px * 62.5% = 10px，便于计算。
定位
position:static; 默认情况，也就是没有特别设置位置。
position:relative; 相对定位，相对原本的位置定位。注意，此时的right:5px = left:-5px
position:absolute 绝对定位，相对容器的位置（定位（要把容器设置为相对定位，所谓子绝父相），也就是在容器中的位置定位
position:fixed 固定定位，相对视域定位，也就是相对body来定位
浮动 float
float:left 会让当前选择器的元素左浮动，显示效果为该元素位于容器的左上角，其他元素会围绕它。
比如现在有一个100*100的正方形div粉色盒子，还有一些p包裹的文字，目前的情形应该是粉色盒子，文字在粉色盒子下面。
那么给粉色盒子一个左浮动，就可以看到粉色盒子在左边，文字变成了环绕粉色盒子的样子。
回到上面的栗子中去，如果第二段很长很长的文字并不想围绕着这个粉色盒子怎么办？可以选择清除浮动，上面是左浮动，那么就清除左边clear:left ，如果是右浮动，就clear:right ，当然也可以直接清除两边 clear:both 。我们马上满足第二段文字的愿望，给它加上清除左浮动的样式。
突然觉得第二段文字要求好多很烦，不多说，直接把它删掉吧！结果...结果竟然变成了这个样子，粉色小盒子你怎么这么突出？原来如此，是父元素塌陷。（其实还挺好看的）
因为粉色盒子它用了浮动，就脱离了文档流，在父元素的眼中，它根本不存在，也就粉色盒子的兄弟姐妹元素能看见它。父元素心想：我的孩子p啊，你为什么旁边留了那么一大片空白，难道闹鬼了？我怎么什么都看不见？把文字删完后，只留下了边框（为了凸显出边框，我把它变宽了）
解决方法就是：在父元素再生个孩子，是一个有着清除浮动功能的div，这样就好了。
所以在用浮动来排版的时候，千万别忘了要清除浮动，不然父元素分分钟塌陷给你看。不过通常不会让父元素再生个子元素来清除浮动，太奢侈了，直接上伪元素
.father::after{
/* 直接给父元素上一个伪元素，也可以给父元素加一个清除浮动的类，clearfix 这样，它本身设置自己该设置的东西，然后.clearfix用来清除浮动 */
content:'';
display:block;
clear:both;
}