前端之旅：《Head First HTML & CSS》第9章

July 12 2016

9. 盒模型

padding、margin、border

盒子由内容区、内边距、边框、外边距构成
- 内容区被可选的透明内边距包围，内边距会将内容和边框隔开
- 内边距周围可能放着一个可选的边框
- 有一个可选的透明外边距包围着边框，外边距用于在页面上的不同元素之间增加空间。
内边距和外边距之间有一个区别：元素的背景颜色或背景图像会延伸到内边距下面，但不会延伸到外边距。
css指定内边距用padding，边框用border，外边距用margin，每一个又可以单独指定上、右、下、左顺时针的四个方向的值，如margin-right:100px，但border由于要指定多个值，所以使用方式更灵活
- border 是简写，可以指定4个方向的border都使用相同值，border-width、border-color、border-style是全写形式。
- border-top可以指定上面的border样式，但这仍然是一种简写形式，可以采用全写border-top-width、border-top-color、border-top-style来分别指定，且4个方向都采用同样规则
- border-width可以使用像素，也可以使用关键字thin(细)、medium(中)和thick(粗)，但是关键字方式根据浏览器会有不同表现。
- - border-style（包括其他简写全写形式）可用样式：solid(实线)、double(双线)、groov(槽线)、outset(外凸)、inset(内凹)、ridge(脊线)、dotted(虚线)、dashed(破折线)，
border-radius是css3用来指定边框圆角的属性，全写可以指定一个盒子四个角的圆角，一般使用像素值，要具体指定某一个角的值可以用全写，如border-top-left-radius:3px;，另外几个角top-right、bottom-left、bottom-right使用相同的规则

background

background是插入背景图像的简写形式，也可以分别指定：

background-image 指定背景图像url
background-position 指定背景图像的相对位置，可以使用像素和百分数，还可以使用关键字top、bottom、left、right和center
background-repeat 指定图像是否重复，repeat表示重复，no-repeat表示不重复，repeat-x只在x方向重复，repeat-y只在y方向重复，inherit表示按照父元素的方式处理。

关于使用background-image和用img插入图像可以这样考虑，img是用来插入照片或logo等图像，而background-image是用来增强页面表现样式用的。

id

id只能指定页面中的一个元素
class要以字母开头，而id可以以数字或字母开头
id只是一个元素的唯一标识符，不过这并不妨碍这个元素属于一个或多个类，即指定了id的元素仍然可以指定class。
如果想对多个元素使用某个样式，就要用class，但如果只想给一个特定的元素加入样式，或者页面上只有一个元素，就应该使用id。

媒体查询

媒体查询可以针对将要显示页面的设备类型来调整页面的样式。

用link标记指定相应设备的样式文件，这样可以给指定设备指定单独的css文件，比如

1
2

<link type="text/css" rel="stylesheet" href="lounge.css" media="screen"><!--针对屏幕设备-->
<link type="text/css" rel="stylesheet" href="lounge-mobile.css" media="screen and (max-device-width: 480px)"><!--针对屏幕宽度不超过480px的设备-->

也可以在css文件中针对相应设备使用媒体查询，但是这样会导致css文件变得庞大

@media screen and (max-device-width: 480px) { 
/*针对屏幕宽度不超过480px的设备指定css样式*/
}
@media print {
/*针对打印机指定css样式*/
}
/*这里可以写所有设备通用的规则*/

查询中还有很多属性可以使用，如min-device-width以及设备的方向orientation
max-device-width和min-device-width媒体属性依赖于设备的实际屏幕而不是你的浏览器窗口宽度，而max-width和min-width则表示浏览器窗口的最大和最小宽度而不是屏幕大小。
可以在http://www.w3.org/TR/css3-mediaqueries 网站了解css3媒体查询规范细节

IE8以及以前版本浏览器不支持媒体查询

其他

line-height用于指定行间距

感悟

感觉每天写博客总结都要浪费好多时间……