再谈布局，栅栏式自适应布局的学习和实现(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 ...
随机推荐
- ACM学习历程—ZOJ 3868 GCD Expectation（莫比乌斯 || 容斥原理）
Description Edward has a set of n integers {a1, a2,...,an}. He randomly picks a nonempty subset {x1, ...
- shader学习推荐
<DirectX 9.0 3D游戏开发编程基础> 当您理解了如何实现顶点着色器和像素着色器之后,接下来您可能想进一步了解使用这两种着色器能够实现哪些效果. 最好的方式就是研究一下现有的各种 ...
- Poj 1316 Self Numbers(水题)
一.Description In 1949 the Indian mathematician D.R. Kaprekar discovered a class of numbers called se ...
- EventLoop 与 Channel 的关联
Netty 中, 每个 Channel 都有且仅有一个 EventLoop 与之关联, 它们的关联过程如下: 从上图中我们可以看到, 当调用了 AbstractChannel#AbstractUnsa ...
- 奇异值分解（SVD）实例，将不重要的特征值改为0，原X基本保持不变
>> s = rand(5,7) s = 0.4186 0.8381 0.5028 0.1934 0.6979 0.4966 0.6602 0.8462 0.0196 0.7095 ...
- WSGI 简介（使用python描述）
WSGI 简介 背景 Python Web 开发中,服务端程序可以分为两个部分,一是服务器程序,二是应用程序.前者负责把客户端请求接收,整理,后者负责具体的逻辑处理.为了方便应用程序的开发,我们把常用 ...
- CURL访问举例
<?php function request($url, $params = [], $requestMethod = 'GET', $jsonDecode = true, $headers = ...
- linux 安装 elasticsearch
安装 Java 8 当你提前在使用 Elasticsearch,你开始寻找更好的 Java 性能和兼容性时,您可以选择安装 Oracle 的专有 Java (Oracle JDK 8). 将 Orac ...
- PHP和MySql数据库，如何获取每个分类的记录的总数
示例的数据库,如下: 本文说的问题,就是统计每个学院(Sdept)的人数. 还有很多情况,比如说:在制作CMS的时候,文章有个分类问题,所有的文章的记录都是存放到同一个表中. 当我们需要统计每个分类的 ...
- Hadoop YARN配置参数剖析(3)—MapReduce相关参数
MapReduce相关配置参数分为两部分,分别是JobHistory Server和应用程序参数,Job History可运行在一个独立节点上,而应用程序参数则可存放在mapred-site.xml中 ...