css样式积累

参考链接：http://zh.learnlayout.com/display.html

目录
    CSS布局
         1. 布局属性display
         2. 盒模型
         3. position
         4. float
         5. clear
         6. position:absolute

         0. 杂

1.布局属性display

        display 是CSS中最重要的用于控制布局的属性。每个元素都有一个默认的 display 值，这与元素的类型有关。对于大多数元素它们的默认值通常是 block 或 inline 。一个 block 元素通常被叫做块级元素。一个 inline 元素通常被叫做行内元素。

块级元素block

        div 是一个标准的块级元素。一个块级元素会新开始一行并且尽可能撑满容器。其他常用的块级元素包括 p 、 form 和HTML5中的新元素： header 、 footer 、 section 等等。

行内元素inline

        span 是一个标准的行内元素。一个行内元素可以在段落中包裹一些文字而不会打乱段落的布局。 a 元素是最常用的行内元素，它可以被用作链接。

none

        另一个常用的display值是 none 。一些特殊元素的默认 display 值是它，例如 script 。 display:none 通常被 JavaScript 用来在不删除元素的情况下隐藏或显示元素。它和 visibility 属性不一样。把 display 设置成 none 元素不会占据它本来应该显示的空间，但是设置成 visibility: hidden; 还会占据空间。

弹性布局flex

        display:flex;。Flex是Flexible Box的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。设为Flex布局以后，子元素的float、clear和vertical-align属性将失效。

• flex的六个属性
  1.flex-direction:容器内元素的排列方向(默认横向排列)
     1.1.flex-direction:row; 沿水平主轴让元素从左向右排列
          
     1.2.flex-direction:column; 让元素沿垂直主轴从上到下垂直排列
                                  
     1.3.flex-direction:row-reverse;沿水平主轴让元素从右向左排列
  
  2.flex-wrap 容器内元素的换行(默认不换行)
     2.1.flex-wrap: nowrap; (默认)元素不换行,比如：一个div宽度100%，设置此属性，2个div宽度就自动变成各50%；
     2.2.flex-wrap: wrap; 元素换行,比如：一个div宽度100%，设置此属性，第二个div就在第二行了；
  
  3.justify-content 元素在主轴（页面）上的排列
     3.1.justify-content : center;元素在主轴（页面）上居中排列
                                  
     3.2.justify-content : flex-start;元素在主轴（页面）上由左或者上开始排列
                                   
     3.3.justify-content : flex-end;元素在主轴（页面）上由右或者下开始排列
                                   
     3.4.justify-content : space-between;元素在主轴（页面）上左右两端或者上下两端开始排列
                                   
     3.5.justify-content : space-around;每个元素两侧的间隔相等。所以，元素之间的间隔比元素与边框的间隔大一倍。
                                

2.盒模型

       当你设置了元素的宽度，实际展现的元素却超出你的设置：这是因为元素的边框和内边距会撑开元素。看下面的例子，两个相同宽度的元素显示的实际宽度却不一样。

	.simple {
	  width: 500px;
	  margin: 20px auto;
	}
	
	.fancy {
	  width: 500px;
	  margin: 20px auto;
	  padding: 50px;
	  border-width: 10px;
	}

       人们慢慢的意识到传统的盒子模型不直接，所以他们新增了一个叫做 box-sizing 的CSS属性。当你设置一个元素为 box-sizing: border-box; 时，此元素的内边距和边框不再会增加它的宽度。这里有一个与前一页相同的例子，唯一的区别是两个元素都设置了 box-sizing: border-box;

	.simple {
	  width: 500px;
	  margin: 20px auto;
	  -webkit-box-sizing: border-box;
	     -moz-box-sizing: border-box;
	          box-sizing: border-box;
	}
	
	.fancy {
	  width: 500px;
	  margin: 20px auto;
	  padding: 50px;
	  border: solid blue 10px;
	  -webkit-box-sizing: border-box;
	     -moz-box-sizing: border-box;
	          box-sizing: border-box;
	}

       既然没有比这更好的方法，一些CSS开发者想要页面上所有的元素都有如此表现。所以开发者们把以下CSS代码放在他们页面上：

	* {
	  -webkit-box-sizing: border-box; <!-- 代表chrome、safari私有属性-->
	     -moz-box-sizing: border-box; <!-- -moz代表firefox浏览器私有属性-->
	          box-sizing: border-box; 
	}

3.position

       position 属性规定元素的定位类型。

position: relative;

       position在一个相对定位（position属性的值为relative）的元素上设置 top 、 right 、 bottom 和 left 属性会使其偏离其正常位置。其他的元素的位置则不会受该元素的影响发生位置改变来弥补它偏离后剩下的空隙。

	.relative1 {
	  position: relative;
	}
	.relative2 {
	  position: relative;
	  top: -20px;
	  left: 20px;
	  background-color: white;
	  width: 500px;
	}

position: fixed;

       position 一个固定定位（position属性的值为fixed）元素会相对于视窗来定位，这意味着即便页面滚动，它还是会停留在相同的位置。和 relative 一样， top 、 right 、 bottom 和 left 属性都可用。

       position 我相信你已经注意到页面右下角的固定定位元素。你现在可以仔细看看它，这里有它所使用的CSS：

	.fixed {
	  position: fixed;
	  bottom: 0;
	  right: 0;
	  width: 200px;
	  background-color: white;
	}

position: absolute

       absolute 是最棘手的position值。 absolute 与 fixed 的表现类似，但是它不是相对于视窗而是相对于最近的“positioned”祖先元素。如果绝对定位（position属性的值为absolute）的元素没有“positioned”祖先元素，那么它是相对于文档的 body 元素，并且它会随着页面滚动而移动。

       这里有一个简单的例子：

	.relative {
	  position: relative;
	  width: 600px;
	  height: 400px;
	}
	.absolute {
	  position: absolute;
	  top: 120px;
	  right: 0;
	  width: 300px;
	  height: 200px;
	}

4.float

       另一个布局中常用的CSS属性是 float 。Float 可用于实现文字环绕图片，如下：

	img {
	  float: right;
	  margin: 0 0 1em 1em;
	}

5.clear

       clear 属性被用于控制浮动。比较下面两个例子：
       在这个例子中， section 元素实际上是在 div 之后的（译注：DOM结构上）。然而 div 元素是浮动到左边的，于是 section 中的文字就围绕了 div ，并且 section 元素包围了整个元素。如果我们想让 section 显示在浮动元素之后呢？

	<div class="box">...</div>
	<section>...</section>

       使用 clear 我们就可以将这个段落移动到浮动元素 div 下面。你需要用 left 值才能清除元素的向左浮动。你还可以用 right 或 both 来清除向右浮动或同时清除向左向右浮动。

	.box {
	  float: left;
	  width: 200px;
	  height: 100px;
	  margin: 1em;
	}
	.after-box {
	  clear: left;
	}

清除浮动 clearfix hack

       在使用浮动的时候经常会遇到一个古怪的事情：

	img {
	  float: right;
	}

       让我们加入一些新的CSS样式：

	.clearfix {
	  overflow: auto;
	}

       现在再看看发生了什么：

6.position:absolute

       绝对定位使用条件：

• position:relative绝对定位使用通常是父级定义position:relative定位，子级定义position:absolute绝对定位属性，并且子级使用left或right和top或bottom进行绝对定位。

0.杂

1.水平居中

	display: flex;
	justify-content:initial; 

2.垂直居中

    display: flex;
    justify-content:center;
    align-items:Center;

3.自适应宽度

	display: inline-flex;

4.占据一行宽度

	display: flex;