CSS盒模型的使用方法（边框、内边距、外边距）

Etui۹(･༥･´)و ̑̑

于 2021-01-22 11:30:50 发布

阅读量333

点赞数

分类专栏： CSS3 HTML5

本文链接：https://blog.csdn.net/m0_47015897/article/details/112980509

版权

CSS3 同时被 2 个专栏收录

38 篇文章 15 订阅

订阅专栏

HTML5

37 篇文章 8 订阅

订阅专栏

一、边框

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>盒子模型_边框</title>

    <style>
        .box1{
            color: royalblue;
            width: 200px;
            height: 200px;
            background-color: rgb(204, 123, 109);
            /* 
                border-width: 10px;
                默认值一般都是3个像素
                border-width可以用来指定四个方向的边框
                    取值情况：
                        四个值：上 右 下 左
                        三个值：上 左右 下
                        两个值：上下 左右
                        一个值：上下左右
                    
                除了border-width还有一组 border-xxx-width
                    xxx可以是 top right bottom left
                    用来单独指定某一个边的宽度
            */

            /* 
                border-color用来指定边框的颜色，同样可以分别指定四个边的边框
                    规则和border-width一样
                
                border-color也可以省略不写，如果省略了则自动使用color的颜色值
            */
            /* 
                border-style 指定边框的样式
                    solid   表示实线
                    dotted  点状虚线
                    dashed  虚线
                    double  双线

                    border-style的默认值是none表示没有边框
            */
            /* 
                border简写属性，通过该属性可以同时设置边框所有的相关样式，并且没有顺序要求
                除了border以外还有四个border-xxx
                    border-top
                    border-right
                    border-bottom
                    border-left
            */
            
            border-width: 20px;
            border-color: tomato red;
            border-style: solid;/*默认值为none，即无类型*/
        }
        .box2{
            width: 150px;
            height: 150px;
            background-color: #dfa;
            
            border: solid 20px;
            border-bottom: solid;
            border-bottom-width: 20px;
            border-bottom-color:rgb(183, 214, 137);

            border-right-color:rgb(207, 221, 187);
            border-left-color:rgb(207, 221, 187);
            border-top-color:rgb(207, 221, 187);
        }
    </style>
</head>
<body>
    <br>
    <span class="box1">What are you 弄啥来？</span>
    <br>
    <br>
    <div class="box1"></div>
    <div class="box2"></div>
</body>
</html>

运行结果:
在这里插入图片描述
二、内边距

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>盒子模型_内边距</title>
    <style>
        .box1{
            font-size: 50px;
            width: 150px;
            height: 150px;
            background-color: #dfa;
            border:solid 10px #ff0000;
            /* 
                内边距（padding）
                    内容区和边框之间的距离是内边距
                    一共有四个方向的内边距
                        padding-top
                        padding-right
                        padding-bottom
                        padding-left

                    内边距的设置会影响盒子的大小
                    背景颜色会延伸到内边框上

            */
            padding: 10px;
            /* 
                padding 内边距的简写属性，可以同时指定四个方向的内边距
                    规则和border-width一样
            */
        }
        .inner1{
            width: 100%;
            height: 100%;
            background: yellowgreen;
        }
    </style>
</head>
<body>
    <div class="box1">
        <div class="inner1">Hello<br>World</div>
    </div>
</body>
</html>

运行结果：
在这里插入图片描述
三、外边距

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>盒子模型_外边距</title>
    <style>
        .box1{
            width:150px;
            height:150px;
            background: rgb(253, 183, 170);
            
            /* 
                外边距（margin）
                    外边距不会影响盒子的可见框的大小
                    但是外边距会影响盒子的位置
                    一共有四个方向的外边框
                        margin-top
                            上外边距，设置一个正值，元素回向下移动
                        margin-right
                        margin-bottom
                            下外边距，设置一个正值，其下边的元素会向下移动
                        margin-left
                            左外边距，设置一个正值，元素会向右移动
                        
                        margin 也可以设置负值，如果是负值则元素会向相反的方向移动
                    元素在页面中是按照自左向右的顺序排列的
                        所以默认情况下如果我们设置的左和上外边距则会移动元素
                        而设置的下和右外边距会移动其他元素

            */

            padding:20px;
            
            border: double 20px tomato;

            margin-left: 50px;
            margin-top: 50px;
            margin-bottom: 100px;
        }
        .inner{
            width: 150px;
            height: 150px;
            background-color: tomato;
        }
        
    </style>
</head>
<body>
    <div class="box1">
        <div class="inner"></div>
    </div>
    <div class="inner"></div>
</body>
</html>

运行结果：
在这里插入图片描述
积跬步，至千里！
加油！读书人！

Etui۹(･༥･´)و ̑̑

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
CSS盒模型的使用方法（边框、内边距、外边距）

一、边框<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>盒子模型_边框</title> <style> .box1{
复制链接

扫一扫