From Head First HTML CSS

9 盒模型

从CSS角度来看，元素就是盒子。每个盒子从里到外依次为：内容区，内边距(padding)，边框(border)，外边距(margin)组成。

内容区：存放文本或者图像，盒子大小正好可以包含所有内容，且内容与盒子边缘之间没有空间。

内边距：内边距是可选的，它的存在主要是可以控制整个内容区周围内边距的宽度，它是透明的，没有颜色，也没有自己的装饰。

边框：边框也是可选的，实质上就是围绕内容的一条线。

外边距：可选项，可以在同一页面的不同元素之间增加空间。如果两个盒子紧挨着，外边距就相当于他们之间的空间。

.gurarantee{
    border-color: black;
    border-width: 1px;
    border-style: solid;
    padding: 25px;/* 在内容的周围增加25像素的内边距*/
    margin: 30px;/*外边距*/
    background-image: url(image/background.gif)/*为元素增加背景图像*/
}

背景图像

background-position: top,left,right,bottom,center,或者像素指定/ background-repeat: repeat-x, repeat-y,inherit-继承父级元素的设置。

.gurarantee{
    background-image: url(image/background.gif);/*为元素增加背景图像*/
    background-repeat: no-repeat;
    background-position: top left;
}

元素边框

border-style：solid(实线)，double(双实线)，groove(槽线)，outset(外凸)，dotted(虚线)，dashed(破折线)，inset(内凹)，ridge(脊线)

border-width: thin,medium,thick，或者像素值指定

border-color

border-top-color: top可以换成上下左右，color可以换成style，width

border-radius:15px, 一个数值指定四个角,还可以指定四个角中特定的角。

id与类

多个元素使用某个样式就用class，一个元素就用id。

使用

<p id="footer">Please steal this page, it isn't copyrighted in any way</p>

#footer{color: red;}选择id为footer的任意元素

p#footer{color: red;}选择一个id为footer的<p>元素

id选择器只与页面中的一个元素匹配

media 属性

media属性指定应用这个样式的设备类型，通过创建一个“媒体查询”来指定设备类型。

<link herf="lounge-moble.css" rel="stylesheet" media="screen and (max-device-width: 480px)>"这个查询指定了有屏幕的设备，且屏幕宽度不超过480px

在css文件中加入媒体查询：

@media screen and (min-device-width: 481px){/*如果设备的屏幕宽度大于480px，就用这个规则*/
    #guarantee{
        margin-right: 250px;
    }
}

@media screen and (max-device-width: 480px){/*如果设备的屏幕宽度小于等于480px，就用这个规则*/
    #guarantee{
        margin-right: 30px;
    }
}

@media print{/*如果要打印这个页面就会用这个规则*/
    #guarantee{
        font-family:Times, serif;
    }
}

p.specials{/*其他规则会应用所有页面*/
    color: red;
}

10 div和span

实现页面高级建设：如将饮料做成宣传单样式

<div>-将一个页面划分为逻辑区

将有关联的内容放在一个div标签中，div也就是一个容器，从而对特定的区域应用样式。

<div id="dogs">
    <h2>   </h2>
    <p>
    </p>
</div>

#dogs {
    background-image: url(mutt.jpg);
    width: 200px;/*元素内容区的宽度*/
}

text-align: center

对所包含的所有块元素中的内联内容居中，包括图像。在div嵌套元素中，比如一个div元素包含h1，p等元素，这些块元素也会居中，是因为继承了div元素的text-align属性。

子孙选择器

修改div标签中标题的颜色，但是不修改body中标题的颜色，也就是说隔离处理div标签中的样式，需要我们特定选择出某些元素。

#elixirs h2{
    color: black;
}/*这个规则指出选择id为elixirs的div的**所有子孙**<h2>元素*/

#elixirs>h2/*这个规则指出选择id为elixirs的div的所有**直接子孙**为<h2>的元素*/

#elixirs blockquote h2{
    color: black;
}/*这个规则指出选择id为elixirs的div中<blockquote>下一级的<h2>元素*/

div中行高的设置

#elixirs{
    line-leight:1;
}

如果是1em，那么行高就是elixirs元素字体大小的1倍，而elixirs元素字体大小继承自body中small。设为1，行高的大小是基于div标签中每个元素大小的一倍。

缩写

padding: 0px 20px 30px 10px;内边距上，右，下，左。（顺时针）

margin: 0px 20px 30px 10px;外边距上，右，下，左。

padding: 20px;内（外）边距四个值都相同。

padding: 0px 20px;内（外）边距上下，左右值相同

border: thin solid #007e7e;边框属性重写，顺序随意

background: white url() repeat-x背景简写，还可以加background-position等属性

font: font-style font-variant font-weight font-size/line-height font-family eg:font: small/1.6em Verdana,Helvetica, sans-serif;
注:font-size之前的属性都可选，但是必须出现在font-size之前。
关于简写顺序和可选性，手册：《CSS Pocket Reference》

span:创建内联字符和元素的逻辑分组
- 增加<span>标签: 将span元素增加到cd类和artist类中。

    <ul>
      <li><span class="cd">Buddha Bar</span>, <span class="artist">Claude Challe</span></li>
      <li><span class="cd">When It Falls</span>, <span class="artist">Zero 7</span></li>
      <li><span class="cd">Earth 7</span>, <span class="artist">L.T.J. Bukem</span></li>
      <li><span class="cd">Le Roi Est Mort, Vive Le Roi!</span>, <span class="artist">Enigma</span></li>
      <li><span class="cd">Music for Airports</span>, <span class="artist">Brian Eno</span></li>
    </ul>

- 指定span样式

.cd {
  font-style: italic;
}

.artist {
  font-weight: bold;
}

<a>元素的样式

目标：已访问，未访问链接制定不同颜色，且用户悬停在连接上时能够突出显示这个链接。

a:link {
  color: #007e7e;
}

a:visited {
  color: #333333;
}

a:hover {
    color: yellow;
}

注:另外几种链接状态: focus和active。浏览器焦点放在链接上就属于focus状态（tab访问链接）；用户第一次单击一个链接时，就处于active状态。css规则顺序：link，visited，hover，focus，active。

伪类（pseudo-class）

我们对<a>元素的样式指定时有三种状态，但是html文件中没有这三个类，这就是伪类。它们是得益于浏览器的工作实现的，浏览器会仔细检查所有<a>元素，把它们加入到正确的伪类中，在后台向这些类中增加和删除元素。

层叠

我们可以对自己的html使用多个样式，用户也可能会提供自己的样式，浏览器也有默认的样式。那么如何确定一个元素究竟应用哪些样式呢？--层叠的作用
eg：假如一个页面上有一个<h1>元素，你想知道这个元素的font-size属性，你应该:

1.收集所有样式表

2.找到所有的匹配声明

3.对所有匹配的规则排序

作者，读者，浏览器的顺序排序。

4.现在按特定性对所有声明排序

首先按照特定性大小在每组内进行排序。

特定性的计算：0 0 0
分别指这个选择器包含id吗？每个id加1；这个选择器包含伪类或者类吗？每个加1；这个选择器包含几个元素名？每个加1；

5.对于冲突的规则，按照它们在各自样式表中出现的顺序进行排序

11 布局与定位

流就是浏览器在页面上摆放HTML元素所用的方法。浏览器从最上面开始，从上到下沿着元素流逐个显示所遇到的元素。

块元素从上到下逐个显示，内联元素在水平方向上会相互挨着，从左上方流向右下方。内联元素只要水平方向右边还有空间能够放下就向右。注意，文本是内联元素的特殊情况。

并排放置两个内联元素，如两个图像，浏览器会使用它们的外边距计算它们之间的空间。

并排放置两个块元素，它会把它们共同的外边距折叠在一起。折叠的外边距高度就是两个块元素中最大的外边距高度。

float属性

float属性首先尽可能远的向左或者向右(根据float的值)浮动一个元素。然后它下面的所有内容会绕流这个元素。（绕流就是像流体一样绕着这个元素流动）

对于所有的浮动元素都有一个要求：它必须有一个宽度。

浏览器处理页面中流动元素的全过程

首先，浏览器正常将所有元素流入页面，从文件最上方开始，逐步移向末尾的元素。
浏览器遇到浮动元素，把它尽可能地放在最左或最右。同时从流中删除这个段落，好像它浮在页面上一样。
由于这个浮动元素已经从流中删除了，所以下面的块元素会紧接着填在页面上，好像没有浮动元素一样。
内联元素在定位时，会考虑浮动元素的边界，因此会围绕着浮动元素。

clear属性：解决重叠问题

浏览器在页面放置元素时，会查看footer右边有没有一个浮动元素，如果有就会把页脚下移，直到它右边没有浮动元素为止。

#footer {
  background-color: #675c47;
  color:            #efe5d0;
  text-align:       center;
  padding:          15px;
  margin:           10px;
  font-size:        90%;
  clear:            right;/*清除右边的浮动元素*/ 
}

float "left"

在一些功能受限的浏览器查看时，我们设置的右边栏内容会出现在前面，想要查看正文就要往下翻阅。为了解决这一问题我们可以将主内容向左浮动。

从边栏开始
处理主内容区
处理页脚

流体与冻结设计

之前我们所接触的都是流体布局（liquid layouts）,即不论我们将浏览器调整到多大宽度布局都会扩展，填满整个浏览器。

而锁定布局，不论如何调整屏幕设计都不会改变，这就叫冻结布局（frozen layouts）。比如我们将页面中的所有元素放在一个div标签里，设置一个固定的宽度，那么调整浏览器也不会改变整个页面的内容布局。

#allcontent{
  width: 800px;
  padding-bottom: 15px;
  padding-top:    15px;
  background-color:crimson;
}

凝胶布局

会锁定内容区的宽度不过会将它在页面居中。

#allcontent{
  width: 800px;
  padding-bottom: 15px;
  padding-top:    15px;
  background-color:crimson;
  margin-left: auto;
  margin-right: auto;
}

另一种创建两栏布局的方法

绝对定位在CSS规则中加入position：absolute指定这个元素要绝对定位。一个元素绝对定位时，浏览器将它完全从流中删除，然后浏览器将这个元素放置在top和right属性指定的位置上（或者bottom和left指定）。当有多个绝对定位的元素时，如何判断谁在上面呢？每个定位元素都有一个z-index属性，越大，越靠近你，就在上面。

position：static，absolute，fixed，relativestatic是默认值，元素会放在正常的文档流中。fixed是将元素放在相对于浏览器窗口的一个位置上（而不是相对于页面）。相对定位会让元素正常的流入页面，但是在页面上显示之前会进行偏移。

CSS表格

对CSS表格显示来说，每个单元格包含一个HTML块元素。

修改HTML结构

首先创建div表示整个表格，行和列都嵌套在这里。
对于表中的每一行，创建一个div，其中包含行的内容。
对于每一列，只需要一个块元素作为该列的内容。

修改CSS规则

#tableContainer{
  display: table;
  border-spacing: 10px;
}

#tableRow{
  display: table-row;
}

#main {
  display: table-cell;
  background:       #efe5d0 url(images/background.gif) top left;
  font-size:        105%;
  padding:          15px;
  vertical-align: top;
}

#sidebar {
  display: table-cell;
  background:       #efe5d0 url(images/background.gif) bottom right;
  font-size:        105%;
  padding:          15px;
  vertical-align: top;
}

几种布局总结

浮动布局

将饮料菜单采用浮动的方式移动到页面右端，对于例子休闲室很合适。float非常适合在一个文本段落中浮动图像，让文本围绕着这个图像。

缺点是我们必须把需要浮动的整个<div>移动到页面主内容上面，如果这种顺序不反应内容的重要程度，这种做法往往不是最优的。另外，使用float将无法创造两个高度相同的列。

凝胶布局

由一个固定大小的<div>包围页面中的所有内容，利用auto属性值允许外边距扩展，把它调整为凝胶布局。很多博客都采用这种方式。

但是内容不会填满整个浏览器窗口。

绝对布局

用绝对定位得到的一个流体布局，能保证内容的顺序是我们希望的。通过将sidebar设置为一个特定的宽度，并将它定位在主内容右边，就有了一个可以随着页面大小而伸缩的主内容区域，sidebar会保持固定大小，固定在浏览器窗口的右侧。

浏览器变宽时，边栏会再次覆盖页脚。

表格显示布局

解决了绝对布局的问题。使用一种类似表格的布局来表现这个结构中的内容。

固定定位：你滚动页面，它依然在原地

指定位置时，是距离浏览器窗口的位置（视窗），而不是距页面边界的距离。

前端语言 | HTML CSS 9-11

9 盒模型

10 div和span

11 布局与定位