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

9. 盒模型

padding、margin、border

  • 盒子由内容区、内边距、边框、外边距构成
    box model from book

    • 内容区被可选的透明内边距包围,内边距会将内容和边框隔开
    • 内边距周围可能放着一个可选的边框
    • 有一个可选的透明外边距包围着边框,外边距用于在页面上的不同元素之间增加空间。

    内边距和外边距之间有一个区别:元素的背景颜色或背景图像会延伸到内边距下面,但不会延伸到外边距。

  • 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。

媒体查询

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

  1. 用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的设备-->
  2. 也可以在css文件中针对相应设备使用媒体查询,但是这样会导致css文件变得庞大

    1
    2
    3
    4
    5
    6
    7
    @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用于指定行间距

感悟

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