透明度,margin为负数的应用,圣杯布局,倒三角

来源:转载

  1. 如果定位的盒子没有宽高,那么默认宽高为0
  2. 如果给子盒子设置宽度为100%,那么这个子盒子的宽与父盒子一样宽
  3. 透明度: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>







分享给朋友:
您可能感兴趣的文章:
随机阅读: