CSS页面布局与网格(上)
1.布局规划
1.1 网格
网格系统是设计师在切分布局时作为参照的一组行和列。
1.2 布局辅助类
类名用于为布局添加样式。为了让样式可以重用,让类名表达其意图。
.column { /* 一般列的样式 */ }
.column-half { /* 占列宽的一半 */ }
.row { /* 一般行的样式 */ }
另一种做法:
.thing,
.other-thing,
.third-thing,
.fourth-thing {
/* 这里共用的样式 */
}
命名规范是高质量代码的重要组成部分。
如果设计很复杂,那么最好选择一个现成的CSS布局框架。
到底是该选择现成的框架还是自己写呢?视情况而定。如果你要快速做一个原型以验证某个想法,当然要选现成的框架。如果你的网站复杂到要修改已有框架的很多代码,那可能还不如自己写更好。
2.创建灵活的页面布局
2.1 包装元素
包装元素是页面布局中常用的一个盛放内容的元素。
<body>
<div class="wrapper">
<h1>My page</h1>
</div>
</body>
body {
margin: 0; /* body元素默认是有外边距的。 */
}
.wrapper {
width: 95%;
max-width: 76em;
margin: 0 auto;
}
通过自动外边距,将包装元素设置为在页面上居中。
2.2 行容器
<div class="media-block">
<img class="media-fig" src="img/pic.png" alt="The pic" />
<div class="media-body">
<h3>Title of this</h3>
<p>Brief description of this</p>
</div>
</div>
.media-block {
background-color: gray;
border: solid 1px black;
}
.media-fig {
float: left;
width: 30%;
}
.media-body {
float: right;
width: 65%;
}
浮动的元素会被拿出文档流,因此类名为.media-block
的div
不会占用空间:它只包含浮动的内容,因此无法在文档流中为它生成高度。在类名为.media-block
的div
内部某处应用clear
,从而在使用了clear
的元素上方创造出足够的垂直外边距,从而为包住浮动元素创造出空间。
<div class="media-block">
<img class="media-fig" src="img/pic.png" alt="The pic" />
<div class="media-body">
<h3>Title of this</h3>
<p>Brief description of this</p>
<div class="clear"></div> <!-- 额外添加的空div -->
</div>
</div>
.clear {
clear: both;
}
有时候可能会有现成的元素用于清除,但这里为了实现我们想要的布局而引入了空div
。虽然我们可以通过overflow
属性来包含浮动元素,但是比较大的区块很可能会有定位内容被摆放到行容器之外。因此,比较好做法是使用设置了清除的伪元素。
.media-block:after {
content: '';
display: block;
clear: both;
}
2.3 创建列
<div class="row row-quartet">
<div class="col subcategory-featured">
<h3>Story</h3>
</div>
<div class="col">
<h3>Story</h3>
</div>
<div class="col">
<h3>Story</h3>
</div>
</div>
/* 使用浮动把行分成列 */
.col {
float: left;
box-sizing: border-box;
}
/* 使用通用选择符,降低规则特殊性,后面可以用一个特殊的类名来覆盖这个宽度。 */
.row-quartet > * {
width: 25%;
}
.subcategory-featured {
width: 50%;
}
2.4 流式空距
给列间添加一些空距(gutter)。使用外边距作为空距,保证空距与列宽相协调。
外边距相对包含块来计算,空距与总宽度的比例再除以2就是每一列左右两边的外边距。(假设在一般的屏幕尺寸中,空距等于文本的行高,两个行之间的距离等于行高。)
.row {
/* 抵消最外侧的空距 */
margin: 0 -.9%;
}
.col {
/* 流式空距 */
margin: 0 .9% 1.375em;
}
设置空距的替代方案:
.col {
float: left;
box-sizing: border-box;
/* 使用内边距来设置空距。 */
padding: 0 .6875em 1.375em;
}
2.5 增强列:包装与等高
用行内块包装行与列:
<ul class="row row-quartet row-wrapping">
<li class="col">
<div class="story">
<h3><a href="#">Perferendis, ipsam! Dolor sit amet consectetur</a></h3>
</div>
</li>
<li class="col">
<div class="story">
<h3><a href="#">Aliquam mattis eros id posuere.</a></h3>
</div>
</li>
<!-- 还有更多 -->
</ul>
.row-wrapping {
font-size: 0; /* 去掉行内块之间的间隙 */
margin: 0 -11px; /* 考虑到先后兼容的后备规则 */
margin: 0 -.6875rem;
}
.row-wrapping > * {
float: none;
vertical-align: top;
display: inline-block; /* 行内块 */
font-size: 16px; /* 考虑到先后兼容的后备规则 */
font-size: 1rem;
}
使用Flexbox实现等高的列:
.flexbox .row {
display: flex;
}
这样,我们就已经创建了等高的列,其实这也是可伸缩项会拉伸以填充父元素的默认行为。
.flexbox .col {
display: flex;
flex-direction: column;
}
.flexbox .col > * {
flex: 1; /* flex-grow: 1、flex-shrink: 1、flex-basis: 0。 */
}
/* 对包装行进行增强 */
.flexwrap .row-wrapping {
display: flex;
flex-wrap: wrap; /* 允许折行 */
}
Flexbox是一种强大的设计工具,可以实现精细而又灵活的内容布局。
基于浮动的布局基础上又应用了Flexbox,做到了最大限度的向后兼容。
现代Flexbox性能一般都比浮动要优越。
使用表格实现二维布局,表格中的单元可通过colspan
和rowspan
实现复杂的布局。
参考资料:
- 《精通CSS》— [英] 安迪·巴德、[瑞典] 埃米尔·比约克隆德
CSS页面布局与网格(上)的更多相关文章
- CSS页面布局与网格(下)
3.二维布局:CSS Grid Layout CSS Grid Layout模块为了能在二维空间里控制元素的顺序.位置和大小而定义了一组CSS属性. 被设值为display: grid的元素叫网格容器 ...
- CSS 页面布局、后台管理示例
CSS 页面布局.后台管理示例 页面布局 1.头部菜单 2.中间内容/中间左侧菜单 3.底部内容 <div class='pg-header'> <div style='width: ...
- css页面布局
写在前面: 页面布局整体上可以分为两类:固定宽度(一般固定960px):流式布局:将流式布局转换为固定布局很容易,只需要外围再包括一个div,为其设置宽度即可. html默认的布局方式是将每个块状标签 ...
- CSS页面布局常见问题总结
在前端开发中经常会碰到各种类型布局的网页,这要求我们对css网页布局非常熟悉.其中水平垂直居中布局,多列布局等经常会被使用到,今天就来解决一下css布局方面的问题. 水平垂直居中的几种方法 说到水平垂 ...
- css页面布局总结
W3C标准:是万维网制定的一系列标准,包括结构化标准语言(html.xml),表现 标准语言(css),行为标准语言(DOM,ECMAScript<javascript>)组成.这个标准倡 ...
- css页面布局之左侧定宽,右侧自适应
二列布局的特征是侧栏固定宽度,主栏自适应宽度.三列布局的特征是两侧两列固定宽度,中间列自适应宽度. 之所以将二列布局和三列布局写在一起,是因为二列布局可以看做去掉一个侧栏的三列布局,其布局的思想有异曲 ...
- 一、CSS概述 二、CSS的选择器(认识) 三、CSS样式和属性(练习) 四、重构商城首页DIV+CSS(页面布局)(重点) 浮动/更改显示方式
一.CSS概述###<1>概念 DIV,就是一个HTML元素,块级元素,通常结合CSS进行页面的布局. CSS,层叠样式表,给HTML元素增强显示. ###<2>作用 样式定义 ...
- dic+css页面布局分享
HTML部分代码<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <t ...
- 第五章 CSS页面布局基础
1.标准文档流 在正常流中,在没有使用浮动或者定位的情况下,文本元素按照从上到下.从左到右的格式布局.这是浏览器的默认行为.在正常流中,块级元素从上到下依次排列,而行级元素从左到右依次排列.正常流中的 ...
随机推荐
- mongodb(四):对文档操作增删查改(python)
连接mongodb #!/usr/bin/env python # -*- coding:utf-8 -*- import pymongo mongo_client = pymongo.MongoCl ...
- 数据可视化之分析篇(七)Power BI数据分析应用:水平分析法
https://zhuanlan.zhihu.com/p/103264851 首先,以财务报表分析为例,介绍通用的分析方法论,整体架构如下图所示: (点击查看大图) 接下来我会围绕这五种不同的方法论, ...
- tolua-ToLua#暖更新
"重写"C#函数的Lua函数要访问C#类对象的没有wrap进Lua环境的私有数据成员.私有方法的时候,目前只能使用静态反射. 关于全Lua开发.全C#开发的问题.全Lua开发可能或 ...
- bzoj3436小K的农场
bzoj3436小K的农场 题意: n个数,知道m条关系:a-b≥c.a-b≤c或a==b.问是否存在满足所有关系的情况.n≤10000,m≤10000. 题解: 差分约束.因为只要求是否满足,因此最 ...
- CSS定位布局
CSS定位布局 基础知识 在CSS布局中,定位布局也是一种非常常见的技术手段,我们以京东为例: 上面是非常好的例子,对于定位布局来说它可以将一个元素放在页面上的任意一个位置. 但是定位布局也不能滥用, ...
- OSCP Learning Notes - Enumeration(4)
DNS Enumeration 1. Host Tool host is a simple utility for performing DNS lookups. It is normally use ...
- STL源码剖析:算法
启 算法,问题之解法也 算法好坏的衡量标准:时间和空间,单位是对数.一次.二次.三次等 算法中处理的数据,输入方式都是左闭又开,类型就迭代器, 如:[first, last) STL中提供了很多算法, ...
- JSON.stringify和JSON.parse的用法
用法概述 所有的现代浏览器都支持 JSON 对象,有两个非常有用的方法来处理 JSON 格式的内容: JSON.parse(string) 接受一个 JSON 字符串并将其转换成一个 JavaScri ...
- CentOS 7.0 x86_64官方正式版系统(64位)
下载地址 http://www.xitongzhijia.net/linux/201603/69219.html
- linux中neovim+tmux安装与配置遇到的问题
Neovim 安装与配置 安装 pip3 install neovim 之前安装过anaconda,默认安装python3和pip3 检查状态 :checkhealth 终端输入'nvim' 进入nv ...