1. 上下 200*200 盒子的重叠，切记用 absolute 绝对定位 为最佳解决方案

2. 移动端多使用 粘连布局

  • <!DOCTYPE html>
    
<html>
    
    <head>
    
        <meta charset="UTF-8"/>
    
        <title></title>

        <meta http-equiv="X-UA-Compatible" content="ie=edge"/>
    
        <meta name="viewport"
    
              content="user-scalable=no,
    
                       width=device-width,
    
                       initial-scale=1.0,
    
                       minimum-scale=1.0,
    
                       maximum-scale=1.0"/>

        <style rel="stylesheet" type="text/css">
    
            html, body, div {
    
                margin: 0;
    
                padding: 0;
    
            }

        html, body {
    
          width: 100%;
    
          height: 100%;    /* 参照屏幕区域的高 */
    
                min-width: 600px;
    
          overflow: hidden;
    
            }

        #wrap {
    
          width: 100%;
    
          min-height: 100%;    // 使 footer 始终在屏幕的底部    

                background: cadetblue;
    
            }

        #content {
    
          width: 100%;

          padding-bottom: 50px;    

                font-size: 14px;
    
                background: darkgrey;
    
            }

        #footer {    // 必须放在 wrap 的外面
    
          width: 100%;
    
          height: 50px;

          margin-top: -50px;    

                background: chocolate;
    
                text-align: center;
    
                line-height: 50px;
    
            }

        </style>
    
    </head>

    <body>

        <!-- 模拟屏幕区域 -->
    
        <div id="wrap">
    
            <!-- 内容区域 -->
    
            <div id="content"></div>
    
        </div>

        <!-- 底部区域 -->
    
        <div id="footer"></div>
    
    </body>
    
</html>

3. 浏览器有 两个 滚动条

  • 单独给 html 或者 body 加 overflow: scroll;        都会作用在 document 上，生成一个滚动条
  • 同时给 html、body 加 overflow: scroll;        会出现两个滚动条
  • html 的 overflow: scroll; 会作用于 document
  • body 的 overflow: scroll; 会作用于 body

 

4. 在子元素浮动时，解决父元素高度塌陷

(1) 给父元素设置固定 height

(2) 使 父元素 开启 BFC

①父元素 overflow: hidden;

② 父元素 也 浮动 float

③ 绝对定位 position: absolute;

④ 固定定位 position: fixed;

IE6 开启 BFC :  zoom: 1;

(3) 使用 块元素 隔离 父、子元素

⑤ 添加一个换行

  • <div id="wrap">
    
    <div id="box"></div>
    
    <br clear="all">
    
</div>

⑥ 添加一个空的 <div> 清除浮动 clear: both;

⑦ 伪元素 before 转换为 块

  • .clearfix:after {    /* 伪元素默认是 inline 行内元素 */
    
    content:"";    /* 充当父元素的最后一个子元素，默认是 inline 行内元素, 相当一个 <span></span> */
    
    display: block;   /* 将 伪元素设置为 block 块级元素  */
    
    clear: both;
    
}

 

5. 初始包含块

根元素的包含块        // 大多数情况 <html>就是根元素

初始包含块 由用户代理建立

大多数浏览器中，初始包含块就是一个视窗大小的矩形，但不等同于视窗        // 视窗就是浏览器窗口

  • 对于 非根元素 ，
  • 若 position: relative/static，包含块是最近的行内块祖先元素的 内容边界 构成
  • 若 position: relative/absolue/fixed，包含块是最近的开启了定位的祖先元素
  • 若没有祖先元素，则元素的包含块为初始包含块 <html>

 

20181207_Second_小结的更多相关文章

  1. 从零开始编写自己的C#框架（26）——小结

    一直想写个总结,不过实在太忙了,所以一直拖啊拖啊,拖到现在,不过也好,有了这段时间的沉淀,发现自己又有了小小的进步.哈哈...... 原想框架开发的相关开发步骤.文档.代码.功能.部署等都简单的讲过了 ...

  2. Python自然语言处理工具小结

    Python自然语言处理工具小结 作者:白宁超 2016年11月21日21:45:26 目录 [Python NLP]干货!详述Python NLTK下如何使用stanford NLP工具包(1) [ ...

  3. java单向加密算法小结(2)--MD5哈希算法

    上一篇文章整理了Base64算法的相关知识,严格来说,Base64只能算是一种编码方式而非加密算法,这一篇要说的MD5,其实也不算是加密算法,而是一种哈希算法,即将目标文本转化为固定长度,不可逆的字符 ...

  4. iOS--->微信支付小结

    iOS--->微信支付小结 说起支付,除了支付宝支付之外,微信支付也是我们三方支付中最重要的方式之一,承接上面总结的支付宝,接下来把微信支付也总结了一下 ***那么首先还是由公司去创建并申请使用 ...

  5. iOS 之UITextFiled/UITextView小结

    一:编辑被键盘遮挡的问题 参考自:http://blog.csdn.net/windkisshao/article/details/21398521 1.自定方法 ,用于移动视图 -(void)mov ...

  6. K近邻法(KNN)原理小结

    K近邻法(k-nearst neighbors,KNN)是一种很基本的机器学习方法了,在我们平常的生活中也会不自主的应用.比如,我们判断一个人的人品,只需要观察他来往最密切的几个人的人品好坏就可以得出 ...

  7. scikit-learn随机森林调参小结

    在Bagging与随机森林算法原理小结中,我们对随机森林(Random Forest, 以下简称RF)的原理做了总结.本文就从实践的角度对RF做一个总结.重点讲述scikit-learn中RF的调参注 ...

  8. Bagging与随机森林算法原理小结

    在集成学习原理小结中,我们讲到了集成学习有两个流派,一个是boosting派系,它的特点是各个弱学习器之间有依赖关系.另一种是bagging流派,它的特点是各个弱学习器之间没有依赖关系,可以并行拟合. ...

  9. scikit-learn 梯度提升树(GBDT)调参小结

    在梯度提升树(GBDT)原理小结中,我们对GBDT的原理做了总结,本文我们就从scikit-learn里GBDT的类库使用方法作一个总结,主要会关注调参中的一些要点. 1. scikit-learn ...

随机推荐

  1. 第六节：WebApi的部署方式(自托管)

    一. 简单说明 开篇就介绍过WebApi和MVC相比,其中优势之一就是WebApi可以不依赖于IIS部署,可以自托管,当然这里指的是 .Net FrameWork 下的 WebApi 和 MVC 相比 ...

  2. velocity 新手用小常识--开源，简单易上手

    项目中经常用到的 .vm 后缀文件是什么? 基于 java 的 velocity 模版引擎的一种页面控制文件,是一些类似 html 语句和一种叫 VLT 的语句构成   velocity --美 [v ...

  3. John von Neumann和Ulam

    John von Neumann和Ulam是好朋友,两人经常在一起喝酒.旅行.谈女人.有一次诺伊曼认出身边的一位女士,他们交谈了几句.随后他给Ulam介绍那是他的一位老朋友,刚刚离婚.Ulam就问:那 ...

  4. java Concurrent并发容器类 小结

    Java1.5提供了多种并发容器类来改进同步容器的性能. 同步容器将所有对容器的访问都串行化,以实现他们的线程安全性.这种方法的代价是严重降低并发性,当多个线程竞争容器的锁时,吞吐量将严重减低.  一 ...

  5. Permission denied的解决办法

    在运行TensorFlow Example的mnist_dataset_intro时出现了Permission denied的问题,这一看就是权限问题. 解决的办法: $ sudo chmod -R ...

  6. vue知多少，你对vue的认识比别人高在哪？

    1.beforeCreated/created区别? beforeCreated钩子能干什么 2.data中使用props 3.get/set依赖收集 get收集依赖(观察者) set 观察者重新求值 ...

  7. Leetcode#461. Hamming Distance（汉明距离）

    题目描述 两个整数之间的汉明距离指的是这两个数字对应二进制位不同的位置的数目. 给出两个整数 x 和 y,计算它们之间的汉明距离. 注意: 0 ≤ x, y < 231. 示例: 输入: x = ...

  8. SQL server 存储过程中 列传行

    select @exchange=exchange,@coupons_type=coupons_type - FLOOR(exchange))) from points_exchange_svc wh ...

  9. 20175204 张湲祯 2018-2019-2《Java程序设计》第三周学习总结

    20175204 张湲祯 2018-2019-2<Java程序设计>第三周学习总结 教材学习内容总结 -第四章类与对象要点: -面向对象语言三个特性:封装性:继承:多态: -类:1.类是组 ...

  10. 易度文档管理系统--http://www.everydo.com/

    易度文档管理系统--http://www.everydo.com/ 公司工程技术部门需要,暂收藏.