Web前端开发 - 3 -CSS3布局

一、 CSS3布局基础（盒模型）

1. 盒模型结构(边界、边框、填充、内容)

/*盒子模型(Box Model)
具有以下特性：
 · 每个盒子都有：边界(外边距、margin)、边框(border)、填充(补白、内边距、padding)、内容(content) 4个属性
 · 每个属性都包括上下左右4个部分
 -. 盒子具有弹性，可以被撑大
*/

1. 边界

/* margin
可以取负值，能强迫元素偏移原来位置，实现相对定位功能
margin : length; 
margin : top right bottom left;
margin : top right bottom;
margin : top&bottom right&left;
*/
#box1 {margin : 1px 2em auto 1em; }

2. 边框

/* border 有三个子属性:border-style;border-color;border-width
· border-width : length(1px/1em) | thin/medium/thick
 可以单独设置某条边 : border-top/right/bottom/left-width
 快速定义各条边框宽度方法，同边界
· border(-top/right/bottom/left)-color : 颜色名blue | RGB颜色rgb(255,255,255) | 十六进制颜色制#72b2f1
· border(-top/right/bottom/left)-style : none | hidden | dotted点 | dashed | solid | double双线 | groove 3D凹槽 | ridge 3D凸槽 | inset 3D凹边 | outset 3D凸边
*/

3. 填充

/* padding 设置方式同margin
清除所有元素的预定义样式：
margin:0;  //清除边界值
padding:0;  //清除补白值
*/

4. 内容

/* content
内容区域包括：宽度、高度、背景。实际上背景可以延伸到补白区域，有些浏览器中背景图像甚至延伸到边框内。
CSS盒模型中：
W = width(content) + 2 * (border + padding + margin)
H = height(content) + 2 * (border + padding + margin)
IE怪异解析模式：（css的width表示内容区域、补白和边框宽度之和）
W = width + 2 * margin
H = height + 2 * margin

弹性布局:min-width ; max-
*/

2. CSS3完善盒模型

• 定义显示方式

/* 为了兼顾IE怪异模式，CSS3对盒模型进行了改善，定义了box-sizing模型，事先定义盒模型的尺寸解析方式
box-sizing : content-box | border-box | inherit;
- content-box : 维持css2.1盒模型组成模式，元素width/height = border + padding + content
- border-box : 重新定义css2.1模式，元素width/height = content
- 目前Webkit引擎支持-webkit-box-sizing私有属性，Mozilla Gecko引擎支持-moz-box-sizing私有属性，Presto引擎和IE浏览器直接支持该属性
*/

• 定义元素尺寸大小

/* resize 允许用户通过拖动的方式改变元素的尺寸，主要用于可以使用overflow属性的任何容器元素中
resize : none | both | horizontal | vertical | inherit
*/

• 溢出处理

/* overflow : 当一个块级元素的内容溢出了元素的框时，是否剪切显示
overflow-x : visible | hidden | scroll | auto |no-display | no-content;
overflow-y : visible(默认值，不剪切，也不添加滚动条) | hidden(不显示超过元素尺寸的内容) | scroll(内容超出元素尺寸时，显示滚动条) | auto(在需要时剪切内容并添加滚动条) |no-display(当内容超出元素尺寸，则不显示元素，类似display:none) | no-content(当内容超出了元素尺寸，则不显示内容，类似visibility:hidden);
*/

• 定义轮廓

/* outline : 定义块元素的轮廓线
outline : [outline-color] || [outline-style] || [outline-width] || [outline-offset] || inherit
*/

• 定义边框背景

/* border-image : 可以分成8部分分别定义
border-image-source: 定义边框的背景图像源，即图像URL
border-image-slice: 定义如何裁切背景图像，于背景图像的定位功能不同
border-image-repeat: 定义边框背景图像的重复性
border-image-width: 定义边框背景图像的显示大小
border-image-outset: 定义边框背景图像的偏移位置
*/

二、 CSS3+HTML5网页排版

1. 结构

• 块级元素、行内元素的显示类型转换：display 【display属性】
• HTML5结构

/*
article 定义文章块，有头部和底部
section 定义内容块，有标题 【 div元素关注结构的独立性，而section元素关注内容的独立性】
nav  	定义导航栏
aside	定义侧边栏
main	定义主要区域
header	定义标题栏
footer	定义脚注栏=
*/

2. 浮动显示

浮动布局不同于流动模式，它能够让对象脱离左右相邻元素，在包含框内向左或右侧浮动显示，但是浮动元素不能脱离文档流，依然受文档流的影响

• 定义浮动显示

/*
- 定义浮动显示float
float : none(默认) | left | right

- 清除浮动clear 
clear : none(默认，不主动换行显示) | left(如果左边存在浮动元素，则当前元素会换行) | right | both
清除不是清除浮动元素，而是清除自身，将自身清除到下一行显示。

混合浮动和流动布局时，定义浮动元素的边界或补白，实现调控间距的目的，因为浮动元素的边界和补白不会被流动元素覆盖。
*/

3. 定位显示

/* position 定义定位显示
position: static(默认，不定位，遵循默认流动模型) | relative(相对定位，文档流中的偏移位置) | absolute(绝对定位，将元素从文档流中拖出来，通过z-index属性定义层叠顺序) | fixed(固定定位)

属性 : left/right/top/bottom
z-index 属性值越大，层叠等级越高，如果为负值则隐藏在文档流下面

混合定位：如果父元素定义为relative，给子元素定义absolute，那么子元素将随着父元素，而不是整个页面进行变化
*/

三、 CSS3新布局

1. 多列布局

多列布局适合排版很长的文字内容，让其多列显示

/* columns
columns : column-width(每列宽度) | column-count(列数) | column-gap(列间距) | column-rule(列边框样式) | column-span(none/all 跨列显示) | column-fill(auto/balance 列高度)
- columns属性初始值根据元素个别属性而定，它适用于不可替换的块元素、行内块元素、单元格，但是表格元素除外

- column-rule : length | style(样式) | color | transparent(透明度)
- css3派生属性：column-rule-color / column-rule-width / column-rule-style
*/

2. 弹性盒布局

• 弹性盒布局适合设计自动伸缩的多列容器，如网页、栏目或模块，以适应移动页面设计的要求
• Flexbox伸缩盒 ：目的是允许容器有能力让其子项目能够改变其宽度、高度、顺序等，以最佳方式填充可用空间，适应所有类型的显示设备和屏幕大小。Flex容器会使子项目(伸缩项目)扩展来填充空间，或缩小它们以防止溢出容器，因此Flexbox布局最适合应用程序的组件和小规模的布局
• 传统的盒模型基于HTML文档流在垂直方向上排列盒子，使用弹性盒模型可以定义盒子的排列顺序，也可以反转之。

/* display
Flexbox弹性盒模型由伸缩容器和伸缩项目组成:
定义伸缩容器display : box(最老版本) | inline-box(最老版本) | flexbox(过渡) | inline-flexbox(过渡) | flex | inline-flex
· flex :将对象作为弹性伸缩盒显示。伸缩盒为最新版本
· inline-flex :将对象作为内联块级弹性伸缩盒显示。伸缩盒为最新版本
伸缩容器重的所有子项目将变成flex文档流，被称为伸缩项目
- CSS的columns属性在伸缩容器上没有效果，同时float、clear和vertical-align属性在伸缩项目上也没有效果

定义伸缩方向 
flex-direction : row(默认，ltr、rtl) | row-reverse(与row相反) | column(从上到下) | column-reverse(从下到上)

定义行数
flex-wrap : nowrap(默认，单行) | wrap(多行) | wrap-reverse(多行，相反方向) 

定义对齐方式
· 主轴对齐justify-content:flex-start(默认) | flex-end | center | space-between | space-around
· 侧轴对齐align-items:flex-start | flex-end | center | baseline |stretch(默认，拉伸填充整个伸缩容器)
· 伸缩行对齐align-content:flex-start | flex-end | center | space-between | space-around | stretch(默认)

定义伸缩项目 【主轴长度main size 、 侧轴长度cross size
· 显示位置: order : <integer> 	控制伸缩项目在容器出现的顺序
· 扩展空间: flex-grow : <number> 	默认为0，可以为负值
· 收缩空间: flex-shrink : <number>	默认为1，可以为负值
· 伸缩比率: flex-basis : <length>|auto	默认为auto，负值不合法
· 对齐方式: align-self : auto|flex-start|flex-end|center|baseline|stretch 在单独的伸缩项目上覆写默认的对齐方式
*/