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

时间:2022-04-25 22:25:54

新属性

  • 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;
    }
    }