CSS盒子 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>css盒子模型</title>
    <style type="text/css">
        .box01{
            width: 200px;
            height: 200px;
            /*此处设置的宽和高,可以理解为准备放置content内容的宽和高*/
            background-color: yellow;
            /*宽和高的样式是基本样式*/
    /*@分别设置盒子的各个边:
            border-top-color: #000;
            border-top-width: 20px;
            border-top-style: solid;
            border-style常用的有三种:


            实线(solid,固体),
            虚线(dashed),dash(短跑,少量,波折线)
            点线(dotted),dot(点,小圆点)


            border-left:10px dashed #000;
            border-right:10px dotted #000;
            border-bottom:10px solid #000;
            在写风格的时候,可以直接用border-边:然后定义 像素 风格 颜色 用空格分开
    */
            border: 10px solid #000;
            /*同时设置四个边*/
/*@分别设置四个padding填充
            在padding中填充像素的时候,会让整个盒子增加像素!!!注意
            padding-top:20px;
            padding-right: 50px;
            padding-bottom: 200px;
            padding-left: 40px;

            */
            /*@依次设置盒子的: 上,右,下,左(顺时针旋转)-------------附带四个值
                        padding: 20px 50px 200px 40px;
            */

            /*
            @依次设置盒子的: 上,左右,下(上中下)-------------附带三个值
                        padding: 20px 50px 200px ;
            */ 

            /* 
            @依次设置盒子的: 上下,左右(上下)-------------附带两个值

                        padding: 20px 50px ;
            */

            /*@同时设置四个边: 上下左右(全)-------------附带一个值*/


            padding: 50px;

            margin:20px 0 0 100px;
            /*margin是设置盒子距离外面的间距
            设置方法与padding一样


　　　　　　　　盒子的真实尺寸
　　　　　　　　盒子的宽度: width + 左右border + 左右padding
　　　　　　　　盒子的高度: height + 上下border + 上下padding
　　　　　　　*/


        }
    </style>
</head>
<body>
    <h1>h标签也属于盒子</h1>
    <div class="box01">这是html的div块元素;这是html的div块元素;这是html的div块元素;这是html的div块元素;这是html的div块元素;这是html的div块元素;这是html的div块元素;增加padding的时候会相应增加盒子的大小</div>
</body>
</html>

 

posted @ 2019-08-13 15:54  Jrri  阅读(105)  评论(0)    收藏  举报