大家好，欢迎来到IT知识分享网。
目录
1. 什么是DIV
1.1 div是什么意思？
div全称是DIVision，也是对层叠样式表进行定位，很多时候，我们都称为图层，div为html中的内容提供图层结构等其他元素。
1.2 div标签怎么用？
<div></div>,div是一个块级元素，以便于对元素进行格式化，把文档分割成独立的板块，并且不和其他元素进行关联，一般情况下，div都是使用id和class来进行标记。
1.3 div布局优势?
使用div布局网站的时候，可以减少网站的代码，现在都喜欢用css+div去布局网站，因为修改比较方便。div精简了很多代码，当然页面的加载速度也提高了，同时网站页面也不会出现错乱。
1.4 DIV作用是什么？
DIV主要的作用就是起分割的作用，一般常用的标签都是使用div进行分割，并且把样式进行分割
1.5 有哪些DIV方式
在HTML网页中根据编写CSS方式的不同可以将CSS分为三类：行内样式、内部(嵌)样式、外部样式
1.5.1行内样式
通过style属性直接编写在标签中，多个样式规则之间使用分号隔开
语法:
<p style=”样式规则”></p>注意：行内样式只对当前标签生效
<p style=”color: red; font-size: 20px;”>大家好</p>
1.5.2内嵌样式
注意：内嵌样式在当前页面中有效
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
p{
color: red;
font-size: 20px;
}
</style>
</head>
<body>
<p>大家好</p>
</body>
</html>1.5.3外部样式
注意：外部样式可以用在同一个网站的多个网页中，只需要在各个页面中去引用外部样式即可
1.6 样式使用规则
2.DIV盒子
2.1盒子模型
1.外边距 -上下外边距重叠 -左右外边距相加 -margin : 上右下左 [或者margin-top:x;margin-left:y;…]
2.内边距 -块内部的内容是否顶着边框,看内边距. -padding : 上右下左 套路与margin相同
3.居中 -块居中(横向居中) : margin:0 auto -块内内容居中 : text-align:center
页面中的所有元素都可以看成一个盒子，占据着一定的页面空间。
一个盒子的完整大小由：内容content+内边距padding+边框border+外边距margin组成
2.2外边距相关属性
margin：外间距,边框和边框外层的元素的距离
margin写法:
margin:10px;/*上下左右四个方向距离相同*/
margin: 10px 20px 30px 40px;/*四个方向：上,右,下,左（顺时针）*/
margin: 10px 20px;/*四个方向：上下,右左（顺时针）*/
margin:10px 20px 30px; /*第一个用于上，第二个用于右-左，第三个用于下*/
属性名 描述 取值 margin 四个方向的距离 top;right;bottom;left margin-top 上间距 数值 margin-bottom 下间距 数值 margin-left 左间距 数值 margin-right 右间距 数值
如果想让一个元素居中显示，只需设置:margin:0 atuo;即可
2.3内边距相关属性
padding：内间距,元素内容和边框之间的距离((top right bottom left))
用法与margin相同
| 属性名 | 描述 | 取值 |
|---|---|---|
| padding | 四个方向的距离 | top;right;bottom;left |
| padding-top | 上间距 | 数值 |
| padding-bottom | 下间距 | 数值 |
| padding-left | 左间距 | 数值 |
| padding-right | 右间距 | 数值 |
2.4 补充
免责声明：本站所有文章内容,图片，视频等均是来源于用户投稿和互联网及文摘转载整编而成，不代表本站观点，不承担相关法律责任。其著作权各归其原作者或其出版社所有。如发现本站有涉嫌抄袭侵权/违法违规的内容,侵犯到您的权益，请在线联系站长,一经查实,本站将立刻删除。 本文来自网络,若有侵权，请联系删除，如若转载，请注明出处：https://haidsoft.com/111144.html
