页面布局方式与三种定位属性

amzon1222

于 2022-11-01 20:25:45 发布

阅读量259

点赞数

文章标签： css html5 css3

本文链接：https://blog.csdn.net/amzon1222/article/details/127640722

版权

网页常见布局方式

标准流
- 块级元素独占一行→垂直布局
- 行内元素/行内块元素一行显示多个→水平布局
浮动
- 可以让原本垂直布局的块级元素变成水平布局
定位
- 可以让元素自由的摆放在网页的任意位置
- 一般用于盒子之间的层叠情况

定位

使用定位的步骤

设置定位方式
- 属性名
- 常见属性值：
  
  定位方式属性值
  静态定位 static
  相对定位 relative
  绝对定位 absolute
  固定定位 fixed
设置偏移值
- 偏移值设置分为两个方向，水平和垂直方向各选一个使用即可
- 选取的原则一般是就近原则(离哪边近用哪个)
  
  方法属性名属性值含义
  水平 left 数字+px 距离左边的距离
  水平 right 数字+px 距离右边的距离
  垂直 top 数字+px 距离上边的距离
  垂直 bottom 数字+px 距离下边的距离

定位方式	属性值
静态定位	static
相对定位	relative
绝对定位	absolute
固定定位	fixed

方法	属性名	属性值	含义
水平	left	数字+px	距离左边的距离
水平	right	数字+px	距离右边的距离
垂直	top	数字+px	距离上边的距离
垂直	bottom	数字+px	距离下边的距离

相对定位

介绍:自恋型定位，相对于自己之前的位置进行移动

代码:position : relative;

left:200px

top:100px

特点:

需要配合方位属性实现移动
相对于自己原来位置进行移动
在页面中占位置→没有脱标

应用场景:

配合绝对定位组CP(子绝对父相对)
用于小范围的移动

注意：如果是个属性都写了，以left和top为准

绝对定位

介绍:拼爹型定位，相对于非静态定位的父元素进行定位移动

先找已经定位的父级（逐级查找），如果有这样的父级就以这个父级为参照物进行定位，或有父级,但父级没有定位，以浏览器窗口为参照为进行定位（如果取left：0；则会直接紧贴浏览器左侧覆盖之前默认的边距）

代码:position : absolute;

特点:

需要配合方位属性实现移动
默认相对于浏览器可视区域进行移动
在页面中不占位置→已经脱标
改变标签的显示模式特点：具备了行内块的特点

绝对定位的盒子显示模式具备行内块特点:加宽度高度生效，如果没有宽度也没有内容，盒子的宽度尺寸就是0

应用场景:

配合绝对定位组CP(子绝父相)

定位居中

绝对定位为什么会让margin：0 auto失效？

绝对定位后，块脱离标准流，它就失去了边界盒，浏览器不能为它自动计算边界，但是可以通过手动添加margin属性值来进行居中。

手动添加

        .box{
            /* margin: 0 auto; */
            /* 绝对定位让margin: 0 auto; 失效 */
            position: absolute;
            /* 整个盒子移动到浏览器中间偏右的位置 */
            left:50%;
            /* 整个盒子移动到浏览器中间偏下的位置 */
            top: 50%;

            margin-left: -150px;
            margin-top: -100px;
            width: 300px;
            height: 200px;
            background-color: pink;
        }

位移居中

用于替换上一代码的margin-left,margin-top属性，就可以自动的实现最后调整，不用手动计算块的宽高

            /* 位移自己宽度高度的一半 */
            transform: translate(-50%,-50%);

正常布局中，margin:0 auto就相当于top和bottom设置为0，left和right设置为auto
position: absolute会使这个块脱离正常的文档流
设置top: 0; left: 0; bottom: 0; right: 0;会给这个块提供一个新的边界盒（bounding box）。这种情况下，这个块会填满它的偏移父元素的全部可用空间（偏移父元素：offset parent，指position: relative的父元素或者是body）
给这个块指定width或者height会阻止它占据全部可用空间，转而由浏览器根据这个新的边界盒自动计算margin
由于这个块脱离了正常的文档流，同时有一个新的边界盒，因此浏览器可以很容易地为它提供相等的margin-top与margin-bottom值，从而使它垂直居中。

提供新边界盒

        .box{
            margin: auto;
            position: absolute;
            top: 0;
            bottom: 0;
            left: 0;
            right: 0;
            width: 300px;
            height: 200px;
            background-color: pink;
        }