Head First HTML 与CSS 第九章盒模型学习笔记

line-heights属性指定行高，同理有三种方式，可继承，所以在Body规则中设置行高

line-height：1.6em/160%/20px;

行高设置补充：直接用一个数，那么得到的行高就是自己字体大小的几倍了，line-height: 1.2; 设定行高为自己字体大小的1.2倍

 

 

一、盒模型：

CSS将每个元素（段落、标题、列表、列表项、em元素、a元素等所有元素）都看为一个盒子，盒子包括内容区、内边距去，边框，外边距区，可以对盒子的每个部分进行样式指定；

注意认清楚那个盒子的各个区域。

1、边框：

1、border-color 同理可以用颜色名，百分比和十六进制

2、border-width 可以用关键字 border：thin/medium/thick;或者用像素。

3、border-style(边框样式：共8种,solid实线，double双线，groove槽线，outset外凸，dotted虚线，dashed破折线，inset内凹，ridge脊线）

简写  border：color  width  style；任意顺序

4、border-radius指定边框圆角，可以用像素border-radius：15px;或者border-radius：3em；用比例。border-radius是同时指定四个角，分别指定每一个角：border-top-right-radius（右上角）border-top-left-radius(左上角）border-bottom-right-radius(右下角）border-bottom-left-radius（左下角）

5、可以指定某一边边框的颜色、粗细和样式：border-top-color、border-right-weight、border-bottom-style......

2、边距

1、内边距：padding（针对四周设置相同的内边距） padding-left，padding-right，padding-top,padding-bottom.同理可以通过像素或者百分比、比例设置。快捷方式：padding：上px  右px  下px  左px; 或者  padding：上下px  左右px;

2、外边距：margin（针对四周设置相同的外边距）  margin-right, margin-left（设置元素相对其他元素缩进）,margin-top,margin-bottom.同理可以通过像素或者百分比、比例设置。快捷方式：margin：上px  右px  下px  左px; 或者  margin：上下px  左右px;

3、背景

background-color：背景颜色；

background-image：url(..........);添加背景图片；

background-repeat：no-repeat/repeat-x/repeat-y;

background-position：；

可以简写：background: color  url()  repeat  position;  任意顺序

1、区别于img元素，前者只是起一个装饰作用，没有任何意义，而后者是有意义的图片，例如logo、照片；

2、默认情况背景图片会在水平和垂直方向上重复（若是一张填不满的话）可以使用background-repeat: no-repeat;让他不重复。background-repeat：repeat-x;只在水平方向上重复。background-repeat：repeat-y;只在垂直方向上重复。background-repeat：inherit；按父元素方法处理（？？啥玩意）。

3、background-position：top、bottom、left、right；可以控制背景图片的位置，例如 background-position: bottom right; 就是放在右下角。

4、内容区

width属性指定内容区的宽度（不包含内外边距，整个盒子的宽度=外边距(左右）+内边距(左右）+边框(左右）+width）。宽度一旦指定，那么即使调整浏览器窗口大小也不会改变，窗口大小小于width的属性值，就会有个水平滑条。未指定width的元素就会自动扩展占满浏览器的宽度(考虑到内外边距边框之后）

内容区的高度一般不设定，默认auto(自动）。

 

二、id与class

当页面上的多个元素(用于某一种元素的子集，或者多种元素子集的集合）使用某样式时，使用class。但是当只对确定的一个元素（而不是一种元素或一种元素的子集）使用某样式的时候，就用id。之前已经知道id是元素的唯一标识符，可以利用id来为特定的一个元素定位，同样，可以用id来为特定的一个元素增加样式。比如页眉、页脚、导航条，这种在一个web页面上只会有一个。

id属性和class属性并不冲突，一个元素只能有一个id属性，但是同时它可以属于一个或者多个类。

id必须是唯一的，命名规则不同于class，可以用数字和字母开头（类只可以用字母开头），但是都不能有空格。

id的使用：在元素中加入id属性，id = "指定个标识名"  在前面定点链接已经知道了。为Id属性添加样式：#标识名{   }  和类很像，不同的是id选择器只与页面中的一个元素匹配。

 

三、混合样式表

一个页面可以link多个样式表，以最下面的样式表优先。网站一般都是以一个样式表最为网站的基础样式，要对web页面样式进行修改的话，都是重新链接link一个新的修改好的样式表，而不是直接在原样式表上进行修改。

 

面向多设备的样式表

样式表不仅面向浏览器，在不同的设备上加载会有不同的样式（手机，打印机，平板电脑，PC机等），更多媒体属性可以查询css3媒体查询规范。

方法一、在link标记中使用媒体查询

为html增加多个link标记，涵盖要支持的所有设备。

在每个link元素里加一个media属性：print（打印机）screen and (max-device-width: 480px) (有屏幕的设备，并且屏幕宽度不超过480像素）screen and (min-device-width: 480px)  以及显示方向orientation,可以是横向landscape或者纵向portrait。例子：

<link type="text/css" rel="stylesheet" href="lounge.css" media="screen and (min-width: 481px)">

<link type="text/css" rel="stylesheet" href="lounge-mobile.css"  media="screen and (max-width: 480px)">

<link type="text/css" rel="stylesheet" href="lounge-print.css" media="print">

方法二、直接写在css中

使用@media规则,将适用于该设备的所有CSS全部包含在{  }中

@media screen and (min-width: 481px) {.......................}

@media screen and (max-width: 480px){.........................}

@media print {.............................}