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. Java集合集锦

    1.介绍Collection框架的结构 集合是Java中的一个非常重要的一个知识点,主要分为List.Set.Map.Queue三大数据结构.它们在Java中的结构关系如下: Collection接口 ...

  2. linux 内存地址空间管理 mm_struct

    http://blog.csdn.net/yusiguyuan/article/details/39520933 Linux对于内存的管理涉及到非常多的方面,这篇文章首先从对进程虚拟地址空间的管理说起 ...

  3. 【CCPC-Wannafly Winter Camp Day4 (Div1) J】跑跑跑路（爬山）

    点此看题面 大致题意: 共两轮,每轮每人有一个标签,标签相同的人必须到同一个点集合.求所有人总路程的最小值. 爬山算法 这道题貌似有三种做法:模拟退火.高斯消元以及爬山算法. 相比之下,自然是爬山算法 ...

  4. Android检查更新（是否强制更新）

    Android应用客户端通常会需要更新,而且根据需求分为普通更新和强制更新.是否强制更新可通过检查更新时从服务器获取的标志位来判断. public class UpdateManager { priv ...

  5. CentOS 5.6怎么安装MongoDB数据库？

    1. 下载Linux版本的 MongoDB 数据库 到官方的下载页面下载mongodb的Linux版本,32位还是64位根据自己的情况自行选择 http://www.mongodb.org/downl ...

  6. 通过WEB网管登录

    6.1  通过WEB网管登录简介 S5100-SI/EI系列以太网交换机提供内置的WEB Server,用户可以通过WEB网管终端(PC)登录到交换机上,利用内置的WEB Server以WEB方式直观 ...

  7. Git永久删除commit--[非教程]

    假设当前分支为master,当前的commit情况如下,现在需要删除commit_id_2和commit_id_4: commit_id_1 commit_id_2 commit_id_3 commi ...

  8. C# do while语句

    一.C# do while语句 do while语句是先执行一次循环体,然后再判断是否需要重复执行循环体的循环控制语句. 语法格式如下: do{    embedded-statement}while ...

  9. JavaScript中基本知识

    变量 每个变量仅仅是一个用于保存值的占位符而已. 用var操作符定义的变量将成为定义该变量的作用域中的局部变量. 省略var操作符可以定义一个全局变量.但是不推荐这种做法,因为在局部作用域中定义的全局 ...

  10. Linux 安装Oracle11g完整安装图文教程另附基本操作 （分享）

    一.修改操作系统核心参数 在Root用户下执行以下步骤: 1)修改用户的SHELL的限制,修改/etc/security/limits.conf文件 输入命令:vi /etc/security/lim ...