盒子模型

为什么提出盒子模型呢？因为…，要实现

图3=========================

进入任何一个登录界面，单击右键，点击查看元素，你就会看到右下角的盒子模型，如下

图2================================

了解盒子模型的一些组成

图1===========================

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

一、边框

border

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    
<!--先写div-->
<!--再写标题-->
<!--再写form标签选择器-->
<!--再写div-->
<!--再使用span独立写-->
<!--再使用input输入-->
   
    <div id="box">
        <h2>会员登录</h2>
        <form action="a">
            <div>
                <span>用户名：</span>
                <input type="text">
            </div>
        </form>

        <form action="a">
            <div>
                <span>密码：</span>
                <input type="text">
            </div>
        </form>

        <form action="a">
            <div>
                <span>登录</span>
                <input type="text">
            </div>
        </form>
    </div>

</body>
</html>

这段代码运行结果：

图4==========================

很难看吧。

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

    <style>
        /*body{
            !*初始化操作*!
            !*因为总有一个默认的数据，因此一开始都设置为0*!
            margin: 0;
            padding: 0;
            text-decoration: none;
        }*/
        #box{
            width:300px;
            /*border: 粗细 样式 颜色*/
            /*solid: 实线*/
            /*dashed: 虚线*/
            border:1px solid black;
        }
        /*标题设置*/
        h2{
            font-size: 20px;
            background-color: hotpink;
            line-height: 30px;
            margin: 0;
            color: white;
        }
        /*设置标签选择器的一些属性*/
        form{
            background: chartreuse;
        }
        /*接下来进行输入框的设计,会将后面的input输入框全改了*/
        div:nth-of-type(1) input{
            border:1px solid hotpink;
        }

    </style>

</head>
<body>

    <div id="box">
        <h2>会员登录</h2>
        <form action="a">
            <div>
                <span>用户名：</span>
                <input type="text">
            </div>
        </form>

        <form action="a">
            <div>
                <span>密码：</span>
                <input type="text">
            </div>
        </form>

        <form action="a">
            <div>
                <span>登录</span>
                <input type="text">
            </div>
        </form>
    </div>

</body>
</html>

图5==================================

边框就先说到这里

二、内外边距

外边距（margin）作用：居中

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

    <style>

        #box{
            width:300px;
            /*border: 粗细 样式 颜色*/
            /*solid: 实线*/
            /*dashed: 虚线*/
            border:1px solid black;
            /*margin: 上下边距 左右边距（这里采用的是自动左右居中）*/
            margin: 0 auto;
            /*
            margin-top: 0px; 上
            margin-bottom: 0px; 下
            margin-left: 0px; 左
            margin-right: 0px; 右
            */
        }

        h2{
            font-size: 20px;
            background-color: hotpink;
            line-height: 30px;
            margin: 0;
            color: white;
        }

        form{
            background: chartreuse;
        }

        div:nth-of-type(1) input{
            border:1px solid hotpink;
        }

    </style>

</head>
<body>

<div id="box">
    <h2>会员登录</h2>
    <form action="a">
        <div>
            <span>用户名：</span>
            <input type="text">
        </div>
    </form>

    <form action="a">
        <div>
            <span>密码：</span>
            <input type="text">
        </div>
    </form>

    <form action="a">
        <div>
            <span>登录</span>
            <input type="text">
        </div>
    </form>
</div>

</body>
</html>

图6=====================================

内边距（padding）

div:nth-of-type(1){
    /*padding：上下边距 左右边距*/
	padding: 10px 2px;
}

盒子的计算方法：

图7================================

margin + border + padding + 内容宽度

三、圆角边框

border-radius

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div{
            width: 100px;
            height: 100px;
            border:10px solid black;
            /*border-radius: 从左上开始顺时针方向设置圆角弧度*/
            /*否则会以对角形式相匹配*/
            border-radius: 18px;
        }
    </style>
</head>
<body>
<div>

</div>
</body>
</html>

四、盒子阴影

box-shadow

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

    <!-- margin: 0 auto; 居中
    要求： 块元素，块元素有固定的宽度
    -->
    <style>
        img{
            border-radius: 50px;
            box-shadow: 10px 10px 100px yellow;
        }
    </style>

</head>

<body>

</--将其居中，另一种操作方法-->
<div style="width: 500px;display: block;text-align: center">
    <img src="images.PNG" alt="">
</div>

</body>
</html>

来源：CSDN

作者：@999

链接：https://blog.csdn.net/weixin_45683851/article/details/104101661

标签

margin

form