css03

来源：互联网发布：单片机脉冲交流信号编辑：程序博客网时间：2024/06/08 02:50

CSS的盒子模型是由margin、padding、border、content组成。

css的内边距padding，可以设置左内边距、右内边距、上下内边距等。

css的边框border，可以设置边框样式border-style、圆角边框border-radius、设置边框阴影box-shadow、设置边框图片border-image

css的盒子模式的外边距

<div class="bd">        <div class="pd">            <div class="content">                编辑内容            </div>        </div>    </div>

.bd{    border-style: dotted;}.pd{    padding: 10px;}.content{    background-color: blue;}

css的外边距合并。如果两个控件的margin都是100px那么，这两个控件之间的距离也是100px；css的外边距合并会取数值较大的一个。

盒子模型的应用

html

<div class="top">        <div class="top_content"></div>    </div>    <div class="body">        <div class="body_img"></div>        <div class="body_no"></div>        <div class="body_content"></div>    </div>    <div class="footing">        <div class="footing_content"></div>        <div class="footing_subnav"></div>    </div>

css

*{    margin: 0px;    padding: 0px;}.top{    width: 100%;    height: 50px;    background-color: black;}.top_content{    width: 75%;    height: 50px;    margin: 0px auto;    background-color: blue;}.body{    margin: 20px auto;    width: 75%;    height: 1500px;    background-color: antiquewhite;}.body_img{    width: 100%;    height: 400px;    background-color: cadetblue;}.body_content{    width: 100%;    height: 1100px;    background-color: blueviolet;}.body_no{    width: 100%;    height: 30px;    background-color: aquamarine;}.footing{    width: 75%;    height: 400px;    background-color: chartreuse;    margin: 0px auto;}.footing_content{    width: 100%;    height: 350px;    background-color: brown;}.footing_subnav{    width: 100%;    height: 70px;    background-color: darkgreen;}

0 0