清除 上层 -1 绝对定位 有序 定位 color abs
一、页面布局:div+CSS 布局
1.<style>
*{
margin:0px;
padding:0px;
}
#ad{
width:100px;
height:100px;
background-color:red;
position:fixed; 定位:固定定位,需要设置距离边框的距离;相对于浏览器窗口位置固定
right:0px;
top:100px;
}
.class{
float:left; 流式布局:从左往右。right 从右往左。如果有序号,也会从右往左排。
position:relative; 定位:相对定位,相对于周边其他元素的定位;默认,一般不写,需要设置 z-index 分层时必须写。
}
.class2{
min-width:500px; 给流式布局设置一个外框宽度设置成百分比,然后给这个外框一个最小宽度,可以防止流式布局的元素发生换行。一般用于响应式布局,以适合不同的浏览器和设备。
}
.class3{
position:absolute; 定位:绝对定位;需要制定靠着谁, 如果外层元素未定位会相对于浏览器定位。
right:0px;
bottom:0px;
z-index:-1; z 轴定位,需要跟随定位
}
</style>
<div>
<div style="clear:both;"></div>
</div>
利用清除浮动属性将上层 div 撑开,有多高的元素上层 div 就多高;
二、课上练习
- * {
- margin: 0px;
- /*去掉所有元素的内外边框*/
- padding: 0px;
- }#ad {
- width: 100px;
- height: 100px;
- background - color: red;
- position: fixed;
- /*绝对定位 以浏览器窗口作为基准*/
- right: 0px;
- /*离右侧0*/
- top: 100px;
- /*离上侧100*/
- }.item {
- width: 100px;
- height: 100px;
- margin - right: 10px;
- color: blueviolet;
- border: 2px solid red;
- /*边框 2像素宽 实线 红色*/
- float: right;
- /*流式布局 letf从左往右 right为从右往左*/
- position: relative;
- /*相对定位 相对于周边其他元素*/
- }.container {
- width: 50 % ;
- min - width: 456px;
- /*height:500px;*/
- border: 3px solid black;
- position: relative;
- z - index: 10;
- /*Z轴定位 用于确定上下层关系 可以有负数 建议值10 20 30 方便后期改动*/
- }.sup {
- width: 100px;
- height: 100px;
- border: 2px solid blue;
- position: absolute;
- right: 0px;
- top: 0px;
- background - color: darkcyan;
- z - index: -1;
- }
- "ad">class="container">class="item">1class="item">2class="item">3class="item">4class="sup">"clear:both">
- 甲乙丙
- 甲乙丙
- 甲乙丙
- 甲乙丙
- 甲乙丙
- 甲乙丙
- 甲乙丙
- 甲乙丙
- 甲乙丙
- 甲乙丙
- 甲乙丙
- 甲乙丙
- 甲乙丙
- 甲乙丙
- 甲乙丙
- 甲乙丙
- 甲乙丙
- 甲乙丙
- 甲乙丙
- 甲乙丙
- 甲乙丙
- 甲乙丙
- 甲乙丙
- 甲乙丙
- 甲乙丙
- 甲乙丙
- 甲乙丙
- 甲乙丙
- 甲乙丙
- 甲乙丙
- 甲乙丙
- 甲乙丙
- 甲乙丙
- 甲乙丙
- 甲乙丙
三、网页效果图
html CSS 层叠样式表 四
来源: http://www.bubuko.com/infodetail-2097316.html