【前端】CSS3学习笔记（三）——盒子模型

更新时间:2023-04-03 21:30:25 阅读：评论：0

课程链接

【狂神说java】css3最新教程快速入门通俗易懂_哔哩哔哩_bilibili

学习笔记

盒子模型

<!doctype html><html lang="en"><head>    <meta chart="utf-8">    <title>title</title>    <style>        /* body 总有一个默认的外边距 */        /* 常见操作 */        body{            margin: 0;            padding: 0;            text-decoration: none;        }        /* border 粗细 样式 颜色 */        #box{            width: 300px;            border: 1px solid red;            padding: 0 0 0 0;        }        h2{            /* 去外边距 */            margin: 0;            font-size: 16px;            background-color: gold;            line-height: 30px;            color: white;        }        form{            background: gold;        }        div:nth-of-type(1) input{            border: 3px solid black;        }        div:nth-of-type(2) input{            border: 3px dashed purple;        }        div:nth-of-type(3) input{            border: 2px dashed red;        }    </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>

外边距

<!doctype html><html lang="en"><head>    <meta chart="utf-8">    <title>title</title>    <!-- 盒子计算方法    margin + border + padding + 内容宽度 -->    <!-- 外边距妙用：居中元素 -->    <style>        /* 顺时针旋转 上右下左 */        /* margin:0 全0 */        /* margin:0 1px 上下0 左右1 */        /* margin:0 1px 2px 3px 上右下左*/        #box{            width: 300px;            border: 1px solid red;            /* 上下为0 左右居中 */            margin: 0 auto;        }        h2{            margin: 0;            font-size: 16px;            background-color: gold;            line-height: 30px;            color: white;        }        form{            background: gold;        }        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>

圆角边框

边框圆角

<!doctype html><html lang="en"><head>    <meta chart="utf-8">    <title>title</title>    <!-- 左不服从调剂上 右上 右下 左下 顺时针 -->    <!-- 圆 圆角 = 半径 + 边框 -->    <style>        div{            width: 100px;            height: 100px;            border: 10px solid red;            border-radius: 10px;        }    </style></head><body>        <div></div></body>&川南幼儿师范高等专科学校lt;/html>

圆形

<!doctype html>&徽商职业技术学院lt;html lang="en"><head>    <meta chart="utf-8">    <title>title<议论文论据/title>    <style>        div{            width: 100px;            height: 50px;            background: red;            border-radius: 50px 50px 0 0;        }        img{            border-radius: 37px;        }    </style></head><body>    <div></div>    <img src="images/demo.png" alt=""></body></html>

阴影

<!doctype html><html lang="en"><head>    <meta chart="utf-8">    <title>title</title><!--    margin: auto; 居中        要求 块元素 块元素有固定的宽度-->    <style>        img{            margin: auto;            border-radius: 37px;            box-shadow: 10px 10px 50px yellow;        }    </style></head><body>    <div style="width: 1000px; height: 500px; display: block; text-align: center">        <img src="images/demo.png" alt="">    </div></body></html>