div称为层，更多的是因为它的z轴属性，可以实现层叠效果，例如：
<div style=”position:absolute;z-index:1;left:50px;top:50px;background-color:red;”></div>
<div style=”position:absolute;z-index:2;left:60px;top:60px;background-color:blue;”></div>
注意：布局还是浮动+外边距！！！
一、CSS定位：
Position:
Static（静态） 默认，无法定位和指定Z轴
Absolute（绝对） 相对于最近的一个具有定位容器绝对定位，容器没有定位距离最近一级容器元素位置绝对定位 ，
比如外部DIV嵌套内部DIV，外部DIV设置外边距内部DIV不会移动。相对就会。
示例源码：
<div style="border:1px solid black; width:200px; height:200px; margin-top:250px; margin-left:250px;">
<div style="border:1px solid black; width:100px; height:100px; position:absolute; left:50px; top:50px;"></div>
</div>
Relative（相对） 相对于父级容器相对定位
Fixed 固定，拖动滚动条始终处于视野，但是IE6不支持。
z-index Z轴 ，默认为0，正方向全是正整数；负方向为负整数，值范围-9999~9999。
示例源码：
<body style="height:600px; background-color:gray;">
<div style="border:1px solid black; width:200px; height:200px; margin-top:150px; margin-left:150px; position:fixed; z-index:1;">
</div>
</body>
二、列表样式：
无序列表：
List-style-type:
Disc 默认，实心圆
Circle 空心圆
Square 实心方块
None 不实用项目符号
有序列表：
List-style-type:
Decimal 默认，阿拉伯数字
Lower-roman 小写罗马数字
Upper-roman 大写罗马数字
Lower-alpha 小写英文字母
Upper-alpha 大写英文字母
共有：
List-style-image:url(图片地址) 列表项图标（xxx.ico）
示例源码：
<style>
ul li{
float:left;
margin-right:10px;
}
li{
list-style-image:url("1.jpg");
}
</style>
<ul style="list-style-type:none; ">
<li>无序列表</li>
<li>无序列表</li>
<li>无序列表</li>
</ul>
<div style="clear:left;"></div>
<ol style="list-style-type:upper-roman;">
<li>有序列表</li>
<li>有序列表</li>
<li>有序列表</li>
</ol>
List-style-position: outside（标记在文本外） inside（标记在文本内） 效果如下
请点击此处输入图片描述
源码：
<ul style="list-style-position:inside;">
<li style="background-color:blue;">11111</li>
<li>11111</li>
<li>11111</li>
</ul>
三、CSS溢出：内容超出容器宽高度设置
Overflow:
Hidden 溢出部分隐藏
Scroll 出现滚动条
Auto 自动
Visible 显示（默认）
Overflow-x: 横向溢出设置
Overflow-y: 纵向溢出设置
示例源码：
<div style="width:300px; height:300px; overflow-x:scroll; overflow-y:hidden;">
<img src="1.jpg" width="400px" height="400px" />
</div>
请点击此处输入图片描述
本文来自投稿，不代表重蔚自留地立场，如若转载，请注明出处https://www.cwhello.com/2264.html
如有侵犯您的合法权益请发邮件951076433@qq.com联系删除
