《Head First HTML与CSS》的CSS属性

时间 2019-11-18

标签 head html css 属性栏目 HTML 繁體版

原文原文链接

关于继承的结论。css

1.元素选择器的做用强于继承的做用；用户定义强于浏览器默认（详见（3）《Head First HTML与CSS》学习笔记---CSS入门的2）html

2.基于类的选择器>类选择器>元素选择器（详见（3）《Head First HTML与CSS》学习笔记---CSS入门的6）css3

3.同种选择器下，顺序是有影响的，最后一个生效（详见（3）《Head First HTML与CSS》学习笔记---CSS入门的6）浏览器

没有特别标注的状况，下面的全部属性都是在Edge和Firefox开发者版本下实测可用的（2017.11.9）。服务器

关于简写的讨论。框架

不少属性均可以简写，好比用background、margin等，可是通过我本身的考虑，我以为我只想用部分简写，另外一些诸如字体的简写方式我以为很差记，因此我决定不使用其的简写方式。在这里我就记录一些本身想用的简写（有些简写有顺序是由于有写简写的值是同样的，没顺序限制就没法准确表达了；有些没顺序限制是由于没有简写值同样，因此系统能够正确表达）：ide

1.内外边距简写：wordpress

h1{
  padding:             25px 25px 25px 80px;
  margin:              30px 250px 30px 30px;
}
/*内外边距值对应的大小分别是上、右、下、左*/
/*当上下、右左同样时还能够省略写，可是我不喜欢那种方式，因此这里就不写这个例子了*/
/*若是没顺序，这里就没法知道哪一个值表示上边距，哪一个是下边距，etc*/

2.背景简写：布局

h1{
background:    #a7cece url(images/background.gif) no-repeat;
}
/*顺序是背景色、背景图、背景图重复方式*/

须要注意的是，虽然简写看起来使代码简洁了，可是若是你只改一个属性，那么还不如不用简写，这样反而让代码易读点。post

1.选择器

元素选择器：

 p，h1{
   color: maroon;
 }

这段代码表示HTML中的全部段落（p）和一级标题（h1）的字体颜色是茶红色（maroon）（内嵌元素能够继承，好比<p>..<em>...</em>...</p>中的<em>元素字体也是茶红色）。

id选择器有两种写法，第一种：

 #one{
   color: maroon;
 }

/*
#one two{
   color： maroon；
}
这是错误的！要想选择两个id进行样式设计，必须分开写!之因此这样错是为了区分子孙选择器，看后面就知道了。
*/

第二种：

p#one{
  color： maroon；
}

区别在哪里？

通常状况下，咱们知道确定会有一个一个段落指定为这个id，因此用哪个选择器均可以，因此咱们会选择最简单的写法，即第一种；

在一些特殊状况，好比一组很复杂的页面中，可能会出现这种状况：两个页面连接的CSS文件是同一个（有导航栏的页面就极可能这样，整个页面除了部分样式要根据导航栏变化外，其他部分的样式都是不变的，这样的话连接同一个CSS是一种好的作法。），其中一个页面将id“one”指定给一个段落，而在另外一个页面上把id“one”分配给一个列表或块引用。此时你若是不写清楚，就没法确认是在给哪一个页面的“one”指定样式，根据页面上不一样类型的元素应用不一样的规则。

“类选择器”也有两种：

.guarantee{
    line-height: 1.9em;/*这是类选择器*/
}

p.guarantee{
    line-height: 1.9em;/*这是基于元素的类选择器*/
}

区别在哪里？

若是你想给某个类设计样式（无论是什么元素，只要是这个类），用第一种；

若是你只想给属于这个类的某个元素设计样式，用第二种。

子孙选择器：

div h2{
  color： black；
}
#elixirs blockquote h2{
  color： black；
}
/*第一类*/
div>h2{
  color： black；
}
/*第二类*/

要正确理解上面两类，就要看他们有什么区别：

子孙通常表示孩子、孙子、曾孙。因此子孙选择器这个名字是有深意的。

对于第一类，表示的是“全部子孙”，好比“div h2”选择器表示的是任何一个父元素div下的全部h2都会应用样式，即无论这个h2是父元素div的子元素仍是孙元素（好比有一个h2是在div中的div中）；“#elixirs blockquote h2”选择表示的是任何一个父元素属于elixirs类的全部blockquote里的全部h2都会应用样式（这句话要注意理解，可能有点绕）。

对于第二类，表示的是“直接的孩子”，这里就不是“全部”的了。“div>h2”选择器表示的是任何一个父元素div下的子元素h2都会应用样式，即只能是子元素（和第一类的“div h2”进行比较，就知道差异在哪里了）

伪类选择器：

#elixirs a:link{
  color: #007e7e;
}
/*这是一个伪类和一个子孙选择器，a：link就是一个伪类*/

详细的伪类讨论见（4）《Head First HTML与CSS》学习笔记---文本的CSS规则和盒模型；div与span；<a>元素的连接色；伪类

2.改变颜色。

用于改变字体颜色，maroon是可爱的茶红色~（有一个相关讨论，详见：（4）《Head First HTML与CSS》学习笔记---学习控制文本的CSS规则的6）：

      p{
        color: maroon;
      }

用于改变背景色：

      p{
        background-color: maroon;
      }

颜色名字是不区分大小写的。

一下是几种颜色指定的不一样方法：

以混合色的百分比表示：

      p{
        background-color: rgb(80%,40%,0%);
      }

以混合色的数值表示：

      p{
        background-color: rgb(204,102，0);/*红、绿、蓝的范围是0~255*/
      }

以十六进制码表示：

      p{
        background-color: #cc6600；/*这里的cc6600能够简写为c60——但这只在有两位数字相同的状况能够这么作*/
      }

其中头两位“cc”是红色的份量，中间两位“66”是绿色份量，最后两位“00”是蓝色的份量；

把这个十六进制转换为10进制：

1.cc6600=cc、6六、00

2.cc=12x16+12=204（c在十六进制中是12）；66=6x16+6=102；00=0x16+0=0

3.cc6600=204的红色，102的绿色，0的蓝色。

3.文本的下划线、上划线、删除线。

文本下划线：

h1,h2{
  border-bottom: 1px solid black;<！--这是下边框外框属性-->
}

这表示在下边框上增长一条1px的实线，颜色为黑色。

其与文本下划线属性不同：

h3 {
  text-decoration: underline；<!--这是文本下划线属性-->
}

两种都是给文字添加下划线，可是下边框外框属性的下划线会一直延续到页面边缘（其实是由于这种下划线是针对边框的下划线，而边框的长度和文本长度不同，其是延伸一整行的），而文本下划线属性则只在文本下延伸。

文本下划线属性还有其它值用来设置上下划线、删除线，详见：CSS text-decoration 属性,注意，none虽然描述是默认，其实效果上就是去除全部装饰效果。

要想同时给一个文本加上下划线，不能分开写，好比：

h3 {
  text-decoration: underline；
  text-decoration: overline；
}

这样上面的样式会被覆盖，应该这样写才对：

h3 {
  text-decoration: underline，overline；
}

4.有关文本内容的属性

body{
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    font-size: 14px;
    font-weight: bold;
    font-style: italic；
 text-align： center；

}

1.font-family属性：

在CSS中，字体划分为字体系列，能够从中指定页面中各个元素使用的字体——可是大多数计算机上一般只安装了部分字体，因此在选择字体时要特别小心。

浏览器会这样解释这个属性列出的字体：查看用户计算机上是否有Verdana字体，有就用，没有就查找下一个--这里是Geneva，依此类推，一直到找到一个用户计算机上有的字体——实际上这个属性就是一个候选字体优先列表，第一个是你最但愿使用的字体，再后面就是候选字体。

sans-serif或者serif并非一个具体的字体名。不过若是浏览器不得不使用这种字体时，就会选择一个浏览器自定义的该系列默认字体代替。

若是一个字体名包含多个单词，就写成：

font-family: “Courier New”, sans-serif;

若是想扩展浏览器字体，方法是：

在CSS中写以下代码：

@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.ttf");
}
h1{
    font-family: "Emblema One",sans-serif;
}

@font-face是一个创建字体的规则（=内置规则，和以前提到的选择器规则不同），在其中：

咱们用font-face建立一个名字“Emblema One”；

用src属性告诉浏览器在哪里能够获得这个字体，根据不一样的格式在这里我给出了两个连接，一个连接.woff文件，另外一个连接.ttf文件。

而后在选择器中使用这个字体，只须要用双引号把字体名字写在font-family中就好了（别忘了留下后路——加上sans-serif）。

最后，若是向使用多个定制字体，就要确保服务器有相应字体文件的基础上，为每个字体单首创建一个@font-face，分别指定惟一的名字。

2.font-size属性

用于指定字体的大小，根据使用的单位不一样，有区别：

1.px（像素）为单位，好比11px：至关于告诉浏览器字母高度是多少像素（实际上是每一个字母都有一个“框”，指定的是这个框的高度）。这会明确指出字体有多大。

2.%（百分数）为单位，好比100%：这个单位没有明确指出字体的大小，而是说明其是相对于另外一个字体大小指出这个字体有多大。所谓的另外一个字体“就是父辈元素的字体大小”。

3.em（比例因子）为单位。好比1.2（=120%，便是父辈元素大小的1.2倍）：和百分数类型的效果。

4.关键字：small、medium、large，详见：CSS font-size 属性

还能够用font-size：initial来清除该属性的效果。

3.font-weight属性

用于控制文本的粗细。粗体文本看起来比正常文本更深。

值有几种，详见：CSS font-weight 属性,须要注意的是：

值为normal时确实是“默认值。定义标准的字符”，可是实际上这样的效果就等同于“若是一个元素默认地设置为bold，或者从父元素基础了粗体，就能够此来去掉粗体样式”。

bolder和lighter这两个值使用时会相对于所继承的值使文本稍粗或者细一点，可是因为没多少字体支持粗细程度的微小差异，因此实际上这两个值一般没什么效果，不多使用。

4.font-style属性

用于设定文本的风格，详见：CSS font-style 属性

5.关于盒模型的属性

body{
  line-height: 1.6em;
}

line-height：

用于调整整个页面上文本的行高。其指定的方式也有百分数、px。

在这里要注意，行高用百分数表示和用数字表示在一些特殊的状况下会有区别，这个特殊的状况涉及到继承，下面看一个特殊状况的例子：

CSS为：

body {
  font-size:           small;
  font-family:         Verdana, Helvetica, Arial, sans-serif;
  line-height:         1.6em;
}

h1, h2 {
  color:               #007e7e;
}

h1 {
  font-size:           150%;
}

h2 {
  font-size:           130%;
}

#guarantee {
  line-height:         1.9em;
  font-style:          italic;
  font-family:         Georgia, "Times New Roman", Times, serif;
  color:               #444444;
  border-color:        white;
  border-width:        1px;
  border-style:        dashed;
  background-color:    #a7cece;
  padding:             25px;
  padding-left:        80px;
  margin:              30px;
  margin-right:        250px;
  background-image:    url(images/background.gif);
  background-repeat:   no-repeat;
  background-position: top left;
}
#elixirs{
  border-width: thin;
  border-style: solid;
  border-color: #007e7e;
  width: 200px;
  padding-right: 20px;
  padding-bottom: 20px;
  padding-left: 20px;
  margin-left: 20px;
  text-align: center;
  background-image: url(images/cocktail.gif);
  background-repeat: repeat-x; line-height: 1em;
}
#elixirs h2{
  color: black;
}
#elixirs h3{
  color: #d12c47;
}

重点关注划线部分，用"1em"和用"1"有什么区别呢？

这张图很好的说明了有什么区别：

为防止之后看不懂，对上图进行一些解释。

首先注意看右边的继承图，会发现elixirs类下的h2字体大小是samll的1.2倍（由于单独设置过h2的字体大小，覆盖了从body继承来的字体大小），而di其它字体大小仍然是继承于body的small。

而后看CSS代码中划线部分，这里的“1em”是一个相对单位，即1em=elixirs元素字体大小的1倍，那么等号右边的“元素字体大小”到底是指small仍是1.2倍的small呢？

其实指的是samll而不是1.2倍的small，也就是说1em相对的是父元素继承的字体大小，而不是咱们特地改变过的h2的字体大小！

写下划线部分的本意是：咱们但愿elixirs<div>中的每个元素的行高都不要基于elixirs<div>的字体大小，而是要基于各个元素自己的字体大小！而1em在这里的效果与咱们的本意是不一样的！因此咱们不能在这用1em！

用“1”就能很好的符合咱们的本意了:使用数字1，就表示elixirs<div>中的各个元素行高是其本身字体大小的1倍，而不是elixirs<div>字体大小的1倍！

还有就是，关于line-height和height的区别，参考文章：css行高line-height的一些深刻理解及应用 height vs line-height styling CSS 里的 height 属性与 line-height 属性有什么区别？

边框属性：

.guarantee{
    border-color: black;
    border-width: 1px;
    border-style: solid;
    background: #a7cece;
}

效果是：

能够看到，咱们没有更改过内外边距，由于border-color改的是边框颜色，border-width改的是边框的宽度，border-style改的是边框风格，background改的是背景色（咱们能够看到背景色并无延伸到外边距，这里的内边距是不存在的，外边距只有上下有13.33px；这个背景色帮助咱们看清了内边距和外边距之间的差异。）

更多边框属性，参考：CSS border 属性

如今咱们来加上内边距：

.guarantee{
    border-color: black;
    border-width: 1px;
    border-style: solid;
    background: #a7cece; padding: 25px;
}

效果:

咱们能够看到，padding属性增长了上下左右25px的内边距。

如今咱们增长外边距：

.guarantee{
    border-color: black;
    border-width: 1px;
    border-style: solid;
    background: #a7cece;
    padding: 25px; margin: 30px;
}

效果如图：

经过margin属性咱们增长了上下左右30px的外边距；能够发现，这里页面效果的左边缩进效果，实际上是由外边距增长实现的，而不是经过“空格”。

另外，对内联元素设置margin时，只有左右有效，上下是无效的；块级元素设置的margin上下左右都有效；对table元素、CSS的table属性设置margin无效，要用border-spacing。

最后，咱们加上背景图：

.guarantee{
    line-height: 1.9em;
    font-style: italic;
    color: #444444;
    font-family: Georgia, 'Times New Roman', Times, serif;
/*上面的只是装饰效果，并非重点*/

    border-color: black;
    border-width: 1px;
    border-style: solid;
    background: #a7cece;
    padding: 25px;
    margin: 30px; background-image: url(images/background.gif);
}

效果：

注意，背景颜色、背景图只会出如今内容区和内边距下（图像有一个透明背景，下面的颜色透出来了）。

咱们还能够设置背景图像的一些格式，好比：

.guarantee{
    line-height: 1.9em;
    font-style: italic;
    color: #444444;
    font-family: Georgia, 'Times New Roman', Times, serif; /*上面的只是装饰效果，并非重点*/
    border-color: black;
    border-width: 1px;
    border-style: solid;
    background: #a7cece;
    padding: 25px;
    margin: 30px;
    background-image: url(images/background.gif); background-repeat: no-repeat; background-position: top left;
}

效果如图：

background-repeat属性用于设置图像的重复方式，background-position属性用于设置图像的位置。详细的属性值即效果百度便可知道。

6.媒体查询

@media screen and （min-device-width： 481px）{
  #guarantee{
    margin-right： 250px；
  {
}

经过输入“@media”来应用媒体规则，只有被这个规则包围的才是应用于某个特定媒体的样式，没有被规则包围的则是用于整个页面。

and是一个运算符，在这表示“和”，即要同时知足“screen”和“min-device-width： 481px”。

screen这个查询指定了有屏幕的设备（而不是其余设备，好比说打印机或3D眼镜或者盲文阅读器）

min-device-width，指定屏幕宽度大于某个值；

max-device-width，指定屏幕宽度小于等于某个值；

print这个查询指定了是打印的状况下。

还有不少属性，详见：CSS3 @media 查询

7.width属性

该属性容许指定元素内容区的宽度。

例子（实际代码太长，只贴部分，注意观察图中边框的宽度便可）：

#elixirs{
  border-width: thin;
  border-style: solid;
  border-color: #007e7e; width: 200px;
}

图：

至此我要提醒一点：注意改变或者判断的是什么地方的宽、高度！好比：

width属性是CSS属性，是改变元素内容区的宽度；

width属性是HTML中img元素的属性，是改变图片的宽度；

min-width属性是HTML中link元素的判断属性，判断对象是浏览器；

min-device-width:属性是HTML中link元素的判断属性，判断对象是屏幕。

另外，某种程度上，上面两个“改变”换成“固定”也是可行的。看下面两个图，你会发现使用了width指定的400px不会由于浏览器的宽度改变而改变（注意观察饮料的框和浅绿色背景的框）：

能够看到，width属性设置的不会由于浏览器的宽度改变而改变！这个缘由是什么呢？

饮料框之因此不会变，是由于你设定了width的值；而浅绿色背景框里并无设定，这就致使了绿色背景框的内容区其实是默认按照浏览器的大小来改动的，只是在按照浏览器的大小上确保设置的外边距、内边距等内容是本身所设的值而已，而刚好这些值都是创建在内容区上的，因此内容区按浏览器大小变化，间接的就致使了总体的效果也按浏览器大小变化了。

由此你会发现，其实CSS是有规律的，可是你要时刻注意哪些规律是你明确指定的，哪些是默认的，由于默认的规律极可能是你指定规律的基础，就会给你一种错觉——我明明没改这个且指定了，竟然还会呈现出不符合我预期的状况！实际上极可能不是那样的！

总结到这的时候，我不得不从新看下面这段话，彷佛又看懂了一点：

做者：灵剑
连接：https://www.zhihu.com/question/66167982/answer/240621703
来源：知乎
著做权归做者全部，转载请联系做者得到受权。

不少人觉得CSS是给DOM元素设置属性（attribute），其实CSS规定的并非属性，而是行为（behavior），DOM里的每一个元素均可以当作是一个独立的物体，按照CSS规定的方式运动，最后稳定下来的结果就是最终布局的结果。因此高票答案说CSS不正交，它固然不是正交的，由于它的设计就是要求协变，要求在其余元素作出调整的时候，即使本元素的样式没有发生任何变化，也能够跟着调整位置和大小，以适应新的内容，维持设计风格。
为何CSS要设计成基于选择器和多种各异的behavior，而不像其余框架那样直接将显示样式绑定到每一个元素呢？偏偏是由于正交性，由于CSS和DOM是正交的，这样DOM内容变化时，CSS能够规定一组不变的特性，从而以灵活的方式适应内容的改变。传统的GUI一般每一个元素都有固定的位置和大小，要实现根据内容动态调整，就必须针对各类状况（如视口大小改变，内容改变）专门编写代码；WPF则有网格、流式、绝对三种不一样的定位方式，与CSS有很多共同点，可是自适应的功能少了很多，也没有选择器的功能，这样动态生成的内容就须要更多的代码来调整。而CSS只要将DOM组织成特定的格式，就会自动启用相应的样式。WPF制做的界面毕竟变化比较少，大部分元素仍然是固定的，而网页一般要求更高的灵活性。

8.text-align属性

用于规定元素中的文本的水平对齐方式，值为center时表示居中，详见CSS text-align 属性;

“元素中的文本的水平对齐方式”话中有话，要理解这个属性，就要回答两个问题：

首先看下列的HTML代码和CSS代码。

<div id="elixirs">
    <h2>Weekly Elixir Specials</h2>
    <p>
      <img src="images/yellow.gif" alt="Lemon Breeze Elixir">
    </p>
    <h3>Lemon Breeze</h3>
    <p>
      The ultimate healthy drink, this elixir combines
      herbal botanicals, minerals, and vitamins with
      a twist of lemon into a smooth citrus wonder
      that will keep your immune system going all
      day and all night.
    </p>

    <p>
      <img src="images/chai.gif" alt="Chai Chiller Elixir">
    </p>
    <h3>Chai Chiller</h3>
    <p>
      Not your traditional chai, this elixir mixes mat&eacute;
      with chai spices and adds an extra chocolate kick for
      a caffeinated taste sensation on ice.
    </p>

    <p>
      <img src="images/black.gif" alt="Black Brain Brew Elixir">
    </p>
    <h3>Black Brain Brew</h3>
    <p>
      Want to boost your memory?  Try our Black Brain Brew
      elixir, made with black oolong tea and just a touch
      of espresso.  Your brain will thank you for the boost.
    </p>

    <p>
      Join us any evening for these and all our 
      other wonderful 
      <a href="beverages/elixir.html" 
         title="Head First Lounge Elixirs">elixirs</a>.
    </p>
</div>

#elixirs{
  border-width: thin;
  border-style: solid;
  border-color: #007e7e;
  width: 200px;
  padding-right: 20px;
  padding-bottom: 20px;
  padding-left: 20px;
  margin-left: 20px; text-align: center;
  background-image: url(images/cocktail.gif);
  background-repeat: repeat-x;
}

CSS代码咱们主要关注划线那个属性便可。

其效果如图：

问1：为何text-align属性会影响图像的对齐方式？它不是只对文本对齐么？既然它也能对图像对齐，看起来应该换个名字才对。

答：事实上，该属性会对块元素中的全部内联内容对齐——咱们对div块元素设置这个属性后，它的全部内联内容都会居中而不是“文本居中”；并且该属性只能在块元素上设置，若是直接在内联元素（好比img）上使用，则不起做用。（注意，这里说的内联内容=内联元素的内容，这个内容能够是文字、图片。若是不清楚这一点就看不懂了！）

问2：我注意到div中的文本都在其她块级元素中，好比h二、h3等，因此既然text-align是对div块元素中的内联元素对齐，那么这些嵌套块元素的文本怎么也对齐了？

答：由于这些块元素继承了div的text-align属性。因此这是有区别的——并非div自己将标题和段落中的文本对齐，其实是标题和段落继承了center的值。这种继承能够有不少用处，好比你能够用div包围一些内容，而后对div应用样式而不是对单个元素分别应用样式；好比你但愿某个块内的一些内联元素不居中，就把这个内联元素拿出div的块元素使其变成div块元素里的内联元素。

9.<a>标签的状态样式（伪类）——link、visited、hover。

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

a:link选择器表示未访问状态的连接——没有单击过的连接称为未访问连接；

a:visited选择器表示已访问连接——单击过的连接称为已访问连接；

a:hover选择器表示悬停连接——把鼠标停在一个连接上但不单击称为悬停连接。

连接是元素世界里的变色龙，取决于具体环境——与其它元素不一样，a元素的样式会根据它的状态改变，所以就有了上面的样式属性。要想让a元素在全部状态下看起来都同样，能够这样写：

a{
  color: red;
}

但要注意，这样的连接没法作到用户友好——由于没办法区分哪些访问过，哪些没有访问过。

其实还有两种连接状态，书里略讲了，这里就上个图就行了：

注意文中有一处错误：“用户第一次单击一个连接时就处于活动（active）状态”一句中，应把“第一次”去掉。

上面提到了伪类和多状态下连接的结果，详细看（4）《Head First HTML与CSS》学习笔记---文本的CSS规则和盒模型；div与span；<a>元素的连接色的相关讨论。

10.float属性与clear属性

详见（5）《Head First HTML与CSS》学习笔记---布局与定位的有关内容。

结合11的属性，我发现当绝对定位的元素插入某个元素后，该元素用clean属性也没法将其清除——我猜这是由于clean只能清除正常流里的元素。

11.position—绝对定位

#sidebar{
  position： absolute；
  top： 100px；
  right： 200px；
  width： 280px；
  z-index： 1；
}

1.position

static值时：

这个属性值默认是“static”，即静态定位。此时元素会在正常的文档流中，由浏览器来决定这些静态元素放在哪里（注意，float也是由浏览器决定的！虽然你用“right”等值规定在哪一边，可是具体在哪一边的那个位置，好比你规定在左边，浏览器会决定左边是距离左边窗口多远叫左边。）。当这个属性值是“absolute”时，将由你来告诉浏览器究竟把元素放在哪里——注意，这里个属性值的做用仅仅是“编写者决定这个元素的位置由编写者本身确认”，具体在哪，还得靠接下来的几个属性。

absolute值时：

须要强调的是，当其值是“absolute”时，浏览器首先作的是将它从流里彻底删除，这一点和float不太同样。彻底删除意味着页面正常流的元素根本不知道页面上有这个绝对定位元素——其与浮动不一样，流中的元素再也不像浮动中会调整自身来适应其边界了，你能够理解为绝对定位元素对其它元素没有任何影响（注意，以前任何一个属性都是对其它元素有影响的！目前学的，只有这个属性保证对其它元素没有任何影响！）

一个元素（块元素和内联元素均可以）绝对定位时，会把它从页面的正常流中删除。

fixed值时：

首先强调一个以前一直存在误解的概念——浏览器窗口和页面是不一样的。当有滚动条的时候，固定在页面上和固定在窗口上是不一样的概念，前者会因滚动条而移动，后面不会移动。只有在没有滚动条的时候二者能够视为一个概念。（因此，要检查前面提到的“浏览器页面”和“浏览器窗口”，看看哪里用错了）

在这里，fixed值表明了固定定位，其会让元素固定在浏览器窗口上。（从如今开始，要把浏览器窗口称为“视窗”）

2.right、left、top、bottom

这个属性的值告诉浏览器“这个元素距离哪个方向多远”，注意，是距离多远！

其值可为负——这意味着一部份内容会跑到视窗或者页面外面，即在样式上会有部份内容消失。

3.width

这个不是必须的（float里就必需要有这个float才能生效）。若是没有指定这个值，默认地块元素会占浏览器整个宽度（固然要减去指定的距左边或右边的偏移量）。

4.z-index

这在本书中不是重点，一般用在CSS的高级语法，特别是涉及Web页面脚本时才用到。详见：CSS z-index 属性

简单地说，绝对定位还能够分层放置，即一个元素能够放在另外一个绝对定位的元素上面。这个属性就是用来让咱们设置谁在谁的上面的。

只有使用绝对定位、相对定位或者固定定位的元素才有这个值。

12.display——表格显示

首先说明，这里的display的表格布局与HTML中的表格是不同的：前者是为了布局，后者则专一于须要表格容纳的数据。

HTML：

<div id=tableContainer>
  <div id=tableRow>
    <div id=main>
......
    <div id=sidebar>
.....
<!--div#tableRow下的元素顺序就是表格的行里从左到右列的顺序-->

CSS：

......
#main {
  display: table-cell;
......
  vertical-align: top;
}
#sidebar {
  display: table-cell;
......
  vertical-align: top;
}
div#tableContainer{
  display: table;
  border-spacing: 10px;
}
div#tableRow{
  display: table-row;
}

1.display

值为table的时候表示一个表格（定义这是一个表格容器）；

值为table-row的时候表示一个行；

值为table-cell的时候表示一个列；

值为inline的时候表示列表项中显示为block的变成inline——即列表项的先后再也不有回车，会像常规的内联元素同样在页面上流入一行。（参考P574）.

重看时检验下面这篇文章的正确性：

css中display设置为table、table-row、table-cell后的做用及其注意点

一个细节：若是在一个table值的div下创建表格，其中每行的列数必须是同样多的；若是不同多，会有空余的列出来，这个列你是没法填充的。惟一的办法就是从新定义一个table值的div。（也很符合常理，这其实就是两个表格，不能想着塞到一个表格里）

2.border-spacing

这个属性的值决定了表格中的单元格的边框间距（一些其它的特性，看上面提到的文章）

要注意，这个间距也许会形成一些错觉——好比这个边距被你当成了“外边距”参与了“垂直排列时的折叠现象”（P517就提到了这个）（其实也算符合常理，此时元素与元素间的间距实际上是靠表格边框来区分了，外边距已经没用了，参考P517）。

还有一些讨论，见本文的14.

3.vertical-align

这个属性的值用来确保表格某些单元格中的全部内容相对于单元格的某个方向对齐（好比这里的相对于上边对齐）（注意加粗部分，这个属性是做用于一个行内元素的全部子元素相对于父元素的对齐，好比这里的vertical-align要放在#main里，而不是div#tableContainer里）

13.列表的属性list-style-type&&list-style-image&&list-style-position

无序列表下，list-style-type值为none时，删除列表项的项目符号；

无序列表下，list-style-type值为disc、circle、square时，列表项有不一样的样式，分别是默认标记、圆形标记、方块标记；有序列表时，能够设为字母、罗马数字等，详细的值能够查阅文档。

list-style-image用于定制标记，其格式为：

li{
  list-style-image: url(images/backpack.gif);
  padding-top: 5px;
  margin-left: 20px;/*这里的padding-top和margin-left可不是针对标记图像设置的，这一点要清楚*/
}

list-style-position用于指定列表标记（好比你上面的定制标记）在列表项的盒子里仍是外面：

值为inside时，标记在列表项的盒子里，因此文字会围绕标记（即第二行的开头是在标记的下面——此时列表项和文本同样占据位置）；

值为outside时，标记在列表项的盒子外面，因此文字就不会围绕标记了（即第二行的开头和第一行的开头对齐）。

14.border-spacing与margin的区别&&table标签中一些属性的应用

table{
  margin-right: 20px;
  margin-left: 20px;
  border: thin solid black;
  caption-side: bottom; border-spacing: 0px;/*全部边框间距为0px*/
  border-spacing：10px 20px；/*设置为10px的水平边框间距和20px的垂直边框间距*/
  border-collapse: collapse;
 
}
th,td{
  padding: 5px;
  border: thin dotted gray;
}
caption{
  padding-top: 8px;
  font-style: italic;
  caption-side: bottom;
}

1.通过实测，“caption-side: bottom”属性放在captain选择器或者table选择器下均可以让表格标题放在表格下面，那么问题来了，为何我决定和书上同样把该属性放在table选择器下呢？

这个问题的答案在某些属性上看也是颇有帮助的，这涉及到一个看问题的角度，一些属性之因此用在不一样选择器下有不一样的效果，以及一些属性为何不能用在某些选择器中，均可以经过“看问题的角度”来融会贯通，再也不是死记硬背。

首先，“caption-side: bottom”的做用是改变表格标题的位置。其次，table标签与captain标签所表明的语义，或者说结构是不同的——table表示的是从“大局”上看这个表格，因此在其选择器下的属性也应该是基于“大局”的改变。captain则是table下的一个标题。从这里看来，改变captain位置的样式操做，放在table下更好，对于captain来讲，其内边距、字体样式才是正确的，用于captain这个标签的样式操做（不负责任地说，若是captain下还能够有一个captain2，那么对captain2的位置样式操做要放在captain下比放table下更好）。

2.table选择器下的margin与通常块元素下的margin的区别？table选择器下的border-collapse、border-spacing和通常块元素下的margin的区别？

首先，要明确的是，table选择器中的margin所改变的仍然是基于“全局”的，即整个表格看做一个块元素，margin改变的就是这个块元素的样式（而不是里面的单元格margin！），因此从这点看，其与通常块元素的margin没有区别——若是你要改变单元格的margin，你必需要把margin放在td、th选择器中才行。

那么，为何td、th中margin失效了呢？

请注意，td、th表示的是单元格，虽然是不一样意义的单元格。咱们规定，单元格中的外边距失效（由于单元格和块元素可不同，不只仅是不换行的区别），单元格里咱们定义了一个新的属性提到外边距，这个属性就是border-spacing，它表示单元格之间的空间。

说到这，我发现：每一个标签都有一个盒模型，可是盒模型并不都是同样的，好比对于p来讲有内外边距和边框，而对于td来讲有的是border-spacing和内边距、边框。基于此，我有理由提出在1中的观点：“CSS属性在不一样选择器下可能有不一样的效果，CSS属性可能不能用在某些选择器中。因此，后面复习这些的时候，我要把每一个标签的盒模型、对应的属性能改变什么，每一个属性能用在哪些标签中，分别有什么做用等一一写清楚（包括属性名全称和翻译）——那些书里没出现过的，不能随意的联想别的标签对应过去！

言归正传，对于表格而言，单元格的”外边距“是不能单独设定的，这也就照成了”外边距“在表格中再也不存在，取而代之的是border-spacing，它的做用是为全部单元格设置一个共同的间距。

border-spacing虽然能使单元格之间的距离为零，可是距离为零≠边框靠在一块儿后会合并，即虽然两个单元格距离为零了，可是它们的边框并无消失，边界处是两个边框合在一块儿的样子。基于这种状况（咱们不能设置某个单元格没有边框，就像咱们不能单独设置某些单元格之间的间距同样），咱们有规定了一个属性值：

border-collapse： collapse。这个属性值的做用是，忽略表格上设置的全部边框间距，而且把紧挨着的两个边框合成一个边框。

注意，“border-collapse： collapse”是针对表格的一个特殊的CSS属性，容许将单元格边框合并为一个边框。仔细想一想，对于通常的块元素、内联元素，咱们是能够设置没有边框的，那么咱们就不须要像单元格同样用这种“曲线救国”的属性来合并边框（只须要把某个标签边框去掉，另外一个标签边框留着便可）。

通过上面的讨论，我发现，若是基于选择器的全局角度看待一些CSS属性，别有一番风味！

15.nth-child伪类

发现了一个有趣的地方——HTML文件中，标签里是没办法写注释的（即在标签里失效了）。

HTML代码太长，缩短了一些，明白意思便可。

<table>
.......................
        <tr>
          <th>City</th>
          <th class="center">Date</th>
          <th class="center">Temperature</th>
          <th class="right">Altitude</th>
          <th class="right">Population</th>
          <th class="center">Diner Rating</th>
        </tr>
        <tr>
          <td>Walla Walla, WA</td>
          <td class="center">June 15th</td>
          <td class="center">75</td>
          <td class="right">1,204 ft</td>
          <td class="right">29,686</td>
          <td class="center">4/5</td>
        </tr>      
............................................
</table>

th{
  background-color: #cc6600;
}
tr:nth-child(odd){
  background-color: red;
}

这里的效果有一个有趣之处，这里主要是记录CSS属性，就很少说了，想看能够参考：HTML中的那些bug的3。

“p:nth-child(1)”，用于指定嵌套在某个元素中的第1个p元素的样式（在例子中只改了背景色）；

若是“1”变成even/2n，则指定的是第偶数个（从2开始/n=0时，2n=0=无段落，也是从第2个开始）p元素的样式；

若是“1”变成odd/2n+1，则指定的是第奇数个（从1开始/n=0，2n+1=1，也是从第一个开始）p元素的样式。