双飞翼布局的改造 box-sizing和margin负值的应用
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;
}
- context-size、border-size两个类的的width、height、padding、border、margin值都是一致。
- box-sizing: content-box时，div的宽度和高度为width和height的值
- 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>
效果图：
重点代码解析
- 实现传统的双飞翼布局，此处不在赘述。
- 根据box-sizing属性的介绍，可以知道设置为border-box时，他的高度=padding + border的值，其中还需要利用margin的负值。
- padding缩小内容本身的高度
- margin负值拉近head、footer与内容的距离
.main {
height: 100%;
clear: both;
box-sizing: border-box;
padding: 60px 0px 100px 0px;
margin: -60px 0px -100px 0px;
}
- 内容部分滚动条的实现 由于我们的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负值的应用的更多相关文章
- 几个常见的布局的多种实现方式及margin负值总结
第一部分:几个常见的布局实现方式 一.左右两边固定, center中间自适应未知 html代码中 center 部分首先要放在box的最前部分.然后是left,right 圣杯布局: <div ...
- CSS布局 -- 圣杯布局 & 双飞翼布局
按照我的理解,其实圣杯布局跟双飞翼布局的实现,目的都是左右两栏固定宽度,中间部分自适应. 但在这里实现起来还是有一些区别的 [圣杯布局] 在这里,实现了左(200px) 右(220px) 宽度固定,中 ...
- css中的圣杯布局和双飞翼布局
圣杯布局 布局要求: 三列布局,中间自适应,两边定宽 中间栏要在浏览器优先渲染 允许任意列的高度最高 用最简单的CSS.最少的HACK语句 解释说明: 1.min-width:700px是为了当页面缩 ...
- css多种方式实现双飞翼布局
圣杯布局.双飞翼布局效果图 从效果图来看圣杯布局.双飞翼布局效果是一样一样的.圣杯布局.双飞翼布局就是左右两侧宽度固定,中间内容宽度自适应,即100% 圣杯布局 <style> *{ ma ...
- CSS经典布局——圣杯布局与双飞翼布局
一.圣杯布局和双飞翼布局的目的 实现三栏布局,中间一栏最先加载和渲染 两侧内容固定,中间内容随着宽度自适应 一般用于PC网 二.圣杯布局的实现 技术要点: 设置最小宽度min-width 使用floa ...
- CSS经典布局-圣杯布局、双飞翼布局
圣杯布局的来历是2006年发在a list part上的这篇文章:In Search of the Holy Grail · An A List Apart Article圣杯是西方表达“渴求之物&q ...
- CSS3之圣杯布局和双飞翼布局
圣杯布局: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF ...
- CSS中的圣杯布局与双飞翼布局
一,圣杯布局 1,什么是圣杯布局? 所谓圣杯布局就是用于实现一个两侧宽度固定,中间宽度自适应的三栏布局 2,构建圣杯布局的步骤: 2.1,添加一个容器,在这个容器中添加放三个盒子(左.中.右): 2. ...
- 3种常见的CSS页面布局--双飞翼布局、粘连布局、左右两列布局
一.左右两列布局 1.代码如下,可先粘贴复制,自行运行 <!DOCTYPE html><html> <head> <meta charset="UT ...
随机推荐
- Python爬虫技术(从网页获取图片)+HierarchicalClustering层次聚类算法，实现自动从网页获取图片然后根据图片色调自动分类—Jason niu
网上教程太啰嗦,本人最讨厌一大堆没用的废话,直接上,就是干! 网络爬虫?非监督学习? 只有两步,只有两个步骤? Are you kidding me? Are you ok? 来吧,follow me ...
- SVM：根据大量图片来精确实现人脸识别—Jason niu
from __future__ import print_function from time import time import logging import matplotlib.pyplot ...
- 关于eclipse使用thymeleaf时，提示标签不显示及后续问题的解方法
因为thymeleaf 使用快捷键提示,不提示标签信息. 在使用网上说的的install new software安装插件的时候 报错: Unable to read repository at ht ...
- PCB Mark点相关
1)Mark点用于锡膏印刷和元件贴片时的光学定位.根据Mark点在PCB上的作用,可分为拼板Mark点.单板Mark点.局部Mark点(也称器件级MARK点) 2)拼板的工艺边上和不需拼板的单板上应至 ...
- python3 实现对代码文件中注释的翻译
心血来潮,昨天看见群里讨论一段图片转pdf的代码,直接拿过来发现不能用,原来是因为代码中传的文件对象不对,源码中说传递的是一个文件路径或一个文件对象.他传的是一个文件名,很是尴尬. 想了想,主要原因还 ...
- UI分层中使用PageFactory
基于原PO设计模式,需要改变原有的从文件中读取文件,更改为PageFactory模式.做出如下改动: 1 2 public MsysPage(DriverBase driver) { super(dr ...
- [Ubuntu]pkg-config和ldconfig
转载自->这里 我们知道,linux编译源码包基本步骤无非是:configure,make,make install三部曲:configure过程中可能会遇到无法找到某些头文件和动态库:原因有两 ...
- 正则匹配ts的引用
ts文件引入代码如下: import { IView, GridView, Sizing as GridViewSizing, Box, IGridViewStyles } from './gridv ...
- NOIP-珠心算
题目描述 珠心算是一种通过在脑中模拟算盘变化来完成快速运算的一种计算技术.珠心算训练,既能够开发智力,又能够为日常生活带来很多便利,因而在很多学校得到普及. 某学校的珠心算老师采用一种快速考察珠心算加 ...
- 微信小程序----没有 DOM 对象，一切基于组件化 ---- mpvue
封装好用的 类库 和 组件,复用且灵活度高 抽取相同的部分放在函数内部(组件内部) 抽取不同的部分放在形参(组件 props 传参,或者插槽) new Promise 运行时 初始化实例对象的状态为 ...