再谈布局，栅栏式自适应布局的学习和实现(calc自适应布局)
布局真的很重要。一个不好的布局后期会有很多很多的bug，就像是建房子的地基一样。
首先，再一次地圣杯布局的学习，来源于该教程： http://www.jianshu.com/p/f9bcddb0e8b4
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
html,body{
margin: 0;
padding: 0;
}
.container{
height: 200px;
/*overflow: hidden;*/
}
.middle{
width: 100%;
height: 200px;
background-color: #f23244;
float: left;
}
.left{
width: 200px;
height: 200px;
background-color: blue;
float: left;
}
.right{
width: 200px;
height: 200px;
background-color: yellow;
float: left;
}
</style>
</head>
<body>
<div class="container">
<div class="middle">我是中间弹性区</div>
<div class="left">我是左边栏</div>
<div class="right">我是右边栏</div>
</div>
</body>
</html>
以上是其中的一部分，剩下的一部分为：
<style type="text/css">
html,body{
margin: 0;
padding: 0;
}
.container{
height: 200px;
overflow: hidden;
padding: 0 200px;
}
.middle{
width: 100%;
height: 200px;
background-color: #f23244;
float: left;
}
.left{
position: relative;
left: -200px;
margin-left: -100%;
width: 200px;
height: 200px;
background-color: blue;
float: left;
}
.right{
position: relative;
right: -200px;
margin-left: -200px;
width: 200px;
height: 200px;
background-color: yellow;
float: left;
}
</style>
写的太少，终究还是磕磕绊绊。
这就完了吗？？？并没有，我们的自适应测试开始了，于是我们也发现了bug，当页面小到一定程度的时候，两边的东西都没了，当然这是我们设置了 overflow:hidden 的缘故
在这里，我们可以直接通过在 container 中设置
min-width:700px直接解决。
其次，我们看到那篇文章下方的评论，确实不错，首先是我们这个 relative 定位是否必要呢？可以不要的。
我们可以在 container 中加入
box-sizing:border-box这样的话我们的 padding值就会从 外扩 变成 内缩，之后去掉relative也会是对的了。
在这里严肃更正一下，box-sizing是必须加的东西，否则你在刚开始看到时候好像是正确的，但其实，当你缩小了界面之后，其实就是错的了，我会将正确的代码放在下面。问题出在哪里呢
问题出在我们上面加的
min-width:700px上，我们来看看完整的代码。
.container{
height: 200px;
/*overflow: hidden;*/
padding: 0 200px;
/*box-sizing: border-box;*/
min-width: 700px;
}
当我们没有box-sizing:border-box;的时候，内边距是外扩的，这个时候的 min-width其实只是指中间栏的长度，而我们想要的是整个可视宽度变为 700px 的时候。
let oRight=document.getElementsByClassName("right")[0];
let oMiddle=document.getElementsByClassName("middle")[0];
const onWindowResize=()=>{
console.log("window的宽度为：",document.body.clientWidth);
console.log("中间栏的宽度为：",oMiddle.offsetWidth);
}
window.addEventListener('resize',onWindowResize);
我写了一个测试函数，通过以上测试能够证明以上说法的正确性。
之后我们还可以继续简化我们的代码。使用自动计算属性calc，这就是我们公司高手用的方式，虽然我暂时还不会用，但是通过阅读代码也是知道了有这么一种方法。我们先来写一段简单的代码。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
.middle{
width: calc(100% - 400px);
margin:0 auto;
height: 300px;
background-color: blue;
}
</style>
</head>
<body>
<div class="middle"></div>
<div class="left"></div>
<div class="right"></div>
</body>
</html>
真的好简单啊，就这样看起来的话。听说这种写法 对性能有损耗（但是现在是个性能过剩的时代，这个真的要紧吗？？？接着是兼容性问题，这个IE9以上和chrome等是能用的？ IE8，再见吧）
下面我根据网上的教程也DIY了一个自适应布局，用的是calc的方法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
ul,li{
list-style: none;
}
body{
background-color: #e8eadd;
color: #3c323a;
padding: 20px;
}
.wrap{
width: calc(100% - 40px);
margin: auto;
background-color: yellow;
min-width: 300px;
}
header{
margin: 0 auto;
padding: 20px;
width: calc(100% - 40px);
background-color: blue;
color: #fff;
}
main{
border:8px solid #b8c172;
float: left;
margin-right: 20px;
padding: 20px;
width: calc(75% - 20px*2 - 8px*2);
}
aside{
border:8px solid #b8c172;
float: left;
padding: 20px;
width: calc(25% - 20px*2 - 8px*2 - 20px);
}
footer{
clear: both;
background-color: #000;
width: 984px;
width: calc(100% - 40px);
padding: 20px;
color: #fff;
}
</style>
</head>
<body>
<div class="wrap">
<header>
<h1>I'm header.</h1>
</header>
<main>
<h1>古诗</h1>
<p>春水碧于天</p>
</main>
<aside>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
</aside>
<footer>
<h5>I'm footer.</h5>
</footer>
</div>
</body>
</html>
接下来这个是使用了 box-sizing 的写法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
html,body{
width: 100%;
height: 100%;
box-sizing: border-box;
}
body:after{
content: "";
width: 0;
height: 0;
display: block;
visibility: hidden;
}
.header,
.footer{
width: 100%;
}
.header,
.left,
.content,
.right,
.footer{
box-sizing: border-box;
border: 10px solid #000;
}
.left,
.content,
.right{
float: left;
height: calc(100% - 240px);
}
.header{
height: 100px;
background-color: red;
}
.footer{
position: absolute;
bottom: 0;
height: 100px;
background-color: yellow;
}
.left{
margin: 20px 0;
background-color: green;
width: 100px;
}
.content{
margin: 20px 20px;
width: calc(100% - 240px);
background-color: #832333;
}
.right{
margin: 20px 0;
width: 100px;
background-color: #666;
}
</style>
</head>
<body>
<div class="header">header</div>
<div class="left">left</div>
<div class="content">content</div>
<div class="right">right</div>
<div class="footer">footer</div>
</body>
<script type="text/javascript">
// 需要注意的是那个 body和html 部分，需要这样写
// html,body{width:100%;height:100%}
//
</script>
</html>
这里主要需要注意的是，body和html需要设置 width 和 height 为 100%。
再谈布局，栅栏式自适应布局的学习和实现(calc自适应布局)的更多相关文章
- soapUI 再谈SoapUI接口测试--文件组织与接口“布局”管理
再谈SoapUI接口测试--文件组织与接口“布局”管理 by:授客 QQ:1033553122 SoapUI-Pro-x64-5.1.2_576025(含破解文件),软件下载地址: http://pa ...
- Java学习笔记(1)-(GridBagLayout)网格袋布局
学习JAVA-布局管理的时候,在书上看到了这么一段话:GridBagLayout的功能非常强大,使用是也比较复杂,考虑到一般的读者很少会使用到这种管理,这里不做介绍.然书本就跳过了,为什么功能强大却很 ...
- 【转】Android开发学习笔记：5大布局方式详解
Android中常用的5大布局方式有以下几种: 线性布局(LinearLayout):按照垂直或者水平方向布局的组件. 帧布局(FrameLayout):组件从屏幕左上方布局组件. 表格布局(Tabl ...
- 学习 ExtJS 4 面板与布局
原文 http://www.cnblogs.com/codealone/archive/2013/06/04/3091325.html 面板Panel Ext.panel.Panel拓展自Ext.co ...
- [CSS布局]3列布局：左右两列固定宽度、中间列自适应满宽
一种常见的3列布局,左右两列固定宽度.中间列自适应满宽.整个网页不出现横向滚动条 纯CSS实现 效果图: 代码: <!DOCTYPE html> <html lang="e ...
- 【转】 Pro Android学习笔记（四三）：Fragment（8）：再谈Transaction和管理器
目录(?)[-] Transaction的一些操作 再谈FragmentManager 调用其他fragment的方法 唤起activity 唤起fragment和相互通信 一些其它 Transact ...
- WPF学习笔记系列之一 （布局详情）
布局:StackPanel 栈布局:控件不会拐弯且多出的不再显示.DockPanel 停靠布局 吸在上边下边或左右.WrapPanel 环绕布局 一行控件会拐弯Canvas 进行基于 ...
- 【学习笔记】响应式布局的常用解决方案（媒体查询、百分比、rem、和vw/vh）
原文转载:https://blog.csdn.net/sinat_17775997/article/details/81020417 一.媒体查询 不同物理分辨率的设备,在还原设计稿时,css中设置的 ...
- C++ Primer 学习笔记_32_STL实践与分析（6） --再谈string类型（下）
STL实践与分析 --再谈string类型(下) 四.string类型的查找操作 string类型提供了6种查找函数,每种函数以不同形式的find命名.这些操作所有返回string::size_typ ...
随机推荐
- 关于Windows与Linux下32位与64位开发中的数据类型长度的一点汇总
32位与64位的数据类型长度是不一样的,而且windows和linux也有些许区别,下面把64位下的数据长度列表如下(无符号unsigned和有符号的长度一样): linux64 ...
- Tangent space(切线空间)
https://en.wikipedia.org/wiki/Frenet%E2%80%93Serret_formulas The tangent, normal, and binormal unit ...
- Docker容器里的进程为什么要前台运行
<第一本Docker书>里面,讲到Docker容器启动web服务时,都指定了前台运行的参数,例如apache: ENTRYPOINT [ "/usr/sbin/apache2&q ...
- poj 2105 IP Address(水题)
一.Description Suppose you are reading byte streams from any device, representing IP addresses. Your ...
- 不卸载ceph重新获取一个干净的集群环境
不卸载ceph重新获取一个干净的集群环境 标签(空格分隔): ceph ceph环境搭建 运维 部署了一个ceph集群环境,由于种种原因需要回到最开始完全clean的状态,而又不想卸载ceph客户端或 ...
- mybatis---demo1--(缓存)----bai
News-mapper.xml 配置: <?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE ma ...
- 使用变参函数实现pwd命令
#include "stdafx.h"#include <Windows.h> #define DIRNAME_LEN (MAX_PATH+2) BOOL PrintS ...
- python+selenium简单实现拖动元素实例
from selenium import webdriver#引入ActionChains类from selenium.webdriver.common.action_chains impo ...
- [HDU1754]I Hate It线段树裸题
http://acm.hdu.edu.cn/showproblem.php?pid=1754 解题关键:刚开始死活超时,最后发现竟然是ch,和t1.t2每次循环都定义的锅,以后养成建全局变量的习惯. ...
- TCP/IP四层体系结构
1.数据链路层 2.网络层 3.传输层 4.应用层 , 其中IP是在第二层网络层中,TCP是在第3层传输层中, Internet体系结构最重要的是TCP/IP协议,是实现互联网络连接性和互操作性 ...