CSS——盒子模型（边框、内外边距、圆角边框、阴影）

最新推荐文章于 2022-09-24 14:35:47 发布

猿分&

最新推荐文章于 2022-09-24 14:35:47 发布

阅读量225

点赞数

分类专栏：笔记前端文章标签： css html css3

前端同时被 2 个专栏收录

47 篇文章 0 订阅

订阅专栏

笔记

6 篇文章 0 订阅

订阅专栏

什么是盒子？
margin：外边距，一个元素到最外边的距离；
padding：内边距；
border：边框；

在这里插入图片描述

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        h2,ul,li,a,body{
            /*!*body总有默认的外边距要设为0*!*/
            margin: 0;
            /*padding: 0;*/
            /*text-decoration: none;*/
        }
        #box{
            width: 300px;
            border: 1px solid gray;
        }

        h2{
            /*line-height: 30px;*/
            font-size: 16px;
            background: #C850C0;
            color: white;
        }
        form{
            background: green;
        }

        div:nth-of-type(1) input{
            border: 3px solid black;
        }
        div:nth-of-type(2) input{
            border: 3px dashed red;
        }
        div:nth-of-type(3) input{
            border: 3px dashed chartreuse;
        }


    </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: 0 0 0 0;/*上右下左 顺时针 padding同理*/

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


<!--    外边距的妙用-->
    <style>
        /*h2,ul,li,a,body{*/
        /*    !*!*body总有默认的外边距要设为0*!*!*/
        /*    !*padding: 0;*!*/
        /*    !*text-decoration: none;*!*/
        /*}*/
        #box{
            width: 300px;
            border: 1px solid gray;
            margin: 0 auto;/*上下   左右   外边距的妙用使其居中*/
        }

        h2{
            /*line-height: 30px;*/
            font-size: 16px;
            background: #C850C0;
            color: white;
        }
        form{
            background: green;
        }

        input{
            border: 1px solid black;
        }

        div:nth-of-type(1){
            padding: 10px;
        }


    </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个角

<!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: 50px 20px;/*两个钟对角相同即左上右下、右上左下；四个值的时候就是从左上开始顺时针*/
        }
    </style>


</head>
<body>
<div>

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

阴影

box-shadow: 10px 10px 1px green;/*X轴，Y轴，模糊半径，阴影颜色*/

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

<!--    margin:0 auto;实现的前提
块元素         块元素有固定的宽度
-->
    <style>
        #div1{
            width: 100px;
            height: 100px;
            border: 10px solid red;
            box-shadow: 10px 10px 1px green;/*X轴，Y轴，模糊半径，阴影颜色*/
        }
        img{
            border-radius: 90px;
            box-shadow:0 0 50px yellow;

        }
        #div2{
            width: 1000px;
            height: 500px;
            border: 10px solid red;
            margin: 0 auto;
            text-align: center;/*对内容元素进行居中。margin:0 auto；是对盒子居中*/
        }

    </style>

</head>
<body>
<div id="div1">
</div>
<div id="div2">
    <img src="image/dog.jpg" alt="">
</div>


</body>
</html>