写出一个盒子，运用盒模型的完整语法以及简化语法；熟悉基本选择器的用法+2019年7月5日 17:30

完整语法：

完整模式.png

实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>盒子</title>
    <link rel="stylesheet" href="static/css/style3.css">
</head>
<body>
<div class="box1"></div>

</body>
</html>

运行实例 »

点击 "运行实例" 按钮查看在线实例

实例

.box1{
    width:200px;
    height: 200px;
    background-color: aqua;
    /*完整语法*/
    /*padding-top: 20px;*/
    /*padding-right: 30px;*/
    /*padding-bottom: 40px;*/
    /*padding-left: 30px;*/

运行实例 »

点击 "运行实例" 按钮查看在线实例

简化语法：

简化语法.png

实例

/*简化语法*/
    padding: 20px;

    margin: 20px;

    /*border-top-width: 5px;*/
    /*border-top-color: red;*/
    border-top: 5px red solid;

    /*border-right-width: 5px;*/
    /*border-right-color: red;*/
    border-right: 5px red solid;

    /*border-bottom-width: 5px;*/
    /*border-bottom-color: red;*/
    border-bottom: 5px red solid;

    /*border-left-width: 5px;*/
    /*border-left-color: red;*/
    border-left: 5px red solid;
}

运行实例 »

点击 "运行实例" 按钮查看在线实例

CSS选择器：

*类选择器

实例

.bg-green {
    background-color: lightgreen;
}

运行实例 »

点击 "运行实例" 按钮查看在线实例

#id选择器

实例

#bg-blue {
    background-color: lightblue;
}

运行实例 »

点击 "运行实例" 按钮查看在线实例

属性选择器

实例

li[id="bg-blue"] {
    border: 2px solid red;
}

运行实例 »

点击 "运行实例" 按钮查看在线实例

群组选择器

实例

#bg-blue, .bg-green {
    border: 2px solid blue;
}

运行实例 »

点击 "运行实例" 按钮查看在线实例

相邻选择器

实例

#bg-blue + * {
    background-color: yellow;
}

运行实例 »

点击 "运行实例" 按钮查看在线实例

实例

实例

实例

实例

实例

实例

实例

实例

相关文章