1.宽度
200px; /*设置宽度为200像素*/
2.高度
height: 200px; /*设置高度为200像素*/
3.内边距
padding: 20px; /*设置内边距为20像素*/ padding: 20px 40px; /*设置上下边距称为20像素，左右边距为40像素*/ /*设置三个值时，依次为上 左右 下*/ /*设置四个值时，依次为上 右 下 左*/ padding-top: 20px; /*设置上边距为20像素*/ padding-bottom: 20px; /*设置下边距为20像素*/ padding-left: 20px; /*设置左边距为20像素*/ padding-right: 20px; /*设置右边距为20像素*/
4.边框
border: 1px solid blue; /*设置边框宽度为1像素，实线，蓝色（粗细、样式、颜色）*/ border- 1px; border-style:solid; border-color: blue; /*也可以单独设置属性值*/ border- 5px 10px; /*设置上下边框为5px，左右边框为10px*/ border-style:dotted; /*边框样式设置为点线*/ border-style:double; /*边框样式设置为双线*/ border-style:dashed; /*边框样式设置为虚线*/ border-style:solid dotted double dashed; /*边框四个方向分别设置不同的样式*/ border-color: green red purple yellow; /*边框四个方向分别设置不同的颜色*/ /*根据方向来设置边框*/ border-top- 4px; border-top-color: red; border-top-style: solid; /*设置上方边框宽度为4像素，红色，实线*/
输入框边框：
input{ border: none; outline: none; } /*清除输入框边框*/ .username{ border: 1px solid #0024FF; width: 200px; height: 40px; font-size: 20px; padding-left: 10px; } /*重新给输入框设置边框*/
5.外边距
margin-right: 20px; /*设置右侧外边距为20像素*/ margin-left: 20px; /*设置左侧外边距为20像素*/ margin-bottom: 20px; /*设置下方外边距为20像素*/ margin-top: 20px; /*设置上方外边距为20像素*/ /*注意：垂直方向上，外边距会出现外边距合并。*/
6.清除HTML元素的默认样式
input{ border: none; outline: none; } /*清除输入框边框*/ ul,ol{ list-style:none; } /*清除列表前面的标记*/ pargin:0; padding:0; /*清除内外边距*/
7.盒子居中显示
.qqq{ background-color: #FF0000; height: 40px; } .www{ background-color: blue; height: 100%; width: 1200px; margin: 0 auto; /*上下外边距设置为0，左右外边距设置为自动。责可以将元素居中显示*/ }