关于HTML的几个技巧

来源：互联网发布：信长野望长野业正数据编辑：程序博客网时间：2024/05/16 11:38

模拟绝对定位

在浏览器中为了实现绝对定位诸多方法，今天就解决兼容性的问题，来模拟决定定位。

相对于html的绝对定位

原理：当不给绝对定位设置父元素定位时，那么默认的相对于父级定位,
也就是想对于html定位。
html:100%;及可视区域的大小
将超过可视区域的面积设置截取，则html永远的高度就是可视区域高度，不会被撑开；

代码如下：

 html{ height:100%; overflow:hidden;  border: 2px solid yellow;  }    body{    margin:0;    height:100%;    overflow:auto;    }    .box{    height:2000px;     border: 2px solid #000;     }    .div{    width:100px;    height:100px;    background:red; position:absolute;left:100px;top:100px;}

js代码实现
再此只讨论html技巧，所以js也就不实现了，思想也挺简单的。

等高布局

原理：当一边的高度与另一边的高度不一致的时候，短的那一边利用padding假装填充。

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Document</title>    <style>    /*    原理：当一边的高度与另一边的高度不一致的时候，短的那一边利用padding假装填充。    */        * {            padding: 0;            margin: 0;        }        .wrap {            width: 1000px;            border: 2px solid #000;            overflow: hidden;        }        .left {            float: left;            padding-bottom: 10000px;            margin-bottom: -10000px;            width: 100px;            background-color: red;        }        .right {            float: right;            padding-bottom: 10000px;            margin-bottom: -10000px;            width: 100px;            background-color: blue;        }    </style></head><body>    <div class="wrap">        <div class="left">这里就是左边</div>        <div class="right">        这里就是右边        这里就是右边        这里就是右边        这里就是右边        这里就是右边        这里就是右边        这里就是右边        </div>    </div></body></html>

双飞翼布局

双飞翼布局是一种比较灵活的布局，始于淘宝UED，玉伯提出的，当然他着重介绍的是双飞翼栅格布局。

　　本文着重讲解常用三栏布局。通俗一点讲，可以把三栏比作一只鸟，main部分相当是于鸟的身体，而left与right就是鸟的“翼”了，鸟想要平衡地飞翔就要把主体位置给摆正确，然后在“翼”的作用下开始起飞。布局也是一样的，我们也要先把主体给摆好，然后再合理地调整双翼，这样整体动作才会比较和谐。

为了快速加载主体内容，我们在布局时候可以把最重要的放在最前面。比如：

div class="wrap"><div class="main">main</div><div class="left">left</div><div class="right">right</div></div>

有两种方法实现，1、两边使用绝对定位 2、两边使用margin值

.center{height:600px;background:#f60;margin:0 200px;}.left{width:200px;background:#fc0;height:600px; position:absolute;left:0;top:0;}.right{width:200px;background:#fcc;height:600px;position:absolute;right:0;top:0;}

首先呢，我们需要把这三列都浮动起来，即：.main,.left,.right { float:left;  height:200px; }.main { width:100%;  background:#ace; }.left { width:20%; background:#eee; margin-left:-100%; }     .right { width:30%; background:#ddd; margin-left:-30%; }  设置margin:0 30% 0 20%;，把两边内容给挤开，这样才是完美的效果。

图片居中问题

**原理：1.水平方向text-align:center 竖直方向：利用一个附加span进行居中
2.父元素display:table 子元素：display:table-cell**

<!DOCTYPE HTML><html><head>    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">    <title>无标题文档</title>    <!--     1.水平方向text-align:center    竖直方向：利用一个附加span进行居中    2.父元素display:table          子元素：display:table-cell     -->    <style>        .box{ width:800px;height:600px;border:2px solid #000; text-align:center;}        span{ display:inline-block; height:100%; vertical-align:middle;}        img{ vertical-align:middle;}    </style></head><body>    <div class="box">        <img src="bigptr.jpg" /><span></span>    </div></body></html>

阅读全文

0 0