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>
效果图：
- div的排列和布局可以通过style元素改变
- 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 : 设置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设置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默认值，系统默认
- 风格的其他属性
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中定位背景位置。
上述布局样式的内容可以用css来实现，一般我们使用css和html来组合布局。
. . .
相关推荐
最新推荐
单测试模拟私有属性赋值
34天前
tomcat整体设计解析
31天前
DOM ------ 下拉菜单
31天前
SCI 投稿状态流程
30天前
ch2_4 单链表的 反转；
30天前
一、Gin开篇
29天前
ads via 小工具