CSS3浮动与定位
CSS3浮动与定位
浮动
浮动的最本质功能:用来实现并排。浮动使用要点:要浮动，并排的盒子都要设置浮动。父盒子要有足够的宽度,否则子盒子会掉下去。子盒子会按顺序进行贴靠,如果没有足够空间,则会寻找再前一个兄弟元素。浮动的元素不再区分块级元素、行内元素,已经脱离了标准文档流,一律能够设置宽度和高度,即使它是span或者a标签等。
float:right;即可设置右浮动
垂直显示的盒子,不要设置浮动,只有并排显示的盒子才要设置浮动!
“大盒子带着小盒子跑”,一个大盒子中,又是一个小天地,内部可以继续使用浮动
BFC(Box Formatting Context,块级格式化上下文)是页面上的一个隔离的独立容器,容器里面的子元素不会影响到外面的元素,反之亦然。
一个盒子不设置height,当内容子元素都浮动时,无法撑起自身，这个盒子没有形成BFC。
如何创建BFC
- float的值不是none
- position的值不是static或者relative
- display的值是inline-block、flex或者inline-flex
- overflow：hidden;
overflow:hidden;表示溢出隐藏,溢出盒子边框的内容将会被隐藏，overflow:hidden;是非常好用的让盒子形成BFC的方法
BFC可以取消盒子margin塌陷，BFC可以可以阻止元素被浮动元素覆盖
IE6、7浏览器使用haslayout机制,和BFC规范略有差异,比如IE浏览器可以使用zoom:1属性“让盒子拥有layout”，如果要制作兼容到IE6、7的网页时,尽量让网页布局变得简单,内部有浮动的盒子要设置height属性,规范编程,不要“玩杂技”。
相对定位
相对定位:盒子可以相对自己原来的位置进行位置调整,称为相对定位
.p3 {
position: relative;
top: 100px;
left: 100px;
}
left向右移动;right向左移动;top向下移动;bottom向上移动，值可以为负数,即往规定方向相反移动。
相对定位的元素,会在“老家留坑”,本质上仍然是在原来的位置,只不过渲染在新的地方而已,渲染的图形可以比喻成“影子”,不会对页面其他元素产生任何影响。
相对定位用来微诽元素位置，相对定位的元素,可以当做绝对定位的参考盒子。
绝对定位
绝对定位:盒子可以在浏览器中以坐标进行位置精准描述,拥有自己的绝对位置
.p3 {
position: absolute;
top: 100px;
left: 100px;
}
left到左边的距离;right到右边的距离;top到上边的距离;bottom到下边的距离，绝对定位的元素脱离标准文档流,将释放自己的位置,对其他元素不会产生任何干扰,而是对它们进行压盖
脱离标准文档流的方法:浮动、绝对定位、固定定位
绝对定位的盒子并不是永远以浏览器作为基准点，绝对定位的盒子会以自己祖先元素中,离自己最近的拥有定位属性的盒子,当做基准点。这个盒子通常是相对定位的,所以这个性质也叫作“子绝父相”。
绝对定位的盒子垂直居中是一个非常实用的技术
.p4 {
width: 200px;
height: 200px;
background-color: brown;
position: absolute;
top: 50%;
margin-top: -100px;
}
z-index属性是一个没有单位的正整数,数值大的能够压住数值小的
绝对定位用来制作“压盖、“遮罩”效果
绝对定位用来结合CSS精灵使用
绝对定位可以结合JS实现动画
固定定位
固定定位:不管页面如何卷动,它永远固定在那里
.box {
position: fixed;
top: 100px;
left: 100px;
}
固定定位只能以页面为参考点,没有子固父相这个性质，固定定位脱离标准文档流