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

         

  • 相关阅读:
    iis 配置域名访问
    js将base64做UrlEncode转码
    vue-router 刷新当前路由
    iview default-file-list 动态赋值不显示
    vue2.0 axios 登录post请求自动读取Set-Cookie设置
    iis 使用主机名配置需注意
    【LeetCode.1】 求两数之和
    【Docker学习笔记】Docker常用命令学习
    【Docker学习笔记】Docker基本组成与安装
    微信小程序对接七牛云 上传多张图片、预览、删除 (测试可用)
  • 原文地址:https://www.cnblogs.com/venicid/p/8065942.html
Copyright © 2011-2022 走看看