CSS的盒子模型

CSS的盒子模型

1、margin：外边距

2、padding：内边距

3、border：边框(粗细、样式、颜色)

1. HTML做的丑网页如下

HTML代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
<div id="box">
    <h1>会员登陆</h1>
    <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>

效果如下：

2. CSS美化后的网页如下

2.1. 边框

1、边框的粗细

2、边框的样式

3、边框的颜色

CSS代码如下：

/*id选择器*/
#box{
    width: 300px;
    border: 1px solid red;
}
/*标签选择器*/
h1{
    font-size: 16px;
    background-color: #3cbda6;
    line-height: 30px;
    color: white;
}
form{
    background: #ffae15;
}
/*
:nth-of-type(n)选择器匹配同类型中的第n个同级兄弟元素。
​
n可以是一个数字，一个关键字，或者一个公式。
 */
div:nth-of-type(1) input{
    border: 3px solid black;
}
div:nth-of-type(2) input{
    border: 3px dashed #4d0b8c;
}
div:nth-of-type(2) input{
    border: 2px dashed #008c27;
}

效果如下：

2.2. 内边距

语法为： padding: 上 下 左 右;

如果写两个，就是上下，左右。

2.3. 外边距

外边距可以实现居中的效果：左右自动对齐。

语法为： margin: 0 auto;

 

posted @ 2020-02-23 21:42  WZ_BeiHang  阅读(173)  评论(0)  编辑  收藏  举报