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中使用/*......*/添加注释*/