css的20/80关键知识

1.基础样式

css的20/80关键知识_第1张图片

选择器和声明-告诉了浏览器谁该长什么样子

css的20/80关键知识_第2张图片
样式选择器
css的20/80关键知识_第3张图片
id选择器
css的20/80关键知识_第4张图片
Paste_Image.png
css的20/80关键知识_第5张图片
元素选择器

2.css的盒模型

css的20/80关键知识_第6张图片
content &border

content是盒子内部的容积 boder是盒子的外皮

css的20/80关键知识_第7张图片
padding

padding是内壁的厚度——内推

css的20/80关键知识_第8张图片
margin

两个盒子之间的留白——外嚷

border:solid/dotted 2px blue;
  边框  实心  点儿 粗细 蓝色
margin:20px;
上下左右的位移
css的20/80关键知识_第9张图片
效果图

如果只想进行上下的位移

   border:solid 2px blue;
   margin-bottom: 20px;
   background: tomato;
css的20/80关键知识_第10张图片
image.png

一定要注意代码中的;不能漏掉
同时选中多个的快捷键ctrl+d

color pick插件--写rgb然后调用出来- ctrl+shift+c

css的20/80关键知识_第11张图片
重要提示

你可能感兴趣的:(css的20/80关键知识)