css随记02布局
2015-10-17 17:27
477 查看
布局
二栏布局
利用absolute, margin
.container { position: relative; } nav { position: absolute; left: 0px; width: 200px; } section { /* position is static by default */ margin-left: 200px; }
利用
float, margin
nav { float: left; width: 200px; } section { margin-left: 200px; }
利用
inline-block,注意它可能会存在空格, 原因与解决方法
设置百分百和
vertical-align: top;,必要的时候添加
box-sizing: border-box;
nav { display: inline-block; vertical-align: top; width: 25%; } .column { display: inline-block; vertical-align: top; width: 75%; }
自适应时二栏布局变一栏布局
@media screen and (min-width:600px) { nav { float: left; width: 25%; } section { margin-left: 25%; } } @media screen and (max-width:599px) { nav li { display: inline; } }
二栏及多栏布局的一些新的属性:
column , flexbox
//三栏布局 .three-column { padding: 1em; -moz-column-count: 3; -moz-column-gap: 1em; -webkit-column-count: 3; -webkit-column-gap: 1em; column-count: 3; column-gap: 1em; } //二栏布局 .container { display: -webkit-flex; display: flex; } nav { width: 200px; } .flex-column { -webkit-flex: 1; flex: 1; }
相关文章推荐
- div+css用法小节、
- css实现多行文本溢出显示省略号(…)全攻略
- 【极度涉及】CSS各种居中方法
- CSS3动画
- 初识css3 的圆角效果border-radius
- CSS 回字布局
- 2015-10-15 css3
- CSS在网页的中应用方式
- CSS控制字体
- CSS 颜色单位
- CSS 长度单位
- CSS3 animation
- CSS中display对布局的影响以及元素display的默认值
- 【CSS】兼容IE7的各个各样的标题面板
- css3 3D变换和动画
- css兼容问题
- CSS基础
- css less编译工具 gulp-less
- css less学习 变量
- 详解css3弹性盒模型(Flexbox)