饥人谷学习第9天
浮动
一个浮动盒会向左或向右移动，直到其外边挨到其包含块边沿或者另一个浮动盒的外边。如果存在行盒，浮动盒的外top（边）会与当前行盒的top（边）对齐，如果没有足够的水平空间来浮动，它会向下移动，直到空间合适或者不会再出现其他浮动了。
因为浮动（盒）不在普通流内，在浮动盒之前或者之后创建的未定位的（non-positioned）块盒会竖直排列，就像浮动不存在一样。然而，接着（next-to）浮动（盒）创建的当前及后续行盒会进行必要的缩短，为了给浮动（盒）的margin box让出空间。
- 脱离普通流
普通流：块级元素占据一行，行内元素水平排列，占据它自身的宽度，一行占满之后依次向下排列，能够把其父元素撑开；
浮动：块级元素不会从上到下依次去放，也不会把父元素给撑开 - 块级元素浮动宽度收缩，行内元素浮动以块级特性呈现
普通流中块级元素不设置宽度会撑满父容器，设置浮动之后呈现出inline-block的感觉，宽度会收缩到其内容的宽度；
行内元素设置浮动之后也呈现inline-block的一些特性，但没有那么多比如居中等，但它可以设置宽度高度margin padding
浮动的使用场景
- 两栏布局
左侧或右侧宽度固定，另一侧自适应 - 三栏布局
两侧宽度固定，中间内容自适应 - 导航条
左浮导航条
右浮导航条 增加外部的右浮，里面仍是左浮，DOM顺序不变 - 清除浮动
浮动的副作用：
1.对后续元素的位置产生影响
2.父容器高度计算出现问题
clear: left：要求该盒的top border边位于源文档中在此之前的元素形成的所有左浮动盒的bottom外边下方
clear: right：要求该盒的top border边位于源文档中在此之前的元素形成的所有右浮动盒的bottom外边下方
clear: both：...
撑开父级元素
.clearfix::after{
content: '';
display: block;
clear: both;
}
-
浮动与BFC
浮动元素创建BFC
1.可用来 「解释/顺道解决 」外边距合并问题
2.可用来 「解释/顺道解决」 清除浮动问题 -
浮动和负边距
两个浮动元素，如果因放不下导致其中一个下移，对下移元素设置负margin 值大于自身的宽度可将其上移。 -
用 inline-block 还是 浮动
1.inline-block 优势: 不需要清除浮动，简单，在设置居中时更方便，适合子内容不多的元素水平排列；
2.inline-block 劣势: 需要注意缝隙，注意对齐，ie8以下不能用；
3.float 优势: 兼容性好，没缝隙问题；
4.float 劣势: 需要清楚浮动，适合稍大的布局。 -
用 定位 还是 浮动 ？
大布局、自适应 用浮动
小元素、固定宽高 用定位
结合实际情况
Position 定位
- 正常/文档流 Normal Flow
Normal Flow 即浏览器默认的文档布局方式。
定位就是通过设置position属性的值来覆盖默认的布局方式。
1.静态定位
positon: static 默认值 默认的布局方式，可不加。
2.相对定位
positon: relative 相对默认的布局位置进行定位。
相对于设置前其自己所在的位置。
3.绝对定位
positon: absolute 绝对定位元素脱离正常文档流，相对其定位上下文（Positioning Context）进行定位；
相对其定位上下文（Positioning Context）：
定位上下文就是绝对定位元素相对于哪个元素定位，默认的定位上下文时<html>
如果想设定某个绝对定位元素的定位上下文，则需要在这个元素的某个祖先元素上设置position: relative。
z-index: 1;：
z-index值大的覆盖值小的。
两个大div里面装着许多小的，第一个大的div的z-index大于第二个大div，第一个大div的子元素的z-index小于第二个大div的，仍是第一个大div及其子元素覆盖第二个大div及其子元素（父级优先）。
4.固定定位
position: fixed相对浏览器窗口进行定位。因此当滚动产生时，固定定位元素依然处于窗口的某个固定位置。
.feedback{
right: 30px;
bottom: 30px;
position: fixed;
}
5.粘贴定位
positon: sticky是相对定位和固定定位的结合，默认情况下表现为相对定位，当浏览器窗口顶端与元素的距离等于top属性的值时，转变为固定定位。
网友评论