今天突然想起了温习一下css布局。之前看双飞翼布局只是粗略的看了一下，大概明白怎么做，但是并没有去延伸一下...还有它的孪生兄弟：圣杯布局。今天仔细的琢磨了一下；突然发现其实内容还不少的样子。 双飞翼布局或者说圣杯布局它们都是三列布局；（一列自适应和两列固定列）。当然，除了三列布局，还有一列布局（自 ...
分类：
其他好文 时间：
2017-05-07 20:00:35
阅读次数：
150
一些基本概念 viewport: 展现网页的媒体，比如窗口或者某个区域，它的大小是有限制的，为了不被平台术语所束缚，我们给他起名viewport，中文意思就是视口。 canvas: 而我们在渲染网页的时候通常并不知道我们需要多大的空间，而且这些空间通常尺寸会超过viewport的大小，于是实际上我们 ...
分类：
Web程序 时间：
2017-05-07 17:43:41
阅读次数：
199
一劳永逸的搞定 flex 布局 寻根溯源话布局 一切都始于这样一个问题：怎样通过 CSS 简单而优雅的实现水平、垂直同时居中。记得刚开始学习 CSS 的时候，看到 float 属性不由得感觉眼前一亮，顺理成章的联想到 Word 文档排版中用到的的左对齐、右对齐和居中对齐，然而很快就失望的发现 CSS ...
分类：
Web程序 时间：
2017-05-03 20:34:09
阅读次数：
204
position例子 通过具体的例子可以帮助我们更好地理解“position”。下面是一个真正的页面布局。 结果： 代码如下： 这个例子在容器比nav元素高的时候可以正常工作。 如果容器比nav元素低，那么nav会溢出到容器的外面。 之后我们会讨论下其他布局技术，它们都各有优劣。 原文地址： htt ...
分类：
Web程序 时间：
2017-05-03 15:19:03
阅读次数：
215
box-sizing 人们慢慢的意识到传统的盒子模型不直接，所以他们新增了一个叫做 box-sizing 的CSS属性。 当你设置一个元素为 box-sizing: border-box; 时，此元素的内边距和边框不再会增加它的宽度。 这里有一个与前一页相同的例子，唯一的区别是两个元素都设置了 bo ...
分类：
Web程序 时间：
2017-05-03 14:30:56
阅读次数：
187
盒模型 在我们讨论宽度的时候，我们应该讲下与它相关的另外一个重点知识：盒模型。 当你设置了元素的宽度，实际展现的元素却超出你的设置： 这是因为元素的边框和内边距会撑开元素。 看下面的例子，两个相同宽度的元素显示的实际宽度却不一样。 看看代码： 根据输出来的结果，或者盒子模型就知道，offsetWid ...
分类：
Web程序 时间：
2017-05-03 13:26:59
阅读次数：
255
如果你只想把所有内容都塞进一栏里，那么不用设置任何布局也是OK的。 然而，如果用户把浏览器窗口调整的很大，这时阅读网页会非常难受： 读完每一行之后，你的视觉焦点要从右到左移动一大段距离。 试着调整下浏览器窗口大小你就明白我的意思了！ 在解决这个问题之前，我们需要了解一个很重要的属性： display ...
分类：
Web程序 时间：
2017-05-02 18:29:35
阅读次数：
153
float: left|right; 可以自动排列自动折行, 但需要clear来配合清除浮动;display: inline-block 有些时候可以替代float实现相同的效果. position: absolute|relative; 要配合top,left等定位;使用： position: a ...
分类：
Web程序 时间：
2017-05-01 00:17:39
阅读次数：
247
网页布局基础 简介 什么是网页布局？ 网页布局是网页制作的基础，使用DIV+CSS布局网页是基础中的基础。三种基本布局方式：流式布局，浮动布局，绝对定位布局。 网页设计的特点：1：网页宽度可变 2头+内容主体（根据需要分栏）+页脚（不重要的内容） 对长度设置百分比可实现网页自适应 W3C标准包括结构 ...
分类：
Web程序 时间：
2017-04-22 23:00:12
阅读次数：
262
圣杯布局和双飞翼布局今天看了很多圣杯布局和双飞翼布局的技术博客，通过自己的理解总结一下吧。1.二者相同点： 实现的都是三栏布局，两边的盒子宽度固定，中间盒子自适应，也就是我们常说的固比固布局。它们实现的效果是一样的。2.不同点： 圣杯布局知识点：浮动，负边距，相对定位，不需要添加额外标签。 双飞翼： ...
分类：
Web程序 时间：
2017-04-21 23:15:44
阅读次数：
319
