HTML 盒子模型

最新推荐文章于 2024-04-18 19:26:57 发布

蚂蚁的头发

最新推荐文章于 2024-04-18 19:26:57 发布

阅读量2.9k

点赞数 2

分类专栏：盒子模型文章标签： html 前端

本文链接：https://blog.csdn.net/m0_65066169/article/details/127197555

版权

盒子模型专栏收录该内容

1 篇文章 0 订阅

订阅专栏

盒子模型: 网页中所有标签默认都是标准的3D矩形
组成(自上而下):
1.边框: border
2.内容:content
3.内边距: padding
4.背景图片: background-image
5.背景颜色: background-color
6.外边距: margin

1.边框: border

边框: border
边框颜色: border-color
边框粗细:border-width
边框样式:border-style
none(取消) hidden(隐藏) solid(实线) dotted(点线) dashed(虚线) 搭配 ( border-style)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>盒子模型之边框</title>
    <style>
        div{
            width:300px;
            height: 300px;
            /*border-color:red; !*边框颜色*!*/
            /*border-width:5px ;!*边框粗细*!*/
            /*border-style:solid;!*边框样式*!*/
            /*合并*/
            /*border:5px red solid;*/
            /*border-top-color: red;*/
            /*border-top-width: 5px;*/
            /*border-top-style: solid;*/
            /*边框*/
            border-color: red blue green yellow;
            border-width: 5px 8px 2px 3px;
            border-style: solid dashed dotted double;

        }


    </style>
</head>
<body>
     <div > 你好</div>


</body>
</html>

效果如下

2.内边距: 标签内容到标签边框的距离
语法: padding - 方向: 值 ;
提醒: 理论上有4个方向 , 实际只有距离内容最近的两个方向有效

忠告: 内边距一定会导致盒子形变,最好避免使用内边距
合并:
pading : a b c d ;
pading : a b c ;
pading : a b ;
pading : a ;

方向: 上 : top 下 : bottom 垂直中: middle 左: left 右: right 水平中: center

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>盒子模型之内边距</title>
 <style>
    div{
        height: 300px;
        width: 300px;
        background: red;
        /*向右移 实际写的方向是相反的*/
        padding-left:1200px;


    }
     span{
         background:blue;
     }
     /*h1{*/
         /*background:yellow;*/
        /*!*padding-top: 50px;*!*/
         /*!*padding-bottom:50px;*!*/
         /*!*合并*!*/
         /*padding: 50px 0px;*/
     /*}*/
 </style>
</head>
<body>
     <div>
         <span>你好!</span>
     </div>

   <!--<h1>徐英岳</h1>-->
</body>
</html>

效果如下

看上面我写的代码中的:

padding-left:1200px;

这个就是调节盒子的功能,你也可以内边距的一些属性方向来自由添加,一定要多动手

3.外边距:
1.调整2个盒子之间的距离
用法 : 1. 2个盒子互相独立,调整双方位置 ,一定是外边距

2. 2个盒子有包含关系,外面盒子调整里面盒子,一定是内边距里面盒子调整自身位置,一定是外边距

忠告: 多用外边距 ,少用内边距
\语法 : margin -方向 :值;
方向: 上 : top 下 : bottom 垂直中: middle 左: left 右: right 水平中: center

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>盒子模型之外边距</title>
    <style>
        #a{
            width:500px;
            height: 500px;
            background: yellow;
            /*加个边框 两个盒子太进,会一起移动*/
            /*  transparent:透明色 */
            border: 2px solid transparent;
            box-sizing: border-box;

        }
        #b{
            width:200px;
            height: 200px;
            background: blue;
            margin-left: 500px; /*向右移动*/
            margin-bottom: 100px; /*向上移动*/
        }
    </style>

</head>
<body>
            <div id="a">

           <div id="b">
              </div>
</div>
</body>
</html>

效果如下

上面我写的代码中:

margin-left: 500px; /*向右移动*/
margin-bottom: 100px; /*向上移动*/

值是变的,根据自己的需要,自由添加,根据需要的方向,多动手

4.背景图片和背景颜色

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #a{
            width: 500px;/*设置盒子的长度*/
            height: 500px;/*设置盒子的宽度*/
            margin: 0px auto; /*使盒子位于中间*/
            background-image: url("img/jijuxie.jpg");/*设置背景图片*/
            border: solid 5px black; /*设置盒子的边框*/
        }
        #b{
            width: 500px;/*设置盒子的长度*/
            height: 500px;/*设置盒子的宽度*/
            margin: 0px auto; /*使盒子位于中间*/
            background-color: cyan;/*背景颜色,根据自己需要自由添加颜色*/
            border: solid 5px red; /*设置盒子的边框*/
        }


    </style>
</head>
<body>
<div id="a">

</div>
<div id="b">

</div>
</body>
</html>

效果如下