CSS盒子模型

来源：互联网发布：js查找节点的三种方法编辑：程序博客网时间：2024/06/05 04:52

一、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;        }

0 0