zoukankan      html  css  js  c++  java
  • [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-481px)">
      <link rel="stylesheet" type="text/css" href="lounge-mobile.css"
            media="screen and (max-480px)">
      <link rel="stylesheet" type="text/css" href="lounge-print.css"
            media="print">
      

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

    • 直接再CSS中加媒体查询

      @media screen and (min-device- 481px){
      #guarantee{
          margin-right: 250px;
      }
      }
      
  • 相关阅读:
    P1536 村村通 题解
    P1551 亲戚题解
    P1185 绘制二叉树 题解
    P3884 [JLOI2009]二叉树问题
    P1087 [NOIP2004 普及组] FBI 树
    P1305 新二叉树题解
    P1229 遍历问题
    P1030 [NOIP2001 普及组] 求先序排列题解
    P1827 [USACO3.4]美国血统 American Heritage 题解
    深度优先搜索dfs 讲解教程
  • 原文地址:https://www.cnblogs.com/zy691357966/p/5480265.html
Copyright © 2011-2022 走看看