# 一.浮动布局的总结# 1.同意结构下,如果采用浮动布局,所有的同级别兄弟标签采用浮动布局# 2.浮动布局的盒子宽度在没有设定时会自适应内容宽度 # 二.盒子的显隐# display:none;# 该隐藏方式在页面中不占位,显隐都不会影响其他标签布局,不需要用动画处理时## opactiy:0;# 通过控制盒子的同名度来隐藏盒子,该隐藏方式在页面中占位,一般显隐操作的盒子都是采用定位布局;# 显隐都不会影响其他标签布局,需要用动画处理时 # 三.定位布局# 什么是定位布局:可以通过上下左右四个方位完成自身布局的布局方式 # 1.相对定位# 设置定位属性,就会打开定位方位# 参考系: 自身原有位置# position: relative;# 通过定位方位完成布局# top: 300# px;# left: 300# px;# bottom: 300# px;# right: 30# /*结论*/# /*1.左右取左,上下取上(eg:left与right共存是left生效)*/# /*2.left=-right,top=-bottom*/# /*3.参考系:自身原有位置(不是某一个点,eg:right参考的就是原有位置的右边界)*/# /*4.自身布局后不会影响自身原有位置*/# /*5.不脱离文档流(脱离文档流:不再撑开父级高度.)*/ # 2.绝对定位# 设置定位属性,就会打开定位方位# position: absolute;# 一般父级采用的是相对定位布局,一般情况下,父级不需要脱离文档流# 如果父级需要脱离文档流,用绝对定位完成布局,完全可以,不会影响自己相对于自身的布局,# 但是自身又需要一个在文档流中的(不脱离文档流中的)定位参考父级=> 父级相对定位,子级绝对定位 # <!-- 绝对定位布局一定存在父子关系 --># <!-- 导入定位布局时,父级设置宽高没?(设置了)子级呢(也设置了)=> 父级的高度不再依赖于子级 => 子级脱离文档流 --># <!-- 参考系:最近的定位父级 --> # <!-- <div class="box"></div> --># <!-- 1.top|bottom|left|right都可以完成自身布局,上下取上,左右取左 --># <!-- 2.父级必须自己设置宽高 --># <!-- 3.完全脱离文档流 --> # 3.固定定位# 设置定位属性: # position: fixed; # / *参考系:页面窗口 * / # / *1. top | bottom | left | right都可以完成自身布局,上下取上,左右取左 * / # / *2.相对于页面窗口是静止的 * / # / *3.完全脱离文档流 # 4.z-index# 父级左相对定位处理,并不是自己需要用定位完成布局,最重要的原因是辅助子级完成绝对定位布局# 绝对定位需要大家脱离文档流,相互不影响布局,每个都是独立相对于父级进行布局的个体## .b3 {# /*虽然子级脱离了文档流,但是父子关系以及存在,子级获取的100%还是父级对应的值*/# left: calc(( 100% - 75px) / 2 );# top: calc(( 100% - 75px) / 2 );# background: green;# /*z-index改变显示层级,显示层级的值为正整数,值越大显示层级越高。*/
原文地址:https://www.cnblogs.com/yanhui1995/p/10125580.html
时间: 2024-10-13 12:28:46