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;

  width: 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)

}

　　　　

4 CSS的20/80个知识点的更多相关文章

  1. 20、AngularJs知识点总结 part-2

    1.作用域 当你在angularJs中创建控制器时,可以将$scope对象作为一个参数进行传递: scope 是一个 JavaScript 对象,带有属性和方法,这些属性和方法可以在视图和控制器中使用 ...

  2. CSS基础语法和CSS经常用到的知识点总结

    1. [代码]css基础教程     CSS基础语法CSS 规则由两个主要的部分构成:选择器,以及一条或多条声明.每条声明由一个属性和一个值组成.每个属性有一个值.属性和值被冒号分开.例如:下面这行代 ...

  3. html与css注意事项及小知识点

    html 常用的html特殊符号: 空格:&npsd: 版权所有符号:&copy: 注册商标符号:&reg: 有两个标签容器:<span>和<div> ...

  4. PAT Advanced 1042 Shuffling Machine (20 分)（知识点：利用sstream进行转换int和string）

    Shuffling is a procedure used to randomize a deck of playing cards. Because standard shuffling techn ...

  5. 20、前端知识点--html5和css3特性（一）

    [html5/css3]css中的flex弹性布局学习总结 https://blog.csdn.net/Umbrella_Um/article/details/99490209 用CSS/CSS3 实 ...

  6. CSS的两个小知识点 伪类选择器和display:table-cell

    li:first-child {color:red} li:nth-child(3n) {color: red} 在对nth-child传参的时候,已经直接用公式,3n就表示3的倍数.多用伪类和伪元素 ...

  7. JS与CSS那些特别小的知识点区别

    1:target与currentTarget的区别 currentTarget指向的事件绑定的元素,target指向的是你点击的元素 2:attr与jprop在jQuery在API当中的区别 2.1: ...

  8. python贡献度分析20/80定律

    #-*- coding: utf-8 -*- #菜品盈利数据 帕累托图 from __future__ import print_function import pandas as pd #初始化参数 ...

  9. css以前忽略的一些知识点（知识体系搭建）

    一.选择器 基本选择器: 通用元素选择器 标签选择器 类选择器 id选择器 组合选择器: 多元素组合选择器 后代元素选择器 子代元素选择器 毗邻元素选择器 属性选择器: [title] & P ...

随机推荐

  1. android里的继承浅析

    先看一段代码: abstract class A{ public A(){ this.print(); } public abstract void print(); } class B extend ...

  2. Git学习笔记day01 从GitHub克隆版本库

    本期Git教程将会带您进入Git的世界,这是您使用分布版本控制工具Git的开端,祝您学习顺利! 步骤一  在Linux系统中下载Git 如果是Ubuntu系统,在shell中输入指令 sudo apt ...

  3. LoadRunner性能测试之常见函数及参数的说明和作用

       

  4. Ehcache的配置与使用

    Ehcache是JAVA内制的一个缓存框架! 目的:缓解频繁读取数据库的压力; 初步配置如下: <?xml version="1.0" encoding="UTF- ...

  5. 整理齐全 - Vultr VPS自定义安装Windows ISO（2003/2012/2008/WIN7）

    最近公司有几个项目是需要在Windows VPS服务器中运行调试的,但是公司给予的成本有限,所以只能在Linux VPS中考虑,毕竟Linux服务器相比Windows系统便宜很多.开始我们运维部门考虑 ...

  6. 4 - 函数&装饰器 and 迭代器&生成器

    函数是什么 函数一词来源于数学,但编程中的「函数」概念,与数学中的函数是有很大不同的.程序里函数的定义是: 定义:将一组语句的集合通过一个名字(函数名)封装起来,要想执行这个函数,只需调用其函数名即可 ...

  7. Entity Framework 6事务回滚

    使用EF6你有新的事务处理可以使用类似于: 复制代码 using (var context = new PostEntityContainer()) { using (var dbcxtransact ...

  8. Android（java）学习笔记70：TabActivity使用

    1.首先我们要知道TabActivity是结合TabHost使用的,于是我们自然而然要说明一下TabHost 所谓的TabHost是提供选项卡(Tab页)的窗口视图容器. 此对象包含两个子对象: 一个 ...

  9. vuejs给组件绑定原生事件

    给组件绑定事件,该事件是自定义的事件 <div id='root'> <child @click='handleClick'></child> </div&g ...

  10. fluent Python

    1.1 Python风格的纸牌 Python collections模块中的内置模块:namedtuple https://www.liaoxuefeng.com/wiki/0013747381250 ...