css盒子模型详解

最新推荐文章于 2020-10-15 10:38:50 发布

_阿锋丶

最新推荐文章于 2020-10-15 10:38:50 发布

阅读量131

点赞数

分类专栏： html css

本文链接：https://blog.csdn.net/weixin_43342105/article/details/99706585

版权

html css 专栏收录该内容

29 篇文章 17 订阅

订阅专栏

<!-- css的盒子模型 -->
<!-- 
    1，css在处理网页时，他认为每个元素都包含在一个不可见的盒子
    里
    2，如果把所有元素都想象为盒子，那么我们的网页布局就是
    摆盒子。
    3，盒子模型：
    -内容区
    -内边距
    -边框
    -外边距


 -->
 <!-- css的边框 -->
 <!-- 
    要为一个元素设置边框必须指定三个样式：
    -border-width:边框的宽度
    -border-color:边框的颜色
    (以上至设置内容区的大小)
    -border-style:样式

    ***大部分的浏览器对这三都有默认值

    border:10px red solid   也可以这样简写

  -->
<!DOCTYPE html>
<html lang="en">
<head>
    <style type="text/css">
    .box1{
        width:100px;
        height:100px;
        /* 盒子颜色默认透明，可以设置背景颜色 */
        background-color:red;
        border-width:2px;
        /* 使用border-width：10px,20px,20px,10px分别设置上，
        右，下，左边框的
        大小（顺时针） 
        三个值另有情况
        
        下面的也是这种规则*/
        border-color:green;
        /* 设置边框样式
        none :无
        solid：实线
        dotted:点状边框
        虚线：dashed;
        双线：double
         */
        border-style:solid;

        /* 内边距，指的是内容和边框的距离 
        四个：padding-top：
            padding—right,bottom,left:
            会影响可见框的大小
            背景会延伸到内边距
        */
        padding-top:30px;
    }
    .box2{
        width:100%;
        height:100%;
        background-color:yellow;

    }
    /* 外边距
    指的是盒子和盒子的距离：
    不会影响可见框的大小 ，只会影响位置
    四个方向的外边距：
    margin-top........
     */
    
    </style>
    <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>
</head>
<body>
    <div class="box1">
        <div class="box2"></div>
    </div>
</body>
</html>