CSS的盒子模型

时间：2020-02-23 22:42:01 阅读：110 评论：0 收藏：0 [点我收藏+]

标签：类型代码 doc exp cti tag mic 用户 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;

CSS的盒子模型

标签：类型代码 doc exp cti tag mic 用户 css

原文地址：https://www.cnblogs.com/WZ-BeiHang/p/12354504.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)

周排行