博客列表 >盒模型学习-2019年1月14日22点52分

盒模型学习-2019年1月14日22点52分

kszyd的博客
kszyd的博客原创
2019年01月18日 11:06:25723浏览

盒模型基础知识实践,padding与简写,css调用等。

实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="static/css/style02.css">
    <title>盒模型</title>
</head>
<body>
    <div class="box1">
        <div class="box2"></div>
    </div>
</body>
</html>

运行实例 »

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

css:

实例

.box1 {
    width: 200px;
    height: 300px;
    background-color: beige;
    /* 内边距,上右下左 */
    /* padding-top: 20px;
    padding-right: 30px;
    padding-bottom: 40px;
    padding-left: 50px; */
    padding: 20px 30px 40px 50px;
    /* border-top-style: solid;
    border-top-color: blue; */
    border-bottom: 20px solid blue;
}
.box2 {
    height: inherit;
    background-color: brown;
}

运行实例 »

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

使用了calss选择器,对页面进行简单布局。

声明:本文内容转载自脚本之家,由网友自发贡献,版权归原作者所有,如您发现涉嫌抄袭侵权,请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言,请遵守新闻评论服务协议