您的位置：首页 > Web前端 > CSS

html和CSS基础学习（十三）

2017-10-09 18:13 330 查看

（1）在网页制作中让box2和box3并排在一起使用可以浮动，也可以使用外边距，当margin-top为负值可以向上移动。

.box2{

                                  width:200px;

                                  height:200px;

                                  background-color:hotpink;

                                  /*margin-left:200px;*/

                                  /*float:left;*/

                         }



                         .box3{

                                  width:200px;

                                  height:200px;

                                  background-color:teal;

                                  /*margin-top:-200px;*/

                                  /*float:left;*/

                         }

position: relative;

left: 200px;

bottom:200px ;//相对定位不会改变元素的性质，但会提高元素的级别，不会脱离文档流，相对于元素在文档流中原来的位置。

（2）

绝对定位:绝对定位会让元素脱离文档流，绝对定位是以开启了定位最近的祖先元素为基准的

.box2{

                                  width:200px;

                                  height:200px;

                                  background-color:hotpink;

                                  /*margin-left:200px;*/

                                  /*float:left;*/

                                  /*position:relative;

                                  left:200px;相对定位是为原来位置坐定位，元素不会脱离文档流

                                  top:200px;*/

                                  position:absolute;



                         }



                         .box3{

                                  width:200px;

                                  height:300px;

                                  background-color:teal;

                                  /*margin-top:-200px;*/

                                  /*float:left;*/

                         }

三个盒子没有浮动，垂直排列在一起

但是由于绝对定位元素浮动，后面元素就会定上来

为红色外套入一个黑色的盒子，会发现红色盒子绝对定位是以黑色盒子为基准的。所以绝对定位是以最近开启了定位的祖先元素为基准的，不是兄弟元素。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.box1{
width:200px ;
height: 200px;
background-color:greenyellow ;
}
.box2{
width:200px ;
height: 200px;
background-color:hotpink ;
/*margin-left: 200px;*/
/*float: left;*/
/*position: relative;
left: 200px;相对定位是为原来位置坐定位，元素不会脱离文档流
top:200px ;*/
position: absolute;
top:0px;
left: 0px;
}

.box3{
width:400px ;
height: 400px;
background-color:teal ;
/*margin-top: -200px;*/
/*float: left;*/
}
.box4{
width:300px ;
height: 300px;
background-color:black ;
position:relative ;
}

</style>
</head>
<body>
<div class="box1"></div>
<div class="box3">
<div class="box4">

<div class="box2"></div>

</div>
</div>

</body>
</html>
（三）

Position：fixed 表示固定定位

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.box1{

width: 200px;
height: 200px;
background-color: red;
}
.box2{

width: 200px;
height: 200px;
background-color: greenyellow;
position:fixed ;
left: 0px;
top: 0px;
/*固定定位始终是以游览器窗口为坐标轴的，不会随着滚动条移动，其余的特性
与absolute相同IE6不支持绝对定位*/
}
.box3{

width: 200px;
height: 200px;
background-color: bisque;
}

</style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>

</body>
</html>

（四）

层级

当元素层级不一样时候，绿色开启了绝对定位层级高于其他两个，就会覆盖

当层级一样的时候：下面元素会盖住上面的元素

我们可以使用z-index来调整元素的层级，但是（只有开启定位的元素才能使用，而且子元素层级无论多高也不会超过父元素）

（五）

设置元素的透明背景，opacity可以来设置元素背景的透明，0~1之间

IE8 以下不支持opacity

opacity:0.5 ;

//兼容IE8filter:alpha(opacity=50);可以让元素透明

背景

1：设置背景颜色： background-color: #87CEEB;

2：设置背景图片：background-image:url(img/1.jpg);当背景图片小于元素的大小的时候就会重复铺平

3：设置背景图片不重复：background-repeat:no-repeat;

background-color:yellowgreen ;

                                  background-image:url(img/1.jpg);

                                  /*设置背景不重复*/

                                  background-repeat:no-repeat;

                                  /*设置背景的位置，left,right,bootm,center可以任意组合2个*/

                                  /*background-position:left center;*/

                                  /*用偏移量来移动背景图片，可以放在任意位置，也可以设置负值*/

                                  background-position:100px50px ;

                                  /*在垂直方向，正表示向下，负值表示向上，水平方向正表示向右，负值向左*/

                                  background-attachment:fixed;

                                  /*固定定位，背景图片不会随着滚动条移动,但是我们一般设置给BODY

                                  因为，设置给其他元素，div会随着滚动，最后图片也会一起滚动*/

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航