盒子模型1

最新推荐文章于 2022-03-01 17:40:04 发布

易拉易拉罐

最新推荐文章于 2022-03-01 17:40:04 发布

阅读量246

点赞数 1

分类专栏： HTML

本文链接：https://blog.csdn.net/wuxiao18/article/details/91439345

版权

HTML 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .box1{
            width:100px;/*内容区宽度*/
            height:100px;/*内容区高度*/
            /*
            盒子的可见大小由内容区、边框、和内边距共同决定
            */
            background-color:green;
            /*
              *为元素设置边框,三个样式缺一不可
              *border-width:边框宽度，可以分别指定四个边框的宽度，
              *              如果指定四个值则为上 右 下 左顺时针方向宽度
              *              如果指定三个值则为上  左右 下
              *              如果指定两个值则为上下 左右
              *              如果指定一个值则为上下左右
              *除了border-width,CSS还提供了border-xxx-width,xxx可表示 top,bottom,left,right                                        
              *border-bottom-width:20px
              *border-color:边框颜色，同上适用规则,border-xxx-color
              *border-style:边框样式，同上适用规则,border-xxx-style
             */
            border-width: 10px;
           /* border-bottom-width:20px;设置下边框宽度*/
            border-color: red;
            border-style: double;/*none默认值，没有边框
                                  *dotted点状边框
                                  *dashed 虚线
                                  *solid实线
                                  *double双线
                                  */
            /*
             *border
             *   -边框的简写样式，通过他可同时设置边框的三个样式
             *   -没有任何顺序要求
             *   -border指定样式是四个边同时指定，不能分别指定  
             *border-xxx
             *  -单独设置top，bottom，left，right样式
             *   -规则与border一样
             *border：red 10px solid
             *border-right：none  这两句表示的意思是没有右边框样式
             */
        }
    </style>
</head>
<body>
    <div class="box1"></div>
</body>
</html>

盒子模型是CSS样式布局的重要概念从布局的角度看，网页是由很多盒子组成，要将诸多盒子在网页中进行排列和布局，就形成网页布局。

盒子模型结构由4个部分组成，content（内容），padding（内边距），border(边框），margin（外边距）

易拉易拉罐

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
盒子模型1

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> .box1{ width:100px;/*内容区宽度*/ ...
复制链接

扫一扫

专栏目录