前端学习11 | 盒子模型以及溢出属性

最新推荐文章于 2023-03-23 13:38:19 发布

printfbaozw

最新推荐文章于 2023-03-23 13:38:19 发布

阅读量594

点赞数 1

文章标签：前端学习 css

本文链接：https://blog.csdn.net/printfbaozw/article/details/129262802

版权

文章目录

前言
一、盒子模型
二、溢出属性
总结

前言

css定义所有的元素都可以拥有像盒子一样的外形和平面空间，即都包含边框、边界、补白、内容区，这就是盒子模型。
长文本溢出盒子时，我们就要用到溢出属性，来避免。

一、盒子模型

以下是一些定义
在这里插入图片描述
我们可以通过代码来演示情况：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{
            width: 500px;
            height: 500px;
            background-color: darkgray;
            text-align: justify;
            padding: 30px;
        }
    </style>
</head>
<body>
    <div>
        Lorem, ipsum dolor sit amet consectetur adipisicing elit. Explicabo vero fuga libero
         consectetur pariatur ipsa distinctio accusamus recusandae nisi aspernatur, culpa 
         atque nesciunt! Fugit libero, sapiente recusandae nisi numquam similique.
    </div>
</body>
</html>

运行后，我们在浏览器检查我们生成的盒子，我们可以看到：
在这里插入图片描述
与我们设置的值相等。

1.内边距 padding

padding属性的值可以设置为多个：

1个值，四个方向一样
2个值，第一个代表上和下，第二个代表左和右
3个值，上，左右，下
4个值，上、右、下、左（顺时针）

可以设置为0，不过一般我们会用padding-right/top/left/bottom，来特指我们修改的边距。

2.边框 border

border: 10px solid red;

我们可以加入以上语句，并观察效果，三个属性分别为宽度，样式，颜色。
对于样式，我们还有以下属性：

solid 实线
double 双线
dashed 线段线
dotted 点状线

根据padding的属性，我们也可以通过border-right/top/left/bottom来修改。

3.外边距 margin

margin与padding用法基本一样，这里不再赘述。
margin可以取负值。
margin：0 auto可以快速设置为中间。

二、溢出属性

当文字过多时，超过我们盒子的范围，我们就需要溢出属性。我们先输入以下代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{
            width: 200px;
            height: 200px;
            background-color: aquamarine;
            /*overflow: visible;/*溢出元素会显示在元素外*/
            /*overflow: hidden;/*对文本进行裁剪，显示不全*/
            /*overflow: inherit;/*继承父效果*/
            overflow: scroll; /*产生滚动条*/
        }

    </style>
</head>
<body>
    <div>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. 
        Consequuntur alias, necessitatibus eveniet in dignissimos
         eum similique quo. Consectetur, placeat minima expedita
          in et illum vero accusantium culpa iste ab hic!
    </div>
</body>
</html>

这时我们运行，结果为：
在这里插入图片描述
当不溢出时，也会存在滚动条，所以我们将属性值改为auto，这样在不溢出时，也不会产生滚动条。

其他属性值已经在代码注释中给出，这里不展示运行结果。

当我们按照如上方法来写时，我们就可以得到以下结果：
在这里插入图片描述
这就是一般网页通用的处理方法