HTML（div盒子模型）

系列文章目录前言提示：这里可以添加本文要记录的大概内容：例如：随着人工智能的不断发展，机器学习这门技术也越来越重要，很多人都开启了学习机器学习，本文就介绍了机器学习的基础内容。提示：以下是本篇文章正文内容，下面案例可供参考一、pandas是什么？示例：pandas 是基于NumPy 的一种工具，该工具是为了解决数据分析任务而创建的。二、使用步骤1.引入库代码如下（示例）：import numpy

叮定

9724人浏览 · 2021-03-25 14:11:10

叮定 · 2021-03-25 14:11:10 发布

HTML（div盒子模型）

div块标签
盒子模型
块标签与行内标签的转换

一、标签

1.div块标签
div块标签和span行内标签都是使用属性style确定其他属性

<div style="border: 1px solid blueviolet">div测试</div>

在这里插入图片描述
div块标签独占一行
使用选择器实现div多样式设置
head：

<style>
    #d1{
        border:  1px solid brown;
        color: blue;
        background-color: bisque;
        width: 100px;
        height: 25px;
    }
</style>

body：

<div id="d1">div测试</div>

在这里插入图片描述
2.盒子模型
（1）内边距设置
内边距设置之后块向着四个边的方向分别外扩设置的值，而不是内扩
/四边同时设置/

padding: 100px;

在这里插入图片描述
如最后一个图所示，是将四个边都设置为内边距为100px得到的块

/上下设置、左右设置/

padding: 500px 250px;

在这里插入图片描述
/四个边分别设置/

 /*第一种方法*/
padding: 100px 200px 300px 400px;
/*第二种方法*/
padding-top: 100px;
padding-right: 200px;
padding-bottom: 300px;
padding-left: 400px;

在这里插入图片描述
使用第一种方法分别设置四边内边距时，数值的顺序是从上方开始的顺时针转动

（2）外边距
外边距的设置方法与内边距相同，但是将内边距的属性padding换成margin
/四边同时设置/

margin: 100px ;

在这里插入图片描述
/上下设置、左右设置/

margin: 100px 50px;

在这里插入图片描述
/四边分别设置/

/*第一种方法*/
margin: 100px 200px 300px 400px;
/*第二种方法*/
margin-top: 100px;
margin-right: 200px;
margin-bottom: 300px;
margin-left: 400px;

在这里插入图片描述
（3）使用外边距使块居中
利用margin属性使块剧中操作
使用margin设置的上下、左右两两设置的方法，上下不设置，左右设置为auto（自动）

margin: 0px auto;

在这里插入图片描述
3.块标签转换行内标签
行内标签不具有居中、内边距、外边距等属性，有时候需要对行内标签进行操作时不起作用、就需要将行内标签转为块标签
使用display属性进行转换：当display=inline时，块标签转行内标签；当display=block时，行内标签转块标签

二、所有源码及结果

1.源码

代码如下（示例）：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>盒子模型</title>
    <style>
        #d1{
            border:  1px solid brown;
            color: blue;
            background-color: bisque;
            width: 100px;
            height: 25px;
        }
        /*内边距*/
        /*.d2{
            border:  1px solid brown;
            color: blue;
            background-color: bisque;
            width: 100px;
            height: 25px;
!*            !*四个边同时设置*!
            padding: 100px;
            !*上下设置、左右设置*!
            padding: 100px 250px;
            !*四个边分别设置*!
            !*第一种方法*!
            padding: 100px 200px 300px 400px;*!
            !*第二种方法*!
            padding-top: 100px;
            padding-right: 200px;
            padding-bottom: 300px;
            padding-left: 400px;
        }*/
        /*外边距*/
        .d2 {
            border: 1px solid brown;
            color: blue;
            background-color: bisque;
            width: 100px;
            height: 25px;
/*
            margin: 100px ;
*/
/*
            margin: 100px 50px;
*/
            /*第一种方法*/
/*
            margin: 100px 200px 300px 400px;
*/
            /*第二种方法*/
          /*  margin-top: 100px;
            margin-right: 200px;
            margin-bottom: 300px;
            margin-left: 400px;*/
            /*使用margin属性居中块*/
            margin: 0px auto;
        }

    </style>
</head>
<body>
<!--div块标签-->
<div style="border: 1px solid blueviolet" >div测试</div>
<!--选择器设置-->
<div id="d1">div测试</div>
<div class="d2">div测试</div>
</body>
</html>