博客
关于我
固定布局
阅读量:117 次
发布时间:2019-02-26

本文共 739 字,大约阅读时间需要 2 分钟。

一、概念

固定布局就是指各个部分都采用固定宽度的页面布局,如果缩放页面到窗口宽度小于页面宽度时,就会导致本部分内容不可见,必须通过滚动条的拖动才可以浏览全部内容。

二、定义列宽

一个固定列宽的栅格系统主要由3个部分组成:列(Column)、槽(Gutter)、外边距(Margin)。列的宽度决定了容器内部的宽度,槽的宽度决定了列与列之间的固定间距,外边距则表示container边界和实际内容之间的间距。

要构建栅格系统,首先要确定container的宽度和列数。

三、运用CSS实现固定列宽的栅格

固定列宽的栅格系统主要内容

  • 设置容器,960gs的容器采用了960像素宽度居中的设置,需要设置width: 960px;并且左右两侧的外边距设置为auto,也可以简单地设置为margin: auto;。
  • 为栅格命名,栅格命名一般采用grid(格子)或者column(列)作为前缀进行表示,数字作为后缀表示栅格的列数。
  • 设置栅格的全局属性,左浮动(float: left;)属性是必需的,此外还需要设置栅格之间的宽度。960gs设置左右两侧的外边距均为10像素,也可以向Bootstrap 2一样只设置一侧的边距。
  • 设置列宽,960gs采用的方式是12列栅格的宽度恰好填满容器。那么grid_1的整体宽度就是60像素,加上左右两侧的外边距为80像素。grid_n的宽度就是(80*n-20)像素。

注意:

  • 有一些栅格系统,比如Bootstrap 2,它的12个单列栅格宽度之和超过了外层容器的宽度,需要在容器内多增强一层,设置margin的负值,例如.row{margin-left: -10px;}
  • 对于像960gs这样完善的栅格系统,还会提供诸如偏移量、清除浮动等辅助功能。

转载地址:http://oqoy.baihongyu.com/

你可能感兴趣的文章
Mysql学习总结(56)——MySQL用户管理和权限设置
查看>>
Mysql学习总结(57)——MySQL查询当天、本周、本月、上周、本周、上月、距离当前现在6个月数据
查看>>
Mysql学习总结(58)——深入理解Mysql的四种隔离级别
查看>>
Mysql学习总结(59)——数据库分库分表策略总结
查看>>
Mysql学习总结(5)——MySql常用函数大全讲解
查看>>
Mysql学习总结(60)——并发量大、数据量大的互联网业务数据库设计规范总结
查看>>
Mysql学习总结(61)——MySQL优化之DBA级优化整理汇总
查看>>
Mysql学习总结(62)——MySQL连接com.mysql.jdbc.exceptions.jdbc4.CommunicationsException: Communications link问题
查看>>
Mysql学习总结(63)——Mysql数据库架构方案选择与分析
查看>>
Mysql学习总结(64)——Mysql配置文件my.cnf各项参数解读
查看>>
Mysql学习总结(65)——项目实战中常用SQL实践总结
查看>>
Mysql学习总结(66)——设置MYSQL数据库编码为UTF-8
查看>>
Mysql学习总结(67)——MYSQL慢查询日志
查看>>
Mysql学习总结(68)——MYSQL统计每天、每周、每月、每年数据 SQL 总结
查看>>
Mysql学习总结(69)——Mysql EXPLAIN 命令使用总结
查看>>
Mysql学习总结(6)——MySql之ALTER命令用法详细解读
查看>>
Mysql学习总结(70)——MySQL 优化实施方案
查看>>
Mysql学习总结(71)——MySQL 重复记录查询与删除总结
查看>>
Mysql学习总结(71)——数据库介绍(MySQL安装 体系结构、基本管理)再回顾
查看>>
Mysql学习总结(72)——MySQL 开发者开发,设计规范再总结
查看>>