《Head First HTML 与 CSS》读书笔记之CSS篇

本文为阅读《Head First HTML 与 CSS》的css部分的读书笔记，方便回顾书上的知识，另一篇为Head First HTML 与 CSS》读书笔记之HTML篇

基本

常识与实践

css的每一个语句包括一个场所，以及这个场所的一个属性，还要应用到这个属性一个样式,一个典型的css规则如下:

    p { // 需要增加样式的元素: p,这称为选择器(selector),匹配页面中的所有p元素
        background-color: red; //背景色为红色      格式: < 属性:值; >
        border: 1px solid gray; //边框: 1像素,实线,灰色
    }

css 的注释: /* */
css验证工具,你还可以把验证图标放到你的web页面中

链接方式

内部链接

要为html直接增加css样式，需要在<head>元素中增加开始和结束style标记，css规则放在里面

  <style>
    p {
       color: gray;
    }
  </style>

css文件外置

另一种方式将css文件外置，如style.css,作为样式表(stylesheets),然后从html众创建一个到这个文件的外部链接,用<link>元素,用外部样式表的好处是要修改整个网站的样式，只要进入这个样式表，对css进行几处修改即可。如:

  <link type="text/css" rel="stylesheet" href="lounge.css" >
  #放到<head>元素中,在html5中不再需要type这个属性(可选),rel(relation)指定html与所链接文件间的关系,这里指我们要链接到一个样式表
  #link是一个void元素

多样式表

使用多个样式表,顺序很重要，一个样式表会覆盖在它上面链接的样式表中的样式,有时会有一个样式表作为页面的基础样式，要修改样式，链接这个样式表，然后在下面提供自己的样式表，指定要修改的样式,如下所示:

<link rel="stylesheet" href="corperate.css">//总公司样式
<link rel="stylesheet" href="beverage-division.css">//部门对总公司的样式做了一些补充，甚至可以覆盖公司的样式
<link rel="stylesheet" href="lounge-seattle.css">//西雅图休闲室对样式表做了自己的调整

简写

css属性太多，能不能不费吹灰之力就指定这些属性呢？可以把同一属性的值结合起来写成一句,即简写。

简写格式

`padding`

padding: 0px 40px 30px 20px;,顺序是上右下左,顺时针有木有,如果都相同可以用padding: 20px;

  padding-top: 0px;
  padding-right: 40px;
  padding-bottom:30px;
  padding-left: 20px;

`margin`

上面的padding格式同样对margin也适用,还有另一种方法,如果上下一样，左右一致,可以这样写:margin: 0px 20px,前面指定上下，后面指定左右。

`border`

边框属性简写 border: thin solid #007e73;,可以用你喜欢的任何顺序。

`background`

背景简写 background: white url(images/cocktail.gif) repeat-x;，同样顺序随便

`字体`

字体简写的格式稍微复杂一些:

  font : font-style font-variant font-weight font-size/line-height font-family

font的属性中font-size必须有
font-size前的属性是可选的，组合任意，不过必须出现在font-size之前
line-height是可选的，只要在font-size后加/然后指定行高即可
font-family名之间要使用逗号分隔
如: font : small/1.6em Verdana, Helvetica, Arial,sans-serif;

简写的优劣

不一定要用简写形式，有些人觉得长形式更可读。
简写的好处: 缩写css文件大小，输入更快。
简写的不足: 如果存在问题，或者顺序有误，比较难调试
简写记起来复杂，可以用参考手册

选择

子孙选择器

父元素和子孙元素名之间有一个空格,子孙选择器会选择所有子孙，包括这个元素中嵌套的所有,不管嵌套多深,例如

  #elixirs h2 {//选择elixirs子孙的所有h2
    color: black;
  }

直接孩子

如果要选择直接的孩子,用>

  #elixirs>h2 {//选择elixirs的直接孩子h2
    color: black;
  }

复杂选择

更复杂的选择,方法还是一样

  #elixirs blockquote h2 {//选择elixirs中的blockquote中的h2元素
    color: blue;
  }

规则添加

要为多个元素编写一个规则，只需要在选择器之间加上逗号，如 "h1,h2"。

    h1,h2 {// 多个选择器
     font-family: sans-serif;
     color: gray;
    }

元素可以指定多次规则,例如我们想给h1添加下边框，但是不想给h2页也加上，也不想分解上面的规则，可以给h1再增加一个属性:

    h1,h2 {
     font-family: sans-serif;
     color: gray;
    }
    h1{
    border-bottom: 1px solid black;
    }

把元素的所有共同样式归组在一起(如果改变，只需要在一个规则中修改)，然后把一个元素特定的样式写在另一个规则中.

类

当我们用选择器选择元素使用一个规则时,会对所有该元素应用这个样式，所以如何单独地选择这些元素呢?这里就需要类class,class可以定义一类元素，对属于该类的所有元素应用样式.要将一个元素加入一个类，只需要增加属性"class",并提供类名,如"greentea":

  <p class="greentea">
  ...
  </p>

类元素选择器

先选择这个类中的元素,再用"."指定一个类,最后是类名,如:

  p.greentea {
    color: green;
  }

添加类元素

如果想对所有<blockquote>也做同样的处理，可以:

  blockquote.greentea,p.greentea {
      color: green;
  }
  <blockquote class = "greentea"

类选择器

如果想把<h1>,<h2>,<h3>,<p>和<blockquote>都增加到greentea呢？要对类中的所有元素都用同一样式可以用:

  .greentea{
    color: green;
  }
  /*省略所有元素名,只有一个点,则会应用到所有成员*/

多类元素

元素可以有多个类,例如:

  <p class="greentea raspberry blueberry"
  #各个类名用空格分隔
  #类中顺序不重要

特定元素选择器

如果多个选择器都选择了一个元素呢？例如上面的3个类都与p元素匹配，并且都定义了color属性，那么那个会胜出?

如果某个规则更特定，则选择更特定的元素
如果特定程度相同，那么会选择css文件中最后列出的规则，例如下面的例子中会选择p.blueberry的规则:

  p { color : black;} // 对于所有段落
  .greentea { color: green;} //对于所有greentea类，比上面特定
  p.greentea { color : green;} //只选择greentea类中的段落,比上面特定
  p.raspberry { color : blue;} //同上,与greentea特定程度相同
  p.blueberry { color : purple;} //同上,与greentea特定程度相同

`id`

`id`的作用

id属性用来唯一地命名元素,通常你想对多个元素重用某些样式，才能真正发挥类的作用。但是如果只有一个元素需要样式，或者页面上只有一个元素，那就应该使用id,每个元素只能有一个id，页面中只能有一个元素拥有特定id,一个元素有一个id，同时可以属于一个或多个类,id中不允许出现空格或其他特殊字符,如

  <p id="footer">...</p>

选择元素

用id选择一个元素,需要在id前面使用一个#字符(类是[.]),id选择器只与页面中的一个元素匹配

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

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

实践建议

在复杂页面中，可能有些页面把id指定给一个段落，有些页面分配给了一个列表，那么需要为该id定义多个规则,根据页面上不同类型的元素应用不同的规则,如p#someid和blockquote#someid
类名要以一个字母开头，不过id名可以以一个数字或字母开头，但它们都不能有空格

继承

样式继承

为p选择器增加font-family属性时，也会影响到<p>元素中内部元素的字体。
元素能够从他们的父元素继承样式。
不是所有的样式都能继承,只有一部分,如font-family。
并不是所有元素都会继承，如img没有文本，所以不会受到字体影响。
继承的样式可以覆盖,例如给<em>提供一个特定的规则来覆盖body中指定font-family,浏览器会使用更特定的规则：

  body {
    font-family : sans-serif;
  }

  em {
    font-family: serif;
  }

那哪些元素能够继承

如果样式会影响你的文本外观，那么所有这些样式都能继承,如color,font-family,font-size,font-weight,font-style等和字体相关的属性
其他属性不能继承，如边框，因为如果body元素有边框，不表示你希望body内的所有元素都有边框
根据常识确定，或者试试看

层叠

浏览器会用多个样式表组织样式，首先是你的ccs所有样式表，其次是用户创建的样式，最后浏览器本身会维护一组默认样式
给定一组样式表中的一组样式，浏览器会以层叠的方式确定具体使用哪个样式
读者可以在他的css属性上加上!important，那他就能覆盖你的样式
浏览器需要选择最特定的规则进行显示
特定性由3个数开始000：
第一位: 这个选择器包含id吗？每个id加1分
第二位: 这个选择器包含类或伪类吗？每个类和伪类加一分
第三位: 这个选择器包含元素名吗？一个元素名加一分
把它们读作真正的数,100>010>001，例如h1.greentea的特定性值为011,ol li p的特定性为003。
浏览器首先收集样式表找到所有的声明,然后对所有匹配的规则按作者，读者和浏览器排序，再按特定性对组内的所有声明分别排序，
最后对于冲突的规则，按照他们在各个样式表中出现的顺序排序，如果两个规则得分相同，最后出现的规则胜出。

媒体查询

link媒体查询

你可能想针对将要显示页面的设备调整页面的样式，可以用media属性,在link元素中增加这个属性.如

<link rel="stylesheet" href="lounge-mobile.css" mdeia="screen and (max-device-width: 480px)">
<link rel="stylesheet" href="lounge-print.css" media="print">
# 其他属性包括min-device-width,max-device-width,orientation(横向landscape,纵向portrait)

css媒体查询

可以直接在css中增加媒体查询,使用@media规则,把对所有媒体类型都通用的规则放在@media规则下面,例如

@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 { // 如果要打印页面，使用该规则
body {
  font-family: Times, "Times New Roman", serif;
}
}

实践建议

如果css文件相当庞大，建议使用link元素
除了给出设备的媒体属性，如果你更关心浏览器大小，可以用max-width和min-width

属性

盒模型

盒模型是css看待元素的一种方式，css将每个元素看作由一个盒子表示,每个盒子由一个内容区以及可选的内边距，边框和外边距组成。由内而外分别是:

内容区: content ,包含内容，如文本或图像
透明内边距: padding ,可选,包围内容区
边框: border ,可选,内边距周围
透明外边距: margin,可选,包围所有部分

内容区

内容区包含元素的内容，它的大小通常正好包含全部内容

`padding` 内边距

使用内边距可以在内容与盒子边框之间创建一些看得到的空间
css可以控制内边距的宽度，甚至任意一边的宽度,上下左右
透明,无法指定样式
元素的背景颜色或背景图像会延伸到内边距下面，但不会延伸到外边距
设置padding的顺序很重要，如果先设置padding-left再设置padding，刚才设置的padding-left就会被覆盖

  padding: 25px;
  padding-left: 80px;
  # 我们首先有一个属性来控制所有4个边，另外再对每个边单独设置

`border` 边框

他是围绕内容的一条线
边框可以有不同的宽度，颜色和样式
内边距将内容区与边框隔开
可以指定任意一边的边框样式 border-top-color,border-top-style,border-top-width等
锯齿边框(破折线＋白色):

    border-style: dashed;
    border-color: white;

`border-style` 边框样式

solid 实线
ridge 脊线
dashed 破折
dotted 虚线
double 双线
groove 槽线
outset 外凸
inset 内凸

`border-width` 边框宽度

关键字 thin medium thick
像素 5px;

`border-color` 边框颜色

和color 类似,使用颜色名，rgb或16进制码

`border-radius` 边框圆角

可以为4个角分别指定，如border-top-left-radius
可以用px或em(相对于元素字体大小)

  border-radius: 15px;

`margin` 外边距

用外边距在同一个页面上的不同元素之间增加空间
和内边距一样，css可以控制外边距的宽度，甚至任意一边的宽度,上下左右
透明,无法指定样式
和padding一样，设置margin的顺序很重要

    margin: 30px;
    margin-right: 250px;

`color` 颜色

文本元素的字体颜色

color 元素实际控制着一个元素的前景色,他会控制文本和边框颜色，不过你也可以用border-color属性为边框指定自己的颜色
改变p的字体颜色不会影响里面的链接颜色.
web颜色按构成颜色的红，绿，蓝三个分量所占数量来指定,每种颜色会分别指定一个从0到100%的数值,然后把它们混合起来得到最终的颜色.如100%红,100%绿，100%蓝混合在一起是白色。所有指定web颜色的方法最终都是告诉浏览器：一个颜色的红绿蓝分量分别是多少.
对于文本和背景，要使用对比度最大的颜色，能提高可读性

用16进制码指定指定颜色

如#fc1257,这种方式最常用
以#开头,分别用2位数字指定红绿蓝
例如:

  body {
      background-color: #cc6600;
    }

wiki的web颜色表
如果每一组分量中的两位数字都相同，可以使用简写,例如#ccbb00可以简写成#cb0,不过如果是#ccbb10则不能简写

按名指定颜色

css只定义了大约150个颜色名,颜色名不区分大小写
16种基本颜色,所有浏览器都有,以及150种扩展色,它们是:aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, yellow
例如:

    body {
      background-color: silver;
    }

用红绿蓝值指定颜色

以rgb开头，在小括号里指定红绿蓝的百分比,例如:

  body{
    background-color: rgb(80%, 40% , 0%)//橙色
  }

还可以指定0-255之间的一个数值,例如:

body{
  background-color: rgb(204, 102, 0)//和上面颜色一致,255*80% = 204...
}

`font-family` 字体

大多数计算机上通常只安装了部分字体,所以选择字体时要当心,通常指定的font-family包含一个候选字体列表,他们都来自同一个字体系列,候选字体用逗号分隔,大小写字母必须一致,最后总是放一个通用的字体系列名,如果一个字体名中包含多个单词,比如Courier New，如何指定？用引号,"Courier New",如:

  body{
    font-family: Verdana, Geneva, Arial, sans-serif;
  }

字体系列

每个font-family包含一组有共同特征的字体。共有5个字体系列:

Sans-serif : 无衬线体 , 在计算机上更容易识别, 很多人认为在计算机显示中最适合体文本,包括: [Verdana : 大多数pc上都有],[Geneva : 大多数Mac上都有],[Arial : 在PC和Mac上都很常见]
Serif : 有衬线体 , 新闻报纸的文字排版
Monospace : 固定宽度的字符,主要用于显示软件代码示例
Cursive : 看似手写的字体 , 有时会看到在标题中偶尔使用
Fantasy : 包含有某种风格的装饰性字体

`@font-face` 指定字体

@font-face 允许你定义一种字体的名字和位置,然后可以在你的页面中使用。
web字体标准: 字体文件使用".woff"文件扩展名,表示web开放字体格式(web open font format)
常用字体格式: ［TrueType : .ttf］，［OpenType : .otf 建立在tt之上］，［Embedded OpenType字体 : .eot otf的压缩形式微软专用，仅ie支持］，［SVG字体 : .svg 通用图像格式］，［Web开放字体格式 : .woff 推荐使用,浏览器支持最广泛］
缺点: 获取字体需要花费时间，第一次获取字体时页面性能可能会受影响。管理多个字体文件痛苦，最后移动设备和小型设备不支持。
有字体托管服务可以为你托管web字体。
浏览器会先在用户计算机上查找Verdana字体，如果有，这个元素就使用这个字体，如果不可用，找Geneva,以此类推,
如果前面指定的字体都没有找到，就用浏览器默认的Sans-serif字体，就是我们最后指定的通用字体。
利用font-family可以创建一个首选字体列表
把该规则增加到文件的最上面,放在body规则之上

    @font-face {
    font-family: "Emblema One"; //创建一个名字
    src: url("http://wickedlysmart.com/hfhtmlcss/chapter8/journal/EmblemaOne-Regular.woff"),
         url("http://wickedlysmart.com/hfhtmlcss/chapter8/journal/EmblemaOne-Regular.tff");
    //src属性告诉浏览器到哪里找到这个字体,浏览器会尝试每一个src文件，直到找到它支持的一个文件。
    }

`@import`

@import 允许导入其他CSS文件

`font-weight` 控制文本的粗细

lighter : 相对于继承的值使文本稍细一点。
normal : 正常
bold : 粗体
bolder : 相对于继承的值使文本稍粗一点。
还可以设置为100到900之间的一个数（100的倍数),不过并没有广泛支持，通常不使用

`font-size` 让文本更大或更小

像素px指定大小 : font-size: 14px; //告诉浏览器字母高度是多少像素.14px中间不能有空格
百分数%指定大小 : font-size: 150%; //指定相对于父元素的字体大小
em指定字体大小 : font-size: 1.2em; //指定相对于父元素的字体的比例因子,称为相对大小
好吧，百分数和em看上去差别不大，可能%更容易理解些,例子:

  body {
      font-size: 14px;
  }
  h1 {
      font-size: 150%; //父元素body,这里是14*150% = 21px
  }
  h2 {
      font-size: 1.2em; //父元素body,这里是14*1.2 = 17px
  }

关键字指定字体大小 : font-size: small;, small通常定义为12px,下面每一级大小约比前一个大小大20%，包括:xx-small,x-small,small,medium,large,x-large,xx-large

指定字体大小的秘诀

(1)选择一个关键字(推荐small或medium),作为body的字体大小,为页面默认字体大小 (2)使用em或百分数,相对于body字体大小指定其他元素的字体大小(em或百分数)这样改变web页面中字体大小就很容易，只要改变body字体大小就可以了,例如:

  body { font-size : small; }
  h1 { font-size : 150%; }
  h2 { font-size : 120%; }

注意老版IE不支持用像素指定的文本缩放

浏览器默认字体大小

大多数情况下，浏览器默认的body字体大小都是16像素
如果在body中指定字体大小为90%,这将是默认字体的90%
h1 : 200%, 相对于默认字体,下同
h2 : 150%
h3 : 120%
h4 : 100%
h5 : 90%
h6 : 60%

`text-decoration` 文本装饰

underline : 下划线 ,下划线文本通常被用户误认为是链接文本，所以要谨慎使用
none : 无效果
overline : 上划线
line-through : 删除线,html有个<del>的元素可以将内容标记为要删除的内容
一次可以设置多个装饰
如果文本继承了你不想要的文本装饰，可以使用值"none"来去除装饰
如果em有两个不同的规则，不会累加，要把这两个值合并到一个规则中，才能同时得到这两个文本装饰.
例如:

  em {
    text-decoration: line-through;
  }

`font-style` 字体风格

italic : 斜体 ,斜体文本向右倾斜,另外衬线还有弯曲
oblique : 倾斜 ,并不是使用一组专门设计的倾斜字符,而是由浏览器将正常文字倾斜

`list-style` 改变列表中列表项的外观

列表的主要属性是list-style-type,利用这个属性可以控制列表中使用的项目符号
- disc,默认
- circle,圆圈标记
- square,方块标记
- none，删除列表标记

定制列表标记

如果想定制列表的标记，可以用list-style-image为列表设置标记图像,如:

li{
  list-style-image: url(images/backpack.gif);
  padding-top: 5px;
  margin-left: 20px;
}

对于有序列表也一样，可以用list-style-type控制一个有序列表标记:
decimal,十进制
upper-alpha,大写字母
lower-alpha,小写字母
upper-roman,大写罗马数字
lower-roman,小写罗马数字
列表项的项目符号的位置如何控制?用list-style-position,有两个取值inside(标记在列表项里)和outside（列表项外)。
区别如下:

区别

其他属性

`left` 指定一个元素的左边所在位置

`top` 控制一个元素顶部的位置

`background-image` 在元素后面放置一个图像,如

  background-image: url(images/background.gif);
  //用url括起来,注意没有引号

`background-repeat` 背景图像是否重复

默认在水平和垂直方向上重复
控制平铺行为,no-repeat,repeat-x,repeat-y,inherit;

  background-repeat: no-repeat;

`background-position` 背景图像的位置

可以按像素指定，或百分数,还可以用关键字,如top,left,right,bottom和center

  background-position: top left;

`background-color` 控制元素的背景颜色

`text-align` 对齐

text-align会对块元素中的所有内联内容对齐,而不仅仅是文本
text-align只能在块元素上设置，对内联元素无效
left 左对齐
center 居中
right 右对齐

`letter-spacing` 在字母之间设置间距

`line-height` 设置文本元素中的行间距

    body {
        font-size: small;
        font-family: Verdana, Helvetica, Arial, sans-serif;
        line-height: 1.6em; //调整为字体大小的1.6倍
    }

line-height元素有点特殊,可以对它直接使用一个数,而不是相对度量,代表各元素行高是其自己字体大小的多少倍

 #elixirs {
   line-height: 1;//代表elixirs中的所有元素的行间距为其自己字体大小的1倍
 }

设置line-height为normal，允许浏览器选择一个适当的行高大小,通常根据字体来确定。

`border-bottom` 下边框

下边框会延伸到页面边缘,但是文本的underline属性的下划线只会出现在文本下面
1px solid black

`width` 指定元素宽度

宽度永远是设置的值
width属性只指定内容区的宽度
要确定整个盒子的宽度，需要将内容区的宽度加上左和右内边距,左右外边距和边框的宽度
一个块的默认宽度为"auto",它会延伸占满可用的空间
如果使用百分数，那么宽度会计算为元素所在容器宽度的一个百分比
高度也是默认的，也是"auto",一般，不用指定元素的高度，就让它们默认为auto

`a`元素和它的多重人格

页面上的链接有多重显示样式，包括未访问，已访问或者处于悬停状态等(还有focus和active),这里需要用到伪类
foucs是指浏览器将焦点放在你的链接上时就是焦点状态，浏览器允许用户按下tab键轮流访问时，浏览器访问到某个链接，某个链接就拥有了"焦点"
active是指用户第一次单击一个链接时，就处于活动状态。
－ a元素可能同时处于多个状态，一般认为适当的顺序是link,visited,hover,focus,active
例子:

  a:link {
    color: green;
  }
  a:visited {
    color: red;
  }
  a:hover {
    color: yellow;
  }

伪类

上面的a:link,a:visited和a:hover就是伪类
它们都允许我指定样式，就好像他们是类一样，但是没有人在html中真正输入这些类
浏览器会仔细检查所有a元素，把它们增加到正确的伪类中，如果一个链接已访问过，会放到:visited类中，如果悬停，浏览器会把这个链接
扔到:hover伪类中。浏览器会在后台向这些类增加和删除元素.
伪类不止能处理链接，还能对其他类型的元素提供处理，如first-child对应元素的第一个子元素。

布局和定位

流

流：浏览器从html文件最上面开始，从上到下沿着元素流逐个显示所遇到的各个元素。
块元素从上向下流，各元素之间有一个换行，内联元素从左上方流向右下方,在水平方向上相互挨着摆放（只要右边还有空间放的下）
文本是内联函数的特殊情况，浏览器会把它分解成适当大小的内联元素，以适应给定的空间。
对于外边距，浏览器并排放置两个内联元素时，外边距会相加，但是当上下放置两个块元素时，会把它们共同的外边距折叠在一起，高度为最大的外边距高度。
事实上只要两个垂直外边距碰到一起，它们就会折叠，但是如果外面的元素有一个边框，那么两个元素的外边距就不会碰到一起，就不会折叠

`float`

float属性首先尽可能远地向左或向右浮动一个元素，然后在它下面的所有内容会绕流这个元素。
对于所有浮动元素都有一个要求：它必须有一个宽度。
浮动元素的外边距不会折叠,因为它只是浮在页面上，注意到这一点可以避免常见css错误.
内联元素也可以浮动，如浮动图像
float属性可以设置为left或right,不能是中间

  #amazing {
    width: 200px;
    float: right;
  }

下面看浏览器如何处理float（想象一下word的图片浮动):
(1)首先，浏览器像往常一样，正常将元素流入页面，从最上面开始。
(2)浏览器遇到浮动元素时，会把它尽可能放在最右边，还会从流中删除这个段落，好像它浮在页面上一样。
(3)由于该浮动段落已经从正常的流中删除，所以其他块元素会填在这里，就好像没有这个段落一样。
(4)对于内联元素定位时，它们会考虑浮动元素的边界，因此会绕着浮动元素。

`clear`

当元素流入页面时，在这个元素左边，右边或两边不允许有浮动内容,例如为防止页脚和右边栏重叠，可以用clear设置:

#footer {
  background-color: #675c47;
  color:            #efe5d0;
  text-align:       center;
  padding:          15px;
  margin:           10px;
  font-size:        90%;
  clear:            right;
}

现在浏览器放置元素时会查看右边有没有浮动元素，如果有就下移，直到没有浮动元素为止。

两栏效果

把sidebar放在页眉下面，然后用float将sidebar栏向右浮动,通过将main div的右外边距设置得和sidebar的宽度相同，来创建两栏效果,不过此时如果页面太宽，页脚会上移造成重叠问题,
这个问题可以在页脚肿添加clear属性解决。还有一个问题是因为我们把sidebar放在主要内容前，所以在小的移动设备上会看到边栏在最前面。
右紧左松，让主内容向左浮动，设置仿照上面的。这样div的顺序是正确的，不过边栏过于扩展不好，还是固定些好
使用绝对定位，类似浮动效果，当主内容区的垂直空间缩小，边栏会向下覆盖页脚
使用css表格

流体与冻结设计

上面讨论的都是流体布局(liquid layouts)，下面讨论冻结布局(frozen layouts),冻结布局会锁定元素，
如将body中的所有内容都放到一个id为#allcontent的div中

#allcontent {
  width: 800px;
  padding-top: 5px;
  padding-bottom: 5px;
  background-color: #675c47;
}

那么页面的宽度将被限制为800px，无论浏览器宽度如何变化都不会移动,但这会导致浏览器很宽时，右边有很多空白空间

凝胶布局 `Jello`

凝胶布局会锁定页面中内容区的宽度，不过会将它在浏览器中居中，将内容区的内外边距设为auto即可，浏览器会确定正确的外边距是多少，确保左和右外边距相同，所以内容会居中,如下所示

#allcontent {
  width: 800px;
  padding-top: 5px;
  padding-bottom: 5px;
  background-color: #675c47;
  margin-left: auto;
  margin-right: auto;
}

绝对定位

例如上面的边栏，将边栏绝对定位时，它会从流中删除并根据制定的top，left，right或bottom属性定位
由于边栏在流之外，其他元素甚至不知道有这样一个元素，它们会将它完全忽略,所以流中的内联内容不会围绕在一个绝对定位的元素周围。
如将侧边栏绝对定位

  #sidebar {
    position: absolute;
    top:  100px;
    right:  200px;
    width:  280px;
  }

关于绝对定位还有一个分层放置的问题，一个元素可以放在另一个绝对定位元素上面，那如何分层？谁在上面？每个定位元素都有一个z-index的属性，这会指定它在一个虚拟z轴上的位置（上面的元素“更靠近”你，z-index更大).
可以对任何元素指定绝对位置
position的默认值为static，将元素放在正常的文档流中。position共有4个值:static,absolute,fixed和relative。fixed将元素放在相对于浏览器窗口（区别页面）的一个位置上，固定元素永远不会移动。relative让元素正常流入页面，不过在页面上显示之前要进行偏移。
绝对元素不必像浮动元素一样指定宽度，不过默认会占浏览器的整个宽度，所以如果要改变这种行为就要设置width属性
指定元素位置还可以用百分数,相对于浏览器宽度.

css表格

类似电子表格，在表格中只放置块元素，所以要把图像包围在一个div中。
为整个表格创建一个div，然后为每一行分别创建一个div，对于每一列，只要在行div中放置一个块级元素。
例如一行两列的表格可以按如下方式创建：

<div id="tableContainer">
  <div id="tableRow">
    <div id="main">
      ...
    </div>
    <div id="sidebar">
      ...
    </div>
  </div>
</div>

对应的css为:

#tableContainer {
  display: table;
  border-spacing: 10px;//于是不再需要div中的外边距
}
#tableRow {
  display: table-row;
}
#main {
  display: table-cell;
  background:       #efe5d0 url(images/background.gif) top left;
  font-size:        105%;
  padding:          15px;
  /*margin:           0px 10px 10px 10px;*/
  vertical-align: top;//确保表格两个单元格中的所有内容相对于单元格上边对齐，默认为中间对齐,可以设置为top,middle,bottom
}
#sidebar {
  display: table-cell;
  background:       #efe5d0 url(images/background.gif) bottom right;
  font-size:        105%;
  padding:          15px;
  /*margin:           0px 10px 10px 10px;*/
  vertical-align: top;
}

上面的border-spacing会在单元格之间增加10像素空间，另外在边界周围也会增加10像素空间，但是border-spacing和外边距创建的空间不会折叠！就会导致页眉和页脚与两列之间有20像素的空间，如何修正？将页眉（页脚）的下边距（上边距）设为0即可。

最后编辑于：2017.11.27 03:24:16

人面猴
序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
沈念sama阅读 157,298评论 4赞 360
死咒
序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
沈念sama阅读 66,701评论 1赞 290
救了他两次的神仙让他今天三更去死
文/潘晓璐我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
开封第一讲书人阅读 107,078评论 0赞 237
道士缉凶录：失踪的卖姜人
文/不坏的土叔我叫张陵，是天一观的道长。经常有香客问我，道长，这世上最难降的妖魔是什么？我笑而不...
开封第一讲书人阅读 43,687评论 0赞 202
港岛之恋（遗憾婚礼）
正文为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
茶点故事阅读 52,018评论 3赞 286
恶毒庶女顶嫁案：这布局不是一般人想出来的
文/花漫我一把揭开白布。她就那样静静地躺着，像睡着了一般。火红的嫁衣衬着肌肤如雪。梳的纹丝不乱的头发上，一...
开封第一讲书人阅读 40,410评论 1赞 211
城市分裂传说
那天，我揣着相机与录音，去河边找鬼。笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。我是一名探鬼主播，决...
沈念sama阅读 31,729评论 2赞 310
双鸳鸯连环套：你想象不到人心有多黑
文/苍兰香墨我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
开封第一讲书人阅读 30,412评论 0赞 194
万荣杀人案实录
序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
沈念sama阅读 34,124评论 1赞 239
护林员之死
正文独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋以下内容为张勋视角年9月15日...
茶点故事阅读 30,379评论 2赞 242
白月光启示录
正文我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
茶点故事阅读 31,903评论 1赞 257
活死人
序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
沈念sama阅读 28,268评论 2赞 251
日本核电站爆炸内幕
正文年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
茶点故事阅读 32,894评论 3赞 233
男人毒药：我在死后第九天来索命
文/蒙蒙一、第九天我趴在偏房一处隐蔽的房顶上张望。院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
开封第一讲书人阅读 26,014评论 0赞 8
一桩弑父案，背后竟有这般阴谋
文/苍兰香墨我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。一阵脚步声响...
开封第一讲书人阅读 26,770评论 0赞 192
情欲美人皮
我被黑心中介骗来泰国打工，没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。一个月前我还...
沈念sama阅读 35,435评论 2赞 269
代替公主和亲
正文我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
茶点故事阅读 35,312评论 2赞 260

《Head First HTML 与 CSS》读书笔记之CSS篇

基本

常识与实践

链接方式

内部链接

css文件外置

多样式表

简写

简写格式

padding

margin

border

background

字体

简写的优劣

选择

子孙选择器

直接孩子

复杂选择

规则添加

类

类元素选择器

添加类元素

类选择器

多类元素

特定元素选择器

id

id的作用

选择元素

实践建议

继承

样式继承

那哪些元素能够继承

层叠

媒体查询

link媒体查询

css媒体查询

实践建议

属性

盒模型

内容区

padding 内边距

border 边框

border-style 边框样式

border-width 边框宽度

border-color 边框颜色

border-radius 边框圆角

margin 外边距

color 颜色

文本元素的字体颜色

用16进制码指定指定颜色

按名指定颜色

用红绿蓝值指定颜色

font-family 字体

字体系列

@font-face 指定字体

@import

font-weight 控制文本的粗细

font-size 让文本更大或更小

指定字体大小的秘诀

浏览器默认字体大小

text-decoration 文本装饰

font-style 字体风格

list-style 改变列表中列表项的外观

定制列表标记

其他属性

left 指定一个元素的左边所在位置

top 控制一个元素顶部的位置

background-image 在元素后面放置一个图像,如

background-repeat 背景图像是否重复

background-position 背景图像的位置

background-color 控制元素的背景颜色

text-align 对齐

letter-spacing 在字母之间设置间距

line-height 设置文本元素中的行间距

border-bottom 下边框

width 指定元素宽度

a元素和它的多重人格

伪类

布局和定位

`padding`

`margin`

`border`

`background`

`字体`

`id`

`id`的作用

`padding` 内边距

`border` 边框

`border-style` 边框样式

`border-width` 边框宽度

`border-color` 边框颜色

`border-radius` 边框圆角

`margin` 外边距

`color` 颜色

`font-family` 字体

`@font-face` 指定字体

`@import`

`font-weight` 控制文本的粗细

`font-size` 让文本更大或更小

`text-decoration` 文本装饰

`font-style` 字体风格

`list-style` 改变列表中列表项的外观

`left` 指定一个元素的左边所在位置

`top` 控制一个元素顶部的位置

`background-image` 在元素后面放置一个图像,如

`background-repeat` 背景图像是否重复

`background-position` 背景图像的位置

`background-color` 控制元素的背景颜色

`text-align` 对齐

`letter-spacing` 在字母之间设置间距

`line-height` 设置文本元素中的行间距

`border-bottom` 下边框

`width` 指定元素宽度

`a`元素和它的多重人格

`float`

`clear`

凝胶布局 `Jello`