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. selenium 服务器端运行命令

    cd C:\Users\kfa_wangchao\Downloadsjava -jar selenium-server-standalone-2.37.0.jarcmd=getNewBrowserSe ...

  2. sharepoint2010列表的分页实现迅雷样式效果

    利用ListItemCollectionPosition和AspNetPage分页控件实现,效果图如下: 后台分页代码如下: #region 私有方法 /// <summary> /// ...

  3. 第五章 存储过程&触发器

    1.前言 2.存储过程和触发器->存储过程 ·理解:是一组SQL命令集合,经过预编译存放在系统中:就像java程序里的方法,可以重复的被调用: 在日常的数据库操作中,会有大量的T-SQL批处理. ...

  4. Markdown快速上手指南

    Markdown快速上手指南 1.Markdown介绍 markdown可以实现快速html文档编辑,格式优没,并且不需要使用html元素. markdown采用普通文本的形式,例如读书笔记等易于使用 ...

  5. Hive建模

    Hive建模 1.介绍 Hive作为数据仓库,同关系型数据库开发过程类似,都需要先进行建模,所谓建模,就是对表之间指定关系方式.建模在hive中大致分为星型.雪花型和星座型.要对建模深入理解,首先需要 ...

  6. 修改Linux中发送邮件中附件大小的限制

    方法一: 在命令中设定postfix的message_size_limit值 (但系统重启后会失效) postconf -e "message_size_limit = 20480000&q ...

  7. Git入门体验

    Git这个东西我也是最近才知道的,然后知道后却发现一个事实:自己真的是太LOW啦!竟然连Git都不知道!!!??? Git 在实际协同工作时会为我们提供巨大帮助, 下面简单介绍一下Git的用法: 一. ...

  8. win10自带应用图标显示感叹号无法打开如何解决（详细版）

    现象 今天打开电脑图片时发现系统自带的大多应用都无法运行,这些应用图标上都显示着一个感叹号, 应用图标上的颜色被覆上了一层黑色点击后无法运行,自带的应用商店也无法打开,想重装软件都不行这是怎么回事呢? ...

  9. Matlab 绘图实例

    概要   每次用 Matlab 绘图都要搜一堆资料设置一些参数,本次将绘图中的一些参数设置实例展示在这里,以备不时之需.暂包括折线图,面积图.   折线图实例   下图是效果图: 图 1:折线图效果图 ...

  10. input的placeholder的颜色、字号、边距设置

    #scbar_txt::-webkit-input-placeholder { /* WebKit browsers */    text-indent: 10px; font-size:16px; ...