定位体系
Posted xiegang
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了定位体系相关的知识，希望对你有一定的参考价值。
什么是定位体系：视觉格式化模型的规定，定位体系分为：
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
绝对定位元素不会对其他元素造成任何影响
以上是关于定位体系的主要内容，如果未能解决你的问题，请参考以下文章