box-sizing + margin负值 升级双飞翼布局

一、box-sizing属性

.content-size, .border-size{

    width: 200px;

    height: 100px;

    padding: 10px;

    border: 5px solid red;

    margin: 20px;

}

.content-size{

    box-sizing: content-box;

}

.border-size{

    box-sizing: border-box;

}
  1. context-size、border-size两个类的的width、height、padding、border、margin值都是一致。
  2. box-sizing: content-box时，div的宽度和高度为width和height的值
  3. box-sizing：border-box时，div的宽度和高度为 padding + border + width(内容高度)

二、border-box属性的应用

对双飞翼布局的改造，传统的双飞高度是自适应的。本次通过box-sizing属性的border-box值对双飞翼布局的高度进行定高，从而实现head与footer固定，而中间内容部分自动出现滚动条的能力。

代码如下：

<html>

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <style>

        div, body{

            margin: 0px;

        }

      .head{

          height: 60px;

          background: red;

      }

      .main {

          height: 100%;

          clear: both;

          box-sizing: border-box;

          padding: 60px 0px 100px 0px;

          margin: -60px 0px -100px 0px;

      }

      .main-main{

          clear: both;

      }

      .main-main:after{

          content: '';

          display: block;

          overflow: hidden;

          clear: both;

      }

      .cont-main{

          margin: 0px 300px 0px 200px;

          overflow: hidden;

          overflow-y: auto;

          height: inherit;

      }

      .main .cont, .main .left, .main .right{

          float: left;

          height: 100%;

      }

      .main .cont{

          width: 100%;

      }

      .main .left{

        width: 200px;

        margin-left: -100%;

      }

      .main .right{

        width: 300px;

        margin-left: -300px;

      }

      .footer{

          height: 100px;

          background: gray;

      }

    </style>

</head>

<body>

    <div class="head">head</div>

    <div class="main">

        <div class="main-main">

            <div class="cont">

                <div class="cont-main">

                    cont<br/>

                    cont<br/>

                    cont<br/>

                    cont<br/>

                    cont<br/>

                    cont<br/>

                    cont<br/>

                    cont<br/>

                    cont<br/>

                    cont<br/>

                    cont<br/>

                    cont<br/>

                    cont<br/>

                    cont最后一条<br/>

                </div>

            </div>

            <div class="left">left</div>

            <div class="right">right</div>

        </div>

    </div>

    <div class="footer">footer</div>

</body>

</html>

效果图：

重点代码解析

  1. 实现传统的双飞翼布局，此处不在赘述。
  2. 根据box-sizing属性的介绍，可以知道设置为border-box时，他的高度=padding + border的值，其中还需要利用margin的负值。
    1. padding缩小内容本身的高度
    2. margin负值拉近head、footer与内容的距离
.main {

      height: 100%;

      clear: both;

      box-sizing: border-box;

      padding: 60px 0px 100px 0px;

      margin: -60px 0px -100px 0px;

  }
  1. 内容部分滚动条的实现 由于我们的main(中间部分的最外层div，如.main)必须要设置height:100%，让其高度满屏。所以内容布局外层还需要增加一个div(如.main-main)。此时.main-main的高度就是我们想要的了。如下中间主体部分了css代码：
.cont-main{

  margin: 0px 300px 0px 200px;

  overflow: hidden;

  overflow-y: auto;

  height: inherit;

}

双飞翼布局的改造 box-sizing和margin负值的应用的更多相关文章

  1. 几个常见的布局的多种实现方式及margin负值总结

    第一部分:几个常见的布局实现方式 一.左右两边固定, center中间自适应未知 html代码中 center 部分首先要放在box的最前部分.然后是left,right 圣杯布局: <div ...

  2. CSS布局 -- 圣杯布局 & 双飞翼布局

    按照我的理解,其实圣杯布局跟双飞翼布局的实现,目的都是左右两栏固定宽度,中间部分自适应. 但在这里实现起来还是有一些区别的 [圣杯布局] 在这里,实现了左(200px) 右(220px) 宽度固定,中 ...

  3. css中的圣杯布局和双飞翼布局

    圣杯布局 布局要求: 三列布局,中间自适应,两边定宽 中间栏要在浏览器优先渲染 允许任意列的高度最高 用最简单的CSS.最少的HACK语句 解释说明: 1.min-width:700px是为了当页面缩 ...

  4. css多种方式实现双飞翼布局

    圣杯布局.双飞翼布局效果图 从效果图来看圣杯布局.双飞翼布局效果是一样一样的.圣杯布局.双飞翼布局就是左右两侧宽度固定,中间内容宽度自适应,即100% 圣杯布局 <style> *{ ma ...

  5. CSS经典布局——圣杯布局与双飞翼布局

    一.圣杯布局和双飞翼布局的目的 实现三栏布局,中间一栏最先加载和渲染 两侧内容固定,中间内容随着宽度自适应 一般用于PC网 二.圣杯布局的实现 技术要点: 设置最小宽度min-width 使用floa ...

  6. CSS经典布局-圣杯布局、双飞翼布局

    圣杯布局的来历是2006年发在a list part上的这篇文章:In Search of the Holy Grail · An A List Apart Article圣杯是西方表达“渴求之物&q ...

  7. CSS3之圣杯布局和双飞翼布局

    圣杯布局: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF ...

  8. CSS中的圣杯布局与双飞翼布局

    一,圣杯布局 1,什么是圣杯布局? 所谓圣杯布局就是用于实现一个两侧宽度固定,中间宽度自适应的三栏布局 2,构建圣杯布局的步骤: 2.1,添加一个容器,在这个容器中添加放三个盒子(左.中.右): 2. ...

  9. 3种常见的CSS页面布局--双飞翼布局、粘连布局、左右两列布局

    一.左右两列布局 1.代码如下,可先粘贴复制,自行运行 <!DOCTYPE html><html> <head> <meta charset="UT ...

随机推荐

  1. gulp 粗粗学习 记录下

    看视频学习 粗粗记录下 以便以后学习 1.初记录 gulp.task //定义一个任务 gulp.src //锁定到做task任务的文件路径 gulp.dest //锁定到任务做完后文件去向的路径 g ...

  2. [NodeJs Windows编译学习]

    https://blog.csdn.net/gesturexiaoxin/article/details/80162944

  3. Maven 插件之 docker-maven-plugin 的使用

    目录 docker-maven-plugin 介绍环境.软件准备Demo 示例 配置 DOCKER_HOST示例构建镜像 指定构建信息到 POM 中构建使用 Dockerfile 构建使用命令绑定 D ...

  4. 2.postman安装及使用

    一.postman说明 postman是研发和测试进行接口调试的工具.可以用来很方便的模拟get或者post或者其他方式的请求来调试接口. 二.postman安装 ①作为谷歌浏览器插件安装 参考资料: ...

  5. SpringBoot报错：Table 'database_name.hibernate_sequence' doesn't exist

    引起条件: SpringBoot+JPA插入包含自增字段的对象 @Id @GeneratedValue private Integer id; 解决方法: 给注解添加属性 @Id @Generated ...

  6. 用kattle将数据从SQLserver中导入到vertica中

    今天简单的学习了一下ETL工具kattle了,只是简单的上手,不过这也已经够我去做POC了. 首先大体介绍一下kattle,Kettle是一款国外开源的ETL工具,纯java编写,可以在Window. ...

  7. Ubuntu出现卡logo、卡住、黑屏无法正常启动、屏幕和键盘背光无法调节等一系列问题？可能是NVIDIA显卡驱动没装好

    也不知道是幸运还是不幸,我从一开始接触ubuntu就遇到这一系列的问题, 而且一直没有一个彻底解决的办法,搞得我无比头疼,也害得我重装了无数遍系统... 国际惯例,只按照个人习惯和喜好来写,对某些人来 ...

  8. CF F. Shovels Shop（前缀和预处理+贪心+dp）

    F. Shovels Shop time limit per test 2 seconds memory limit per test 256 megabytes input standard inp ...

  9. [shell] if语句用法

    bash中如何实现条件判断?条件测试类型:    整数测试    字符测试    文件测试 一.条件测试的表达式:    [ expression ]  括号两端必须要有空格    [[ expres ...

  10. 算法与数据结构(四) 图的物理存储结构与深搜、广搜(Swift版)

    开门见山,本篇博客就介绍图相关的东西.图其实就是树结构的升级版.上篇博客我们聊了树的一种,在后边的博客中我们还会介绍其他类型的树,比如红黑树,B树等等,以及这些树结构的应用.本篇博客我们就讲图的存储结 ...