盒子模型简介及应用

最新推荐文章于 2023-04-20 23:44:11 发布

q1575290554

最新推荐文章于 2023-04-20 23:44:11 发布

阅读量384

点赞数

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

本文链接：https://blog.youkuaiyun.com/Q1575290554/article/details/125477111

版权

前端同时被 2 个专栏收录

28 篇文章

订阅专栏

css

7 篇文章

订阅专栏

这篇博客介绍了CSS中的盒子模型，包括margin、padding和border的使用，展示了如何创建和调整元素的边框。接着，文章讨论了如何实现圆形和头像的圆角效果，并演示了如何通过border-radius属性设置元素的圆角边框。此外，还讲解了如何利用box-shadow属性为元素添加阴影效果，增强视觉表现。这些技术对于前端开发者理解和美化网页布局至关重要。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1、什么是盒子模型

在这里插入图片描述

margin：外边距

padding：内边距

border：边框

2、盒子边框

<!DOCTYPE html>
<html lang=""en"">
<head>
    <meta charset=""UTF-8"">
    <title>盒子边框</title>

    <style>
        /*body总有一个默认的外边框margin：0,常见的*/
        /*body{
            margin: 0;
            padding: 0;
            text-decoration: none;
        }*/
        /*border:粗细，样式，颜色*/
        #box{
            width: 300px;
            border: 1px solid #000000;
            margin: 0 auto;
        }
        /* 顺时针选中
           margin: 1px
           margin: 1px 2px 3px;
           margin: 1px 2px 3px 4px;*/
        h2{
            font-size: 16px;
            background-color: cornflowerblue ;
            line-height: 30px;
            margin: 0px;
            text-align: center;
        }
        form{background: #008800;}
        /*div:nth-of-type(1) input{*/
        /*    border: 3px solid black;*/
        /*}*/
        /*div:nth-of-type(2) input{*/
        /*    border: 3px dashed yellow;*/
        /*}*/
        /*div:nth-of-type(3) input{*/
        /*    border: 2px dashed green;*/
        /*}*/
        input{border: 1px solid black;}
        .line{ text-indent: 1em; }
    </style>
</head>
<body>

<div id=""box"">
    <h2>会员登录</h2>
    <form action=""#"">
        <div>
            <span>用户名：</span>
            <input type=""text"">
        </div>
        <div class=""line"">
            <span>密码：</span>
            <input type=""password"">
        </div>
        <div class=""line"">
            <span>邮箱：</span>
            <input type=""text"">
        </div>

    </form>
</div>

</body>
</html>

盒子的计算方式：你这个元素到底多大？

在这里插入图片描述

margin + border + padding + 内容宽度

3、圆形

<!DOCTYPE html>
<html lang=""en"">
<head>
    <meta charset=""UTF-8"">
    <title>圆形</title>
    <style>
        div{
            width: 100px;
            height: 50px;
            border: 10px solid green;
            border-radius: 50px 50px 0px 0px;
        }
    </style>
</head>
<body>
<div></div>
</body>
</html>

4、头像圆角

<!DOCTYPE html>
<html lang=""en"">
<head>
    <meta charset=""UTF-8"">
    <title>头像圆角</title>
    <style>
        img{
            border-radius: 75px;
        }
    </style>
</head>
<body>
<img src=""image/1.jpeg"" alt=""猫"">
</body>
</html>

5、圆角边框

<!DOCTYPE html>
<html lang=""en"">
<head>
    <meta charset=""UTF-8"">
    <title>边框圆角</title>

    <!--
    左上 右上 右下 左下 顺时针方向-->

    <style>
        div{
            width: 100px;
            height: 100px;
            border: 10px solid green;
            border-radius: 50px;
        }
    </style>

</head>
<body>

<div></div>

</body>
</html>

6、盒子阴影

<!DOCTYPE html>
<html lang=""en"">
<head>
    <meta charset=""UTF-8"">
    <title>盒子阴影</title>
    <!--box-shadow: 宽 高 模糊度 颜色-->
    <style>
        img{
            margin: 0 auto;
            border-radius: 75px;
            box-shadow: 10px 10px 100px green;
        }
/*        div{
            width: 100px;
            height: 100px;
            border: 10px solid green;
            box-shadow: 10px 10px 100px brown;
        }*/
    </style>

</head>
<body>
<div></div>
<img src=""image/1.jpeg"" alt=""猫"">
</body>
</html>