文章目录
1.布局
1.1 文档流
- 文档流指的是文档中可现实的对象在排列时所占用的位置。将窗体自上而下分成一行行，并在每行中按从左至右的顺序排放元素，即为文档流。
- 也就是说在文档流中元素默认会紧贴到上一个元素的右边，如果右边不足以放下元素，元素则会另起一行，在新的一行中继续从左至右摆放。
- 这样一来每一个块元素都会另起一行，那么我们如果想在文档流中进行布局就会变得比较麻烦
<!--
文档流
文档流处在网页的最底层，它表示的是一个页面中的位置，
我们所创建的元素默认都处在文档流中
元素在文档流中的特点
块元素
1.块元素在文档流中会独占一行，块元素会自上向下排列。
2.块元素在文档流中默认宽度是父元素的100%
3.块元素在文档流中的高度默认被内容撑开
内联元素
1.内联元素在文档流中只占自身的大小，会默认从左向右排列，
如果一行中不足以容纳所有的内联元素，则换到下一行，
继续自左向右。
2.在文档流中，内联元素的宽度和高度默认都被内容撑开
-->
<!--
当元素的宽度的值为auto时，此时指定内边距不会影响可见框的大小，
而是会自动修改宽度，以适应内边距
-->
1.2 浮动
- 所谓浮动指的是使元素
脱离原来的文本流，在父元素中浮动起来。 - 浮动使用float属性。
可选值：
– none：不浮动
– left：向左浮动
– right：向右浮动 - 块级元素和行内元素都可以浮动，当一个行内元素浮动以后将会自动变为一个块级元素。
- 当一个块级元素浮动以后，宽度会默认被内容撑开，所以当漂浮一个块级元素时我们都会为其指定一个宽度。
- 当一个元素浮动以后，其下方的元素会上移。元素中的内容将会围绕在元素的周围。
- 浮动会使元素完全脱离文本流，也就是不再在文档中在占用位置。
- 元素设置浮动以后，会一直向上漂浮直到遇到父元素的边界或者其他浮动元素。
- 元素浮动以后即完全脱离文档流，这时不会再影响父元素的高度。也就是浮动元素不会撑开父元素。
- 浮动元素默认会变为块元素，即使设置display:inline以后其依然是个块元素。
- 浮动的元素
不会盖住文字，文字会自动环绕在浮动元素的周围，所以我们可以通过浮动来设置文字环绕图片的效果 - 在文档流中，子元素的宽度默认占父元素的全部,当元素设置浮动以后，会完全脱离文档流，
块元素脱离文档流以后，高度和宽度都被内容撑开,内联元素脱离文档流以后会变成块元素
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.box1{
width: 200px;
height: 200px;
background-color: red;
/*
* 块元素在文档流中默认垂直排列，所以这个三个div自上至下依次排开，
* 如果希望块元素在页面中水平排列，可以使块元素脱离文档流
* 使用float来使元素浮动，从而脱离文档流
* 可选值：
* none，默认值，元素默认在文档流中排列
* left，元素会立即脱离文档流，向页面的左侧浮动
* right，元素会立即脱离文档流，向页面的右侧浮动
*
* 当为一个元素设置浮动以后（float属性是一个非none的值），
* 元素会立即脱离文档流，元素脱离文档流以后，它下边的元素会立即向上移动
* 元素浮动以后，会尽量向页面的左上或这是右上漂浮，
* 直到遇到父元素的边框或者其他的浮动元素
* 如果浮动元素上边是一个没有浮动的块元素，则浮动元素不会超过块元素
* 浮动的元素不会超过他上边的兄弟元素，最多最多一边齐
*/
/*float: left;*/
}
.box2{
width: 200px;
height: 200px;
background-color: yellow;
float: left;
}
.box3{
width: 200px;
height: 200px;
background-color: green;
float: right;
}
</style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
</body>
</html>
1.3 简单布局
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
/*清除默认样式*/
*{
margin: 0;
padding: 0;
}
/*设置头部div*/
.header{
/*设置一个宽度*/
width: 1000px;
/*设置一个高度*/
height: 120px;
/*设置一个背景颜色*/
background-color: yellowgreen;
/*设置居中*/
margin: 0 auto;
}
/*设置一个content*/
.content{
/*设置一个宽度*/
width: 1000px;
/*设置一个高度*/
height: 400px;
/*设置一个背景颜色*/
background-color: orange;
/*居中*/
margin: 10px auto;
}
/*设置content中小div的样式*/
.left{
width: 200px;
height: 100%;
background-color: skyblue;
/*向左浮动*/
float: left;
}
.center{
width: 580px;
height: 100%;
background-color: yellow;
/*向左浮动*/
float: left;
/*设置水平外边距*/
margin: 0 10px;
}
.right{
width: 200px;
height: 100%;
background-color: pink;
/*向左浮动*/
float: left;
}
/*设置一个footer*/
.footer{
/*设置一个宽度*/
width: 1000px;
/*设置一个高度*/
height: 120px;
/*设置一个背景颜色*/
background-color: silver;
/*居中*/
margin: 0 auto;
}
</style>
</head>
<body>
<!-- 头部div -->
<div class="header"></div>
<!-- 主体内容div -->
<div class="content">
<!-- 左侧div -->
<div class="left"></div>
<!-- 中间div -->
<div class="center"></div>
<!-- 右侧div -->
<div class="right"></div>
</div>
<!-- 底部信息div -->
<div class="footer"></div>
</body>
</html>
2.高度塌陷问题
2.1 BFC
1.问题引入：如下图，父元素1下面有个子元素2，那么当2设置成浮动后，就会脱离文档流，那么父元素1高度就会一下收缩起来，怎么能让1继续包含2呢？
解决办法1：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
.box1{
border: 10px red solid;
/*
* 根据W3C的标准，在页面中元素都一个隐含的属性叫做Block Formatting Context
* 简称BFC，该属性可以设置打开或者关闭，默认是关闭的。
* 当开启元素的BFC以后，元素将会具有如下的特性：
* 1.父元素的垂直外边距不会和子元素重叠
* 2.开启BFC的元素不会被浮动元素所覆盖
* 3.开启BFC的元素可以包含浮动的子元素
*
* 如何开启元素的BFC(父元素里设置)
* 1.设置元素浮动
* - 使用这种方式开启，虽然可以撑开父元素，但是会导致父元素的宽度丢失
* 而且使用这种方式也会导致下边的元素上移，不能解决问题
* 2.设置元素绝对定位
* 3.设置元素为inline-block
* - 可以解决问题，但是会导致宽度丢失，不推荐使用这种方式
* 4.将元素的overflow设置为一个非visible的值
*
* 推荐方式：将overflow设置为hidden是副作用最小的开启BFC的方式。
*/
overflow: hidden;
}
.box2{
width: 100px;
height: 100px;
background-color: blue;
float: left;
}
.box3{
height: 100px;
background-color: yellow;
}
</style>
</head>
<body>
<div class="box1">
<div class="box2"></div>
</div>
<div class="box3"></div>
</body>
</html>
2.2 clear
- clear属性可以用于清除元素周围的浮动对元素的影响。也就是元素不会因为上方出现了浮动元素而改变位置。
可选值：
– left：忽略左侧浮动
– right：忽略右侧浮动
– both：忽略全部浮动
– none：不忽略浮动，默认值
如图，这里有三个方框，当没有浮动的时候，是上下挨着
当设置浮动后
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.box1{
width: 100px;
height: 100px;
background-color: yellow;
/*
* 设置box1向左浮动
*/
float: left;
}
.box2{
width: 200px;
height: 200px;
background-color: yellowgreen;
/*
* 由于受到box1浮动的影响，box2整体向上移动了100px
* 我们有时希望清除掉其他元素浮动对当前元素产生的影响，这时可以使用clear来完成功能
* clear可以用来清除其他浮动元素对当前元素的影响
* 可选值：
* none，默认值，不清除浮动
* left，清除左侧浮动元素对当前元素的影响
* right，清除右侧浮动元素对当前元素的影响
* both，清除两侧浮动元素对当前元素的影响
* 清除对他影响最大的那个元素的浮动
*/
/*
* 清除box1浮动对box2产生的影响
* 清除浮动以后，元素会回到其他元素浮动之前的位置
*/
/*clear: left;*/
float: right;
}
.box3{
width: 300px;
height: 300px;
background-color: skyblue;
clear: both;
}
</style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
</body>
</html>
高度塌陷解决2：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.box1{
border: 1px solid red;
}
.box2{
width: 100px;
height: 100px;
background-color: blue;
float: left;
}
/*
* 解决高度塌陷方案二：
* 可以直接在高度塌陷的父元素的最后，添加一个空白的div，
* 由于这个div并没有浮动，所以他是可以撑开父元素的高度的，
* 然后在对其进行清除浮动，这样可以通过这个空白的div来撑开父元素的高度，
* 基本没有副作用
*
* 使用这种方式虽然可以解决问题，但是会在页面中添加多余的结构。
*/
.clear{
clear: both;
}
</style>
</head>
<body>
<div class="box1">
<div class="box2"></div>
<div class="clear"></div>
</div>
</body>
</html>
高度塌陷解决3：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.box1{
border: 1px solid red;
}
.box2{
width: 100px;
height: 100px;
background-color: blue;
float: left;
}
/*通过after伪类，选中box1的后边*/
/*
* 可以通过after伪类向元素的最后添加一个空白的块元素，然后对其清除浮动，
* 这样做和添加一个div的原理一样，可以达到一个相同的效果，
* 而且不会在页面中添加多余的div，这是我们最推荐使用的方式，几乎没有副作用
*/
.clearfix:after{
/*添加一个内容*/
content: "";
/*转换为一个块元素*/
display: block;
/*清除两侧的浮动*/
clear: both;
}
/*
* 在IE6中不支持after伪类,
* 所以在IE6中还需要使用hasLayout来处理
*/
.clearfix{
zoom:1;
}
</style>
</head>
<body>
<div class="box1">
<div class="box2"></div>
</div>
</body>
</html>
2.3 练习
2.3.1 导航条
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>导航条</title>
<style type="text/css">
/*
* 清除默认样式
*/
*{
margin:0;
padding:0;
}
/*
* 设置ul
*/
.nav{
/*去除项目符号*/
list-style: none;
/*为ul设置一个背景颜色*/
background-color: #6495ED;
/*设置一个宽度*/
/*
* 在IE6中，如果为元素指定了一个宽度，则会默认开启hasLayout
*/
width: 1000px;
/*设置元素居中*/
margin: 50px auto;
/*解决高度塌陷*/
overflow: hidden;
}
/**
* 设置li
*/
.nav li{
/*设置li向左浮动*/
float: left;
width: 12.5%;
}
.nav a{
/*将a转换为块元素*/
display: block;
/*为a指定一个宽度*/
width: 100%;
/*设置文字居中*/
text-align: center;
/*设置一个上下内边距*/
padding: 5px 0;
/*去除下划线*/
text-decoration: none;
/*设置字体颜色*/
color: white;
/*设置加粗*/
font-weight: bold;
}
/*
* 设置a的鼠标移入的效果
*/
.nav a:hover{
background-color: #c00;
}
</style>
</head>
<body>
<!-- 创建导航条的结构 -->
<ul class="nav">
<li><a href="#">首页</a></li>
<li><a href="#">新闻</a></li>
<li><a href="#">联系</a></li>
<li><a href="#">关于</a></li>
<li><a href="#">首页</a></li>
<li><a href="#">新闻</a></li>
<li><a href="#">联系</a></li>
<li><a href="#">关于</a></li>
</ul>
</body>
</html>
2.3.2 菜单内容显示
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
/*清除默认样式*/
*{
margin: 0;
padding: 0;
}
/*统一页面中的字体*/
body{
font: 12px/1 宋体;
}
/*设置outer的大小*/
.outer{
width: 300px;
/*height: 473px;*/
/*background-color: #bfa;*/
/*设置outer居中效果*/
margin: 50px auto;
}
/*
* 设置title的边框
*/
.title{
/*设置上边框*/
border-top:2px #019e8b solid ;
/*设置盒子的高度*/
height: 36px;
/*设置背景样式*/
background-color: #f5f5f5;
/*设置title的行高*/
line-height: 36px;
/*设置title的内边距*/
padding: 0px 22px 0px 16px;
}
/*
设置title中的超链接
* */
.title a{
float: right;
/*设置字体颜色*/
color: red;
}
/*设置h3*/
.title h3{
font: 16px/36px "微软雅黑";
}
/*设置内容*/
.content{
border: 1px solid #deddd9;
/*设置内边距*/
padding: 0px 28px 0px 20px;
}
/*设置内容中的超链接*/
.content a{
color: black;
/*去除超链接的下划线*/
text-decoration: none;
/*设置字体大小*/
font-size: 12px;
}
/*为超链接添加一个hover伪类*/
.content a:hover{
color: red;
/*为超链接添加下划线*/
text-decoration: underline;
}
/*设置内容中的标题*/
.content h3{
margin-top: 14px;
margin-bottom: 16px;
}
/*
* 设置右侧的a的样式
*/
.content .right{
/*设置向右浮动*/
float: right;
}
/*设置ul的样式*/
.content ul{
/*去除项目符号*/
list-style: none;
/*为ul设置一个下边框*/
border-bottom: 1px dashed #deddd9;
}
/*取消最后一个ul的边框*/
.content .no-border{
border: none;
}
/*设置内容中的红色字体*/
.content .red{
color: red;
font-weight: bold;
}
/*设置内容中的li*/
.content li{
margin-bottom: 15px;
}
</style>
</head>
<body>
<!--创建一个外层div，容纳整个内容-->
<div class="outer">
<!-- 开班信息的头部 -->
<div class="title">
<a href="#">16年面授开班计划</a>
<h3>近期开班</h3>
</div>
<!-- 开班信息的主要内容 -->
<div class="content">
<h3><a href="#">JavaEE+云计算-全程就业班</a></h3>
<ul>
<li>
<a class="right" href="#"><span class="red">预约报名</span></a>
<a href="#">开班时间：<span class="red">2016-04-27</span></a>
</li>
<li>
<a class="right" href="#"><span class="red">无座，名额爆满</span></a>
<a href="#">开班时间：<span class="red">2016-04-07</span></a>
</li>
<li>
<a class="right" href="#"><span>开班盛况</span></a>
<a href="#">开班时间：<span>2016-03-15</span></a>
</li>
<li>
<a class="right" href="#"><span>开班盛况</span></a>
<a href="#">开班时间：<span>2016-02-25</span></a>
</li>
<li>
<a class="right" href="#"><span>开班盛况</span></a>
<a href="#">开班时间：<span>2015-12-26</span></a>
</li>
</ul>
<h3><a href="#">Android+人工智能-全程就业班</a></h3>
<ul>
<li>
<a class="right" href="#"><span class="red">预约报名</span></a>
<a href="#">开班时间：<span class="red">2016-04-10</span></a>
</li>
<li>
<a class="right" href="#"><span>开班盛况</span></a>
<a href="#">开班时间：<span>2016-03-17</span></a>
</li>
<li>
<a class="right" href="#"><span>开班盛况</span></a>
<a href="#">开班时间：<span>2016-02-20</span></a>
</li>
<li>
<a class="right" href="#"><span>开班盛况</span></a>
<a href="#">开班时间：<span>2015-12-23</span></a>
</li>
</ul>
<h3><a href="#">前端+HTML5-全程就业班</a></h3>
<ul class="no-border">
<li>
<a class="right" href="#"><span class="red">预约报名</span></a>
<a href="#">开班时间：<span class="red">2016-05-10</span></a>
</li>
<li>
<a class="right" href="#"><span>开班盛况</span></a>
<a href="#">开班时间：<span>2016-03-16</span></a>
</li>
</ul>
</div>
</div>
</body>
</html>
2.4 ps常用设置
1.单位设置
2.标尺显示
CTL+R
3.放大缩小
ALT+鼠标滚轮
4.量大小
5.颜色摄取
3.定位
- position属性可以控制Web浏览器如何以及在何处显示特定的元素。
- 可以使用position属性把一个元素放置到网页中的任何位置。
可选值：
– static
– relative
– absolute
– fixed
3.1 相对定位
如图
想要实现把2下放到3的右边，3不要动，该怎么实现？
- 每个元素在页面的
文档流中都有一个自然位置。相对于这个位置对元素进行移动就称为相对定位。周围的元素完全不受此影响。相对定位是相对于自身定位的，是和自身原来位置进行比较的 - 当将position属性设置为relative时，则开启了元素的相对定位。
- 当开启了相对定位以后，可以使用top、 right、bottom、 left四个属性对元素进行定位。
特点：
- 如果不设置元素的偏移量，元素位置不会发生改变。
- 相对定位不会使元素脱离文本流。元素在文本流中的位置不会改变。
- 相对定位不会改变元素原来的特性。
- 相对定位会使元素的层级提升，使元素可以覆盖文本流中的元素。
<!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: yellow;
/*
* 定位：
* - 定位指的就是将指定的元素摆放到页面的任意位置
* 通过定位可以任意的摆放元素
* - 通过position属性来设置元素的定位
* -可选值：
* static：默认值，元素没有开启定位
* relative：开启元素的相对定位
* absolute：开启元素的绝对定位
* fixed：开启元素的固定定位（也是绝对定位的一种）
*/
/*
* 当元素的position属性设置为relative时，则开启了元素的相对定位
* 1.当开启了元素的相对定位以后，而不设置偏移量时，元素不会发生任何变化
* 2.相对定位是相对于元素在文档流中原来的位置进行定位
* 3.相对定位的元素不会脱离文档流
* 4.相对定位会使元素提升一个层级
* 5.相对定位不会改变元素的性质，块还是块，内联还是内联
*/
position: relative;
/*
* 当开启了元素的定位（position属性值是一个非static的值）时，
* 可以通过left right top bottom四个属性来设置元素的偏移量
* left：元素相对于其定位位置的左侧偏移量
* right：元素相对于其定位位置的右侧偏移量
* top：元素相对于其定位位置的上边的偏移量
* bottom：元素相对于其定位位置下边的偏移量
*
* 通常偏移量只需要使用两个就可以对一个元素进行定位，
* 一般选择水平方向的一个偏移量和垂直方向的偏移量来为一个元素进行定位
*/
/*left: 100px;
top: 200px;*/
left: 200px;
top: 200px;
}
.box3{
width: 200px;
height: 200px;
background-color: yellowgreen;
}
.s1{
position: relative;
width: 200px;
height: 200px;
background-color: yellow;
}
</style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
</body>
</html>
3.2 绝对定位
- 绝对定位指使元素相对于html元素或离他最近的祖先定位元素进行定位。
- 当将position属性设置为absolute时，则开启了元素的绝对定位。
- 当开启了绝对定位以后，可以使用top、 right、bottom、 left四个属性对元素进行定位。
特点：
- 绝对定位会使元素完全脱离文本流。
- 绝对定位的块元素的宽度会被其内容撑开。
- 绝对定位会使行内元素变成块元素。
- 一般使用绝对定位时会同时为其父元素指定一个相对定位，以确保元素可以相对于父元素进行定位。
<!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: yellow;
/*
* 当position属性值设置为absolute时，则开启了元素的绝对定位
*
* 绝对定位：
* 1.开启绝对定位，会使元素脱离文档流
* 2.开启绝对定位以后，如果不设置偏移量，则元素的位置不会发生变化
* 3.绝对定位是相对于离他最近的开启了定位的祖先元素进行定位的（一般情况，开启了子元素的绝对定位都会同时开启父元素的相对定位）
* 如果所有的祖先元素都没有开启定位，则会相对于浏览器窗口进行定位
* 4.绝对定位会使元素提升一个层级
* 5.绝对定位会改变元素的性质，
* 内联元素变成块元素，
* 块元素的宽度和高度默认都被内容撑开
*/
position: absolute;
/*left: 100px;
top: 100px;*/
}
.box3{
width: 300px;
height: 300px;
background-color: yellowgreen;
}
.box4{
width: 300px;
height: 300px;
background-color: orange;
/*开启box4的相对定位*/
/*position: relative;*/
}
.s1{
width: 100px;
height: 100px;
background-color: yellow;
/*开启绝对定位*/
position: absolute;
}
</style>
</head>
<body>
<div class="box1"></div>
<div class="box5">
<div class="box4">
<div class="box2"></div>
</div>
</div>
<div class="box3"></div>
<span class="s1">我是一个span</span>
</body>
</html>
3.3 固定定位
- 固定定位的元素会被锁定在屏幕的某个位置上，当访问者滚动网页时，固定元素会在屏幕上保持不动。
- 当将position属性设置为fixed时，则开启了元素的固定定位。
- 当开启了固定定位以后，可以使用top、 right、bottom、 left四个属性对元素进行定位。
- 固定定位的其他特性和绝对定位类似。
<!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: yellow;
/*
* 当元素的position属性设置fixed时，则开启了元素的固定定位
* 固定定位也是一种绝对定位，它的大部分特点都和绝对定位一样
* 不同的是：
* 固定定位永远都会相对于浏览器窗口进行定位
* 固定定位会固定在浏览器窗口某个位置，不会随滚动条滚动
*
* IE6不支持固定定位
*/
position: fixed;
left: 0px;
top: 0px;
}
.box3{
width: 200px;
height: 200px;
background-color: yellowgreen;
}
</style>
</head>
<body style="height: 5000px;">
<div class="box1"></div>
<div class="box4" style="width: 300px; height: 300px; background-color: orange; position: relative;">
<div class="box2"></div>
</div>
<div class="box3"></div>
</body>
</html>
3.4 z-index
- 当元素开启定位以后就可以设置z-index这个属性。
- 这个属性可以提升定位元素所在的层级。
- z-index可以指定一个整数作为参数，值越大元素显示的优先级越高，也就是z-index值较大的元素会显示在网页的最上层。
- 平面坐标可以用x,y来表示，那么z就相当于立体坐标，平面之上表示
opacity可以设置透明
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.box1{
width: 200px;
height: 200px;
background-color: red;
position: relative;
z-index: 2;
opacity: 0.5;
filter: alpha(opacity=50);
}
.box2{
width: 200px;
height: 200px;
background-color: yellow;
/*开启绝对定位*/
position: absolute;
/*设置偏移量*/
top: 100px;
left: 100px;
/*
* 如果定位元素的层级是一样，则下边的元素会盖住上边的
* 通过z-index属性可以用来设置元素的层级
* 可以为z-index指定一个正整数作为值，该值将会作为当前元素的层级
* 层级越高，越优先显示
*
* 对于没有开启定位的元素不能使用z-index
*/
z-index: 25;
opacity: 0.5;
filter: alpha(opacity=50);
}
.box3{
width: 200px;
height: 200px;
background-color: yellowgreen;
/*position: relative;
z-index: 3;*/
position: absolute;
top: 200px;
left: 200px;
z-index: 30;
/*
* 设置元素的透明背景
* opacity可以用来设置元素背景的透明，
* 它需要一个0-1之间的值
* 0 表示完全透明
* 1 表示完全不透明
* 0.5 表示半透明
*/
opacity: 0.5;
/*
* opacity属性在IE8及以下的浏览器中不支持
* IE8及以下的浏览器需要使用如下属性代替
* alpha(opacity=透明度)
* 透明度，需要一个0-100之间的值
* 0 表示完全透明
* 100 表示完全不透明
* 50 半透明
*
* 这种方式支持IE6，但是这种效果在IE Tester中无法测试
*/
filter: alpha(opacity=50);
}
.box4{
width: 200px;
height: 200px;
background-color: orange;
/*开启相对定位*/
position: relative;
/*
* 父元素的层级再高，也不会盖住子元素
*/
z-index: 20;
top: 500px;
}
.box5{
width: 100px;
height: 100px;
background-color: skyblue;
/*开启绝对定位*/
position: absolute;
z-index: 10;
}
</style>
</head>
<body style="height: 5000px;">
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
<div class="box4">
<div class="box5"></div>
</div>
</body>
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
