盒子模型及边框的使用

最新推荐文章于 2024-08-19 17:16:10 发布

siiove

最新推荐文章于 2024-08-19 17:16:10 发布

阅读量306

点赞数

分类专栏： CSS 文章标签： html 前端 css

本文链接：https://blog.csdn.net/qq_46423017/article/details/127017605

版权

CSS 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

本文详细介绍了CSS中的盒子模型，包括margin、padding和border的使用，展示了如何通过它们来设置元素大小和边框样式。此外，还探讨了内外边距在元素居中布局中的应用，以及如何创建圆角边框和阴影效果。同时，提供了实际的代码示例，帮助读者更好地理解和掌握这些概念。

摘要由CSDN通过智能技术生成

1、什么是盒子模型？

margin ：外边距

padding : 内边距

border : 边框

margin + border + padding + 内容宽度

2、边框

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

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

    <style>
        /*总有一个默认的外边距margin: 0; 常见操作*/
        body {
            /*外边距搞成0*/
            margin: 0;
            /*内边距*/
            padding: 0;
            /*下划线*/
            text-decoration: none;
        }

        #box {
            /*他这个默认是有个外边距的*/
            /*border：粗细，样式，颜色*/
            width: 300px;
            border: 1px solid red;
        }


        form {
            /*背景颜色*/
            background: #517851;
        }

        h2 {
            font-size: 16px;
            background-color: #517851;
            line-height: 30px;
            color: white;
        }

        /*黑色粗边框*/
        div:nth-of-type(1) input {
            border: 3px solid black;
        }

        /*黑色粗边框
        dashed 虚线
        */
        div:nth-of-type(2) input {
            border: 3px dashed #4036bb;
        }

        /*黑色粗边框
        dashed 虚线
        */
        div:nth-of-type(2) input {
            border: 2px dashed #4036bb;
        }


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

输出效果：

3、内外边距及div居中

内外边距

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

    <!--   外边距的妙用：居中元素-->
    <style>
        /*总有一个默认的外边距margin: 0; 常见操作*/
        body {
            /*外边距搞成0*/
            margin: 0;
            /*内边距*/
            padding: 0;
            /*下划线*/
            text-decoration: none;
        }

        #box {
            /*他这个默认是有个外边距的*/
            /*border：粗细，样式，颜色*/
            width: 300px;
            border: 1px solid red;
            /*    全部居中*/
            margin: 0 auto;
        }


        form {
            /*背景颜色*/
            background: #517851;
        }

        h2 {
            font-size: 16px;
            background-color: #517851;
            line-height: 30px;
            color: white;
            /*
            顺势针旋转
            margin: 0 ; 上下左右都为0
            margin: 0 1px ;
            margin: 0 1px 2px;
            margin: 0 1px 2px 3px;
            */
            margin: 0 ;
        }

        input {
            border: 1px solid black;
        }

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

    </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: 50px;
            height: 50px;
            margin: 30px;
            background: red;
            border-radius: 50px 0 0 0;
        }

        img {
            border-radius: 25px;
        }
    </style>


</head>
<body>

<div></div>

<img src="images/0918.png" alt="">

</body>
</html>

输出效果：

5、阴影

盒子阴影

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

    <style>
        div {
            width: 100px;
            height: 100px;
            border: 10px solid red;
            /*黄色阴影*/
            box-shadow: 10px 10px 1px yellow;
        }
    </style>

</head>
<body>

<div></div>

</body>
</html>

输出效果：

拓展(图片居中发光的效果)

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

    -->
    <style>
        img{
            border-radius: 16px;
            box-shadow: 10px 10px 100px yellow;
        }
    </style>
</head>
<body>
<div style="width: 500px; display: block; text-align: center">
    <img src="images/0918.png" alt="">
</div>

</body>
</html>