css基础样式（全）

CSS基础样式（全）

最基本的display属性

每一个元素都有一个默认的display属性，属性值是block或inline，分别代表块级元素和行内元素。display属性可以修改默认值，最常见的是将li标签的属性修改为inline，使得成为一个水平菜单。

1. 块级元素： div, p , form, header, footer, section等 。块级元素会自动换行并且尽可能的充满容器；
2. 行内元素： 比如span标签和a标签。不会自动换行；

width和margin（auto）

1. 单纯的一个div块级元素会从左到右撑满整个容器，容器的width则会规定容器的宽度。
2. margin用来规定容器的外边距。0 auto的作用是规定左右外边距为auto使其左右居中，剩余宽度一分为2为左右外边距。(但是当width宽度比浏览器页面还宽时会出现左右滚动条)

	width: 600px;
	margin: 0 auto;  

3. 在这种情况下使用 max-width 替代 width 可以使浏览器更好地处理小窗口的情况。这时的width会根据浏览器的宽度调整，从而不会出现左右水平滚动条。

  max-width: 600px; 

box-sizing

以上情况说明了一个问题：相同的width但是实际宽度却不同，原因是：这是因为元素的边框和内边距会撑开元素，导致两个相同宽度的元素显示的实际宽度却不一样。
解决办法：

.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;
}

或者直接：

* {
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
}

position

1. static： static 是默认值。任意 position: static; 的元素不会被特殊的定位。一个 static 元素表示它不会被“positioned”，一个 position 属性被设置为其他值的元素表示它会被“positioned”。

.static {
  position: static;
}

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

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

效果图：

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

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

效果图：

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

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

效果图：

6. float： Float 可用于实现文字环绕图片，float实现的是在父元素内的浮动效果，当存在多个float属性的元素时，元素不会重叠，而是实现依次按顺序的浮动效果，并且不会自动换行。

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

效果图：

7. clear： clear 属性被用于控制浮动。
   先看一个不带clear的float例子：
   

带有clear的例子：

clear: left;
clear: right;
clear: both;

clear的作用就是不希望这个容器被其他带有float属性的容器“漂浮”覆盖。

8. overfloat： 调整浮动float，解决float的尺寸问题。

img {
  float: right;
}

结果：

加入overflow属性：

.clearfix {
  overflow: auto;
}

百分比宽度

nav {
  float: left;
  width: 25%;
}
section {
  margin-left: 25%;
}

注意：百分比指的是在父容器中的占比而不是页面的占比。

inline-block

当想要实现以网格的形式铺满浏览器时，可以使用inline-block。

.box2 {
  display: inline-block;
  width: 200px;
  height: 100px;
  margin: 1em;
}

效果：

当然也可以使用float的方式进行：

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

Flexbox

这些例子目前只能在支持 flexbox 的 Chrome 浏览器中运行，基于最新的标准。

.container {
  display: -webkit-flex;
  display: flex;
}
nav {
  width: 200px;
}
.flex-column {
  -webkit-flex: 1;
          flex: 1;
}

.container {
  display: -webkit-flex;
  display: flex;
}
.initial {
  -webkit-flex: initial;
          flex: initial;
  width: 200px;
  min-width: 100px;
}
.none {
  -webkit-flex: none;
          flex: none;
  width: 200px;
}
.flex1 {
  -webkit-flex: 1;
          flex: 1;
}
.flex2 {
  -webkit-flex: 2;
          flex: 2;
}

.vertical-container {
  height: 300px;
  display: -webkit-flex;
  display:         flex;
  -webkit-align-items: center;
          align-items: center;
  -webkit-justify-content: center;
          justify-content: center;
}

参考

http://zh.learnlayout.com/