【学习CSS布局】笔记

地址：http://zh.learnlayout.com/toc.html

一、display属性

block

常见块级元素（独占一行，尽可能撑满容器）：div、p、form和HTML5中新增的header、footer、section等（我觉得这三个的实质也是一个div元素，只是名字变了而已）。

inline

常见行内元素（包裹文字，不会破坏布局）：span、a。

none

和visibility属性不一样，visibility设置为hidden之后还会占据空间。

例子

将li元素修改成inline可以制成水平菜单。

二、margin：auto；

指定块级元素宽度可以防止它从左到右撑满整个容器；再设置margin水平居中。产生问题：浏览器窗口比元素窄时，产生水平滚动条。

三、max-width

在二、上修改width为max-width，当浏览器窗口缩窄时会自动调整元素宽度，使其不至于产生水平滚动条。

四、盒模型

传统盒模型不直接，增加border和padding还会增加整个元素可见大小。新增CSS属性box-sizing: border-box，让一个元素增加的内边距和边框不会改变它整体的大小。所以可以在css中增加：

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

五、position

static：不会被positioned

relative：相对元素原来位置定位

absolute：相对离它最近的开启了定位的父元素定位，经常是将它的父元素relative使用

fixed：相对浏览器窗口定位

六、float和clear

脱离文档流和清除浮动

七、清除浮动clearfix hack

元素设置overflow: auto，兼容ie再加一个zoom:1

八、百分比宽度

设置浮动的同时，设置宽度百分比，让它的宽度始终是容器的百分之**，这样就不会“溢出”

九、媒体查询

使用百分比宽度布局时，在浏览器变窄到无法容纳侧边栏中的菜单时，把布局显示成一列

@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

1. vertical-align属性会影响inline-block元素，设置为top
2. 设置每一列的宽度
3. 如果HTML源代码中元素之间有空格，列之间会有空隙

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

十一、column

多列布局

 -moz-column-count: 3;
  -webkit-column-count: 3;
  column-count: 3;

十二、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框架

总结：

这个网站大概就是给你介绍css布局有什么方法，相当于一个总结，细节的东西很少，需要自己另外去找更详细的介绍和做法，这里只是让你知道有这么些方法就行了。