CSS布局学习笔记

1.CSS布局概述和示例
CSS布局模式，简称为布局，是一种基于盒子与其兄弟姐妹盒子和祖辈盒子的交互方式，来确定盒子的位置和框的大小的算法。
考虑的是多个HTML元素放在一起时如何从整体的角度做样式控制。


2.浮动与清除
(1)浮动
浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。


浮动的特点：
一旦元素变为浮动元素之后，就会脱离正常的文档流，相当于正常文档流中没有了这个元素。
由于浮动框不在文档的普通流中，所以文档的普通流中的块框表现得就像浮动框不存在一样。
那么该元素后边的元素就会在正常文档流中顶替这个元素的位置。


浮动最基本的作用就是，把默认上下垂直排列的块级元素变成左右水平排列。


在 CSS 中，我们通过 float 属性实现元素的浮动。
float属性可取值为 left 或 right。


当只有框 1 向左浮动时，它脱离文档流并且向左移动，直到它的左边缘碰到包含框的左边缘。
因为它不再处于文档流中，所以它不占据空间，实际上覆盖住了框 2，使框 2 从视图中消失或部分被覆盖。


如果把三个元素都向左浮动，那么这些元素就会按照它们在文档流中的先后顺序从左往右并排；
如果包含框太窄，无法容纳水平排列的三个浮动元素，那么其它浮动块向下移动，直到有足够的空间。
如果把三个元素都向右浮动，同理。


(2)清除
浮动框旁边的行框被缩短，从而给浮动框留出空间，行框围绕浮动框。
因此，创建浮动框可以使文本围绕图像。
要想阻止行框围绕浮动框，需要对该框应用 clear 属性。
clear 属性的值可以是 left、right、both 或 none，
clear 属性规定元素的哪一侧不允许其他浮动元素。


clear属性只适用于块级元素！


还可以在被清理的元素的上外边距上添加足够的空间，使元素的顶边缘垂直下降到浮动。


这是一个有用的工具，它让周围的元素为浮动元素留出空间。


3.让父元素围住浮动的子元素
假设希望让一个图片浮动到文本块的左边，并且希望这幅图片和文本包含在另一个具有背景颜色和边框的比如div元素中。
这时就需要让父元素围住浮动的子元素。


几种方法：
（1）给 div 元素添加属性 overflow: hidden; 这时父元素就可以围住浮动的子元素了；
     这时父元素 div 的高度就会跟高度最高的子元素保持一致。
     此时父元素div后面的元素就不会和浮动的元素发生重叠，在div元素的正下方排列。


（2）让父元素 div 也浮动起来。
     这时父元素 div 的高度就会跟高度最高的子元素保持一致。
     但是，会出现问题：父元素div后面的元素可能会和浮动的div元素发生重叠。
 
（3）添加一个空的子元素并应用clear。
     因为浮动元素脱离了文档流，所以之前包围图片和文本的父元素 div 就不占据空间。
     如何让包围元素在视觉上包围浮动元素呢？就需要在这个父元素 div 元素中的某个地方应用 clear。
     如果div元素没有现有的元素可以应用清理，那就只能在浮动的子元素后面添加一个空的子元素，然后清除它。（而且空元素也不占用空间）
     即设置空元素的 clear:both;


（4）适用伪元素选择武器，给父元素div内容的最后加上内容，再设置为块级元素，clear清除，然后不显示该内容，高度设置为0。
     （这个方法太复杂了,好处是没有改变父元素div元素的布局和DOM结构）
     例：#div1::after {
         content: ".";
         clear: both;
         display: block;
         visibility: hidden;
         height: 0;
         }
     一般运用这种方法的一些元素可以取class="clearfix"，作为常用的一条规则使用。
     例：.clearfix { ... }
 
  实际中常用的就是方法（3）和（4）。


4.基于浮动的布局demo
（1）微博demo：
实现左中右三栏固定宽度的布局


设置元素的属性 margin: 0 auto; 就会有固定居中的效果；
margin 简写属性在一个声明中设置所有外边距属性。该属性可以有 1 到 4 个值。
例：margin:10px 5px 15px 20px; 
表示上外边距是 10px，右外边距是 5px，下外边距是 15px，左外边距是 20px
    margin:10px 5px;
表示上外边距和下外边距是 10px，右外边距和左外边距是 5px


取值有：
具体长度值
auto——浏览器计算外边距
百分数值——规定基于父元素的宽度的百分比的外边距。




（2）Google drive demo：
实现左中右三栏，左右两栏固定宽度、中间栏自适应宽度的布局


首先要让父元素div元素的宽度是自适应的，即宽度设为 width:100%；
先让浮动的其他版块浮动，可以适当调动元素的顺序使其和不浮动的中间栏水平排列；
此时父元素的文档流中只有中间栏的元素。
要让中间栏宽度自适应，则不能变成浮动的，应设为非浮动的普通元素；
根据左右两栏的宽度来设置中间栏的外边距，使中间分别与左右两栏错开；
同时不设置中间栏的宽度 width 或者 width: atuo;


这样，就达到了左右两栏固定宽度、中栏自适应宽度的布局。
随着浏览器窗口的放缩，左右两栏宽度固定，中间栏自适应宽度显示。


5.定位(position)
position 属性规定元素的定位类型。
常见的取值有四个取值：
static——默认值；没有定位，元素出现在正常的流中。


relative——生成相对定位的元素，相对于其正常位置进行定位。
            可以通过设置垂直或水平位置（top、bottom、left、right），让这个元素“相对于”它的起点进行移动。
            因此，"left:20" 会向元素的 left 位置添加 20 像素。
相对定位的特点：
无论是否进行移动，使用相对定位的元素仍然占据原来的空间。因此，移动元素会导致它覆盖其它框。


常用的作用有三个：
a.把父元素的定位属性设为 position:relative; 的好处，是为其子元素或后代元素做绝对定位(absolute)提供参照物；
b.设置相对定位实际上是把元素的默认层级进行了提升；
当p2、p3两个元素都是普通元素时，DOM结构中后定义的p3元素会默认比先定义的p2元素层级高，即可能p3会覆盖一部分p2元素，比如设置p3的margin-top: -20px;
而将p2变为定位元素，p3还是普通元素时，p2的层级就比p3高，这样就变为p2覆盖在p3上方；
也就是说重叠的层级是可以调整的。
c.而当两元素都为定位元素时，Z-index就可被用于将在一个元素放置于另一元素之后。z-index 默认值是 0，取值越大，越是位于上层。比如 z-index:-1; z-index:2;


absolute——生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。
            元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。
绝对定位的特点：
和浮动一样，会从正常文档流中脱离出来；
从父元素开始一直回溯到html元素，相对于第一个设置定位属性（即不是默认值static）的祖先元素进行定位；
当没有一个祖先元素设置定位属性时，就会参照页面的初始包含块也就是html元素的包含块作为参照物进行定位。
当页面有多屏时，页面滚动时绝对定位的元素也会滚动。


fixed——生成固定定位的元素，相对于浏览器窗口进行定位。
         元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定，可以设置偏移量。
固定定位的特点：
和浮动一样，会从正常文档流中脱离出来；
相对于浏览器窗口进行定位；
当页面有多屏时，页面滚动时固定定位的元素不会滚动，保持固定。


这样可以实现很多效果，比如顶部固定的导航栏、右侧固定的浮窗等。


注：Z-index可被用于将在一个元素放置于另一元素之后，不只是针对两个相对定位元素，单独的绝对定位元素也可以，比如设置 z-index:-1; 或 z-index:1;




6.绝对定位的应用demo
一般来说，绝对定位的最常用用法是实现一些组件的局部布局。


比如：
要对 li 元素中的类型为checkbox的 input 元素相对于父元素 li 元素做统一右对齐并垂直居中的布局，
有几种方法：
（1）浮动；给 input 元素添加 float 右浮动，再设定width、height、margin-right、margin-top等属性使其垂直居中。


（2）设置绝对定位；首先把父元素 li 元素改为相对定位元素，为其子元素 input元素做绝对定位提供参照物；
     然后设置input元素内容的宽度 width 和高度 height ；
     最后对input元素使用 position 属性设置绝对定位，使用top、right等属性设置偏移量。
     这样，就也达到统一右对齐并垂直居中的效果。




7.固定定位的应用demo
一般来说，固定定位可以在浏览器中实现很多效果，比如顶部固定的导航栏、右侧固定的浮窗等。


需要注意的是，如果对固定定位的位置有特定需求时，比如要求元素的内容垂直居中，而top: 50%只是让元素的上外边垂直居中；
这时就可能要结合 top: 50% 和 margin-top 的负外边距，例如：
假设此时元素的高度是40px,则是 top：50%; margin-top: -20px;
就达到了元素的内容垂直居中。水平居中也是类似的。




8.Flexbox布局
传统的CSS布局代码和HTML文档是深度耦合的，修改的时候非常复杂，技巧可能非常tricky,难以维护。
于是W3C制定了专门针对布局的规范，就是Flexbox布局。


Flexbox 是 CSS3 引入的新的布局模式。它决定了元素如何在页面上排列，使它们能在不同的屏幕尺寸和设备下可预测地展现出来。
它之所以被称为 Flexbox ，是因为它能够扩展和收缩 flex 容器内的元素，以最大限度地填充可用空间。
与以前的CSS布局方式（如浮动布局和定位布局）相比，Flexbox 是一个更强大的方式：
    .在不同方向排列元素
    .重新排列元素的显示顺序
    .更改元素的对齐方式
    .动态地将元素装入容器


flex 的核心的概念就是 容器 和 轴。容器包括外层的 父容器 和内层的 子容器，
轴包括 主轴 和 交叉轴，可以说 flex 布局的全部特性都构建在这两个概念上。


相关术语：
flex container——父容器；
flex items——子容器；
main axis——主轴；
cross axis——交叉轴；


9.Flexbox相关属性详解
使用 flex 布局首先要设置父容器 display: flex，
然后再设置 justify-content: center 实现水平居中，
最后设置 align-items: center 实现垂直居中。


flex 布局涉及到 12 个 CSS 属性（不含 display: flex），其中父容器、子容器各 6 个。
不过常用的属性只有 4 个，父容器、子容器各 2 个。


a.父容器的6个属性：
(1)flex-direction——定义主轴方向。
取值为：
row——默认值，主轴方向从左往右；
row-reverse——主轴方向从右往左；
column——主轴方向从上往下；
column-reverse——主轴方向从下往上。


(2)flex-wrap——设置自动换行。
取值为：
nowrap——默认值，不自动换行，所有元素强制挤在一行，宽度会强制被压缩而不会保持原有设定。
wrap——自动换行，主轴的方向决定了新行堆叠的方向，如果主轴水平方向，则从上往下换行。
wrap-reverse——自动换行，但是以与wrap相反的顺序；如wrap是从上往下，则它为从下往上换行。


(3)flex-flow——是flex-direction和flex-wrap属性的复合属性。
例如：flex-flow: row nowrap;


(4)justify-content——定义如何沿着主轴方向排列子容器。
取值为：
flex-start：默认值，起始端对齐。
flex-end：末尾段对齐。
center：居中对齐。
space-around：子容器沿主轴均匀分布，位于首尾两端的子容器到父容器的距离是子容器间距的一半。
space-between：子容器沿主轴均匀分布，位于首尾两端的子容器与父容器相切。


(5)align-content——只适用于多行的flex容器，设置容器内部各个项目在垂直方向(即沿着交叉轴方向)的排列方式。
条件:
必须对父元素设置flexbox属性display:flex;，并且设置主轴排列方式为横向排列flex-direction:row;并且设置换行，flex-wrap:wrap;这样这个属性的设置才会起作用。 


取值为：
stretch：默认值，会拉伸容器内每个项目占用的空间，填充方式为给每个项目下方增加空白，把父容器的高度撑满。第一个项目默认从容器顶端开始排列。
         如果单个项目没有设置显示的高度，则会被自动拉伸到填充满父容器。
center：会取消项目之间的空白并把所有项目垂直居中。
flex-start：会取消项目之间的空白，并把项目放在容器顶部，项目的高度取决于显示设置的高度和内容的高度。
flex-end：会取消项目之间的空白，并把项目放在容器底部。
space-between：会使项目在垂直方向两端对齐。即上面的项目对齐容器顶部，最下面一个项目对齐容器底部。留相同间隔在每个项目之间。
space-around:会使每个项目上下位置保留相同长度空白，使得位于首尾两端的子容器到父容器的距离是子容器间距的一半。




(6)align-items——适用于单行，定义如何沿着交叉轴方向分配子容器的间距。
取值为：
stretch：默认值，子容器沿交叉轴方向的尺寸拉伸至与父容器一致。
flex-start：起始端对齐。
flex-end：末尾段对齐。
center：居中对齐。
baseline：基线对齐，这里的 baseline 默认是指首行文字，即 first baseline，所有子容器向基线对齐，
交叉轴起点到元素基线距离最大的子容器将会与交叉轴起始端相切以确定基线。




b.子容器的6个属性：
(1)order——改变子容器的排列顺序，覆盖HTML代码中的顺序，默认值为 0，可以为负值，数值越小排列越靠前。


(2)align-self——单独设置子容器如何沿交叉轴排列。
每个子容器也可以单独定义沿交叉轴排列的方式，此属性的可选值与父容器 align-items 属性完全一致，
如果两者同时设置则以子容器的 align-self 属性为准。
不设置则会继承父容器的 align-items 属性。
取值为：
flex-start：起始端对齐。
flex-end：末尾段对齐。
center：居中对齐。
baseline：基线对齐。
stretch：拉伸对齐。


(3)flex-basis——表示在不伸缩的情况下子容器的原始尺寸。（比 width 属性更强大一些）
                 主轴为横向时代表宽度，主轴为纵向时代表高度。比如，flex-basis: 120px;


(4)flex-grow——设置扩展比例：子容器弹性伸展的比例。比如，剩余空间按 1:1:1 的比例分配给三个子容器（注意，是每一行的剩余空间）：
                flex-grow: 1; flex-box: 1; flex-box: 1;


(5)flex-shrink——设置收缩比例：子容器弹性收缩的比例。比如，超出的部分按 1:2 的比例从给子容器中减去。


(6)flex——flex 是多个属性的缩写，允许1-3个值连用，但通常用 1 个值就可以满足需求。
           flex: flex-grow|flex-shrink|flex-basis ; 默认值：0 1 auto。
           如：flex: 1 1 200px;




10.Flexbox应用demo
当子容器的宽度和高度发生变化时，flexbox设置的布局效果并不会改变。
可见，flexbox布局的灵活性和可维护性比以前的CSS代码要强的多。


flexbox还可以动态地将元素装入容器。


11.Flexbox的兼容性
除了IE，所有浏览器的最新版本对flexbox的兼容性都是很好的。
为了兼容较低版本的相关浏览器，都需要添加带有厂商前缀的flexbox布局兼容性写法。


12.Grid布局（网格布局）简介
Grid布局 （又名"网格"），是一个基于二维网格布局的系统，主要目的是改变我们基于网格设计的用户接口方式。
如我们所知，CSS 总是用于网页的样式设置，但它并没有起到很好的作用。刚开始的时候我们使用表格(table)，然后使用浮动(float)、 定位(position)和内联块(inline-block)，
但所有这些方法本质上来讲都是hacks，存留了很多需要实现的重要功能问题(例如，垂直居中)。
虽然Flexbox可以起到一定的补救作用，但是它只可以实现简单的一维布局，并不适用于复杂的二维布局(实际上Flexbox和Grid可以一起结合使用起到最佳效果)。
Grid布局是 CSS 第一次专门创建的模块，用来解决我们之前在制作网站时使用hacks处理布局问题。
但是目前的浏览器支持程度是比较差的。


实际上不需要自己造轮子，可以直接使用第三方框架的网格系统来快速高效的实现网格布局，例如Bootstrap。

12.Bootstrap Grid系统应用demo