自学CSS盒子模型

最新推荐文章于 2024-09-12 16:25:48 发布

qingchuanyikong

最新推荐文章于 2024-09-12 16:25:48 发布

阅读量124

点赞数 1

文章标签： css 前端

本文链接：https://blog.csdn.net/qingchuanyikong/article/details/139625219

版权

1.完整的盒子模型由：元素（内容），内边距（padding），边框（border）和外边距（margin）组成

2.一个简单的边框设置：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>盒子模型</title>
    <style>
        /* 边框的粗细 */
        .c1{

            /* 边框的颜色：
            一个值为四面一个颜色/两个值为上下、左右一个颜色
            /三个值为上、左右、下一个颜色/四个值四面四个颜色 */

            /* border-color: red; */

            /* 边框的粗细:
            一个值为四面一个粗细/两个值为上下、左右一个粗细
            /三个值为上、左右、下一个粗细/四个值四面四个粗细 */

            /* border-width: 3px 5px 3px 5px; */

            /* 边框的样式:
            none - 默认
            hidden - 加厚
            solid - 细线
            double - 双线 */

            /* border-style: solid; */

            /* 复合写法 */
            border: 3px solid aquamarine;
        }
    </style>
</head>
<body>
    <div class="c1">恭喜发财</div>
</body>
</html>

3.内外边距的显示：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>盒子模型</title>
    <style>
        div{
            height: 200px;
            width: 200px;
            border: 10px solid black;
            margin: 10px;
            padding: 10px;
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

4.案例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>案例</title>
    <style>
        .box{
            width: 300px;
            border: 1px solid black;
            /* 盒子居中，前提要有限定宽度 */
            margin: auto;
        }

        h2{
            font-size: 15px;
            background-color: aquamarine;
            height: 35px;
            /* 盒子高度和行高一样，则文本内容将垂直居中对齐 */
            line-height: 35px;
            /* 消去h2的外边距 */
            margin-top: 0px;
            margin-bottom: 0px;
            /* 内边距的设置 */
            padding-left: 100px;
        }

        form{
            background-color: pink;
        }
        div:nth-of-type(1) input{
            border: 3px solid red;
        }
        div:nth-of-type(2) input{
            border: 3px solid yellow;
        }
        div:nth-of-type(3) input{
            border: 3px solid green;
        }

        /* 每个边框下部相隔一定距离 */
        div{
            margin-bottom: 10px;
        }

        /* 消去下部的距离 */
        form div:last-child{
            margin-bottom: 0px;
        }
    </style>
</head>
<body>
    <div class="box">
        <h2>会员登录</h2>
        <form action="#">
            <div>
                <strong class="name">姓名:</strong>
                <input type="text">
            </div>
            <div>
                <strong class="name">邮箱:</strong>
                <input type="text">
            </div>
            <div>
                <strong class="name">电话:</strong>
                <input type="text">
            </div>
        </form>
    </div>
</body>
</html>