DIV布局
- div标签是块级元素，本身没有意义，用于其他元素的容器，由于div自带折行效果，因此div默认是列排列
// 两个div默认列排列
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<div style="background-color: black; width: 100px ; height: 100px;">
</div>
<div style="background-color: blue; width: 100px; height: 100px;">
</div>
</body>
</html>
效果图：
- 通过style元素可以改变div的排列和布局
- float属性，float浮动布局
// style元素的float属性 left是之后从左往右排列，right是从右边向左排列
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<div style="background-color: black; width: 100px ; height: 100px;">
</div>
<div style="background-color: blue; width: 100px; height: 100px;float: left;">
</div>
<div style="background-color: red; width: 100px; height: 100px;float: left;">
</div>
</body>
</html>
效果图：
- 宽高和背景颜色布局
// height:设置div的高; width：设置div的宽 (高600px，宽800px)
<div style="width=800px; height-600px; ">
···
</div>
//background-color ：背景设置颜色
- margin的外联样式
//margin : 设置div的外延边距，即到父容器的距离(上->右->下->左)
//margin-left:到父容器左边框的距离
//margin-right:到父容器有边框的距离
//margin-top:到父容器上边框的距离
//margin-bottom:到父容器下边框的距离
<div style="background-color: black ;width :600px ; height:400px; margin : 100px 200px 300px 100px">
<div style="background-color:blue; width:200px; height:100px;">
···
</div>
</div>
效果图：
- padding的内联样式
// padding设置div的内联边距，即到子容器的距离
//padding-left:左内边距
//padding-right:右内边距
//padding-top:上内边距
//padding-bottom:下内边距
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<div style="padding: 100px 150px 200px 100px; background-color: blue;width: 600px ; height: 400px;">
<div style="background-color: white; width: 200px; height: 100px;" >
</div>
</div>
</body>
</html>
效果图：
不管是外联还是内联都要考虑容器本身大大小，最好以左上点为原点
- position的布局定位改变div的位置
// relative定位设置左上定点定位
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<div style="background-color: blue;width: 200px ; height: 200px;">
<div style="position:relative;top:10px; left: 10px ; background-color: white; width: 140px; height: 140px;" >
···
</div>
</div>
</body>
</html>
效果图：
// absolute设置left,right,top,bottom进行绝对定位（也可以只使用左上的点定位）,z-index设置div层叠顺序
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<div style="position:absolute; top:50px; left:50px; background-color:red; width: 200px ; height: 200px;">
</div>
<div style="position:absolute; top:60px; left: 60px; background-color: green; width: 150px; height: 150px;" >
</div>
<div style="position:absolute; top:70px; left: 70px; background-color: orange; width: 100px; height: 100px;" >
</div>
</body>
</html>
在第二个div中加入z-index体现层叠效果（下图中绿色将黄色覆盖了）
z-index：1
效果图：
// fixed相对于浏览器窗口定位，不管窗口如何变化，位置都不变始终以原窗口的距离为准
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<div style="position: fixed; top: 210px; left: 210px; background-color: red; width: 400px; height: 300px;"></div>
</body>
</html>
效果图（定义以整个浏览器窗口为准，缩小窗口布局指挥损失不会适应变化）：
// static默认值，系统默认
- style的其他属性
1、font:指定DIV中文本的样式。
说明：font后可以跟文本样式的多个属性，如字粗细、字大小、字体等。
2、font-family:设置要用的字体名称。
3、font-weight:指定文本的粗细。
4、font-size:指定文本的大小。
5、font-style:指定文本样式。
6、color:指定文本颜色。
7、text-align:指定文本水平对齐方式。
8、text-decorator:用于文本的修饰。
9、text-indent:设置文本的缩进。
10、text-transform:设置文本的字母大小写。
11、direction:内容的流向。
12、line-height:指定文本的行高。
13、Word-spacing:字间距。
14、border:设置DIV的边框样式。
15、border-width:设置边框的宽度。
16、border-color：设置边框的颜色。
17、border-style:设置边框的样式。
18、background-position:在DIV中定位背景位置。
上面的布局style的内容均可在css中实现，而且一般我们均用css和html结合布局。
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。
文章由极客之音整理，本文链接：https://www.bmabk.com/index.php/post/156347.html
