看起来小但是并不小的问题

Posted littlebanana

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了看起来小但是并不小的问题相关的知识,希望对你有一定的参考价值。

html <!DOCTYPE>

  • 定义和用法

    • 必须是 HTML 文档的第一行,位于 <html> 标签之前。
    • <!DOCTYPE> 不是 HTML 标签;它是指示 web 浏览器关于页面使用哪个 HTML 版本进行编写的指令。
  • 常用的DOCTYPE声明

    • HTML 5

      <!DOCTYPE html>
    • HTML 4.01 Strict

      该 DTD 包含所有 HTML 元素和属性,但不包括展示性的和弃用的元素(比如 font)。不允许框架集(Framesets)。

      <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    • HTML 4.01 Transitional

      该 DTD 包含所有 HTML 元素和属性,包括展示性的和弃用的元素(比如 font)。不允许框架集(Framesets)。

      <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
      "http://www.w3.org/TR/html4/loose.dtd">
    • HTML 4.01 Frameset

      该 DTD 等同于 HTML 4.01 Transitional,但允许框架集内容。

      <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" 
      "http://www.w3.org/TR/html4/frameset.dtd">

关于高度坍塌

  • 什么是高度塌陷

    在文档流中,父元素的高度默认是被子元素撑开的,也就是子元素多高,父元素就多高。但是当子元素设置浮动之后,子元素会完全脱离文档流,此时将会导致子元素无法撑起父元素的高度,导致父元素的高度塌陷。

    <div id="parent">
        <div id="childrenOne">111</div>
        <div id="childrenTwo">222</div>
    </div>
    <div id="boxTemp">333</div>
    <div id="boxCompare">444</div>
    #parent{
      width: 300px;
      background-color: #bfa;
    }
    
    #childrenOne,#childrenTwo{
      float: left;
      width: 100px;
      heigh: 100px;
    }
    #childrenOne{
      background-color: purple;
      margin-left: 10px;
    }
    #childrenTwo{
      background-color: red;
    }
    #boxCompare{
      width: 200px;
      height: 150px;
      background-color: blue;
    }
    #boxTemp{
      width: 100px;
      height: 150px;
      background-color: green;
    }

    技术图片

  • 解决方法

    • 给父元素设置固定高度。 但是使用这种方式后,父元素的高度就不能根据子元素自动撑高了。

    • 额外标签法,这是w3c推荐的解决方案,但是不推荐,因为html的原则是写出语义化的标签,这种方式会额外增加无意义的标签。

    <div id="parent">
        <div id="childrenOne">111</div>
        <div id="childrenTwo">222</div>
        <div style="clear: both;"></div>
        <!--额外标签-->
    </div>
    <div id="boxTemp">333</div>
    <div id="boxCompare">444</div>
    • 父元素的overflow属性(开启元素的BFC)

      这种方式现在使用比较广泛,很多大网站都是使用这种方式,副作用较小,只需要在配合处理ie6就可以了。

    .clearFix{
        overflow: hidden;
        /*使用这种方式,属性值可以是非visible(hidden/auto/scroll)中任意,但是建议用hidden。这种方式的副作用比较小。*/
    }

    另外,这种方式在ie 6中不支持( 怎么又是ie 6 ),可另外加zoom: 1;

    .clearFix::after{
        context:"";
        height: 0;      /* 伪元素高度为0,不影响其他元素 */
        clear: both;    /* 清除浮动 */
        visibility: hidden;
    }
    .clearFix{
    /* ie6元素没有BFC模式,但是这句代码会开启ie6中的hasLayout模式,只在ie中支持 */
        zoom: 1;
    }
    • 双伪元素清除浮动(开启元素的BFC)
    .clearFix::before,.clearfix::after{
        content: "";
        display: block;
        clear: both;
    }
    .clearFix{
    /* ie6元素没有BFC模式,但是这句代码会开启ie6中的hasLayout模式,只在ie中支持 */
        zoom: 1;
    }

BFC相关

  • 在页面中元素都一个隐含的属性叫做Block Formatting Context,简称BFC,该属性可以设置打开或者关闭,默认是关闭的。
  • 当开启元素的BFC以后,元素将会具有如下的特性:
  • 父元素的垂直外边距不会和子元素重叠。
  • 开启BFC的元素不会被浮动元素所覆盖。
  • 开启BFC的元素可以包含浮动的子元素。

传说中的“子绝父相”

  • 定位( position )有四种

    类型 特点
    static:自动定位 静态定位:对于边偏移无效,一般用来清除定位。
    relative:相对定位,相对于文档流的位置进行定位 每次移动的位置是相对自己的左上角移动的。但是不脱离标准流。
    absolute:绝对定位,相对于其上一个已经定位的父元素进行定位 每次移动的位置是相对于父元素。绝对定位是完全脱离标准流的。
    fixed:固定定位,相对于浏览器窗口进行定位 是绝对定位的一种特殊形式。与父级没有任何关系,只认浏览器。
  • 所以,子绝父相就是如果一个div的定位属性为absolute,对于这样的盒子
    • 如果父级元素没有定位,则以浏览器(Document文档)为准对齐。
    • 为了不让孩子乱跑,就会给父级元素加定位(绝对相对都行)。
    • 友链:关于子绝父绝和子绝父相
  • 多说一句——绝对定位水平垂直居中:
    • 加了绝对定位的盒子margin左右auto无效。
    • 如果想要居中的话,首先left50%,然后走自己的一半的值就好了。

CSS精灵技术

  • 别问,要问就是雪碧~

  • 产生原因:

    图所示为网页的请求原理图,当用户访问一个网站时,需要向服务器发送请求,网页上的每张图像都要经过一次请求才能展现给用户。然而,一个网页中往往会应用很多小的背景图像作为修饰,当网页中的图像过多时,服务器就会频繁地接受和发送请求,这将大大降低页面的加载速度。为了有效地减少服务器接受和发送请求的次数,提高页面的加载速度,出现了CSS精灵技术。

  • 本质:

    CSS精灵是一种处理网页背景图像的方式。它将一个页面涉及到的所有零星背景图像都集中到一张大图中去,然后将大图应用于网页,这样,当用户访问该页面时,只需向服务发送一次请求,网页中的背景图像即可全部展示出来。通常情况下,这个由很多小的背景图像合成的大图被称为精灵图(雪碧图)。

  • wqh有话说:

    20px x 20px,把多张小图片放到了一个大图片里面,利用 background-position: x y; backgroung-size: 20px;

叠放次序(z-index)

  • 当多个元素同时设置定位时,可能发生重叠。
  • 值越大越上(先显示)。
  • 只有相对定位、绝对定位、固定定位有这个属性,其他的都没有。
  • 如果值相同,则后来者居上。
  • 数字不能加单位。

滑动门技术

  • 效果参见微信官网

    技术图片

  • 它能够根据导航条菜单文本长度自动调节宽度 。 用简单背景小图来实现炫彩的导航条风格,大大减少网页载入内容。

  • 实现方法:

    • a设置背景左侧,padding撑开适合宽度。
    • pan设置背景右侧,padding撑开合适宽度剩下由文字继续撑开宽度。
    <a href="#"><span>哈哈哈</span></a>
    a{
        display: inline-block;
        height: 33px;
        background: url('img.jpg') no-repeat;
        padding-left: 15px;
    }
    a span{
        display: inline-block;
        height: 33px;
        background: url('img.jpg') no-repeat right;
        padding-left: 15px;
    }

以上是关于看起来小但是并不小的问题的主要内容,如果未能解决你的问题,请参考以下文章

小程序学习总结

VS中添加自定义代码片段——偷懒小技巧

提效小技巧——记录那些不常用的代码片段

EntityFramework 映射片段问题

微信小程序代码片段

从片段创建子意图