CSS盒模型

最新推荐文章于 2024-08-06 21:40:45 发布

分解机226

最新推荐文章于 2024-08-06 21:40:45 发布

阅读量166

点赞数 2

分类专栏：前端网页开发文章标签： css 前端 CSS页面美化

转载请标明出处

本文链接：https://blog.csdn.net/qq_64281750/article/details/124926323

版权

前端网页开发专栏收录该内容

12 篇文章 0 订阅

订阅专栏

CSS盒模型在控制页面布局的应用中非常重要，页面上所有的元素，包括文本，图像超链接，div块，都可以被看作盒子，有盒子将这些元素包裹在一个矩形块内，这个区域就叫做盒模型。

盒模型包括由内到外的内容、填充、边框、边界。

margin是边界、border是边框、padding是填充、中间的蓝色就是内容。

内容

内容是必须含有的部分，可以是网页上的任何元素，如文本、图片、视频。内容的大小由属性高度和宽度定义。语法格式如下

width：auto | length；

height：auto | length；

auto表示高度和宽度可以根据内容进行自我调整，length是长度值或百分比值，百分比值是根据父对象的大小来计算当前盒子的大小。来看一个例子

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <style type="text/css">
            .box1{
                height: 60px;
                width: 100px;
                background-color: aqua;
            }
            .box2{
                height: 20px;
                width: 70%;
                overflow: auto;
                background-color: bisque;
            }
        </style>
    </head>
    <body>
        <div class="box1">第一个盒子固定大小。</div>
        <div class="box2">第二个盒子可变盒子
            卡刷点卡大喊大叫卡死打算阿大大大撒大撒d安徽省
            氨基酸快回答大口大口的啊爱上尽快哈打开就是大s阿什顿
            撒可见度哈萨克觉得阿
        </div>
    </body>
</html>

在这个例子中如果信息太多会超出width和height属性，盒子的大小将自动放大，为了更好的理解我们可以使用overflow来处理一下；

overflow:auto | visible | hidden | scroll；其中auto表示盒子内容自动调整是否显示滚动条，visible表示是否显示所有内容，不受盒子的大小限制，hidden表示隐藏超出盒子的范围内容，scroll表示始终显示滚动条，（大家下来可以把每个属性都试一下）

边界

边界是盒模型与其他盒模型之间的距离，使用margin属性定义，语法格式如下，

margin：auto|length；

length是长度值或百分比值，长度可以为负值，从而实现盒子的叠加，也可以使用margin的4个子属性margin-top、margin-botton、margin-left、margin-right来定义盒子四周的边界值，来看一个例子

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <style type="text/css">
            div{
                height: 100px;
                width: 100px;
            }
            .m1{
                overflow: scroll;
                margin: 10px;
            }
            .m2{
                overflow: visible;
                margin-top: 10px;
                margin-bottom: 20px;
                margin-left: 20px;
                margin-right: 40px;
            }
        </style>
    </head>
    <body>
        <div class="m1"><img src="C:\Users\dell\Desktop\前端\132.jpg" width="120" height="160"/></div>
        <div class="m2"><img src="132.jpg" width="120" height="160"/></div>
    </body>
</html>

大家可以在自己的电脑上面跑一跑。这样有助于理解。

填充

填充用来设置内容和盒子边框之间的距离。语法格式如下

padding:length;

直接上例子

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <style type="text/css">
            div{
                height: 100px;
                width: 100px;
                background-color: chartreuse;
                margin: 10px;
            }
            .p1{
                padding: 20px;
            }
            .p2{
                padding: 10px 20px 30px 40px ;
            }
        </style>
    </head>
    <body>
        <div class="p1">填充设置1</div>
        <div >无填充设置</div>
        <div class="p2">填充设置2</div>
    </body>
</html>

上面3个div元素高度都为40px，而填充设置1的实际高度是80px。这是因为它的padding属性设置为20px，超出了其设置的高度，因此其实际高度上下均增加了20px。

边框

边框是介于填充和边界之间的分界线，可用border-style、border-width、border-color属性来设置样式、宽度、颜色，也可以在border后面直接添加3个属性的对应值，用空格隔开。

1.边框样式

none:无边框，默认值

hidden：隐藏边框

dashed：点划线构成的虚线边框

dotted：点构成的虚线边框

double：双实线边框

groove：根据color值，显示3D凹槽边框

ridge：根据color值，显示3D凸槽边框

inset：根据color值，显示3D凹槽边框

outset：根据color值，显示3D凸槽边框

边框宽度

该属性用border-width来描述，值可以是关键字medium、thin、thick、长度值或百分比。

边框颜色

属性border-color是用来描述边框的颜色。

来个例子

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <style>
            div{
                width: 200px;
                background-color: aquamarine;
                margin: 10px;
                padding: 10px;
            }
            .b1{
                border-style: inset;
                border-width: thick;
                border-color:cadetblue;
            }
            .b2{
                border-style: double;
                border-width: thick;
                border-color: yellowgreen;
            }
            .b3{
                border: groove thin rgb(red, green, blue);
            }
            .b4{
                border: #000 medium dashed;
            }
        </style>
    </head>
    <body>
        <div class="b1">边框设置1</div>
        <div class="b2">边框设置2</div>
        <div class="b3">边框设置3</div>
        <div class="b4">边框设置4</div>
    </body>
</html>

分解机226

关注

2
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
0
评论
CSS盒模型

CSS盒模型在控制页面布局的应用中非常重要，页面上所有的元素，包括文本，图像超链接，div块，都可以被看作盒子，有盒子将这些元素包裹在一个矩形块内，这个区域就叫做盒模型。盒模型包括由内到外的内容、填充、边框、边界。margin是边界、border是边框、padding是填充、中间的蓝色就是内容。内容内容是必须含有的部分，可以是网页上的任何元素，如文本、图片、视频。内容的大小由属性高度和宽度定义。语法格式如下width：auto | length；height：auto | len
复制链接

扫一扫