定位体系
什么是定位体系:视觉格式化模型的规定,定位体系分为:
1. 常规流
2. 浮动
3. 绝对定位
任何一种元素,必须属于其中一种定位体系,不同的定位体系元素在包含块的尺寸和位置会有一些差异:
position的值是obsolute或者fixed,属于绝对定位,
float值是left或者right,属于浮动
如果全部均不属于以上两者的为常规流,
注意:position默认值为:static
float默认值为:non
常规流
link行内元素,每个元素会紧挨着显示,直到沾满可用空间
block元素,每个元素会沾满可用空间
盒模型只有margin能取负值,auto按照你不同定位体系的规则计算
常规流又叫普通流。文档流、文档流、普通文档流、常规文档流
1. width:auto,无论左右的margin取什么值,content会自动占满可用空间
2. width:auto,margin-left:10px;右边margin为自动,内会自动占满在右边的可用空间
3. width:auto,margin-right:10px;左边margin为自动,内会自动占满在左边的可用空间
4. width:10px,左右的margin均为:atuo,则会水平居中
5. width:10px,左右的margin均为:10px,在元素宽度小于包含块宽度下,右边的margin会自动变成auto并占满右边可用区域
垂直方向
margin为auto:0px
height为auto:适应内容的高度
盒子位置
盒子在包含块的垂直方向上依次摆放.
按照HTML元素的书写顺序从上到下摆放
盒子在包含块中占据的尺寸是整个盒子的尺寸
垂直方向上,若两边相邻,则进行合并
都是正值,取最大值
一正一负则相加
都是负值,取最小值
外边距相邻条件:没有padding border content.
浮动
当元素的float属性取值为left或right时,元素属于浮动定位,不可继承.
盒子中的auto值
默认值为none 取值有none left right
常规流 浮动
margin-left auto 尽量撑满包含块 0
margin-left auto 尽量撑满包含块 0
margin-left auto 0 0
margin-left auto 0 0
width auto 尽量撑满包含块 适应内容高度
weight auto 适应内容高度 适应内容高度
盒子位置
左浮动的盒子向上向左排列
右浮动的盒子向上向右排列
浮动盒子的顶边不得高于上一个盒子的顶边
若剩余空间无法放下浮动的盒子,则该盒子向下移动
直到具备足够的空间能容纳盒子,然后再向左或向右移动
常规流盒子和浮动盒子混合摆放
浮动盒子在摆放时,要避开常规流盒子.
盒子在浮动时,会引起 脱离文档流.
常规流盒子在摆放时,无视浮动盒子---高度坍塌.(表示浮动元素内容不占用高度)
父元素的实际高度:常规流盒子
overflow:hidden
1.当内容溢出时,a 隐藏 b 超出部分出现滚动条
2.当子元素浮动,会找回高度,写在浮动元素的父级身上.
清除浮动
对一个元素清除浮动,可以让该元素在摆放时,出现在浮动元素的下方
clear : 默认值为 none
取值为 left 清除左浮动,在左浮动元素盒子下方出现
right 清除右浮动,在右浮动元素盒子下方出现
both 清除左右浮动,在最底边的下方出现
div:after{ clear:both } 对div最后一个子元素清除浮动,可防止父元素高速坍塌.
绝对定位(absulote postioned)
属性postion不可继承 默认值为static
static 静态位置,盒子在原来定位体系下的位置
relative 相对位置
absulote 绝对位置
fixed 固定定位
如果对一个元素进行相对位置移动,仍然占用原来的内容块,相对位置是不脱离文档流的
如果对一个元素进行绝对位置移动:
1.会脱离文档流
2.会去找postion不等于static的包含块,如一直找不到,会以页面初始位置为基点.
如果对一个元素进行固定定位,会脱离文档流,定位在视口(初始化包含块),跟着视口动.
当浮动元素被设置为绝对定位,float属性被强制设置为None
绝对定位元素不会对其他元素造成任何影响