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)
    }

         

  • 相关阅读:
    Scrapy框架
    描述符类
    完整的blog设计过程
    钉钉机器人设置步骤
    homework登录和支付mock两个接口
    jsonpath的用法和nnlog的使用
    mp4格式文件转码后处理(qt-faststart).md
    html5视音频标签参考.md
    ffmpeg文档43-开发者
    ffmpeg文档42-参考/看
  • 原文地址:https://www.cnblogs.com/venicid/p/8065942.html
Copyright © 2011-2022 走看看