zoukankan      html  css  js  c++  java
  • 4 CSS的20/80个知识点

     1.css的基本构成

     


    •  样式选择器

    • id选择器

    • 元素选择器

    2.css的盒模型

    • border

    •  padding

     

    •  margin

     

    3.Atom快捷键

     

     

    4.程序

    (1)初始程序

    <!DOCTYPE html>
    <html>
      <head>
        <meta charset="utf-8">
        <title>Learn css with blocks</title>
        <link rel="stylesheet" href="block.css" media="screen" title="no title" charset="utf-8">
      </head>
      <body>
        <div class="block-1"></div>
    
        <div class="block-2"></div>
    
        <div class="block-2"></div>
    
    
      </body>
    </html>
    .block-1{
      
    }
    
    .block-2{
      
    }
    
    .block-3{
      
    }

      (2)border外边框

    .block-1{
      border: solid 2px blue;   #实体
    }
    
    .block-2{
      border: dotted 2px blue;  #锯齿
    }
    
    .block-3{
      border: solid 2px blue;
    }

      (3)backgroud:背景颜色

    .block-1{
      border: solid 2px blue;
      background: tomato
    }
    
    .block-2{
      border: dotted 2px blue;
      background: green
    }
    
    .block-3{
      border: solid 2px blue;
      background: rgb(115, 232, 165)
    }

       (4)margin 外攘.注意分号;

      margin:20px;

     

    margin-bottom: 20px;

      (5)padding 内推

      padding: 0 0 0 20px;

     

      (6) 如何让主目录大小固定?

    •   box-sizing: border-box;

     

        

      box-sizing: border-box;
       256px;
      height: 64px;

     5.完整程序

    <!DOCTYPE html>
    <html>
      <head>
        <meta charset="utf-8">
        <title>Learn css with blocks</title>
        <link rel="stylesheet" href="block.css" media="screen" title="no title" charset="utf-8">
      </head>
      <body>
        <div class="block-1"></div>
    
        <div class="block-2"></div>
    
        <div class="block-3"></div>
    
    
      </body>
    </html>
    .block-1{
      border: solid 2px blue;
      margin:20px;
      padding: 0 0 0 20px;
    
      background: tomato
    }
    
    .block-2{
      border: dotted 2px blue;
      margin:20px;
      padding: 0 0 0 20px;
    
      background: green
    }
    
    .block-3{
      border: solid 2px blue;
      margin:20px;
      padding: 0 0 0 20px;
    
      background: rgb(115, 232, 165)
    }

         

  • 相关阅读:
    RCP二级菜单的实现
    volatile 的作用
    C6678 核间通信(IPC)
    大小端模式详解
    SPI 极性与相位对采样的影响
    DSP c6678的启动方式
    DSP CCS初学
    volatile的作用
    JTree/DefaultMutableTreeNode 树形结构
    java.awt.Graphics2D绘制流程图基本元素
  • 原文地址:https://www.cnblogs.com/venicid/p/8065942.html
Copyright © 2011-2022 走看看