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. [原创]Debian9 安装配置MariaDB

    序言 这次玩次狠得.除了编译器使用yum安装,其他全部手动编译.哼~ 看似就Nginx.PHP.MySql三个东东,但是它们太尼玛依赖别人了. 没办法,想用它们就得老老实实给它们提供想要的东西. 首先 ...

  2. PCB仿真软件与电磁场求解器的算法

    1. 简介 目前商业化的PCB仿真软件主要有: Cadence公司的Sigrity.Ansys公司的SIwave/HFSS.CST公司的CST.Mentor公司的HyperLynx.Polor公司的S ...

  3. Build 2017 | 今儿来说说火得不行的认知服务吧（内附微软开发者大会在线峰会报名地址）

    Everybody,新一期的 Build 2017 大会新技术详谈又来了,今天小编给大家带来了一个既智能又有趣的技术,你一定喜欢!不卖关子了,直奔我们本期的主题: [只需几行代码,就能让任何应用更智能 ...

  4. 01、Spark安装与配置

    01.Spark安装与配置 1.hadoop回顾 Hadoop是分布式计算引擎,含有四大模块,common.hdfs.mapreduce和yarn. 2.并发和并行 并发通常指针对单个节点的应对多个请 ...

  5. 如何将UI5应用部署到Fiori On-Premise和On-Cloud的Launchpad上去

    On-Premise Launchpad 具体步骤参考我的博客: 如何将BSP应用配置成Fiori Launchpad上的一个tile On-Cloud Launchpad Fiori Cloud L ...

  6. 测试笔记：本地存储localstorage与sessionstorage

    最近测试的投票项目开发说用的是localstorage.查了下是h5的本地存储.还有个sessionstorage,区别在于sessonstorage关闭页面后清空,localstorage保留. 以 ...

  7. ios 逆向工程文档汇总

    iOS逆向工程工具集 http://www.jianshu.com/p/7f9511d48e05 移动App入侵与逆向破解技术-iOS篇 http://blog.csdn.net/heiby/arti ...

  8. react里面 react-router4 跳转

    在react里面跳转的时候,一般可以用 <Link to='/tradeList' /> 但是我们在运用组件组合的时候经常会通过传参去判断,如果props传过来是参数,如果有link进行跳 ...

  9. 【转】NodeJS教程--基于ExpressJS框架的文件上传

    本文是翻译的一篇文章,原文地址:Handle File Uploads in Express (Node.js). 在NodeJS发展早期上传文件是一个较难操作的功能,随后出现了formidable. ...

  10. Githug攻略

    ruby运行环境安装 githug 是一个 ruby 程序,运行的 githug 需要 ruby 运行环境.下面部分的主要内容是如何在不同平台上安装好 ruby 环境. MacOSX MacOSX 里 ...