重温布局（display）

无聊，从新复习了一遍，基础布局，记录一下，避免忘了。

首先说一下

Css文件前缀

• Firefox:-moz-box-shadow
• Safari:-webkit-box-shadow
• Opera:-o-box-shadow
• IE:-ms-box-shadow

就这个前缀记得特别不牢固，唉唉唉

盒型布局

现在最常用的就是这种盒型布局了，他由：margin（边距），border（边框），padding（填充），content（内容）组成。

盗用一个图

这篇文章，主要是按照上图为标准的布局结构。

display元素生成类型

作为布局中，最重要的属性。首先写这个。详细的文档参看：点我

每一个元素都有默认的display，大多数默认为两种：block和inline。

block

块级元素：会新开始一行并且尽可能撑满容器。比如说：div，p，header，footer，section

inline

行内元素：可以在段落中使用。不会打乱段落布局。比如说：a，span，font

none

隐藏元素：会隐藏元素，与visibility不同的是，不会保留位置。

举个栗子：

水平菜单的效果，可以把ul>li 元素修改成行内元素，那么他就水平了

水平居中

只有块级元素，需要水平居中。因为他们是新的一行。设置宽度，可以防止他们撑满容器。然后设置左右边距，就可以水平居中。

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

这样，就成为了一个水平居中并且有宽度的样子。但是当浏览器小于指定宽度的时候，就会出现滚动条。

如果我们想让他，根据宽度缩小。那么

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

给他设置最大宽度，那么他就可以根据浏览器缩小了。

box-sizing

上面说了盒型结构图，有margin，padding，border。

但是当你设置了总的width以后，在使用这些元素，往往会超出指定的宽度。如果你跟我一样，不想仔细的计算。就使用box-sizing吧。

当你给box-sizing:border-box的时候。内边距和边框，就不会增加它的宽度。

#main {
  width: 600px;
  margin: 20px auto;
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
}

有了这个，就可以任性的给边框，边距了。

position元素定位类型

为了制作更复杂的页面，我们需要用到这货。详细参看：点我

他一共四个属性，现在挨个过一遍

position:static

默认值，任意的元素都不会被特殊定位。

position:relative

相对定位，加上此属性后，可以设置top、right、bottom、left。让他偏离正常位置。其他元素不会弥补剩下的空隙。

position:fixed

固定定位，相对于浏览器视图来进行定位，也就是说浏览器怎么拉伸，缩小。他都不会变。可以设置top、right、bottom、left。让他偏离正常定位。

举个栗子：在页面中间，做一个返回顶部的菜单。

#main{
    position:fixed;
    right:;
    top: 50%
}

position:absolute

相对定位，相对于最近的设置定位的祖先元素。static不算。如果没有最先元素，那么它是相对于body元素，并且会随着页面滚动而移动。可以设置top、right、bottom、left。让他偏离正常定位。

举个栗子：比如说div1套用div2，div1相对定位，div2绝对定位。那么div2只是针对div1，进行偏移。

float浮动

浮动，定于元素在哪个方向浮动。不管元素本身是什么，浮动都会将它生成一个块级框。

浮动一个分为四种：

left：元素向左浮动

right：元素向右浮动

none：默认值，元素不进行浮动

inherit：继承父级元素的float值

举个栗子：实现文字环绕图片代码

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

clear取消浮动

取消浮动，如果元素设置浮动，则下面挨着的元素，会受影响。所以需要让下面的元素，取消浮动

overflow元素溢出

控制元素溢出的操作，如果浮动元素大于所属的框，那么需要对溢出元素进行操作。

溢出操作一共分为五种：

visible：默认值。内容不会被修剪。会呈现在元素框之外

hidden：内容会被修剪，并且其余内容是不可见的

scroll：内容会被修剪，但是会显示滚动条

auto：如果内容修剪，则浏览器会显示滚动条。可以撑开元素

inherit：继承父元素属性

媒体查询

响应式设计必要属性。当我们使用百分比做自适应布局的时候，当浏览器变窄到无法容纳侧边栏中的菜单时。可以把布局显示成一列

举个栗子：当浏览器大于600像素的时候，菜单左浮动。否则变成横向菜单。

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

恩恩，就先写这么多。by~