css布局

## 布局扩展

1. 等高布局
    利用margin-bottom负值与padding-bottom配合实现。
2. 三列布局，左右固定，中间自适应
    1. BFC方式 
    2. 定位
    3. 浮动 ( 双飞翼布局、圣杯布局 )
        margin负值
    4. flex弹性

Flex弹性盒模型

随着移动互联网的发展，对于网页布局来说要求越来越高，而传统的布局方案对于实现特殊布局非常不方便，比如垂直居中。
  2009年，W3C 提出了一种新的方案----Flex 布局，可以简便、完整、响应式地实现各种页面布局。目前，它已经得到了所有浏览器的支持，这意味着，现在就能很安全地使用这项功能。

flex-direction

flex-direction用来控制子项整体布局方向，是从左往右还是从右往左，是从上往下还是从下往上。

flex-wrap

flex-wrap用来控制子项整体单行显示还是换行显示。

flex-flow

 flex-flow属性是flex-direction和flex-wrap的缩写，表示flex布局的flow流动特性。第一个值表示方向，第二个值表示换行，中间用空格隔开。

justify-content

justify-content属性决定了主轴方向上子项的对齐和分布方式

align-items

align-items中的items指的就是flex子项们，因此align-items指的就是flex子项们相对于flex容器在侧轴方向上的对齐方式。

align-content

align-content可以看成和justify-content是相似且对立的属性，如果所有flex子项只有一行，则align-content属性是没有任何效果的。

作用在flex子项上的CSS属性

Grid网格布局

Grid布局是一个二维的布局方法，纵横两个方向总是同时存在。

grid-template-columns和grid-template-rows

对网格进行横纵划分，形成二维布局。单位可以是像素，百分比，自适应以及fr单位（网格剩余空间比例单位）。
有时候，我们网格的划分是很规律的，如果需要添加多个横纵网格时，可以利用repeat()语法进行简化操作。

grid-template-areas和grid-template

  area是区域的意思，grid-template-areas就是给我们的网格划分区域的。此时grid子项只要使用grid-area属性指定其隶属于那个区。
  grid-template是grid-template-rows，grid-template-columns和grid-template-areas属性的缩写。

grid-column-gap和grid-row-gap

 grid-column-gap和grid-row-gap属性用来定义网格中网格间隙的尺寸。
 CSS grid-gap属性是grid-column-gap和grid-row-gap属性的缩写。

justify-items和align-items

 justify-items指定了网格元素的水平呈现方式，是水平拉伸显示，还是左中右对齐。align-items指定了网格元素的垂直呈现方式，是垂直拉伸显示，还是上中下对齐。
 place-items可以让align-items和justify-items属性写在单个声明中。	

justify-content和align-content

 justify-content指定了网格元素的水平分布方式。align-content指定了网格元素的垂直分布方式。place-content可以让align-content和justify-content属性写在一个CSS声明中。

作用在grid子项上的CSS属性

Viewport视口

  在移动端viewport视口就是浏览器显示页面内容的屏幕区域。在viewport中有两种视口，分别表示为， visual viewport（可视视口）和layout viewport（布局视口）。      
  visual viewport 固定大小跟屏幕大小相同，在上面，而layout viewport 可改变大小，在下面。Layout viewport默认大小为980像素，可通过document.documentElement.clientWidth获取。
  现代网页需要将layout viewport设置成跟visual viewport等同大小，方便进行网页制作。

Viewport设置

通过<meta>标签进行设置，name属性指定viewport值，content属性进行视口配置。

移动端适配方案

流式布局原则

好处： 大屏幕下显示更多的内容。 	坏处：宽屏下比例会有一些不协调。

rem布局

单位：
em : 是一个相对单位，1em等于当前元素或父元素的font-size值。
rem : 是一个相对单位，1rem等于根元素的font-size值。
vw / vh : 把屏幕分为100份，1vw等于屏幕宽的1%。

响应式布局

利用媒体查询，即media queries，可以针对不同的媒体类型定义不同的样式，从而实现响应式布局 。

媒体类型

	常见选项：
	媒体类型
	and、not	
	min-width、max-width
	orientation:portrait、orientation:landscape
 	<link>
 	常见修改样式：      	
	display
	float
	width
	注：响应式代码写到要适配的CSS后面。

Bootstrap

Bootstrap 是最受欢迎的 HTML、CSS 和 JS 框架，用于开发响应式布局、移动设备优先的 WEB 项目。
  特色：
1. 响应式布局
2. 基于flex的栅格系统
3. 丰富的组件和工具方法
4. 常见交互使用


  官网：
 https://getbootstrap.com/

Containers

 container  //类用于固定宽度并支持响应式布局的容器。
 container-fluid  //通栏  类用于 100% 宽度，占据全部视口（viewport）的容器。
		二者之间的共同点为，两者都可以将高度设置成auto，即自动模式。最大的不同就是宽度的设定上。
container根据屏幕宽度利用媒体查询，已经设定了固定的宽度，作用为阶段性的改变宽度，所以在改变浏览器的大小时，页面是一个阶段一个阶段变化的。
container-fluid则是将宽度设定为auto，所以当缩放浏览器时，它会保持全屏大小，始终保持100%的宽度。
总结：
1)container类出现内边距和外边距，.container-fluid类没有。
2)container类左右内边距一直是15px，屏幕小于等于767px的时候没有margin值，屏幕大于767px开始有左右margin值，屏幕宽度为768px和1000px的时候，margin值相对最小，分别是9px和15px，其他时候margin值随着屏幕的增大而增大。.container-fluid类宽度不管屏幕宽度大小，一直是100%。
 Responsive breakpoints
   …

Grid system栅格系统

  Grid options      //网格选项
  Responsive classes    //响应类  
  Gutters
  Alignment
  Reordering
  Offsetting     
   ... 

Content

  Reboot
  Typography
  Code
  Images
  Tables
  Figures
   ... 

Components

  Alerts
  Badge
  Breadcrumb
  Buttons
  Button group
  Card
   ... 

Utilities

  Borders
  Clearfix
  Close icon
  Colors
  Display
  Embed
   ... 

col-xs , col-sm , col-md , col-lg的理解

摘要: bootstrap栅栏系统css中的col-xs-*、col-sm-*、col-md-* 的意义：
.col-xs- 超小屏幕 手机 (<768px)
.col-sm- 小屏幕 平板 (≥768px)	
.col-md- 中等屏幕 桌面显示器 (≥992px)	
.col-lg- 大屏幕 大桌面显示器 (≥1200px)
首先说明：
1、col-列；	
2、xs-maxsmall，超小；sm-small，小；md-medium，中等；lg-large，大；	
3、-*表示占列，即占自动每行row分12列栅格系统比；
4、col-xs-*超小屏幕 手机 (<768px),
.col-sm-*小屏幕 平板 (≥768px),	
.col-md-*中等屏幕 桌面显示器 (≥992px)(栅格参数).	
5、不管在哪种屏幕上，栅格系统都会自动的每行row分12列 col-xs-*和col-sm-* 和col-md-*后面跟的参数表示在当前的屏幕中 每个div所占列数。例如 <div class="col-xs-6 col-md-3"> 这个div在屏幕中占的位置是： .col-xs-6 在超小屏幕中占6列 也就是屏幕的一半（12/6列=2个div） ，.col-md-3 在中单屏幕中占3列也就是1/4（12/3列=4个div）。	
6、反推，如果我们要在小屏幕上并排显示3个div(12/3个=每个占4 列 )，则col-xs-4；在大屏幕上显示6个div(12/6个=每个占2列 ) ，则 col-md-2；这样我们就可以控制我们自己想要的什么排版了。	
7、以下案例说明：

<div class="container">
	    <div class="row">
	        <div class="col-md-4">col-md-4</div>
	        <div class="col-md-4">col-md-4</div>
	        <div class="col-md-4">col-md-4</div>
	        <!-- 说明：每row行共12列，分个3div，每个div平占4列，即3个*4列=12列 -->
	    </div>
	    <div class="row">
	        <div class="col-md-4">col-md-4</div>
	        <div class="col-md-8">col-md-8</div>
	        <!-- 说明：每row行共12列，分个2div，第1个div占4列，第2个div则占8列，即4列+8列=12列 -->
	    </div>
	    <div class="row">
	        <div class="col-md-3">col-md-3</div>
	        <div class="col-md-6">col-md-6</div>
	        <div class="col-md-3">col-md-3</div>
	        <!-- 说明：每row行共12列，分个3div，每1,3个div占3列，第2个div则占6列，即3列+6列+3列=12列 -->
</div>

8、混用案例：

HTML代码：

<div class="col-xs-12 col-sm-9 col-md-6 col-lg-3">
                        
</div>
当屏幕尺寸

小于 768px 的时候，用 col-xs-12 类对应的样式；

在 768px 到 992px 之间的时候，用 col-sm-9 类对应的样式；

在 992px 到 1200px 之间的时候，用 col-md-6 类对应的样式；

大于 1200px 的时候，用 col-lg-3 类对应的样式；