4、盒子模型

最新推荐文章于 2024-09-21 23:59:03 发布

大鑫333

最新推荐文章于 2024-09-21 23:59:03 发布

阅读量49

点赞数

文章标签： css html html5

本文链接：https://blog.csdn.net/weixin_41570988/article/details/119940276

版权

4.1 什么是盒子模型

在这里插入图片描述
margin :外边距
padding:内边距
border：边框

4.2 边框

1、边框的粗细
2、边框的样式
3、边框的颜色`

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*border:粗细 ，样式，颜色*/
        #box{
            width: 300px;
            border: 1px solid red;
        }
        h2{
            font-size: 16px;
            background: green;
            line-height: 30px;
            color: white;
        }
        form{
            background: grey;
        }
        div:nth-of-type(1)>input{
            border: 3px solid black;
        }
        div:nth-of-type(2)>input{
            border: 3px solid darkgoldenrod;
        }
    </style>

</head>
<body>


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

</div>

</body>
</html>

在这里插入图片描述

4.3 内外边距

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
<!--    外边距的妙用：居中元素-->
    <style>

        #box{
            width: 300px;
            border: 3px solid red;
            margin: 0 auto;
        }
        /*顺时针
        margin:0*/
        /*margin:0 1px*/
        /*margin:0 1px 2px 3px*/
        h2{
            font-size: 16px;
            background: green;
            line-height: 60px;
            color: white;
            margin: 0;
        }
        form{
            background: grey;
        }
        input{
            border: 1px solid black;
        }
        div:nth-of-type(1){
            padding: 20px 2px;
        }
    </style>

</head>
<body>


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

</div>

</body>
</html>

盒子的计算方式：这个元素到底有多大？
margin+border+padding+内容宽度

4.4 圆角边框

<style>
        div{
            width: 100px;
            height: 100px;
            border: 10px solid red;
            border-radius: 50px ;  圆角度数
        }
    </style>