写前端-静态小米作业有感
当拿到一份网页布局需求的时候，比如前端网页搭建的时候，最终要就是划分盒子区域，要清晰的认识到每个标签都是一个盒子。
当标签嵌套时，便是盒子里面套盒子，要对此有一个清晰的认识，当然在margin外层有时也会有position，这就引出了另一个知识点，网页中的标签元素不一定仅仅会出现左右上下的情况，还会出现脱离文档流，
如同PS的图片一般，有一层层样式，例如3维中的Z方向。通过position,对标签元素进行摆放，最终实现网页的布局。
定位属性position有4个值，分别是静态定位（static）默认、相对定位（relative）、绝对定位（absolute）和固定定位（fixed）。
/*相对定位（relative）：_参照物：元素本身的位置，依旧占位，不脱离文档流*/
/*绝对定位（absolute）：参照物：已经定位的最近父级元素作为参照直至body标签，完全脱离文档流*/
一般绝对定位可以配合相对定位搭配使用，可以实现针对父级元素本身，进行定位
/*固定定位（fixed）：完全脱离文档流，参照物浏览器窗口*/一般用于网页悬浮类元素
定位后要确定z轴上的高度差，默认情况Z轴相同的情况下，rerelative（高度）>absolute（高度），反之一旦有一方Z轴高度越高，则谁越大。
当然对于网页布局，还有两个元素也不能不忽视，一个是display，一个便是float.正常我们知道浏览器打开html网页时，都是从上往下、由左往右逐一加载的，而这也是我们文档流的由来。
文档流有2大特征：
① 块状元素会随着浏览器读取文档的顺序，自上而下垂直分布，一行一个的形式占据页面位置。
② 行内元素会随着浏览器区队文档的顺序，从左往右水平分布，一行多个的形式占据页面位置。行内元素摆放满一行以后才会到下一行继续排列。
这里先讲一下display属性，display可以指定元素的显示模式，它可以把行内元素修改成块状元素，也可以把别的模式的元素改成行内元素。diisplay常用的值有四个。
display: block; // 声明当前元素的显示模式为块状元素
display: inline; // 声明当前元素的显示模式为行内元素
display: inline-block; // 声明当前元素的显示模式为行内块状元素,兼具inline的不占整行，以及兼具block的可设置宽高特性
display: none; // 声明当前元素的显示模式为隐藏，并且空间位置不保留，扩展（属性隐藏，但空间位置依旧保留，则是visibility: hidden)
而float元素要注意点则比较多
当一个元素被设置浮动后，将具有以下特性：
- 任何申明为float 的元素都会自动被设置为一个行内块状元素，具有行内块状元素的特性。此处效果跟inline-block相同
- 假如某个元素A是浮动的，如果A元素上一个元素也是浮动的，那么A元素会跟随在上一个元素的后边(如果一行放不下这两个元素，那么A元素会被挤到下一行)；如果A元素上一个元素是标准流中的元素，那么A的相对垂直位置不会改变，也就是说A的顶部总是和上一个元素的底部对齐。
- 在标准浏览器中如果浮动元素a脱离了文档流，那么排在浮动元素a后的元素将会往回排列占据浮动元素a本来所处的位置，使页面布局产生变化。（这里会出现父级塌陷，是否清除塌陷要看对应的需求）
- 如果水平方向上没有足够的空间容纳浮动元素，则转向下一行。
- 字围效果：文字内容会围绕在浮动元素周围。
- 浮动元素只能浮动至左侧或者右侧。
- 浮动元素只能影响排在其后面元素的布局，却无法影响出现在浮动元素之前的元素。
我们在网页布局，用到标签元素时，也要对于这些标签的什么是块状，什么是内联元素都要有一个清晰认知，这样才能对症下药，‘
块级（block）：独占一行，可以设置宽高属性
比如：p、h1-h6、div、ul-li
内联（inline）：按内容占比，不可以设置宽高
比如：b、strong、i、em、del、span、a、img、input
今天就先写到这里，就是把之前在写静态小米作业，遇到的大坑拿出写写。最后贴上CSS课程总结的内容。
