2021-06-04 布局

CSS语法：
选择器+属性+属性值

选择器：
快速精准地找到需要操作的元素

属性：
基本属性+页面布局属性


< div>块状元素，具有独占一行的属性

浮动属性：float: none/left/right
元素脱离文档流到另一层；
依旧在包含框内；
浮动元素放在包含框的左边或右边；
不在页面占据空间。
浮动的框向左或向右移动，直到边框碰到包含框或另一浮动框的边框为止。
浮动元素外边缘不会超过父元素内边缘；
浮动元素不相互重叠、不上下浮动。
任何元素一旦浮动，display属性均失效，可设置宽高且不会独占一行!
若浮动发现宽度空间不够，会自动到下一行；但不会超过父边框

< span> 行内元素，没有宽高属性，且不会独占一行。
但设置float后，display属性失效，可设置宽高，可独占一行。有利于排版

清除浮动:clear:left/right/both （left、right表示清除float-left、float-right效果）
清楚浮动是在使用了浮动之后必不可少的，为网站布局效果，也变得复杂。
方式：
1)结尾处加空< div>,加clear：both；或者下一个元素上加clear:both
抵消其他元素浮动对当前元素的影响
2)浮动元素的父级div上定义 overflow：hidden，或者定义float。
使父元素在不定义宽高的情况下可以感知子类元素的高度
3）浮动元素的父元素定义宽高。
可感知子元素高度

浏览器默认有边框，需用盒子模型解决。

字体的div设置float：left，可使其脱离原来物理位置，方便排版。

position定位
指定一个元素的定位方法的属性，定位方法包括静态、相对、绝对或固定。
position：relative ；
相对于自己的位置定位。配合top，left，bottom，right四个值定位（移动定位元素）。
原有物理位置依然被占用。
position：absolute
绝对定位的元素不会占据原有的物理位置，其他相对定位的元素会补上去
以其他元素做为参照物移动指定的距离（浏览器原点）
如果元素的外层中有非static（有了除默认值之外的定位设置），那么该有定位的外层元素就成为该元 素的定位参考点。
fixed
生成绝对定位的元素，相对于浏览器窗口进行定位，
元素的位置通过left、top、right、bottom属性进行规定。
static
默认值，没有定位，元素出现在正常的流中
（忽略left、right、top、bottom或者z-index声明）

z-index堆叠顺序：
z-index设置定位元素z轴的距离（定位元素的显示顺序）
一旦修改了元素的定位方式，则元素可能会发生堆叠
z-index属性控制元素框出现的重叠顺序
z-index属性只在定位元素上生效
值为数值，数值越大表示堆叠顺序越高，即离用户最近
可以设置负数，表示离用户越远，一般不设置