盒子模型
设置方法
一个值: 上下左右同时设置
两个值: 代表 上下/左右
三个值: 代表 上/左右/下
四个值: 代表上/右/下/左
也可以单独设置某个方向上的margin/padding/border
盒子大小
盒子大小: content+padding+border
浮动float
float
left;左浮动
right;右浮动
none;
可以解决块级元素同行展示的问题
元素浮动之后,默认会变为行内块的表现形式
元素浮动之后,会从父元素的边界开始同行排列,放不下换行,无法浮动到父元素之外
建议:元素在父元素当中浮动之后,其余兄弟元素最好也浮动(或者定位)
元素浮动之后无法在撑起父元素的高度,有可能会造成父元素高度塌陷
解决高度塌陷,清除浮动带来的影响
定位position
position
开启定位之后,需要通过left/right/top/bottom进行位置的描述
static; 默认(不定位)
relative; 相对定位
不改变元素本身的表现特性
参照物: 元素自身的位置
absolute; 绝对定位
元素特性改变
不设置宽度时,宽度由内容撑开
脱离文档流,不在占据位置
参照物
距离自己<font color="#c41230">最近</font>的具有<font color="#c41230">定位属性</font>的<font color="#c41230">父元素</font>
如果层层向上查找,没有符合规则的,就以html为参照物
子绝父相
fixed; 固定定位
元素特性改变
不设置宽度时,宽度由内容撑开
脱离文档流,不再占据位置
z-index
开启定位之后,可以通过设置z-index属性,调整元素的层叠顺序
使用技巧
定位时,先想清楚要以谁作为参照物,从而选择相应的属性
