css盒子模型和定位

元素的溢出

就是子元素的尺寸大于父元素的尺寸

img

蓝色盖在这个红色上，子元素的超出了这个宽度

这个就是元素的溢出

如何解决了元素溢出呢？给父元素设置一个overflow，hidden 值，隐藏溢出的内容，

        .box1 {
            width: 100px;
            height: 200px;
            background-color: red;
            overflow: auto;
        }

hidden 是隐藏
auto 是自动的

hidden效果图

img

auto效果图,可以拖动的

img

盒子模型的概念

就是一个页面，其实有很多的盒子组成的，可以做这个拆分

专门用来布局和定位的

div就是一个盒子模型，在这个div里面，布局文本内容和其他内容等等，都可以在里面进行布局

img

盒子模型四个边界来描述：margin(外边距)，border(边框)，padding(内边距)，content(内容区域)

content(内容区域)

盒子内容，显示文本和图像

width：指的是内容的宽度，而不是盒子真实宽度

height：指的是内容的高度，而不是盒子真实高度

        div {
            /* 内容的高度和宽度 */
            width: 100px;
            height: 100px;
            background-color: green;
        }

margin(外边距)

盒子与盒子之间的距离，简单一点就是元素和元素之间的距离

特性：

  • 4个方向，上下左右，

  • 第一个值设置上下，第二个值设置左右

  • 上下的距离就是元素和元素之间的距离

        div {
            width: 100px;
            height: 100px;
            background-color: green;
            margin: 200px 200px;
        }

水平居中的盒子

margin: 200px auto;

内边距(padding)

就是在盒子里面设置了一个边距，四个方向距离盒子的距离

里面内容和盒子之间的距离，跟这个外边距是一样的特性

也有四个方向，上下左右

img

如上图，在盒子里面开辟了一个距离

        div {
            width: 100px;
            height: 100px;
            background-color: green;
            margin: 200px auto;
            padding: 20px;
        }

border(边框)

三个要素：

  • 粗细

  • 线性

  • 颜色


none  无边框

dotted 点状虚线边框

dashed 矩形虚线边框

solid  实线边框


        div {
            width: 100px;
            height: 100px;
            background-color: green;
            margin: 200px 200px;
            padding: 20px;
            border: solid red 10px;
        }

img

如上面这个图，边框就是这样的

案例

设置下面这个盒子

img

清除浏览器的默认边框

浏览器运行的时候，会自带外边距和内边距，如果想要清除掉的话

        * {
            margin: 0px;
            padding: 0px;
        }

真正的盒子是什么呢？(盒子的真实尺寸)

利用浏览器中工具，就是点击检查，然后查看元素这一栏即可，后面爬虫的话，

检查工具的使用

img

真正的一个盒子模型，就是外边距，内边距，宽度，边框

真正大小：高度：内容的高度+左右外边距+左右内边距+左右边框

宽度：内容的宽度+左右外边距的宽度+左右内边距的宽度+左右边框

定位(摆放盒子)

定位，fiex布局

三种属性：

  • relative 相对定位

  • absolute 绝对定位

  • fixed 固定定位

默认情况下盒子都是在左上角的显示的

相对定位(相较于自身位置定位)

relative 相对定位

    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .box1 {
            width: 100px;
            height: 100px;
            background-color: green;
            position: relative;
        }
    </style>

<body>
    <div class="box1"></div>

</body>

img

开启了相对定位，发现与普通的盒子没有什么区别

设置了相对定位后，可以设置四个方向的属性，top,left,right,bottom

  • top距离原来顶部位置之间的大小

  • left 距离左边距离的大小，左边对左边

        .box1 {
            width: 100px;
            height: 100px;
            background-color: green;
            position: relative;
            top: 100px;
            left: 20px;
        }

img

特点：相对原来的位置进行移动的，就是没有开启定位的哪个页面的位置

原来的位置继续占有，后面的盒子不会占用这个位置

因此相对定位在页面中没有太大的作用，会影响布局

绝对定位(absolute)

有一个就近原则，假设三个嵌套标签，yeye,baba,erzi三个

  • 首先erzi去找这个baba有没有定位，如果有就根据baba为参照物

  • 如果baba没有的话，就继续往上面找

  • 看yeye有没有定位，如果有定位，就根据yeye为参照物

  • 如果yeye没有的话，就根据这个浏览器为参照物

  • 只要父标签有定位就是以父标签为参照物

        .box1 {
            width: 100px;
            height: 300px;
            background-color: rgb(113, 38, 225);
            top: 100px;
            left: 20px;
        }

        .box2 {
            width: 100px;
            height: 100px;
            background-color: red;
        }

<body>
    <div class="box1">
        <div class="box2"></div>
    </div>

</body>

img

父标签没有开启定位

        .box1 {
            width: 100px;
            /* 父标签设置为200px */
            height: 200px;   
            background-color: rgb(113, 38, 225);

        }

        .box2 {
            width: 100px;
            height: 100px;
            background-color: red;
            /* 开启绝对定位 */
            position: absolute;
            /* 因为父标签没有开启定位，因此参照物为浏览器，距离浏览器顶部的距离为300px */
            top: 300px;
        }

img

父标签开启了定位，开启定位的话，就是以父标签为参照物，就是在父标签里面

top 子元素的顶部贴着父元素的顶部

left 子元素左边贴着父元素的左边

        .box1 {
            width: 100px;
            height: 300px;
            background-color: rgb(113, 38, 225);
            position: absolute;
        }

        .box2 {
            width: 100px;
            height: 100px;
            background-color: red;
            position: absolute;
            top: 100px;

        }

img

子元素用绝对，父用相对这个是最常见的

baba没有开启定位，

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        .yeye {
            width: 400px;
            height: 400px;
            background-color: blueviolet;

        }

        .baba {
            width: 200px;
            height: 200px;
            background-color: green;
            /* position: relative; */
        }

        .erzi {
            width: 50px;
            height: 50px;
            background-color: black;
            position: absolute;
            top: 100px;
            right: 100px;
        }
    </style>
</head>

<body>
    <div class="yeye">
        <div class="baba">
            <div class="erzi"></div>
        </div>
    </div>
</body>

</html>

发现erzi是以这个浏览器为参照物的

img

baba开启定位后

        .baba {
            width: 200px;
            height: 200px;
            background-color: green;
            /* 开启定位 */
            position: relative;
        }

        .erzi {
            width: 50px;
            height: 50px;
            background-color: black;
            position: absolute;
            top: 100px;
            right: 100px;
        }

baba开启定位后，erzi就以这个baba为参照物，就是距离baba的右边为100px

img

子绝父相和子绝父绝

绝对定位和相对定位最大的区别就是：

  • 相对定位：原来的位置继续占有，相对自己原来的距离定位的

  • 绝对定位：原来的位置不占有，根据父标签是否开启定位而言，参照物

绝对定位，不会占用位置，erzi在定位的时候，可以随意的摆放

父盒子在布局的时候需要占有位置的，需要开启定位，一般是相对定位

子绝父相

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .box1 {
            width: 400px;
            height: 300px;
            background-color: green;
            /* 父标签开启了相对定位，占有原来的位置 */
            position: relative;

        }

        .box2 {
            width: 100px;
            height: 100px;
            background-color: black;
            /* 子标签开启了绝对定位 */
            position: absolute;
            top: 200px;
            right: 100px;
        }

        .box3 {
            width: 100px;
            height: 500px;
            background-color: red;

        }
    </style>
</head>

<body>
    <div class="box1">
        <div class="box2"></div>
    </div>
    /* box3与box1同级别 */
    <div class="box3"></div>

</body>

</html>

效果图

发现这个box3不会占用box1的位置，box2以这个box1为参照物了

img

子绝父绝

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .box1 {
            width: 400px;
            height: 300px;
            background-color: green;
            /* 父标签开启绝对定位，原来的位置不会被占有 */
            position: absolute;

        }

        .box2 {
            width: 100px;
            height: 100px;
            background-color: black;
            position: absolute;
            top: 200px;
            right: 100px;
        }

        .box3 {
            width: 100px;
            height: 500px;
            background-color: red;

        }
    </style>
</head>

<body>
    <div class="box1">
        <div class="box2"></div>
    </div>
    <div class="box3"></div>


</body>

</html>

效果图

box3会占有box1的地方，图中红色的框框就是box3的高度
box2会以box1为参照物

img

固定定位

就是不管页面怎么翻转，那个页面始终在这个地方

固定当前元素不会随着页面滚动而滚动

以当前浏览器为参照物，不受父元素的影响

作用：

  • 返回顶部栏

  • 固定导航栏

  • 小广告

注意：给父盒子设置固定定位，一定要加top和left属性

没有开启固定的话，页面会拖动

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box1 {
            width: 100%;
            height: 100px;
            background-color: skyblue;
        }

        .box2 {
            width: 100%;
            height: 5000px;
            background-color: red;
        }
    </style>
</head>

<body>

    <div class="box1"></div>
    <div class="box2"></div>

</body>

</html>

效果图

就是拖动页面，最上面的颜色会消失，没有固定

img

开启固定定位后

top以浏览器为参照物的，不受父元素的影响

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box1 {
            width: 100%;
            height: 100px;
            background-color: skyblue;
            position: fixed;
            top: 0;
        }

        .box2 {
            width: 100%;
            height: 5000px;
            background-color: red;
        }
    </style>
</head>

<body>

    <div class="box1"></div>
    <div class="box2"></div>

</body>

</html>

效果图：拖动页面的话，最上面的box1就固定在上面，不会随着页面的拖动而移动

img

posted @ 2026-05-27 11:04  乔的港口  阅读(1)  评论(0)    收藏  举报