1.css的基础写法
.name{
backround:white;
height:50px;
}
.name{}:样式选择器
<div class="name"></div>
#number{}:ID选择器
<div id="number"></div>
div{}:元素选择器
<div id="52"></div> <!--√--> <p id="52"></p> <!--×-->
{}中的内容:声明
background/height:属性
white/50px:值
2.CSS的盒模型
(1)content与border
(2)padding与margin
3.盒模型例子
.block-1{ border: solid 2px blue; /*分号一定要有*/ margin-bottom: 20px; /*margin属性的应用*/ padding: 0 0 0 20px; /*上 右 下 左*/ box-sizing: border-box; /*设置盒子宽高时记得加上这句:box-sizing:border-box;*/ width: 64px; height: 64px; background: yellow; /*solid:边的样式是实心,2px指这个边有多粗,blue是颜色*/ } .block-2{ border: solid 2px blue; margin-bottom: 20px; /*margin-bottom:让其下部推开20px的距离,px即像素*/ padding: 0 0 0 20px; box-sizing: border-box; width: 128px; height: 64px; background: red; } .block-3{ border: solid 2px blue; margin-bottom: 20px; padding: 0 0 0 20px; box-sizing: border-box; width: 192px; height: 64px; background: green; } /*CSS中使用/*......*/添加注释*/