CSS盒子模型

最新推荐文章于 2024-04-19 22:40:29 发布

原创最新推荐文章于 2024-04-19 22:40:29 发布 · 1k 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#css

css 专栏收录该内容

33 篇文章

订阅专栏

本文深入探讨CSS盒子模型的构成元素，包括内边距、边框、外边距及其应用实例，提供丰富的样式代码示例，帮助开发者掌握布局技巧。

一、CSS盒子模型，内容范围包括：margin、border、padding、content
这里写图片描述
二、padding：内边距
padding-left 设置内容距离左内边框距离
padding-right 设置内容距离右内边框距离
padding-top 设置内容距离上内边框距离
padding-bottom 设置内容距离下内边框距离
padding 可以同时设置四个方向内边距，可能的形式：
padding:10px; 四个内边距都是10px(从上开始的顺时针)
padding:5px 10px; 　上下5px　左右10px
padding:5px 10px 15px; 上5px　右10px　下15px 左因为缺省与右相等，则为10px
padding:5px 10px 15px 20px; 上5px　右10px　下15px 　左20px

三、border：边框
设置边框样式，定义了10个不同的非继承样式，包括none
border-style
border-top-style
border-right-style
border-left-style
border-bottom-style

设置边框宽度：
    border-width
    border-top-width
    border-right-width
    border-left-width
    border-bottom-width

设置边框颜色：
    border-color
    border-top-color
    border-right-color
    border-left-color
    border-bottom-color

四、CSS3新增的边框效果
border-radius 圆角边框
box-shadow 边框背影
border-image 边框图片

样式例子：

p{
        border-radius: 10px;
        width: 500px;
        border:1px solid red;
        background-color: green;
        text-align: center;
        font-size: 30px;
    }

div{
        width: 100px;
        height: 100px;
        background-color: blue;
        box-shadow: 10px 10px 1px #2d65ff;
                        /*与文本的 text-shadow属性参数一样
                        *第一个参数：背影距当前文本左侧的距离
                        *第二个参数：背影距当前文本上方的距离
                        *第三个参数：背影清晰度
                        *第四个参数：背影颜色
                        */
    }

五、外边距
设置外边距：
margin-left 设置内容距离左内边框距离
margin-right 设置内容距离右内边框距离
margin-top 设置内容距离上内边框距离
margin-bottom 设置内容距离下内边框距离
margin 可以同时设置四个方向内边距，可能的形式：
margin:10px; 四个外边距都是10px(从上开始的顺时针)
margin:5px 10px; 　上下5px　左右10px
margin:5px 10px 15px; 上5px　右10px　下15px 左因为缺省与右相等，则为10px
margin:5px 10px 15px 20px; 上5px　右10px　下15px 　左20px
注意：两个盒子模型的外边距将会自动合并，并遵循大的外边距，如图：
这里写图片描述

六、盒子模型设计
HTML：

<body>
            <div class="container">
            <div class="margin">
                <div class="border">
                <div class="padding">
                    <div class="content">盒子模型</div>
                </div>
                </div>
            </div>
            </div>
        </body>

样式：

body{
            margin: 0px;
            padding: 0px;
        }

        .container{
            border: 1px solid blue;
        }

        .margin{
            margin: 10px;
        }

        .border{
            border-style: dotted;
        }

        .padding{
            padding: 20px;
        }

        .content{
            text-align: center;
            background-color: blue;
        }