CSS 布局笔记

大部分都是看《学习CSS布局》这篇教程所做的笔记。

##css基础

selectors properties values

{
color: #ff0;
font-size: 16px;
}

tpye selectors

html: <p> ... </p>
css: p { … }

class selectors

html: <div class="awesome">...</div>
css: .awesome{ }

ID Selectors

html: <div id="shayhowe">...</div>
css: #shayhowe { … }

Referencing CSS

<!-- External CSS File -->
<link rel="stylesheet" href="file.css">
<!-- Internal CSS -->
<style type="text/css">
p {
  color: #f60;
  font-size: 16px;
}
</style>
<!-- Inline CSS -->
<p style="color: #f60; font-size: 16px;">Lorem ipsum dolor sit amet...</p>

css布局

display

display 是CSS中最重要的用于控制布局的属性。每个元素都有一个默认的 display 值，这与元素的类型有关。dispaly的常用值有：

block: 例如<div>
inline: 例如<a> <span>
none

margin: auto;

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

设置块级元素的 width 可以阻止它从左到右撑满容器。然后你就可以设置左右外边距为 auto 来使其水平居中。元素会占据你所指定的宽度，然后剩余的宽度会一分为二成为左右外边距。

max_width

把上述例子改一下：
#main { max-width: 600px; margin: 0 auto; }

在这种情况下使用 max-width 替代 width 可以使浏览器更好地处理小窗口的情况。

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

这样元素就不会被’边距’撑开。

position

static: static 是默认值。任意 position: static; 的元素不会被特殊的定位。一个 static 元素表示它不会被“positioned”
relative:
fixed:固定位置。这意味着即便页面滚动，它还是会停留在相同的位置。和 relative 一样， top 、 right 、 bottom 和 left 属性都可用。
absolute: absolute 与 fixed 的表现类似，但它不是相对于视窗而是相对于最近的“positioned”祖先元素。

float

Float 可用于实现文字环绕图片。

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

clear

clear被用于控制浮动。

百分比宽度

百分比是一种相对于包含块的计量单位。它对图片很有用：如下我们实现了图片宽度始终是容器宽度的50%。

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

媒体查询

如何做响应式设计。媒体查询是做此事所需的最强大的工具。让我们使用百分比宽度来布局，然后在浏览器变窄到无法容纳侧边栏中的菜单时，把布局显示成一列：

@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 布局

可以使用 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

简单的布局：

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