4 CSS的20/80个知识点
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个知识点的更多相关文章
- 20、AngularJs知识点总结 part-2
1.作用域 当你在angularJs中创建控制器时,可以将$scope对象作为一个参数进行传递: scope 是一个 JavaScript 对象,带有属性和方法,这些属性和方法可以在视图和控制器中使用 ...
- CSS基础语法和CSS经常用到的知识点总结
1. [代码]css基础教程 CSS基础语法CSS 规则由两个主要的部分构成:选择器,以及一条或多条声明.每条声明由一个属性和一个值组成.每个属性有一个值.属性和值被冒号分开.例如:下面这行代 ...
- html与css注意事项及小知识点
html 常用的html特殊符号: 空格:&npsd: 版权所有符号:©: 注册商标符号:®: 有两个标签容器:<span>和<div> ...
- 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 ...
- 20、前端知识点--html5和css3特性(一)
[html5/css3]css中的flex弹性布局学习总结 https://blog.csdn.net/Umbrella_Um/article/details/99490209 用CSS/CSS3 实 ...
- CSS的两个小知识点 伪类选择器和display:table-cell
li:first-child {color:red} li:nth-child(3n) {color: red} 在对nth-child传参的时候,已经直接用公式,3n就表示3的倍数.多用伪类和伪元素 ...
- JS与CSS那些特别小的知识点区别
1:target与currentTarget的区别 currentTarget指向的事件绑定的元素,target指向的是你点击的元素 2:attr与jprop在jQuery在API当中的区别 2.1: ...
- python贡献度分析20/80定律
#-*- coding: utf-8 -*- #菜品盈利数据 帕累托图 from __future__ import print_function import pandas as pd #初始化参数 ...
- css以前忽略的一些知识点(知识体系搭建)
一.选择器 基本选择器: 通用元素选择器 标签选择器 类选择器 id选择器 组合选择器: 多元素组合选择器 后代元素选择器 子代元素选择器 毗邻元素选择器 属性选择器: [title] & P ...
随机推荐
- Mvc过滤器的使用【转载】
前言 在开发大项目的时候总会有相关的AOP面向切面编程的组件,而MVC(特指:Asp.Net MVC,以下皆同)项目中不想让MVC开发人员去关心和写类似身份验证,日志,异常,行为截取等这部分重复的代码 ...
- centos7 mod_gearman 3.0.1 打包rpm
wget https://github.com/sni/mod_gearman/archive/v3.0.1.tar.gz -O /root/rpmbuild/SOURCES/mod_gearman- ...
- Centos 7.0_64bit 下安装 Zabbix server 3.0服务器的安装
一.关闭selinux 修改配置文件/ etc / selinux / config,将SELINU置为禁用(disabled) vim /etc/selinux/config # This ...
- PHP判断变量是否小数并对小数进行处理
/*判断是否为小数demo*/$a = 1.2; if(is_int($a)){ echo "$a 是整数!"; }else{ echo "$a 不是整数!"; ...
- API:access_token
access_token存在意义: 1.身份验证(一个channel_id一般有0个或1个有效的access_token) 2.限制用户访问服务器数据的有效期 3.限制用户访问权限 access_ ...
- ubuntu 安装 deb 软件包
参考链接地址 blog.csdn.net/kevinhg/article/details/5934462 sudo dpkg -i xxxx.deb 安装一个 Debian 软件包,如你手动下载的文件
- 《反脆弱》:软件业现成的鲁棒性(Robust)换了个说法变成了作者的发明,按作者的理论推导出许多可笑愚蠢的原则来
本书作者名气比较大,写过<黑天鹅><随机漫步的傻瓜>等书,据称专门研究不确定度性.本书是他以前的书的内容的延续. 所谓的反脆弱,其实软件业有现成的名词鲁棒性(Robust)就是 ...
- java多线程安全
class Ticket implements Runnable { public int sum=10; public void run() { while(true) { if(sum>0) ...
- mysql5.6之前需要账号的安全加固
mysql5.6之前需要账号的安全加固 从5.7开始就不需要了. delete from mysql.user where user!='root' or host='localhost'; flus ...
- POJ-3041 Asteroids---二分图&最小覆盖点
题目链接: https://vjudge.net/problem/POJ-3041 题目大意: 给一个N*N的矩阵,有些格子有障碍,要求我们消除这些障碍,问每次消除一行或一列的障碍, 最少要几次. 解 ...