《Head first HTML与CSS 第二版》读书笔记 第九章 盒模型

line-height属性指定行间距，可使用px，em和百分数。em和百分数相对于本元素字体的大小。

 

CSS将每一个元素看作一个盒子，这里的元素包括块元素和内联元素在内的全部元素。每一个盒子由一个内容区以及可选的内边距、边框和外边距组成。

 

background-image属性把一个图像放在元素的背景中：

background-image: url(images/background.gif)

还有另外两个属性影响背景图像：

• background-position属性会设置图像的位置，能够按像素指定，也能够指定一个百分数，或者还可使用关键字，top/left/right/bottom/center。

• background-postion: top left;

• background-repeat属相能够控制平铺行为，默认的图像会平铺（repeat）。no-repeat图像只显示一次，repeat-x只在水平方向上重复，repeat-y只在垂直方向上重复，inherit按父元素的设置来处理。

 

使用padding-left属性在左边增长内边距，设置边距的顺序很重要，后出现的会覆盖先出现的设置。

 

border-style属性能够控制边框的视觉样式。共有八种样式：

1. solid    实线；
2. double    双线；
3. groove    槽线；
4. outest    外凸；
5. dotted    点线；
6. dashed    虚线；
7. inset    内凹；
8. ridge    脊线；

 

border-width属性控制边框的宽度，可使用像素或关键字（thin/medium/thick）。

border-color属性设置边框的颜色与设置字体颜色相似，可以使用颜色名、rgb值或十六进制码。

像外边距和内边距同样，能够指定任意一边的边框的样式、颜色和宽度：

border-top-color
border-bottom-style
border-right-width

border-radius属性给边框建立圆角，可使用像素和em。若是使用em，边框半径的度量相对元素字体大小。

也能够只指定一个角建立圆角。

 

将边框设置为锯齿效果的技巧：

1. 元素自己的背景色与页面的背景色不一样（假设页面的背景色为白色）；
2. 将边框类型设置为虚线（dashed）;
3. 将边框的颜色设置为白色（与页面的背景色相同）。

 

按id选择一个元素，须要在id 前面使用#字符，id能够以一个数字或字母开头，包括字母、数字以及下划线，但不能包括空格。

 

在HTML中可使用多个样式表。若是几个样式表包含冲突的属性定义，HTML文件中最后连接的样式表最优先。

有时会有一个样式表做为页面的基础样式，要修改样式，并非修改这个基础样式表，而是连接这个样式表，而后在下面提供本身的样式表，指定向修改的样式。

 

<link>元素中的media属性指定应用这个样式表的设备类型：

media="screen and (max-device-width:480px)"
screen指定有屏幕的设备，
max-device-width指定屏幕宽度小于等于480px

media="screen and (orientation:landscape)"
orientation指定屏幕方向，landscape横向,portrait纵向

media="print"
经过打印机查看页面

也能够在CSS中使用@media规则把全部适用的规则放到大括号里：

@media screen and (min-device-width:480px) {
    #id{
       ......
    }
}

min-device-width/max-device-width关注设备的实际屏幕，也可使用min-width/max-width值得是浏览器的大小。

 

一些属性：

• border-color    边框颜色；
• border-width    边框宽度；
• border-style    边框样式；
• padding    对内边距设置大小，能够是px或百分数；
• margin    对外边距设置大小，用法与padding类似。