14、盒子模型及边框使用-CSDN博客

本文链接：https://blog.csdn.net/Prince140678/article/details/120386612

4、盒子模型

4.1、什么是盒子模型

在这里插入图片描述

margin:外边距

padding：内边距

border：边框

4.2、边框

1.边框的粗细

2.边框的样式

3.边框的颜色

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <style>
            /*body总有一个默认的外边距margin:0，常见操作*/
          /*  h1,ul,li,a,body {
                margin:0;
                padding:0;
                text-decoration: none;
            }*/
            /*border:粗细，样式，颜色*/
            #box {
                width:300px;
                border: 1px solid red;
            }

            h2 {
                font-size: 16px;
                background-color: #11800e;
                line-height: 30px;
                color: wheat;
            }
            form {
                background: #24D4FD;
            }
            div:nth-of-type(1) input {
                border: 3px solid black;
            }
            div:nth-of-type(2) input {
                border: 4px dashed #80342a;
            }
            div:nth-of-type(3) input {
                border: 5px solid #B721FF;
            }
        </style>
    </head>
    <body>
        <div id="box">
            <h2>会员登录</h2>
            <form action="#">
                <div>
                    <span>用户名：</span>
                    <input type="text">
                </div>
                <div>
                    <span>密码：</span>
                    <input type="password">
                </div>
                <div>
                    <span>邮箱：</span>
                    <input type="text">
            </form>

        </div>

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

彩蛋

1.修改百度一下外边距

修改前

1)css:

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-7T7flIpt-1632068292717)(C:\Users\Administrator\Desktop\学习笔记\前端学习\CSS\14、盒子模型及边框使用.assets\image-20210920001701337.png)]$

2)盒子模型

修改后：

1）css

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-wo7CLEjL-1632068292720)(C:\Users\Administrator\Desktop\学习笔记\前端学习\CSS\14、盒子模型及边框使用.assets\image-20210920001510509.png)]$