CSS——盒子模型

最新推荐文章于 2023-07-13 16:30:58 发布

panpan_1994

最新推荐文章于 2023-07-13 16:30:58 发布

阅读量466

点赞数

分类专栏： WEB开发文章标签： css 盒子模型 padding

本文链接：https://blog.csdn.net/panpan_1994/article/details/52015187

版权

WEB开发专栏收录该内容

44 篇文章 0 订阅

订阅专栏

盒子模型的属性
一、边框系列属性
二、尺寸属性
边距
＊内边距
＊外边距

border-color:边框颜色
border-width:边框宽度
border-style:边框样式
border-color:red;
border-width:1px;
border-style:solid;

margin-left:100px;左外边距
margin-top:100px
padding-left:100px;左内边距
padding-top:100px;上内边距
注意:内边距会延长所在盒子的长或宽

举例：

<html>
<head>
    <title>盒子模型</title>

    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="this is my page">
    <meta http-equiv="content-type" content="text/html;charset=utf-8">

    <style type="text/css" >

    div{
        border:1px solid red;
    }

    #one{
        height:300px;
        width:300px;
    }

    #two{
        height:100px;
        width:100px;
        margin-left:100px;
        margin-top:100px;
    }
    </style>

</head> 
<body>
        <div id="one">
        <div id="two"></div>
    </div>
</body>
</html>

三、边距属性
padding是一个复合的属性值:

/*
        padding:1个值 上下左右
                2个值 1.上下    2.左右
                3个值 1.上 2.左右    3.下
                4个值 1.上 2.右 3.下 4.左
    */

举例：

<html>
<head>
    <title>盒子模型－边距属性</title>

    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="this is my page">
    <meta http-equiv="content-type" content="text/html;charset=utf-8">

    <style type="text/css" >


    div{
        border:1px solid red;
        height:300px;
        width:300px;
    }

    #one{
        padding:10px 30px 50px 80px;
    }
    </style>

</head> 
<body>
        <div id="one">
        <div id="two"></div>
    </div>
</body>
</html>