了解css（div+网页布局）
程序员文章站
2022-04-19 18:45:18
...
一、div、span
1、div和span在整个html中是没有任何意义，它们的存在是为了应用css样式；div和span的区别在于div是块级元素，span是内联元素。
如下所示：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>div + css 布局</title>
</head>
<style type="text/css">
div{
background: #00FFFF;
}
span{
background: #FF6600;
}
</style>
<body>
<div> 块级元素</div>
<br />
<span> 内联元素</span>
<span> 内联元素</span>
<span> 内联元素</span>
</body>
</html>
效果显示：
二、盒模型
.div1{
background: #00FFFF;
height:100px;/* 盒子高度 */
width: 100px;/* 盒子宽度 */
margin:5px ;/* 盒子外边距 */
padding: 3px;/* 盒子内边距 */
border: solid #000000 1px;/* 盒子的边框宽度 */
}
效果展示：
三、布局相关的属性
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>div + css 布局</title>
</head>
<style type="text/css">
.div1{
background: #00FFFF;
height:100px;/* 盒子高度 */
width: 100px;/* 盒子宽度 */
/* 1)position定位方式：relative(正常定位),
absolute(根据父元素进行定位)
fixed(根据浏览器窗口进行定位),
static(没有定位),
inherit(继承)*/
position: absolute;
/* 2)定位，需要配合position属性一起用才会显示效果:left(左),reght(右),top(上),bottom(下) */
top: 150px;
/* 3)z-index 层覆盖先后顺序(优先级):取值范围:0-1之间,auto(自动) */
z-index: auto;
/* 4)display显示属性:none(层不显示),
block(块状显示，在元素后面换行，显示下一个块元素)
inline(内联显示，多个块可以显示在一行内)*/
display: inline;
/* 5)float浮动属性 :left(左浮动) right(右浮动)*/
float: right;
/* 6)清除浮动 */
clear: both;
/* 7)溢出处理:hidden(隐藏超出层大小的内容),scroll(无论内容是否出去层大小都添加滚动条),
auto(超出时自动添加滚动条) */
overflow: auto;
}
</style>
<body>
<div class="div1">div1的背景颜色</div>
</body>
</html>
下一篇： 表格元素布局