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. django choice字段模板展示

    class UserInfo(AbstractUserInfo): """ 用户表 """ gender_choice = ( (1,&qu ...

  2. python标准库 － socket

    地址簇(address family) socket.AF_UNIX # (UNIX Domain Sockets) socket.AF_INET # ipv4 socket.AF_INET6 # i ...

  3. php的yii框架开发总结6

    MVC中的Controller部分,所有的controller类都是继承自Controller基类,基类里面包含actionAdmin-管理员,actionIndex-一般默认显示,actionVie ...

  4. Node.js-sublime text3 配置node.js（ERROR: The process "node.exe" not found.）

    默认已经安装好sublime.node和npm 1.sublime的node.js插件下载 由于在package control上经常下载失败,所以这里直接从GitHub上进行下载! GitHub下载 ...

  5. SQL Server 2008数据备份与还原的原理是什么？

    为什么SqlServer有完整备份.差异备份和事务日志备份三种备份方式,以及为什么数据库又有简单模式.完整模式和大容量日志模式这三种恢复模式.本文内容适用于2005以上所有版本的SqlServer数据 ...

  6. Ubuntu小工具

    更好的工具 更多的界面风格: https://github.com/anmoljagetia/Flatabulous 更丰富的终端zsh: https://github.com/robbyrussel ...

  7. MySQL数据库实验四：嵌套查询

    实验四          嵌套查询 一.实验目的 掌握SELECT语句的嵌套使用,实现表的复杂查询,进一步理解SELECT语句的高级使用方法. 二.实验环境 三.实验示例 1.  查询与“刘晨”在同一 ...

  8. ABAP Netweaver和Hybris Enterprise Commerce Platform的登录认证

    ABAP Netweaver 在我的博客Learn more detail about Standard logon procedure里有详细介绍. Hybris ECP Hybris Admini ...

  9. IOS 控制当前控制器支持哪些方向

    #pragma mark - 实现这个方法来控制屏幕方向 /** * 控制当前控制器支持哪些方向 * 返回值是UIInterfaceOrientationMask* */ - (NSUInteger) ...

  10. Last_SQL_Errno: 1050

    主库上create table,从库上存在. 报错信息如下所示:                Last_SQL_Errno: 1050                Last_SQL_Error: ...