- 如果定位的盒子没有宽高,那么默认宽高为0
- 如果给子盒子设置宽度为100%,那么这个子盒子的宽与父盒子一样宽
- 透明度:opacity,取值0-1之间的小数
margin为负数的应用
如果margin-left设置为负数,那么将来这个盒子会像左方向移动
如果margin-right设置为负数,那么盒子向右移动
圣杯布局
左右两边内容保持不变,中间内容根据浏览器大小而改变
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>圣杯</title>
<style>
.content
{
height: 200px;
padding: 0 200px;
}
.center
{
height: 200px;
width: 100%;
min-width: 200px;
background-color: lemonchiffon;
float: left;
}
.left
{
height: 200px;
width: 200px;
background-color: lightcyan;
margin-left: -200px;
float: left;
}
.right
{
height: 200px;
width: 200px;
background-color:pink;
margin-right: -200px;
float:left;
}
</style>
</head>
<body>
<div class="content">
<div class="left"></div>
<div class="center"></div>
<div class="right"></div>
</div>
</body>
</html>
倒三角
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
div
{
position: relative;
}
span
{
top: 5px;
position: absolute;
height: 0;
width: 0;
display: inline-block;
border-color:orange transparent transparent transparent;
border-width:5px;
border-style:solid solid solid solid;
}
</style>
</head>
<body>
<div>这是一个三角<span></span></div>
</body>
</html>