首页 > 代码库 > CSS 盒子模型

CSS 盒子模型

2024-09-11 21:34:24   217人阅读

1.CSS 盒子模型概述

盒子的组成包括： margin(外边距);border(边框);padding(内边距);content(内容)

正文框的最内部分是实际的内容，直接包围内容的是内边距。

内边距呈现了元素的背景。

内边距的边缘是边框。

边框以外是外边距，外边距默认是透明的，因此不会遮挡其后的任何元素。

技术分享

 

2.CSS 盒子模型内边距

内边据在正文（content）外，边框（border）内。控制该区域最简单的属性是 padding 属性。padding 属性定义元素边框与元素内容之间的空白区域。

CSS padding 属性定义元素的内边距。padding 属性接受长度值或百分比值，但不允许使用负值。

h1 {padding: 10px;}
h1 {padding: 10px 0.25em 2ex 20%;}

设置某一边的那边据，我们也只可以办到的,只需通过以下四个属性：

  • padding-top
  • padding-right
  • padding-bottom
  • padding-left

 

3.CSS 盒子模型边框

元素的边框 (border) 是围绕元素内容和内边距的一条或多条线。 设置 border 属性可以规定元素边框的样式、宽度和颜色。

 border 属性我们可以设置宽度,样式,以及颜色

td {border-style: solid; border-width: 15px 5px 15px 5px;}
 border-style: dashed;
  border-top-width: 15px;
  border-right-width: 5px;
  border-bottom-width: 15px;
  border-left-width: 5px;

4.CSS 盒子模型外边距

argin-top

margin-right

margin-bottom

margin-left

p {margin: 0.5em 1em 0.5em 1em;}
h1 {margin: 0.25em 1em 0.5em;}  
/* 等价于 0.25em 1em 0.5em 1em */
h2 {margin: 0.5em 1em;} 
/* 等价于 0.5em 1em 0.5em 1em */
p {margin: 1px;}        
/* 等价于 1px 1px 1px 1px */
<div class="wb">
    <div class="bk">
        <div class="nj">
            <div class="zw">
                shiyanlou
            </div>
        </div>
    </div>
</div>
.wb{
    margin: 100px;
}
.bk{
    border-style: groove;

}
.nj{
    padding: 10px;

}
.zw{
    background-color: cornflowerblue;

}

并之前与合并之后的差别:

技术分享

 

 

5.CSS 盒子模型应用

技术分享

 

 

<div class="top">
    <div class="topcenter"><h1>topcenter</h1></div>
</div>
.top{
    background-color: steelblue;
    width: 100%;
    height: 70px;
    text-align: left;

}
.topcenter{
    margin: 0px auto;/*左右自适应,上下为 0*/
    width: 75%;
    height: 70px;/*与 top 一样*/
    background-color: cadetblue;
    text-align: center;

}
<div class="middle">
    <div class="middle1"><br/><h2>middle1</h2></div>
    <br/>
    <div class="middle2"><br/><h2>middle2</h2></div>
</div>
.middle{
    width: 75%;
    height: 700px;
    margin: 8px auto;
    background-color: gray;
}
.middle1{
    width: 100%;
    height: 30%;
    background-color: cadetblue;
    margin: 0px;
    text-align: center;
}
.middle2{
    width: 100%;
    height: 10%;
    margin: 10px 0px;
    background-color: darkgreen;
    text-align: center;
}

技术分享

<div class="bottom"></div>

.bottom{
    margin: 0px auto;
    height: 50px;
    background-color: darkslategrey;
    width: 75%;
}

技术分享

 

CSS 盒子模型


联系
我们