css学习笔记

最近需要为自己的公众号开发一个小程序，所以要温习一下css样式知识，在此做个笔记也供以后便捷温习学习；

css学习笔记

样式

• 行内样式：

  This paragraph simply takes on the browser’s default paragraph style.

  By adding inline CSS styling to this paragraph, you override the default styles.

• 嵌入式样式：
  
• 链接样式：
  @import url(css/styles2.css)

选择符：

• 上下文选择符
• 特殊的上下文选择符：子选择符、紧邻同胞选择符+、一般同胞选择符~、通用选择符*、
• ID选择符：href=”#id”定位到顶部或id那个地方
• 类选择符：多类
• 属性选择符:img[title] {border:2px solid blue;}
• 属性值选择符：img[title=”red flower”] {border:4px solid green;}

伪类

UI（User Interface，用户界面）伪类会在HTML元素处于某个状态时（比如鼠标指针位于链接上），为该元素应用CSS样式。

• 链接伪类
  • Link。此时，链接就在那儿等着用户点击。
  • Visited。用户此前点击过这个链接。
  • Hover。鼠标指针正悬停在链接上。
  • Active。链接正在被点击（鼠标在元素上按下，还没有释放）。
    p:hover {background-color:gray;}
• :focus伪类:e:focus{}e代表任何元素
  input:focus {border:1px solid blue;}
• :target伪类
  “More Information
  

  This is the information you are looking for.

  
  ”#more_info:target {background:#eee;}”

结构化伪类会在标记中存在某种结构上的关系时（如某个元素是一组元素中的第一个或最后一个），为相应元素应用CSS样式。

• :first-child和:last-child

  ol.results li:first-child {color:blue;}||ol.results li:last-child {color:red;}
  <ol class="results">
      <li>My Fast Pony</li>
      <li>Steady Trotter</li>
      <li>Slow Ol' Nag</li>
  </ol>

• :nth-child
  e:nth-child(n)/e:nth-child(odd)/e:nth-child(even)

伪元素

• ::first-letter伪元素:p::first-letter {font-size:300%;}(段落首字符放大的效果，也可以用一个实现)
• ::first-line伪元素：p::first-line {font-variant:small-caps;}
  p::first-line {font-variant:small-caps;} (第一行以小型大写字母显示)

• ::before和::after伪元素

  <p class="age">25</p>
  p.age::before {content:"Age: ";}
  p.age::after {content:" years.";}
  Age: 25 years.

  这种用法可以用在后台查询数据给前台时，进行一些渲染

继承-层叠-特指

在一个较大的样式表中，可能会有很多条规则都选择同一个元素的同一个属性。比如，一个带有类属性的段落，可能会被一条以标签名作选择符的规则选中并指定一种字体，而另一条以该段落的类名作选择符的规则却会给它指定另一种字体。我们知道，字体属性在任意时刻都只能应用一种设定，那此时该应用哪种字体呢？为解决类似的冲突，确定哪条规则“胜出”并最终被应用，CSS提供了三种机制：继承、层叠和特指。接下来的三节，就分别讨论这三种机制。

继承

body {font-family:helvetica, arial, sans-serif;}
body是所有所有元素的祖宗，所有元素都会继承它的样式，对于个别想使用自己的样式，只需自身指定即可，就如同OOP编程语言里面的类继承类似，如果子类想定义自己从父类的方法，也可重写实现自己的特性。
有些属性可以继承：颜色、字体、字号等
有些属性不能继承：边框、外边距、内边距

层叠

样式来源

以下就是浏览器层叠各个来源样式的顺序：

• 浏览器默认样式表
• 用户样式表
• 作者链接样式表（按照它们链接到页面的先后顺序）
• 作者嵌入样式
• 作者行内样式
  以上样式会以冒泡交换的法则进行继承式替换。

  层叠规则

• 层叠规则一：找到应用给每个元素和属性的所有声明。浏览器在加载每个页面时，都会据此查到每一条CSS规则，标识出所有受到影响的HTML元素
• 层叠规则二：按照顺序和权重排序。浏览器依次检查5个来源，并设定匹配的属性。如果匹配的属性在下一个来源也有定义，则更新该属性的值，如此循环，直到检查完页面中所有标签受影响属性的全部5个来源为止。最终某个属性被设定成什么值，就用什么值来显示。声明也可以有权重。可以像下面这样为单独的声明增加权重：p {color:green !important; font-size:12pt;}空格!important分号（;）用于加重声明的权重。这条规则加重了将文本设置为绿色的权重。于是，就算层叠的下一来源给段落设定了其他颜色，最终的颜色值仍然还是绿色。
• 层叠规则三：按特指度排序，举例来说就是比如类选择符选中的规则比普通标签选择要高。
  这里涉及到特指度的计算：I - C - E
  • 选择符中有一个ID，就在I的位置上加1；
  • 选择符中有一个类，就在C的位置上加1；
  • 选择符中有一个元素（标签）名，就在E的位置上加1；
  • 得到一个三位数。
• 层叠规则四：顺序决定权重。如果两条规则都影响某元素的同一个属性，而且它们的特指度也相同，则位置最靠下（或后声明）的规则胜出

规则声明

css属性值主要分为三类

• 文本值：font-weight:bold

• 数字值(又分为相对值和绝对值)：font-size:12px

• 颜色值：color:#336699

  • 十六进制颜色（#RRGGBB或#RGB):#rrggbb-十六进制以16为基数，使用数字0-9和字母a-f，共16个值。其中，a-f代表10到15。由于每种颜色用两位十六进制值表示，因此该颜色就有256（16×16）种可能的值，结果就是16 777 216（256×256×256）种组合，也就是可以表示那么多种颜色。纯红色是#ff0000，纯绿色是#00ff00，而纯蓝色是#0000ff。大多数十六进制颜色值不仔细分析可不容易猜，比如#7ca9be是深蓝绿色，我怎么知道的？ 首先我们来看每一对rgb值中的第一个值，也就是7、a、b。蓝色和绿色值相差无几，而红色值也没有那么深。有了这些信息，就可以大致猜出这个颜色了，对，是蓝绿色
  • RGB颜色值（R, G , B）
  • RGB百分比值（R%, G%, B%）
  • HSL (色相, 饱和度%, 亮度%)
  • Alpha通道：RGBA,HSLA
    色彩网站

---

定位元素

页面版式主要由三个属性控制：position属性、display属性和float属性。其中，position属性控制页面上元素间的位置关系，display属性控制元素是堆叠、并排，还是根本不在页面上出现，float属性提供控制的方式，以便把元素组成成多栏布局。

理解盒模型

• 边框（border）。可以设置边框的宽窄、样式和颜色。
• 内边距（padding）。可以设置盒子内容区与边框的间距。
• 外边距（margin）。可以设置盒子与相邻元素的间距。

简写样式

{margin-top:5px; margin-right:10px; margin-bottom:12px; margin-left:8px;}
{margin:5px 10px 12px 8px;}
{margin:12px 10px 6px;}/*由于没有写最后一个值（左边的值），所以左边就会使用右边的值，即10px。*/
{border:2px dashed red;}/*全部3个属性，全部4条边 */
{border-style:dashed;}/*1个属性，全部4条边 */
{border-left-style:dashed;}/*1个属性，1条边*/
{border:4px solid red;}  /* 先给4条边设置相同的样式 */    
{border-left-width:1px;} /* 修改左边框宽度 */  
{border-right:none;}     /* 移除右边框 */
/*类似地，其他属性也都有这三级粒度，例如padding和border-radius等。*/

盒子边框

边框（border）有3个相关属性。

• 宽度（border-width）。可以使用thin、medium和thick等文本值，也可以使用除百分比和负值之外的任何绝对值。
• 样式（border-style）。有none、hidden、dotted、dashed、solid、double、groove、ridge、inset和outset等文本值。
• 颜色（border-color）。可以使用任意颜色值，包括RGB、HSL、十六进制颜色值和颜色关键字。
  一般在开发中，我们会采用中和内外边距的写法，给需要边距的再单独编写样式:“* {margin:0; padding:0;}”
  下面的这个样式表不仅重置了外边距和内边距，还对很多元素在跨浏览器显示时的外观进行了标准化。至于为什么，可以参考博客文章12

  /* http://meyerweb.com/eric/tools/css/reset/
     v2.0 | 20110126
     License: none (public domain)
  */
  html, body, div, span, applet, object, iframe,h1, h2, h3, h4, h5, h6, p, blockquote, pre,
  a, abbr, acronym, address, big, cite, code,del, dfn, em, img, ins, kbd, q, s, samp,
  small, strike, strong, sub, sup, tt, var,b, u, i, center,dl, dt, dd, ol, ul, li,
  fieldset, form, label, legend,table, caption, tbody, tfoot, thead, tr, th, td,
  article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup,
  menu, nav, output, ruby, section, summary,time, mark, audio, video {
  	margin: 0;
  	padding: 0;
  	border: 0;
  	font-size: 100%;
  	font: inherit;
  	vertical-align: baseline;
  }
  /* HTML5 display-role reset for older browsers */
  article, aside, details, figcaption, figure,
  footer, header, hgroup, menu, nav, section {
  	display: block;
  }
  body {
  	line-height: 1;
  }
  ol, ul {
  	list-style: none;
  }
  blockquote, q {
  	quotes: none;
  }
  blockquote:before, blockquote:after,
  q:before, q:after {
  	content: '';
  	content: none;
  }
  table {
  	border-collapse: collapse;
  	border-spacing: 0;
  }

叠加外边距

请看例子

为简明起见，省略了字体声明
p {height:50px; border:1px solid #000; backgroundcolor:#fff; margin-top:50px; margin-bottom:30px;}
由于第一段的下外边距与第二段的上外边距相邻，你自然会认为它们之间的外边距是80像素（50+30），但是你错啦！它们实际的间距是50像素。
也就是说较宽的外边距决定两个元素最终离多远。

外边距的单位

根据经验，为文本元素设置外边距时通常需要混合使用不同的单位。比如说，一个段落的左、右外边距可以使用像素，以便该段文本始终与包含元素边界保持固定间距，不受字号变大或变小的影响。而对于上、下外边距，以em为单位则可以让段间距随字号变化而相应增大或缩小

/*这里使用了简写属性把上、下外边距设置为.75em，把左、右外边距设置为30像素*/
p {font-size:1em; margin:.75em 30px;}

盒子模型详解

没有宽度的盒子

body {font-family:helvetica, arial, sans-serif; font-size:1em; margin:0px; background-color:#caebff;}
p {margin:0 30px; background-color:#fff; padding:0 20px; border:solid red; border-width:0 6px 0 6px;}

外边距在元素盒子与窗口之间创造了空白，此时内容宽度变成了288像素（400 – ( (20 + 6 + 30)× 2) ）。而元素声明的总宽度并没有变，仍然是400像素。
盒模型结论一：没有（就是没有设置width的）宽度的元素始终会扩展到填满其父元素的宽度为止。添加水平边框、内边距和外边距，会导致内容宽度减少，减少量等于水平边框、内边距和外边距的和。

盒模型结论二：为设定了宽度的盒子添加边框、内边距和外边距，会导致盒子扩展得更宽。实际上，盒子的width属性设定的只是盒子内容区的宽度，而非盒子要占据的水平宽度。

浮动和清除

浮动和清除是用来组织页面布局的又一柄利剑，这柄剑的剑刃就是float和clear属性。浮动，你看这俩字儿多形象，意思就是把元素从常规文档流中拿出来。拿出来干什么？一是可以实现传统出版物上那种文字绕排图片的效果，二是可以让原来上下堆叠的块级元素，变成左右并列，从而实现布局中的分栏。浮动元素脱离了常规文档流之后，原来紧跟其后的元素就会在空间允许的情况下，向上提升到与浮动元素平起平坐。如果浮动元素后面有两个段落，而你只想让第一段与浮动元素并列（就算旁边还能放下第二段，也不想让它上来），怎么办？用clear属性来“清除”第二段，然后它就乖乖地呆在浮动元素下面了。

浮动

CSS设计float属性的主要目的，是为了实现文本绕排图片的效果。然而，这个属性居然也成了创建多栏布局最简单的方式。
文本绕排图片

…the paragraph text…

/为简明起见，省略了字体声明/
p {margin:0; border:1px solid red;}
/外边距防止图片紧挨文本/
img {float:left; margin:0 4px 4px 0;
动图片会从文档流中被移除，如果在标记中有文本元素跟在它后面，则其中的文本会绕开图片.浮动非图片元素时，必须给它设定宽度，否则后果难以预料。图片无所谓，因为它本身有默认的宽度。

浮动还用另一种用途是实现分栏

围住浮动元素的三种方法

• 为父元素添加overflow：hidden
• 同时浮动父元素，同时给父元素下面的文档流一个{clear:left}
• 添加非浮动的清除元素

  <section>
      <img src="images/rubber_duck.jpg">
      <p>It's fun to float.</p>
      <div class="clear_me"></div>
  </section>
  <footer> Here is the footer element…</footer>
  <!-- section {border:1px solid blue;}
  img {float:left;}
  .clear_me {clear:left;}
  footer {border:1px solid red;} -->
  <section class="clearfix">
  <img src="images/rubber_duck.jpg">
      <p>It's fun to float.</p>
  </section>
  <footer> Here is the footer element…</footer>
  <!-- .clearfix:after {
      content:".";
      display:block;
      height:0;
      visibility:hidden;
      clear:both;
  } -->
  <!-- 这个clearfix规则最早是由程序员Tony Aslett发明的，它只添加了一个清除的包含句点作为非浮动元素（必须得有内容，而句点是最小的内容）1。规则中的其他声明是为了确保这个伪元素没有高度，而且在页面上不可见。
  使用clear:both意味着section中新增的子元素会清除左、右浮动元素（位于左、右浮动元素下方）。这里当然可以只用left，但both也适用于将来图片float:right的情况。-->

定位

CSS布局的核心是position属性，对元素盒子应用这个属性，可以相对于它在常规文档流中的位置重新定位。position属性有4个值：static、relative、absolute、fixed，默认值为static。

• 静态定位：static块级元素会在默认文档流中上下堆叠
• 相对定位reletive：相对的是它原来在文档流中的位置，可以使用top、right、bottom和left属性来改变它的位置了。但多数情况下，只用top和left就可以实现我们想要的效果。{position:relative; top:25px; left:30px;}
• 绝对定位absolute：绝对定位会把元素彻底从文档流中拿出来，有的时候是相对body进行定位，这就涉及到定位上下文的概念了。绝对定位默认的上下文是body元素。
• 固定定位fixed：从完全移出文档流的角度说，固定定位与绝对定位类似，{position:fixed; top:30px; left:20px;}，但不同之处在于，固定定位元素的定位上下文是视口（浏览器窗口或手持设备的屏幕），因此它不会随页面滚动而移动。固定定位并不常用，最常见的情况是用它创建不随页面滚动而移动的导航元素。
• 定位上下文:把元素的position属性设定为relative、absolute或fixed后，继而可以使用top、right、bottom和left属性，相对于另一个元素移动该元素的位置。这里的“另一个元素”，就是该元素的定位上下文。
  在讲绝对定位的时候，我们知道绝对定位元素默认的定位上下文是body。这是因为body是标记中所有元素唯一的祖先元素。而实际上，绝对定位元素的任何祖先元素都可以成为它的定位上下文，只要你把相应祖先元素的position设定为relative即可。

显示属性

所有元素都有postion和display,display的默认值是block和inline。块级元素和行内元素可以相互转换
/默认为block/p {display:inline;}/默认为inline/a {display:block;}
display属性设置为none，会把元素的display设定为none，该元素及所有包含在其中的元素，都不会在页面中显示。它们原先占据的所有空间也都会被“回收”。与此相对的是visibility属性，这个属性最常用的两个相对的值是visible（默认值）和hidden。把元素的visibility设定为hidden，元素会隐藏，但它占据的页面空间仍然“虚位以待”。

背景色

每个元素盒子都可以想象成由两个图层组成。元素的前景层包含内容（如文本或图片）和边框，元素的背景层可以用实色填充（使用background-color属性），也可以包含任意多个背景图片（使用background-image属性），背景图片叠加在背景颜色之上。

背景颜色

元素的background-color是蓝绿色，段落的background-color是白色，前景色color是灰色，前景色既影响文本，也影响边框

背景图片

background-image:url(images/blue_circle.png);比元素小的背景图片会在水平和垂直方向上重复出现，直至填满整个背景空间
要改变默认的水平和垂直重复效果，可以修改background-repeat属性；要改变背景图片的起点，可以修改background-position属性。
默认值就是repeat另外3个值分别是只在水平方向重复的repeat-x、只在垂直方向上重复的repeat-y和在任何方向上都不重复（或者说只让背景图片显示一次）的no-repeat

背景位置

用于控制背景位置的background-position属性，是所有背景属性中最复杂的。background-position属性有5个关键字值，分别是top、left、bottom、right和center，这些关键字中的任意两个组合起来都可以作为该属性的值。比如，top right表示把图片放在元素的右上角位置，center center把图片放在元素的中心位置。设定背景位置时可以使用三种值：关键字、百分比、绝对或相对单位的数值

背景尺寸

background-size：

• 50%：缩放图片，使其填充背景区的一半。
• 100px 50px：把图片调整到100像素宽，50像素高。
• cover：拉大图片，使其完全填满背景区；保持宽高比。
• contain：缩放图片，使其恰好适合背景区；保持宽高比。
  

  背景粘附

  “background-attachment属性控制滚动元素内的背景图片是否随元素滚动而移动。这个属性的默认值是scroll，即背景图片随元素移动。如果把它的值改为fixed，那么背景图片不会随元素滚动而移动。
  background-attachment:fixed最常用于给body元素中心位置添加淡色水印，让水印不随页面滚动而移动。

  p{    background-image:url(images/watermark.png);
      background-position:center;
      background-color:#fff;
      background-repeat:no-repeat;
      background-size:contain;
      background-attachment:fixed;
  }
  /*简写*/
  body {background:url(images/watermark.png) center #fff no-repeat contain fixed;}

多背景图片

p {
    height:150px;
    width:348px;
    border:2px solid #aaa;

    margin:20px auto;
    font:24px/150px helvetica, arial, sansserif;

    text-align:center;
    background:
    url(images/turq_spiral.png) 30px -10px no-repeat,
    url(images/pink_spiral.png) 145px 0px no-repeat,
    url(images/gray_spiral.png) 140px -30px no-repeat, #ffbd75;
}
/*多张图片可以在背景中叠加起来，CSS规则中先列出的图片在上层*/

背景渐变

渐变分两种，一种线性渐变，一种放射性渐变。线性渐变从元素的一端延伸到另一端，放射性渐变则从元素内一点向四周发散。

/*为元素盒子添加样式*/
div {
    height:150px;
    width:200px;
    border:1px solid #ccc;
    float:left;
    margin:16px;
}
/*例1：默认为从上到下*/
.gradient1 {
    background:linear-gradient(#e86a43, #fff);
}
/*例2：从左到右*/
.gradient2 {
    background:linear-gradient(left, #64d1dd, #fff);
}
/*例3：左上到右下*/
.gradient3 {
    background:linear-gradient(-45deg, #e86a43, #fff);
}

渐变点

“/*例1：50%处有一个渐变点*/
.gradient1 {
    background:linear-gradient(#64d1dd, #fff 50%, #64d1dd);
}
/*例2：20%和80%处有两个渐变点*/
.gradient2 {
    background:linear-gradient(#e86a43 20%, #fff 50%, #e86a43 80%);
}
/*例3：25%、50%、75%处有三个渐变点*/
.gradient3 {
    background:linear-gradient(#64d1dd, #fff 25%, #64d1dd 50%, #fff 75%, #64d1dd);
}
/*例4：为同一个渐变点设定两种颜色可以得到突变效果*/
.gradient4 {
    background:linear-gradient(#e86a43, #fff 25%, #64d1dd 25%, #64d1dd 75%, #fff 75%, #e86a43);
}

放射性渐变

.gradient1 {
    background: -webkit-radial-gradient(#fff, #64d1dd, #70aa25);
}
.gradient2 {
    background: -webkit-radial-gradient(circle, #fff, #64d1dd, #e86a43);
}
.gradient3 {
    background: -webkit-radial-gradient(50px 30px, circle, #fff, #64d1dd, #4947ba);
}

厂商前缀

为鼓励浏览器厂商尽早采用W3C的CSS3推荐标准，于是就产生了VSP（Vendor Specific Prefixes，厂商前缀）的概念。有了这些CSS属性的前缀，厂商就可以尝试实现W3C涵盖新CSS属性的工作草案。在迅速实现新属性的同时，还可以声明它们是过渡的、部分实现的，或者实验性的。总之，后果由使用者自负。
就拿W3C推荐的transform属性为例，标准语法是这样的：
transform: skewX(-45deg);

-moz-transform:skewX(-45deg);    /* Firefox */
-webkit-transform:skewX(-45deg); /* Chrome及Safari */
-ms-transform:skewX(-45deg);     /* 微软Internet Explorer */
-o-transform:skewX(-45deg);      /* Opera */
transform:skewX(-45deg);         /* 最后是W3C标准属性 */

Safari和Chrome都使用相同的-webkit-前缀，是因为它们都使用Webkit渲染引擎。”
以下CSS3属性必须加VPS：
border-image translate
linear-gradient transition
radial-gradient background
transform background-image
transform-origin

字体和文本

页面布局

为了达到三栏布局，可以使用float:left,但还有时候随着给一栏增加内外边距等，会使得第三栏放不下，浮到下面，这里面有，这种情况下有三种手段解决：

• 从设定的元素宽度中减去添加的水平外边距、边框和内边距的宽度和。
• 在容器内部的元素上添加内边距或外边距。
• 使用CSS3的box-sizing属性切换盒子缩放方式，比如section {box-sizing:border-box;}。 应用box-sizing属性后，给section添加边框和内边距都不会增大盒子，相反会导致内容变窄。
• 子-星选择符

  预防过大的元素

  设计一个将来可能由他人维护的动态网站时，需要考虑得更长远一些。比如，应该预见到可能出现一些过大的元素。
• img {max-width:100%;}
• overflow:hidden
• word-wrap:break-word

  三栏-中栏流动布局

  实现中栏流动布局有两种方法。一种是在中栏改变大小时使用负外边距定位右栏，另一种是使用CSS3让栏容器具有类似表格单元的行为。负外边距适合比较老的浏览器，而CSS的table属性则要简单得多
• 用负外边距实现：实现三栏布局且让中栏内容区流动（不固定）的核心问题，就是处理右栏的定位，并在中栏内容区大小改变时控制右栏与布局的关系。解决方案是控制两个外包装（通过ID值为wrapper）容器的外边距。其中一个外包装包围所有三栏，另一个外包装只包围左栏和中栏。

  <div id="main_wrapper">
      <header>
          <!-- 页眉-->
      </header>    
      <div id="threecolwrap">/*三栏外包装（包围全部三栏）*/
          <div id="twocolwrap">/*两栏外包装（包围左栏和中栏）*/
              /*左栏*/
              <nav>
                  <!-- 导航 -->
              </nav>
              /*中栏*/
              <article>
              “     <!-- 区块 -->
                          </article>
                      </div>/*结束两栏外包装（twocolwrap）*/
                      /*右栏*/
                      <aside>
                          <!-- 侧栏 -->
                      </aside>
                  </div>/*结束三栏外包装（threecolwrap）*/
                  <footer>
                      <!-- 页脚 -->
                  </footer>
              </div>

* {margin:0; padding:0;}
body {font:1em helvetica, arial, sans-serif;}
div#main_wrapper{
    min-width:600px; max-width:1100px;
    /*超过最大宽度时，居中布局*/
      margin:0 auto;
      /*背景图片默认从左上角开始拼接*/
      background:url(images/bg_tile_150pxw.png) repeat-y #eee;
  }
  header {
      padding:5px 10px;
      background:#3f7ccf;
  }
  div#threecolwrap {
      /*浮动强制它包围浮动的栏*/
      float:left;
      width:100%;
      /*背景图片右对齐*/
      background:url(images/bg_tile_210pxw.png) top right repeat-y;
  }
  div#twocolwrap {
      /*浮动强制它包围浮动的栏*/
      float:left;
      width:100%;
      /*把右栏拉到区块外边距腾出的位置上*/
      margin-right:-210px;
      }
nav {
    float:left;
    width:150px;
    background:#f00;
    padding:20px 0;
}
/*让子元素与栏边界保持一定距离*/
nav > * {margin:0 10px;}
article {
    width:auto;
    margin-left:150px;
    /*在流动居中的栏右侧腾出空间*/
    margin-right:210px;
    background:#eee;
    padding:20px 0;
}
*让子元素与栏边界保持一定距离*/
article > * {margin:0 20px;}
aside {
    float:left;
    width:210px;
    background:#ffed53;
    padding:20px 0;
}
    *让子元素与栏边界保持一定距离*/
    aside > * {margin:0 10px;}
    footer {
        clear:both;
        width:100%;
        text-align:center;
        background:#000;
    }

• 用CSS3单元格实现

  CSS可以把一个HTML元素的display属性设定为table、table-row和table-cell。通过这种方法可以模拟相应HTML元素的行为。而通过CSS把布局中的栏设定为table-cell有三个好处。

• 单元格（table-cell）不需要浮动就可以并排显示，而且直接为它们应用内边距也不会破坏布局。
• 默认情况下，一行中的所有单元格高度相同，因而也不需要人造的等高栏效果了。
• 任何没有明确设定宽度的栏都是流动的。

  nav {display:table-cell; width:150px; padding:10px;
       background:#dcd9c0;}
  article {display:table-cell; padding:10px 20px;
       background:#ffed53;}
  aside {display:table-cell; width:210px; padding:10px;
       background:#3f7ccf;}

多行多栏布局

类是用来标记具有相同特征的元素的。ID最好是用来标记每个主要区域的顶级元素，这样可以充当路标。

<div id="wrapper">
    <header>
        <h1>Full-width content</h1>
    </header>
    <nav>
        <p>Navigation menus go here</p>
    </nav>
    <section id="branding">
        <img src="images/grand_canyon.jpg" alt="Grand Canyon" />
    </section><!-- branding 结束 -->
    <section id="feature_area">
        <article>
            <div class="inner">
                <p>Lorem Ipsum text</p>
            </div>
        </article>
        <!-- 省略另外两个 article 元素 -->
    </section><!-- feature_area 结束-->
    <section id="promo_area">
        <article>
            <div class="inner">
                <p>Lorem Ipsum text</p>
            </div>
        </article>
        <!-- 省略另外三个 article 元素 -->
    </section><!-- promo_area 结束-->
    <footer>
        <p>A CSS template from <a href="http://www.stylinwithcss.com"><em>Stylin’ with CSS, Third Edition</em></a> by            Charles Wyke-Smith</p>
    </footer>
</div>

/*每个article作为一个浮动栏*/
section#feature_area article {
    float:left;
    “width:320px;
    /*对于作为栏的容器，只能添加垂直内边距*/
    padding:10px 0;
    background:#fff;
    border-top:4px solid #f7be84;
}
/*为所有内容盒子添加公共样式*/
section#feature_area article .inner {
    margin:10px 20px;
    padding:5px;
    background:#fff;
    border:5px solid;
}
/*以下三条分别为三个内容盒子设定样式*/
section#feature_area article:nth-child(1) .inner {
    border-color:#d7dd6f;
}
section#feature_area article:nth-child(2) .inner {
    border-color:#f6dec5;
}
section#feature_area article:nth-child(3) .inner {
  border-color:#d1d8e4;
}

界面组件

纵向导航菜单

<nav class="list1">
    <ul>
        <li><a href="#">Alternative</a></li>
        <li><a href="#">Country</a></li>
        <li><a href="#">Jazz</a></li>
        <li><a href="#">Rock</a></li>
    </ul>
</nav>

/*去掉默认的内边距和外边距*/
* {margin:0; padding:0;}
/*设定本例中菜单的大小和位置*/
nav {margin:50px; width:150px;}
/*给菜单加上边框*/
.list1 ul {border:1px solid #f00; border-radius:3px;
    padding:5px 10px 3px;}
/*去掉项目符号并为链接添加间距*/
.list1 li {list-style-type:none; padding:3px 10px;}
/*“非首位子元素”选择符*/
.list1 li + li {border-top:1px solid #f00;}
/*为链接添加样式*/
.list1 a {text-decoration:none; font:20px Exo, helvetica,
        arial, sans-serif; font-weight:400; color:#000;
        background:#ffed53;}
/*悬停高亮*/
.list1 a:hover {color:#069;}

使用“非首位子元素”选择符:li + li选择符的意思是“任何跟在li之后的li”。
也可以这样写：
/给所有li上方添加一条边框/
li {border-top:1px solid #f00;}
/去掉第一个li上方的边框/
li:first-child {border-top:none;}
改进版

* {margin:0; padding:0;}
nav {margin:50px; width:150px;}
.list1 ul {border:1px solid #f00; border-radius:3px;
padding:5px 10px 3px;}
.list1 li {list-style-type:none; padding:3px 10px;}
.list1 li + li a {border-top:1px solid #f00;}
.list1 a {display:block; padding:3px 10px; textdecoration:
          none; font:20px Exo, helvetica, arial, sansserif;
font-weight:400; color:#000; background:#ffed53;}
.list1 a:hover {color:#069;}

横向菜单

<nav class="list1">
    <ul>
        <li><a href="#">Shirts</a></li>
        <li><a href="#">Pants</a></li>
        <li><a href="#">Dresses</a></li>
        <li><a href="#">Shoes</a></li>
        <li><a href="#">Accessories</a></li>
</ul>
</nav>

.list1 ul {
    /*强制ul包围浮动的li元素*/
    overflow:hidden;
}
.list1 li {
    /*让li元素水平排列*/
    float:left;
    /*去掉项目符号*/
    list-style-type:none;
}
.list1 a {
    /*让链接填满li元素*/
    display:block;
    padding:0 16px;
    /*去掉链接的下划线*/
    text-decoration:none;
    color:#999;
}
.list1 li + li a {border-left:1px solid #aaa;}
.list1 a:hover {color:#555;}

浮动让li元素从垂直变成水平，display:block让链接从收缩变成扩张，从而整个li元素都变成了可以点击的。另外，选择符li + li a为除第一个链接之外的每个链接左侧都加了一条竖线，作为视觉分隔线。好啦，可以讲更复杂的样式了。

下拉菜单

三级菜单的实现，是通过ul的三层嵌套来实现的

<nav class="multi_drop_menu">
    <!-- 一级开始 -->
    <ul>
        <li><a href="#">Power</a></li>
        <li><a href="#">Money</a></li>
        <li><a href="#">Love</a></li>
        <li><a href="#">Fame</a>
            <!-- 二级开始 -->
            <ul>
                <li><a href="#">Sports Star</a></li>
                <li><a href="#">Movie Star</a></li>
                <li><a href="#">Rock Star</a>
                    <!-- 三级开始 -->
                      <ul>
                          <li><a href="#">Bruce Springsteen</a></li>
                          <li><a href="#">Bono</a></li>
                          <li><a href="#">Mick Jagger</a></li>
                          <li><a href="#">Bob Dylan</a></li>
                      </ul>
                            <!-- 三级结束 -->
                </li>
                <li><a href="#">Web Designer</a></li>
            </ul>
            <!-- 二级结束 -->
        </li>
    </ul>
    <!-- 一级结束 -->
</nav>

/*顶级菜单样式*/
/*添加视觉样式*/
.multi_drop_menu {font:1em helvetica, arial, sans-serif;}
.multi_drop_menu a {
    /*让链接充满列表项*/
    display:block;
    /*文本颜色*/
    color:#555;
    /*背景颜色*/
    background-color:#eee;
    /*链接的内边距*/
    padding:.2em 1em;
    /*分隔线宽度*/
    border-width:3px;
    /*可以有颜色，也可以透明*/
    border-color:transparent;
}
.multi_drop_menu a:hover {
  /*悬停时文本颜色*/
    color:#fff;
    /*悬停时背景色*/
    background-color:#aaa;
}
.multi_drop_menu a:active {
    /*点击时背景变色*/
    background:#fff;
    /*点击时文本变色*/
    color:#ccc;
}

/*添加功能样式*/
.multi_drop_menu * {margin:0; padding:0;}
/*强制ul包围li*/
.multi_drop_menu ul {float:left;}
.multi_drop_menu li {
    /*水平排列菜单项*/
    float:left;
    /*去掉默认的项目符号*/
    list-style-type:none;
    /*为子菜单提供定位上下文*/
    position:relative;
}
.multi_drop_menu li a {
    /*让链接填充列表项*/
    display:block;
    /*给每个链接添加一个右边框*/
    border-right-style:solid;
    /*背景只出现在内边距区域后面*/
    background-clip:padding-box;
    /*去掉链接的下划线*/
    text-decoration:none;
}
.multi_drop_menu li:last-child a {border-right-style:none;}
/*临时隐藏低级菜单*/
.multi_drop_menu li ul {display:none;}



常用场景技能实现

• 居中

  p{
    margin:20px auto;
  }
  /*让文本和图片垂直居中*/
  div {
      height:150px;
      width:250px;
      border:2px solid #aaa;
      margin:20px auto;
      background-image:url(images/turq_spiral_150.png);
      background-repeat:no-repeat;
      background-position:50% 50%;//
      text-align: center;//
      line-height: 250px;//
  }
  li {
      /*去掉列表项目符号*/
      list-style-type:none;
  }