CSS------盒子模型

4.1、什么是盒子模型
在这里插入图片描述

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

4.2、边框

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

4.3、内外边距

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
<!--   body总有一个默认的外边距margin：0-->
<!--    设置默认值:
h1,ul,li,a,body{
margin:0;
padding:0;
text-decoration:none
}
-->
    <style>
        #box{
     
     
            width: 300px;
            /*
            border:粗细，样式:solid(实线)、dashed(虚线)，颜色
             */
            border: 2px solid #3d6694;

        }
        h2{
     
     
            font:oblique bolder 30px "楷体";
            text-align: center;
            background-color: #CE4A50;
            line-height: 30px;
            color: white;
            /*margin:0 上下左右都为0
              margin:0 1px  上下为0，左右为1*
              为顺时针旋转/
            margin: 2px 2px 2px 2px;
        }
        form{
     
     
            background: #3d6694;
        }
        div:nth-of-type(1) input{
     
     
            border: 2px solid gray;
        }
        div:nth-of-type(2) input{
     
     
            border: 2px solid #940710;
        }
        div:nth-of-type(3) input{
     
     
            border: 3px solid gold;
        }
    </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+内容宽度

4.4、圆角边框

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
<!--    圆：width=height=border-radius-->
    <style>
        div{
     
     
            width: 150px;
            height: 300px;
            border: 8px solid red;
            background: #CE4A50;
            /*border=radius:左上 右上 右下 左下  顺时针方向*/
            border-radius: 150px 0px 0px 150px;
        }
        img{
     
     
            border-radius: 150px;
            /*阴影*/
            box-shadow: 10px 10px 100px #CE4A50;
        }
    </style>
</head>
<body>
<div></div>
<img src="../picture/舞者.jpg" height="150" width="150"/></body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
<!--居中：maigin:0 auto
    要求：块元素，块元素有固定的宽度
-->
    <style>
        div{
     
     

        }
        img{
     
     
            border-radius: 150px;
            /*阴影*/
            box-shadow: 10px 10px 100px #CE4A50;
        }
    </style>
</head>
<body>
<div style="width: 1000px;display: block;text-align: center">
    <div style="margin: 0 auto">
        <img src="../picture/舞者.jpg" height="150" width="150"/>
    </div>
</div>

</body>
</html>

素材网站：
1、Layui

2、飞冰

3、模板之家

猜你喜欢