双飞翼布局的改造 box-sizing和margin负值的应用
时间:2022-04-22
本文章向大家介绍双飞翼布局的改造 box-sizing和margin负值的应用,主要内容包括一、box-sizing属性、二、border-box属性的应用、重点代码解析、基本概念、基础应用、原理机制和需要注意的事项等,并结合实例形式分析了其使用技巧,希望通过本文能帮助到大家理解应用这部分内容。
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;
}
- SSDB安装配置记录
- Python标准库笔记(3) — datetime模块
- Django 1.10中文文档-第一个应用Part4-表单和通用视图
- Python标准库笔记(2) — re模块
- Python爬虫—破解JS加密的Cookie
- Go语言中json转成map结构
- rpc-dubbo简单入门
- Django 1.10中文文档-第一个应用Part3-视图和模板
- Go语言对JSON进行编码和解码
- [Go 语言社区]服务器自测JS 工程
- Django 1.10中文文档-第一个应用Part2-模型和管理站点
- 亿以内所有素数(Go语言版)
- Django 1.10中文文档-第一个应用Part1-请求与响应
- 三步学会用spring开发OSGI——(第二步:工程篇)
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- PHP数组遍历的几种常见方式总结
- 详解php协程知识点
- php curl简单采集图片生成base64编码(并附curl函数参数说明)
- PHP通过get方法获得form表单数据方法总结
- PHP filesize函数用法浅析
- PHP中创建和编辑Excel表格的方法
- php二维数组按某个键值排序的实例讲解
- thinkphp5引入公共部分header、footer的方法详解
- php实现文章评论系统
- PHP如何搭建百度Ueditor富文本编辑器
- 浅谈keras.callbacks设置模型保存策略
- pandas之分组groupby()的使用整理与总结
- PHP fclose函数用法总结
- Python collections.defaultdict模块用法详解
- PHP crc32()函数讲解