学习css布局

-------------------------------------------------

"dispaly"属性： #css一个很重要的属性#， #用于控制布局#

默认值： block 或 inline (块级元素、行内元素)

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

inline ～ 行内元素：
    span是一个标准的行内元素。以及包括a 元素

    其可以在段落中包裹一些文字而不会打乱段落的布局

none：

    在不删除元素的情况下隐藏元素。

其他：
    想 list-item 和 table 等。

人造行内元素：
    li元素改成inline， 制作成水平菜单。

-------------------------------------------------

margin:auto; ~ 布局

#main {
  width: 600px;
  margin: 0 auto; 
}

块级元素：
    设置width： 防止它从左到右撑满整个容器。
    然后设置左右外边距为auto 来使其水平居中。
    唯一的问题： 当浏览器窗口比元素宽度小时，浏览器会显示一个水平滚动条来容纳页面。

===》
max-width 布局：

#main {
  max-width: 600px;
  margin: 0 auto; 
}

在上面的情况下：
    使用max-width 替代width 使浏览器更好的处理小窗口问题。
    #移动设备#

-------------------------------------------------

盒模型 ～ 布局：
#边框#， #内边距#

.simple {
  width: 500px;
  margin: 20px auto;
}

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

===》
box-sizing 布局：
    设置元素属性： 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;
}

===》
全局定义页面上所有元素：

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

***
    使用-webkit- 和-moz- 前缀， 启用特定浏览器实验中的特效。



-------------------------------------------------
position ~ 布局：
###
    默认值： static

.static {
  position: static;
}

###
    相对定位： relative

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

###

    固定定位： fixed
        #相对于视窗来定位#   
        附带属性： top、right、bottom、left 

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

###

    绝对定位： absolute
    #与fixed 相似#、 #相对最靠近的“positioned”祖先元素#

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

###
position例子：

.container {
  position: relative;
}
nav {
  position: absolute;
  left: 0px;
  width: 200px;
}
section {
  /* position is static by default */
  margin-left: 200px;
}
footer {
  position: fixed;
  bottom: 0;
  left: 0;
  height: 70px;
  background-color: white;
  width: 100%;
}
body {
  margin-bottom: 120px;
}

-------------------------------------------------

float ~ 布局：
    #文字环绕图片#

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

###
clear属性：
    #控制浮动#

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

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

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

###
清除浮动： clearfix hack

img {
  float: right;
}

overflow属性：

.clearfix {
  overflow: auto;
}

###
浮动布局例子：
    #float实现页面布局#

nav {
  float: left;
  width: 200px;
}
section {
  margin-left: 200px;
}

-------------------------------------------------

百分比宽度 ~ 布局：
    #相对包含块的计量单位#、 #实现图片宽度始终是容器宽度的50%#

article img {
  float: right;
  width: 50%;
}

###
百分比宽度布局    
    #当窗口宽度很窄时 nav 的内容会以一种不太友好的方式被包裹起来#
    #选一种最合适你的内容的方式#

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

-------------------------------------------------

媒体查询 ~ 布局：
    #响应式设计(Responsive Design)让网站针对不同浏览器和设备呈现不同显示效果的策略#
    #百分比宽度布局，当浏览器变窄到无法容纳侧边栏菜单时，把布局显示成一列#

@media screen and (min-width:600px) {
  nav {
    float: left;
    width: 25%;
  }
  section {
    margin-left: 25%;
  }
}
@media screen and (max-width:599px) {
  nav li {
    display: inline;
  }
}

-------------------------------------------------

inline-block ~ 布局：
    #创建很多网格铺满浏览器#
###
困难的方式(使用浮动)

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

###
容易的方式(使用inline-block)

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

###
inline-block 布局

    #vertical-align 属性会影响到inline-block 元素， 设值为top#
    #需要设置每一列的宽度#
    #如果HTML源代码中元素之间有空格，那么列与列之间会产生空隙#

nav {
  display: inline-block;
  vertical-align: top;
  width: 25%;
}
.column {
  display: inline-block;
  vertical-align: top;
  width: 75%;
}

-------------------------------------------------

column ~ 布局：
    #实现文字的多列布局#

.three-column {
  padding: 1em;
  -moz-column-count: 3;
  -moz-column-gap: 1em;
  -webkit-column-count: 3;
  -webkit-column-gap: 1em;
  column-count: 3;
  column-gap: 1em;
}

-------------------------------------------------

flexbox ~ 布局：
###
    #使用Flexbox的简单布局#

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

###
使用Flexbox的牛布局

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

###
使用Flexbox的居中布局

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

-------------------------------------------------

css框架：
    #只有在框架的功能满足你需求时，使用框架才是个好主意#

转载： http://zh.learnlayout.com/

-------------------------------------------------

position例子 ~ 布局：

-------------------------------------------------

position例子 ~ 布局：