CSS盒子模型详解-CSDN博客

本文链接：https://blog.csdn.net/cxycxytony/article/details/108013837

文章目录

4.1、什么是盒子
4.2、边框
4.3、内外边距
4.4、圆角边框
4.5、盒子阴影

4.1、什么是盒子

在这里插入图片描述

margin：外边距

padding：内边距

border：边框

4.2、边框

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
       /*body总有一个默认的外边距*/
       body{
           margin: 0;
       }
       /*border: 粗细 样式 颜色
		 soild 实线
		 dashed 虚线
		*/
        #box{
            width: 300px;
            border: 1px solid red;
        }
        form{
            background: #12aa17;
        }
        div:nth-of-type(1) input{
            border: 3px solid black;
        }
       div:nth-of-type(2) input{
           border: 3px solid yellow;
       }
       div:nth-of-type(3) input{
           border: 3px dashed blue;
       }
    </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>

4.3、内外边距

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--外边距的妙用：居中元素
	要求：块元素，块元素有固定的宽度
	-->
    <style>
        /*四个参数 margin:上  右  下  左*/
        /*两个参数 margin:上下  左右*/
        /*一个参数 margin：上下左右*/
        #box{
            width: 300px;
            border: 1px solid red;
            margin: 1px 2px 3px 4px;
        }
        form{
            background: #12aa17;
        }
        input{
            border: 1px solid black;
        }
        div:nth-of-type(1){
            padding: 1px;
        }
    </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.4、圆角边框

    <!--
    四个参数 border-radius:左上 右上 右下 左下
    两个参数 border-radius:左上+右下  右上+左下
    一个参数 border-radius:全部
    -->
    <style>
        div{
            width: 100px;
            height: 100px;
            border: 10px solid red;
            border-radius: 55px;
        }
    </style>

案例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*横着的半圆*/
        #div1{
            width: 100px;
            height: 50px;
            background: red;
            border-radius: 100px 100px 0px 0px;
        }
        /*竖着的半圆*/
        #div2{
            width: 50px;
            height: 100px;
            background: red;
            border-radius: 0px 100px 100px 0px;
        }
        /*扇形*/
        #div3{
            width: 100px;
            height: 100px;
            background: red;
            border-radius: 0px 100px 0px 0px;
        }
    </style>
</head>
<body>

<div id="div1"></div>
<hr>
<div id="div2"></div>
<hr>
<div id="div3"></div>
<hr>
</body>
</html>

4.5、盒子阴影

<style>
    div{
        width: 100px;
        height: 100px;
        border: 10px solid red;
        box-shadow: 10px 10px 3px yellow;
    }
</style>