一.Div 标签,布局,把网页划分区域
二.1.Margin 元素与外边的距离
2.padding,袁术与内容的距离
1. <style type="text/css">
#dl{width:200px;height:200pxborder:solid 1px #0F3;;}
#d2{width:200px;height:200pxborder:solid 1px #0F3;margin:10px;}
</style>
<title>无标题文档</title>
</head>
<body>
<div id=dl >nnnnn</div>
<div id=d2 >nnnnn</div>
</body>
可以前后左右设置
#d2{width:200px;height:200pxborder:solid 1px #0F3;margin:10px 29px 30px ;}
上 左右 下
三.显示属性 Display。设置值:block 块元素 inline行元素 lis-titem 列表属性 none
Display:block:由于行元素不能调整大小等属性,所以可以用此属性吧其转换为块元素,
然后再调整
Display:inline:由于块级元素独占一行,会隔离上下行,所以有时候要把它转换为行
Display:inline-block:如果既想行显示,又想设置宽高,可以使用此属性
List-style-type:circle:以列表的样式显示为小圆 circle:园
四 float 属性:飘逸 left right none,主要用于摆放元素,
五.Clear 属性:left 清除左侧浮动元素 right 右侧 none 不清除 both 清除两侧
<style type="text/css">
div{ height:200px;width:200px; border:solid 1px #ccc; color:#66CC66 ;font=size:25px;}
.d1{background-color:#0000FF;float:left;}
.d1{background-color:#FF0000;float:left;clear:left}
.d1{background-color:#FFFF66;float:left;}
</style>
</head>
<body>
<div class="d1">1111111</div>
<div class="d2">222222</div>
<div class="d3">333333</div>
<body>
六.Visibility 属性显示隐藏,在页面上不显示,但是仍然存在,和 display 的区别在于 display