博客列表 >盒子模型内容,padding和border的设置(时间:2019年1月16日 11:59)

盒子模型内容,padding和border的设置(时间:2019年1月16日 11:59)

过儿的博客
过儿的博客原创
2019年01月18日 10:41:36646浏览

<!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">

    <title>Document</title>

    <link rel="stylesheet" href="css/demo-03.css">

</head>

<body>

    <div class="box1">

        <div class="box2">


        </div>

    </div>

</body>

</html>

以下是样式文件:demo-03.css

.box1{

    width:200px;

    height:200px;

    background-color: darkred;

    /*内边距  上右下左*/

    padding:40px 30px;

    /*边框*/

    border-top-width: 2px;

    border-top-style: dashed;

    border-top-color: aqua;

    border-right-width: 3px;

    border-right-style: double;

    border-right-color:red;

    /*简写*/

    border-top:10px solid black;

    border-right: 10px dashed blue;

    border-bottom: 10px dotted gold;

    border-left:10px solid green;

    /*如果四个边一样*/

    border: 15px solid red;



}

.box2{

    width:200px;

    height:200px;

    background-color: rgb(13, 13, 112);

}

_X`6AZ5CR%TR5BG@J`]})`7.png


重点:padding后数值只要出现在第二个位置上就是左右!

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