1.众所周知，每个IE的版本都有两种模式，怪异模式（混杂模式）和标准模式。下图附上针对IE的hack。2.另外有一种引进css的方法，也可以作为调整网站hack的方法： 除IE之外的浏览器 小雨IE6版本的IE浏览器 这里只给出了一个样式，还有很多的版本判断的，就没有全部写出来。 3.IE6中的png图片透明问题使用DDPngMin.js插件解决；4.双边距问题在浮动的方向上不要有margin的这个方向的值，比如如果有float:left属性，那么就不要...
前言 在MyLayout的6大布局中，每种布局都有不同的应用场景。且每种布局的子视图的约束机制不一样：线性布局MyLinearLayout、表格布局MyTableLayout、流式布局MyFlowLayout、浮动布局MyFloatLayout这四种布局的子视图之间的约束是通过添加到父布局的先后顺序来决定的；框架布局MyFrameLayout中的子视图则只跟父布局视图有关，而跟添加的先后顺序无关；相对布局中MyRelativeLayout的子视图则是通过设置视图之间的依赖关系来建立...
常见的margin: 0 auto;可以将block元素水平居中，实际上auto margins可不止这一点用处呢。在flexbox布局中，auto margins不仅能实现左、右对齐和水平居中，还能实现上、下对齐和垂直居中，甚至可以在同一个container中同时实现多种对齐方式，布局功能颇为强大。在很多情况下，auto margins比align与justify系列对齐属性（alignment properties）更加简洁和巧妙，还不容易出错！ 在flexbox布局中，auto margins之所以有这么强大的...
标题严格遵守了新广告法，你再不爽，我也没犯法呀！屁话不多说，直入！ 所谓布局，其实包含两个含义：尺寸与定位。也就是说，所有与尺寸和定位相关的属性，都可以用来布局。 大体上，布局中会用到的有：尺寸相关的盒子模型，普通流、浮动、绝对定位三种定位机制，CSS3中的transform、弹性盒子模块、试验中的grid模块。逛园子的时候经常可以看到浮动布局，inline-block布局，弹性盒布局这几个名词。现在对布局也算有一点了解...
Web的Flex弹性盒模型 body{ font-family: '微软雅黑'; /*font-family: cursive, '微软雅黑';*/ padding: 0; margin: 20px 0 40px; font-size: 16px; background-color: #F9F9F9; } h1{ color: #0BF; text-indent: 15px; } h3{ color: #6D7273; text-indent: 15px; padding: 10px 0; background-color: #fff; } p{ margin: 0; padding: 0; color: #666; margin-bottom: 5px; } .boxes{ padding: 0 10px; overflow...
通过阅读和学习书籍《CSS3实战》总结 《CSS3实战》/成林著.—北京机械工业出版社2011.5 ??多列布局适合纯文字版式设计，如报纸内和杂志类网页布局，不适合做网页结构布局。灵活使用多列布局特性，可以实现在多列中显示文字和图片，从而节省大量的网页空间。如果网页上的文字很长，多列布局特性就能够发挥它的用武之地。 兼容性参考：http://www.w3.org/TR/css3-multicol/ columns属性–定义多列布局 ??columns是多列布局...
学习要点： 1.布局简介 2.旧版本 主讲教师：李炎恢 本章主要探讨 HTML5 中 CSS3 提供的用来实现未来响应式弹性伸缩布局方案，这里做一个初步的了解。 一．布局简介 CSS3 提供一种崭新的布局方式：Flexbox 布局，即弹性伸缩布局模型(Flexible Box)。用来提供一个更加有效的方式实现响应式布局。但是用于这个布局方式还处于 W3C 的草案阶段，并且它还分为旧版本、新版本以及混合过渡版...
× 目录 [1]float [2]table [3]flex 前面的话 前面已经介绍过单列定宽单列自适应的两列布局，而两列自适应布局是指一列由内容撑开，另一列撑满剩余宽度的布局方式。本文将从float、table和flex来介绍两列自适应布局的3种思路。 思路一: float 在单列定宽单列自适应的两列布局中，经常用float和负margin配合实现布局效果。但由于margin取值只能是固定值，所以在两列都是自适应的布...
学习要点： 1.新版本 主讲教师：李炎恢 本章主要探讨 HTML5 中 CSS3 提供的用来实现未来响应式弹性伸缩布局方案，这里做一个初步的了解。 一．新版本 新版本的 Flexbox 模型是 2012 年 9 月提出的工作草案，这个草案是由 W3C 推出的最新语法。这个版本立志于指定标准，让新式的浏览器全面兼容，在未来浏览器的更新换代中实现了统一。 首先，设置伸缩盒的 display 有如下两个属性值： ...
× 目录 [1]float [2]inline-block [3]table [4]absolute [5]flex 前面的话 说起自适应布局方式，单列定宽单列自适应布局是最基本的布局形式。本文将从float、inline-block、table、absolute和flex这五种思路来详细说明如何巧妙地实现布局 思路一: float 说起两列布局，最常见的就是使用float来实现。float浮动布局的缺点是浮动后会造成文本环绕等效果，以及需要及时清除浮...
× 目录 [1]float [2]inline-block [3]table [4]absolute [5]flex [6]总结 前面的话 全屏布局在实际工作中是很常用的，比如管理系统、监控平台等。本文将介绍关于全屏布局的5种思路 思路一: float 【1】float + calc 通过calc()函数计算出.middle元素的高度，并设置子元素高度为100% body,p{margin: 0;}body,html,.parent{height: 100%;}.middle{ ov...
圣杯布局和双飞翼布局的目的都是：左右两栏固定宽度，中间部分自适应； 圣杯布局 圣杯布局HTML： 我是主要 我是左边 我是右边 圣杯布局CSS: * { margin: 0; padding: 0}.main { background-color: yellow; height: 100px; float: left; width: 100%;}.left { background-color: red; width: 200px; height: 100px; float: left; ma...
× 目录 [1]边框模拟 [2]负margin [3]table [4]absolute [5]flex [6]js 前面的话 等高布局是指子元素在父元素中高度相等的布局方式。等高布局的实现包括伪等高和真等高，伪等高只是看上去等高而已，真等高是实实在在的等高。本文将介绍边框模拟、负margin这两种伪等高以及table实现、absolute实现、flex实现和js判断这四种真等高布局 伪等高 边框模拟 因为元素边框和...
学习要点： 1.早期多列问题 2.属性及版本 3.属性解释 主讲教师：李炎恢 本章主要探讨 HTML5 中 CSS3 提供的多列布局，通过多列布局我们方便的创建流体的多列布局。 一．早期多列问题 我们有时想布局成报纸、杂志那样的多列方式（至少两列，一般三列以上），但早期 CSS 提供的布局方式都有着极大的限制。如果是固体布局，那么使用浮动或定位布局都可以完成。但对于流体的多列，比如三...
× 目录 [1]float [2]inline-block [3]table [4]flex 前面的话 等分布局是指子元素平均分配父元素宽度的布局方式，本文将介绍实现等分布局的4种方式 思路一: float 缺点:结构和样式存在耦合性，IE7-浏览器下对宽度百分比取值存在四舍五入的误差 【1】float + padding + background-clip 使用padding来实现子元素之间的间距，使用background-clip使子元素padding部分...