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>

2.结果