关于HTML的几个技巧

最新推荐文章于 2022-10-06 11:00:37 发布

Airfald

最新推荐文章于 2022-10-06 11:00:37 发布

阅读量532

点赞数

分类专栏： JavaScript HTML CSS

本文链接：https://blog.csdn.net/Airfald/article/details/72855590

版权

CSS 同时被 3 个专栏收录

21 篇文章 0 订阅

订阅专栏

JavaScript

8 篇文章 0 订阅

订阅专栏

HTML

6 篇文章 0 订阅

订阅专栏

模拟绝对定位

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

相对于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>