盒子模型及边框使用

1、盒子模型

magin：外边距

padding：内边距

border：边框

2、边框

2.1 边框样式

2.2 边框宽度

2.3 边框颜色

2.4 单独设置边框各边

设置单一属性的顺序为上右底左

通过下边的例子深度理解单独设置边框各边

border-style属性可以有1-4个值：

border-style:dotted solid double dashed;

上边框是 dotted

右边框是 solid

底边框是 double

左边框是 dashed

border-style:dotted solid double;

上边框是 dotted

左、右边框是 solid

底边框是 double

border-style:dotted solid;

上、底边框是 dotted

右、左边框是 solid

border-style:dotted;

四面边框是 dotted

上面的例子用了border-style。然而，它也可以和border-width 、 border-color一起使用。

2.5 边框简写属性

可以在"border"属性中设置：

border-width
border-style (required)
border-color

border:5px solid red;

2.6 简单练习

.css代码

/*一些常用的初始化操作*/
body{
    margin : 20px;
    padding : 0px;
    text-decoration : none;
}

/*border : 宽度，高度，边框粗细、样式、颜色*/
#box {
    background : pink;
    width: 260px;
    height: 135px;
    border: 1px solid ;
    border-color : yellow red blue orange;

}

h2{
    font-size :15px;
    font-family:cursive;
    line-height:10px;
}

/*标签选择器*/
form{
    background : wheat;
}

/*分别设置form中的三个div的span标签*/
div:nth-of-type(1)>span {
    font-size: 8px;
    font-family: 华文行楷;
}
div:nth-of-type(2)>span {
    font-size: 8px;
    font-family: 宋体;
    font-style : oblique;
}
div:nth-of-type(3)>span {
    font-size: 8px;
    font-family: 楷体;
    font-weight : bold;
}

/*分别设置form中的三个div的input标签*/
div:nth-of-type(1)>input{
    border : 2px solid blue;
}
div:nth-of-type(2)>input{
    border : 2px dashed red;
}
div:nth-of-type(3)>input{
    border : 2px dotted green;
}

.html代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>边框练习</title>

    <link rel="stylesheet" href="css/style.css">

</head>
<body>

<div id="box">

    <h2>会员登录</h2>
    <form action="#">

        <div>
            <span>用户名:</span>
            <input type="text">
        </div>
        <div>
            <span>密码:</span>
            <input type="text">
        </div>
        <div>
            <span>邮箱:</span>
            <input type="text">
        </div>

    </form>

</div>

</body>
</html>

生成页面效果

3、内外边距及div居中

3.1 padding填充内边距

当元素的 padding（填充）内边距被清除时，所释放的区域将会受到元素背景颜色的填充。

单独使用 padding 属性可以改变上下左右的填充。

Padding属性，可以有一到四个值，默认为顺时针顺序

padding:25px 50px 75px 100px;

上填充为25px
右填充为50px
下填充为75px
左填充为100px

padding:25px 50px 75px;

上填充为25px
左右填充为50px
下填充为75px

padding:25px 50px;

上下填充为25px
左右填充为50px

padding:25px;

所有的填充都是25px

3.2 margin外边距

margin 清除周围的（外边框）元素区域。margin 没有背景颜色，是完全透明的。

margin 可以单独改变元素的上，下，左，右边距，也可以一次改变所有的属性。

margin属性可以有一到四个值，顺时针顺序

margin:25px 50px 75px 100px;
- 上边距为25px
- 右边距为50px
- 下边距为75px
- 左边距为100px
margin:25px 50px 75px;
- 上边距为25px
- 左右边距为50px
- 下边距为75px
margin:25px 50px;
- 上下边距为25px
- 左右边距为50px
margin:25px;
- 所有的4个边距都是25px

3.3 简单练习

.css代码

/*一些常用的初始化操作*/
body{
    margin : 20px;
    padding : 0px;
    text-decoration : none;
}

/*border : 宽度，高度，边框粗细、样式、颜色*/
#box {
    background : pink;
    width: 260px;
    height: 135px;
    border: 1px solid ;
    border-color : yellow red blue orange;
    margin : 0 auto;    /*上下为0，左右自动居中*/

}

h2{
    font-size :15px;
    font-family:cursive;
    line-height:10px;
    margin-top : 8px;
    margin-bottom : 8px ;
}

/*标签选择器*/
form{
    background : wheat;
}

/*分别设置form中的三个div的span标签*/
div:nth-of-type(1)>span {
    font-size: 8px;
    font-family: 华文行楷;
}
div:nth-of-type(2)>span {
    font-size: 8px;
    font-family: 宋体;
    font-style : oblique;
}
div:nth-of-type(3)>span {
    font-size: 8px;
    font-family: 楷体;
    font-weight : bold;
}

/*设置所有input标签*/
input{
    border : 1px solid black;
}

.html代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>边框练习</title>

    <link rel="stylesheet" href="css/style.css">

</head>
<body>

<div id="box">

    <h2>会员登录</h2>
    <form action="#">

        <div>
            <span>用户名:</span>
            <input type="text">
        </div>
        <div>
            <span>密码:</span>
            <input type="text">
        </div>
        <div>
            <span>邮箱:</span>
            <input type="text">
        </div>

    </form>

</div>

</body>
</html>