盒子模型

最新推荐文章于 2024-08-03 09:43:52 发布

撷思、

最新推荐文章于 2024-08-03 09:43:52 发布

阅读量1.5k

点赞数 4

分类专栏：前端 2021

本文链接：https://blog.csdn.net/qq_43553062/article/details/113939226

版权

2021 同时被 2 个专栏收录

5 篇文章 0 订阅

订阅专栏

前端

4 篇文章 0 订阅

订阅专栏

一、什么是盒子模型

CSS盒子模型：CSS 假定所有的HTML 文档元素都生成了一个描述该元素在HTML文档布局中所占空间的矩形元素框，可以形象地将其看作是一个盒子。

它包括以下几个部分：

margin：外边距
border：边框
padding：内边距

二、边框

边框的粗细
边框的样式
边框的颜色

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>
        /*border：粗细、样式、颜色*/
        #box{
            width: 300px;
            border: 1px solid red;
        }
        h2{
            font-size: 16px;
            background: darkgreen;
            line-height: 30px;
            color: white;
        }
        form{
            background: darkgreen;
        }
        div:nth-of-type(1) input{
            border:3px solid black;
        }
        div:nth-of-type(2) input{
            border:3px dashed pink;
        }
        div:nth-of-type(3) input{
            border:1px dashed purple;
        }
    </style>

</head>
<body>

<div id="box">
    <h2>会员登录</h2>
    <form action="#">
        <div>
            <span>用户名：</span>
            <input type="text">
        </div>
        <div>
            <span>密码：</span>
            <input type="text">
        </div>
        <div>
            <span>邮箱：</span>
            <input type="text">
        </div>
    </form>
</div>

</body>
</html>

三、外边距

盒子计算方式：盒子大小=margin+border+padding+内容大小

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>
        /*border：粗细、样式、颜色*/
        #box{
            width: 300px;
            border: 1px solid red;
            margin: 0 auto ;
        }
        h2{
            font-size: 16px;
            background: darkgreen;
            line-height: 30px;
            color: white;
            margin:0 1px 2px 3px;
        }
        form{
            background: darkgreen;
        }
        input{
            border: 1px solid black;
        }
        div:nth-of-type(1){
            padding: 10px 2px;
        }
    </style>

</head>
<body>

<div id="box">
    <h2>会员登录</h2>
    <form action="#">
        <div>
            <span>用户名：</span>
            <input type="text">
        </div>
        <div>
            <span>密码：</span>
            <input type="text">
        </div>
        <div>
            <span>邮箱：</span>
            <input type="text">
        </div>
    </form>
</div>

</body>
</html>

四、圆角边框

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>
        /*
        左上 右上 右下 左下 ，顺时针
        圆圈：圆角 = 半径
        */
        div{
            width: 100px;
            height: 100px;
            border: 10px solid red;
            border-radius: 25px 50px;
        }
    </style>

</head>
<body>

<div></div>

</body>
</html>

五、阴影

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>
        div{
            width: 100px;
            height: 100px;
            border: 10px solid red;
            box-shadow: 10px 10px 10px green;
        }
    </style>

</head>
<body>

<div></div>

</body>
</html>