浮动布局和定位布局

浮动布局

一.display小结

/* inline */
/*1.同行显示, 就相当于纯文本, 当一行显示不下, 如就是一个字显示不下,那么显示不下的那一个字就会自动换行,和纯文本的区别就是有标签整体的概念,标签与标签间有一个空格的隔断*/
/*2.支持部分css样式, 不支持宽高 | 行高(行高会映射到父级block标签) | margin上下*/
/*3.content由文本内容撑开*/
/*4.inline标签只嵌套inline标签*/
?
/* inline-block */
/*1.同行显示, 当一行显示不下, 标签会作为一个整体换行显示*/
/*2.支持所有css样式*/
/*3.content默认由文本(图片)内容撑开,也可以自定义宽高, 当自定义宽高后,一定采用自定义宽高(显示区域不足,内容会在标签内容换行显示,可能超出显示区域)*/
/*4.inline-block标签不建议嵌套任意标签*/
?
/* block */
/*1.异行显示, 不管自身区域多大, 都会独占一行*/
/*2.支持所有css样式*/
/*3.width默认继承父级,height由内容(文本,图片,子标签)撑开, 当设置自定义宽高后,一定采用自定义宽高*/
/*4.block可以嵌套任意标签*/
       

二.overflow知识

/* 本质 */
/*overflow: 处理内容超出盒子显示区域*/
overflow: auto | scroll | hidden
/*auto: 自适应, 内容超出, 滚动显示超出部分, 不超出则正常显示*/
/*scroll: 一直采用滚动方式显示*/
/*hidden: 隐藏超出盒子显示范围的内容*/
           

三.浮动布局

/*float: 浮动布局, 改变BFC的参照方位*/
/*为什么要使用: 使用它, 块级盒子就会同行显示*/

float: left | right;  左 | 右 浮动
/*left: BFC参照方向从左向右*/
/*right: BFC参照方向从右向左*/

/*浮动的区域有父级的width决定*/

四.清浮动

浮动问题: 子级浮动了,不再撑开父级的高度, 那么父级如果拥有兄弟标签,可能就会出现布局重叠问题
?
清浮动: 解决上面的问题, 通过使父级获取一个合适的高度, 这样子级就不会和父级的兄弟布局发生重叠
?
clear: left | right | both

① 设置父级的死高度
② 通过兄弟设置 clear: both
?
③ 设置父级overflow属性
.sup {
    overflow: hidden;
}
?
④ 通过父级:after伪类
.sup:after {
    content: "";
    display: block;
    clear: both;
}

定位布局

一.浮动布局的总结

1.同一结构下, 如果采用浮动布局,所有的同级别兄弟标签都要采用浮动布局
2.浮动布局的盒子宽度在没有设定时会自适应内容宽度

二.盒子的显隐

display: none;
在页面中不占位, 采用定位布局后, 显示隐藏都不会影响其他标签布局, 不需要用动画处理时
?
opacity: 0;
在页面中占位, 采用定位布局后, 显示隐藏都不会影响其他标签布局, 需要采用动画处理时

三.定位布局

什么是定位布局: 可以通过上下左右四个方位完成自身布局的布局方式

参考系: 自身原有位置
position: relative;  => 打开了四个定位方位
1.top|bottom|left|right都可以完成自身布局, 上下取上,左右取左
2.left = -right | top = -bottom
3.布局后不影响自身原有位置
4.不脱离文档流

绝对定位

参考系: 最近的定位父级
position: absolute;  => 打开了四个定位方位
1.top|bottom|left|right都可以完成自身布局, 上下取上,左右取左
2.父级必须自己设置宽高
3.完全离文档流

参考系: 页面窗口
position: fixed;  => 打开了四个定位方位
1.top|bottom|left|right都可以完成自身布局, 上下取上,左右取左
2.相对于页面窗口是静止的
3.完全脱离文档流

修改显示层级(在发生重叠时使用), 值取正整数, 值不需要排序随意规定, 值大的显示层级高

四.流式布局思想

1. 百分比
2. vw | vh => max-width(height) | min-width(height)
3. em | rem