CSS_盒子模型

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，左右外边距设置为自动。责可以将元素居中显示*/
}