盒子模型CSS

sin2201

已于 2024-08-05 17:40:47 修改

阅读量974

点赞数 20

文章标签： javascript 开发语言 ecmascript

于 2024-08-03 09:43:52 首次发布

本文链接：https://blog.csdn.net/2201_76081438/article/details/140884791

版权

盒子模型是css技术所使用的一种思维模型。盒子模型是指将网页设计页面中的内容元素看作一个个装了东西的矩形盒子。每个矩形盒子都由内容、内边距、边框和外边距4个部分组成。

一、类型

盒子模型包括四种:块级盒子、内联级盒子、内联块级盒子、弹性盒子

类型	特点	包括的标签	如何转换
块级盒子	独占一行，对宽度高度支持	div ul li h1~h6	display: block;
内联级盒子	不独占一行，对宽度高度不支持	span a	display: inline;
内联块级盒子	不独占一行，对宽度高度支持	img input	display: inline-block;
弹性盒子	不论父级元素能不能放下子元素，子元素始终横向布局		display: flex;

二、组成

1、内容区(content)

可设置宽(width)高(height)、背景颜色(background-color)，都只对内容生效

2、内边距(padding)

从上开始，顺时针转,不够找对称（上下，左右）

(1).独立设置

	内边距
padding-top:30px;	上是30px
padding-right:40px;	右是40px
padding-bottom:50px;	下是50px
padding-left:60px;	左是60px

<!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>
        div{
            width: 100px;
            height: 100px;
            background-color: bisque;
            padding-top:30px;
            padding-right:40px;
            padding-bottom:50px;
            padding-left:60px;
        }
    </style>

</head>
<body>
    <div>hello</div>
</body>
</html>

运行结果：

(2).简写

	内边距
padding:50px;	上右下左都50px
padding:50px 20px;	上下50px，左右20px
padding:50px 20px 30px;	上50px，右左20px，下30px
padding:50px 20px 30px 40px;	上50px，右20px，下30px，左40px

<!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>
        .a{
            width: 100px;
            height: 100px;
            background-color: bisque;
            padding:50px;
        }
        .b{
            width: 100px;
            height: 100px;
            background-color: bisque;
            padding:50px 20px;
        }
        .c{
            width: 100px;
            height: 100px;
            background-color: bisque;
            padding:50px 20px 30px;
        }
        .d{
            width: 100px;
            height: 100px;
            background-color: bisque;
            padding:50px 20px 30px 40px;
        }
    </style>

</head>
<body>
    <div class="a">hello</div>
    <div class="b">hi</div>
    <div class="c">hei</div>
    <div class="d">ha</div>
</body>
</html>

运行结果：

3、边框区(border)

border 是一个复合属性

border-style	边框属性 solid:直线 dotted:点 dashed:虚线
border-color	边框颜色
border-width	边框宽度
border-top	上边框
border-left	左边框
border-right	右边框
border-bottom	下边框
border-top-color	上边框的颜色
border-top-width	上边框的宽度

<!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>
        .a{
            width: 100px;
            height: 100px;
            background-color: bisque;
            padding:50px;
            /* 边框属性 */
            border-style: dashed;
            /* 边框宽度 */
            border-width: 5px;
            /* 边框颜色 */
            border-color: aqua;
            /* 上边框 */
            border-top: solid 10px rgb(107, 231, 5);
            /* 上边框颜色 */
            border-left-color: brown;
        }
        
    </style>

</head>
<body>
    <div class="a">hello</div>
</body>
</html>

运行结果:

4、外边距(margin)

(1).独立设置

	外边距
margin-top:30px;	上是30px
margin-right:40px;	右是40px
margin-bottom:50px;	下是50px
margin-left:60px;	左是60px

(2).简写

	外边距
margin:50px;	上右下左都50px
margin:50px 20px;	上下50px，左右20px
margin:50px 20px 30px;	上50px，右左20px，下30px
margin:50px 20px 30px 40px;	上50px，右20px，下30px，左40px

<!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>
        .a{
            width: 100px;
            height: 100px;
            background-color: bisque;
            margin:50px;
        }
        .b{
            width: 100px;
            height: 100px;
            background-color: bisque;
            margin:50px 20px;
        }
        .c{
            width: 100px;
            height: 100px;
            background-color: bisque;
            margin:50px 20px 30px;
        }
        .d{
            width: 100px;
            height: 100px;
            background-color: bisque;
            margin:50px 20px 30px 40px;
        }
    </style>

</head>
<body>
    <div class="a">hello</div>
    <div class="b">hi</div>
    <div class="c">hei</div>
    <div class="d">ha</div>
</body>
</html>

运行结果：