5.1 布局的基本概念

多栏布局有三种基本实现方案：固定宽度、流动、弹性

固定宽度
固定宽度布局的大小不会随用户调整浏览器窗口大小变化，一般是900到1100像素宽度。其中960像素是最常见的，因为这个宽度适合所有现代浏览器。
960 Grid   http://www.960.gs

流动布局
流动布局的大小会随用户调整浏览器窗口大小而变化。这种布局能够更好地适应大屏幕，但同时也意味着放弃对页面某些方面的控制。
这种可变的固定布局能够适应最大和最小屏幕，业界称为响应式设计。

弹性布局

布局高度与布局宽度
布局高度：多数情况下，布局中结构化元素的高度是不必设定的。
布局宽度：需要精细控制布局宽度

控制布局宽度，内容决定布局高度

为栏设定内边距和边框
为固定宽度的元素添加水平外边距、边框、内边距，会导致元素盒子变宽。
1)重设宽度以抵消内边距和边框
2)给容器内部的元素应用内边距和边框
  没有宽度的元素在水平方向上会适应其父元素，其内容会随着外边距、边框、内边距的增加而减少。

得出一个结论：如果布局中的栏是浮动的，而且都设定的宽度，你根本不需要去动它！要动，就把内容放在内部div里，动这个div。
3)使用box-sizing:border-box

类应该用于标记具有相同特征的元素

使用内部div在浮动元素中生成间距，而又不会改变布局的总宽度。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>多行多栏布局,实战</title><style type="text/css">* {margin: 0;padding: 0;}body {font-family: "Microsoft Himalaya", "Microsoft Himalaya", snog;font-size: 15px;}#wrapper {width: 960px;margin: 0 auto;border: grey solid 1px;}#header {background-color: lightslategray;}#nav {background-color: #486B02;}#banner img {height: 300px;width: 960px;}#product .product_area {width: 320px;float: left;padding: 10px 0;}#product .inner {margin: 10px;border: green solid 1px;}#content .content_area {width: 240px;float: left;padding: 10px 0;}#content .inner {margin: 0 10px;border: darkgreen solid 1px;}#footer {float: left;border: green solid 1px;margin: 10px 10px;}</style>
</head>
<body><div id="wrapper"><div id="header"><h1>Full-width content</h1></div><div id="nav"><h1>Navigation menus go here</h1></div><div id="banner"><img src="../images/black.jpg"></div><div id="product"><div class="product_area"><div class="inner">font-family 属性应该使用若干种字体名称作为回退系统，以确保浏览器/操作系统之间的最大兼容性。如果浏览器不支持第一个字体，则会尝试下一个。请以您喜欢的字体开始，并以通用字体系列结束，以便使浏览器在通用系统中挑选相似的字体，如果没有</div></div><div class="product_area"><div class="inner">font-family 属性应该使用若干种字体名称作为回退系统，以确保浏览器/操作系统之间的最大兼容性。如果浏览器不支持第一个字体，则会尝试下一个。请以您喜欢的字体开始，并以通用字体系列结束，以便使浏览器在通用系统中挑选相似的字体，如果没有</div></div><div class="product_area"><div class="inner">font-family 属性应该使用若干种字体名称作为回退系统，以确保浏览器/操作系统之间的最大兼容性。如果浏览器不支持第一个字体，则会尝试下一个。请以您喜欢的字体开始，并以通用字体系列结束，以便使浏览器在通用系统中挑选相似的字体，如果没有</div></div></div><div id="content"><div class="content_area"><div class="inner">font-family 属性应该使用若干种字体名称作为回退系统，以确保浏览器/操作系统之间的最大兼容性。如果浏览器不支持第一个字体，则会尝试下一个。请以您喜欢的字体开始，并以通用字体系列结束，以便使浏览器在通用系统中挑选相似的字体，如果没有</div></div><div class="content_area"><div class="inner">font-family 属性应该使用若干种字体名称作为回退系统，以确保浏览器/操作系统之间的最大兼容性。如果浏览器不支持第一个字体，则会尝试下一个。请以您喜欢的字体开始，并以通用字体系列结束，以便使浏览器在通用系统中挑选相似的字体，如果没有</div></div><div class="content_area"><div class="inner">font-family 属性应该使用若干种字体名称作为回退系统，以确保浏览器/操作系统之间的最大兼容性。如果浏览器不支持第一个字体，则会尝试下一个。请以您喜欢的字体开始，并以通用字体系列结束，以便使浏览器在通用系统中挑选相似的字体，如果没有</div></div><div class="content_area"><div class="inner">font-family 属性应该使用若干种字体名称作为回退系统，以确保浏览器/操作系统之间的最大兼容性。如果浏览器不支持第一个字体，则会尝试下一个。请以您喜欢的字体开始，并以通用字体系列结束，以便使浏览器在通用系统中挑选相似的字体，如果没有</div></div></div><div id="footer"><h1>font-family 属性应该使用若干种字体名称作为回退系统，以确保浏览器/操作系统之间的最大兼容性。如</h1></div>
</div></body>
</html>

CSS设计指南 5章 页面布局相关推荐

  1. CSS设计指南---页面布局

    CSS设计指南-页面布局 教材:CSS设计指南 实现多栏布局 三种方案: 固定宽度:固定宽度布局的大小不会随用户调整浏览器窗口大小而变化,一般是 900 到1100像素宽. 流动: 流动布局的大小会随 ...

  2. CSS设计指南---字体和文本的布局

    CSS设计指南-字体和文本的布局 教材:CSS设计指南 字体 与字体样式相关的6 个属性: font-family (可继承) font-size (可继承) font-style font-weig ...

  3. CSS设计指南（第3版）pdf

    下载地址:网盘下载 <图灵程序设计丛书:CSS设计指南(第3版)>是一本面向初中级读者的经典设计指南.全书共分8章,前4章分别介绍了HTML标记和文档结构.CSS工作原理.定位元素.字体和 ...

  4. CSS设计指南(第3版)

    <CSS设计指南(第3版)> 基本信息 原书名:Stylin'with CSS:a designer's guide 作者: (英)Charles Wyke-Smith 译者: 李松峰 丛 ...

  5. CSS设计指南 笔记3

    CSS设计指南 笔记3 3 定位元素 盒模型:浏览器为页面中的每个HTML元素生成的矩形盒子,都要按照可见版式模型(visual formatting model)在页面上排布 可见页面版式的三个属性 ...

  6. CSS几种常见的页面布局方式介绍

    问题:CSS几种常见的页面布局方式介绍? CSS常见的有以下7种,必须要掌握的是前3种: flex弹性盒子(弹性布局): rem布局(一般都是flex+rem使用的比较多): 响应式布局(响应式布局的 ...

  7. html第二章排列页面内容题目,HTML教程 第二章 页面布局及文字设计.doc

    HTML教程 第二章 页面布局与文字设计 标题 一般文章都有标题.副标题.章和节等结构,HTML中也提供了相应的标题标签,其中n为标题的等HTML总共提供六个等级的标题,n越小,标题字号就越大,以下列 ...

  8. CSS 设计指南(第3版) 初读笔记

    第1章 HTML标记与文档结构 关于<title>标签:搜索引擎会给<title>标签中的文字内容赋予很高的权重.而且这些文字也会作为网页标题出现在搜索结果列表中. 无论你想了 ...

  9. 前端面试CSS自检（下）页面布局、定位与浮动和场景应用（先看问题 自己自述一遍 不会再看答案 ）

    推荐大家的使用本篇文章的方式: 先看问题自己会不会,如果会的话,要自己说一遍,组织好语言. CSS的面试内容主要可以分四个部分: CSS基础.页面布局.定位与浮动和场景应用 CSS部分会涉及到代码的编 ...

最新文章

  1. 伍六七带你学算法 进阶篇-三数之和
  2. Apache HBase的现状和发展
  3. win7 IIS7环境下部署PHP 7.0
  4. ie11加载java插件_IE浏览器中ActiveX插件的使用
  5. (转)script标签到底该放在哪里
  6. 进程树--用Enki学Linux系列（18）
  7. asp.net 子域跨域 带cookie
  8. 确定一个整数是否是2的幂
  9. 餐厅点餐系统app总结
  10. java仿win7计算器布局
  11. 比“花书”更合适入门者的“鱼书”
  12. 图像处理之matlab的取整函数round、ceil、floor和fix
  13. php课程设计感想,设计心得体会
  14. 林忆莲：白莲花，红玫瑰
  15. 语法长难句——并列句的练习
  16. 补充学习2021.7.21—动态水波进度条
  17. 微信模板消息发送成功但显示空白的问题
  18. VB6不能加载MSCOMCTL.OCX最简单的解决办法
  19. css使两个盒子并列_CSS常见面试题
  20. 数据库中的 【行式存储】和【列式存储】

热门文章

  1. 《去哪儿网支付系统架构演进全历程》阅读有感
  2. 圆桌实录：技术无感化成为 2023 年最值得开发者和企业用户关注的技术趋势丨PingCAP DevCon 2022
  3. 304、bootstrap 之 图片样式
  4. android电视 优酷视频,将优酷视频投屏到智能电视上，竟然还有这种操作
  5. 荣耀30sr升级鸿蒙,荣耀30和V30系列将首批搭载Magic UI 4.0，后续支持升级为鸿蒙系统...
  6. POJ - 1077 Eight（A∗算法）
  7. 解决 chrome 37 之后 flash 版本过低问题
  8. bootstrap模态框保存后清除模态框数据的方法
  9. 从1到无穷大-强化学习篇
  10. 三星GPSDO STP2878LF 10MHZ驯服钟使用说明备忘录