[HeadFirst-HTMLCSS入门][第九章盒模式]

新属性

• line-height 行间距

  line-height: 1.6em;
  

• border 边框

  属性值

  • solid 实线
  • double 双实线
  • groove 一个槽
  • outset 外凸
  • inset 内凸
  • dotted 虚线
  • dashed 折线
  • ridge 脊线
  • border-radius 圆角
• padding 内边距 顺序很重要
• margin 外边距

• background-image 背景图

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

• background-repeat 重复

  background-repeat: no-repeat;
  

  属性值

  • no-repeat
  • repeat-x
  • repeat-y
  • inherit 按父元素的设置来处理

• background-position 背景图位置

  background-position: top left;
  

盒模型

• 外边距-边框-内边距-内容区

• 背景铺满内边距，不会衍生到外边距。

id属性

其实之前用class的地方应该用id,用class有点大材小用。

在CSS中

#footer{
    color:red
}

多个CSS

• 使用多个样式表

• 为不同的设备指定样式表

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

  通过缩小浏览器窗口可以观察不同

• 直接再CSS中加媒体查询

  @media screen and (min-device-width: 481px){
  #guarantee{
      margin-right: 250px;
  }
  }