CSS设计指南：布局策略与实践-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_39590977/article/details/131406599

CSS设计指南笔记5

文章目录

CSS设计指南笔记5
- 5 页面布局

5 页面布局

5.1 布局的基本概念

多栏布局基本实现方案

固定宽度
- 布局大小不会随用户调整浏览器窗口大小而变化
流动
- 布局大小会随用户调整浏览器窗口大小而变化
  - 能更好地适应大屏幕
  - 放弃对页面某些方面的控制
弹性
- 在浏览器窗口变宽时，不仅布局变宽，所有内容元素的大小也会变化

布局高度

多数情况下，布局中结构化元素（乃至任何元素）的高度是不必设定的

布局能随着内容数量的增加而垂直伸缩

假如明确设定了元素高度，超出的内容要么被裁剪，要么跑到容器之外（取决于overflow属性）

布局宽度

需要更精细地控制布局宽度

即使必须设定栏宽，也不要给包含在其中的内容元素设定宽度，应该让这些内容元素自动扩展到填满栏的宽度

一般原则：应该控制布局宽度，而让内容决定布局高度

5.2 三栏-固定宽度布局

<div id="wrapper">
    <header>
    	<!-- 与布局同宽的页眉 -->
    </header>
    
    <nav>
    	<!-- 栏1 -->
    </nav>
    
    <article>
    	<!-- 栏2 -->
    </article>
    
    <aside>
    	<!-- 栏3 -->
    </aside>
    
    <footer>
    	<!-- 与布局同宽的页脚 -->
    </footer>
</div>

#wrapper {
    width: 960px;
    margin: 0 auto;
    border: 1px solid;
}

nav {
    width: 150px;
    float: left;
}

nav li {
    /* 去掉列表项目符号 */
    list-style-type: none;
}

article {
    width: 600px;
    float: left;
}

aside {
    width: 210px;
    float: left;
}

footer {
    /* 应用清除，阻止上移，不超过浮动元素的下方边界 */
    clear: both;
}

栏的总宽度等于外包装的宽度

为栏设定内边距和边框

调整栏中内容，布局有可能超过容器宽度导致右边的栏滑到左边栏的下方

为例让内容与栏边界空开距离，为栏添加外边界和内边距
在栏中添加大图片或者没有空格的长字符串

解决方式：

重设宽度以抵消内边距和边框
- 每次调整内、外边距都要重新设定布局宽度
给容器内部的元素应用内边距和边框
- 前提：内部元素没有明确地设定宽度
- 问题
  - 如果调整内容与容器边界的距离需要调整每个元素
  - 会增大栏宽
- 优化：在栏中添加一个没有宽度的div，让它包含所有内容元素，然后给这个div应用边框和内边距
  - 浮动栏并设定栏宽，但不给任何内容元素设定宽度，要让内容元素扩展以填充它们的父元素
使用box-sizing: border-box;
- 导致内容变短，但不影响布局
- IE6和IE7不支持

子 - 星选择符

一个组合选择符

星号选择符：选择“所有元素”

子 - 星选择符：选择元素的所有后代元素

someSelector > *

潜在性能问题：会导致浏览器遍历整个DOM结构去查找所有匹配的元素

预防过大的元素

预见到可能出现一些过大的元素（大图片，换行）

添加声明
```
.inner img {
    max-width: 100%;
}
```
给每个栏（或内部div）添加overflow:hidden声明
给所有栏的外包装元素应用word-wrap:break-word声明

5.3 三栏-中栏流动布局

实现三栏布局且让中栏内容区流动（不固定）的核心问题，就是处理右栏的定位，并在中栏内容区大小改变时控制右栏与布局的关系

在中栏改变大小时使用负外边距定位右栏
使用CSS3让栏容器具有类似表格单元的行为

5.3.1 用负外边距实现

控制两个外包装容器的外边距，其中一个外包装包围所有三栏，另一个外包装只包围左栏和中栏

<div id="main_wrapper">
    <header></header>
    
    <div id="threecolwrap"> /* 三栏外包装 */
        <div id="twocolwrap"> /* 两栏外包装 */
        	/* 左栏 */
            <nav></nav>
            
            /* 中栏 */
            <article></article>
    	</div>
        
        /* 右栏 */
        <aside></aside>
    </div>
    
    <footer></footer>
</div>

* {
    margin: 0;
    padding: 0;
}

body {
    font: 1em helvetica, arial, sans-serig;
}

div #main_wrapper {
    min-width: 600px;
    max-width: 1000px;
    /* 超过最大宽度时，布局居中 */
    margin: 0 auto;
}

header {
    padding: 5px 10px;
}

div #threecolwrap {
    /* 浮动强制它包围浮动的栏 */
    float: left;
    width: 100%;
}

div #twocolwrap {
    /* 浮动强制它包围浮动的栏 */
    float: left;
    width: 100%;
    /* 把右栏拉到区域外边距腾出的位置上 */
    margin-right: -210px;
}

nav {
    float: left;
    width: 150px;
    padding: 20px 0;
}

/* 让子元素与栏边距保持一定距离 */
nav > * {
    margin: 0 10px;
}

article {
    width: auto;
    margin-left: 150px;
    /* 在流动居中的栏右侧腾出空间 */
    margin-right: 210px;
    padding: 20px 0;
}

/* 让子元素与栏边距保持一定距离 */
aside > * {
    margin: 0 10px;
}

footer {
    clear: both;
    width: 100%;
    text-alignZ: center;
}

人造栏技术

给包围栏的外包装元素应用与各栏同宽的背景图片和背景色

5.3.2 用CSS3单元格实现

不会导致固定不变的表格布局，也不会出现难以重新应用样式的问题

把布局中的栏设定为table-cell

单元格（table-cell）不需要浮动就可以并排显示，直接为它们应用内边距也不会破坏布局
默认情况下一行中的所有单元格高度相同
任何没有明确设定宽度的栏都是流动的

CSS3表格行为在IE7以及更低版本中没有得到支持

没有任何腻子脚本

<nav>
	<!-- 内容 -->
</nav>
<article>
	<!-- 内容 -->
</article>
<aside>
	<!-- 内容 -->
</aside>

nav {
    display: table-cell;
    width: 150px;
    padding: 10px;
}
article {
    display: table-cell;
    padding: 10px 20px;
}
aside {
    display: table-cell;
    width: 210px;
    padding: 10px;
}