css盒子模型的定义和解释

CSS盒子模型可以分为四个部分,分别是内容区,内边距(padding),边框(border),外边距(margin).盒子的大小即标签大小 = 内容区+内边距+边框.

内容区

内容区指的是盒子里放置内容的区域,其内容也就是文本内容,如果不设置边框,内边距,内容的大小就是盒子的大小,此区域可以设置高度和宽度,使用width和heigth标签,设置的是内容区的大小,而不是盒子的大小.

#d1{

/* 设置内容区的背景颜色 */

background-color: #8A2BE2;

/* width与height只能设置内容区的大小*/

width: 220px;

height: 220px;

}

内边距

内边距指的是内容区与边框之间内容区域,使用padding属性来设置内边距,设置上右下左(top,right,bottom,left)的数值,内边距进行改变,它的改变可以改变盒子的大小.

#d1{

/* 内边框内容区与边框之间的空间上右下左*/

padding: 10px 20px 5px 15px;

padding-top: 10px;

padding-left: 20px;

padding-bottom: 10px;

padding-right: 20px;

}

边框

边框是盒子可见框的最外部,使用border属性来设置边框的一些样式,颜色等

#d1{

background-color: #006400;

width: 200px;

height: 200px;

/* border-top: 5px #7FFF00 solid; */

/* 可以设置边框的上下左右颜色样式宽度

样式可以有dotted--点线 dashed--虚线

solid--实线 double--双线

border-top: 3px;

border-top: #FF7F50;

border-top-style: solid;

}

#d2{

/* 设置边框的大小颜色样式 */

border: 2px #FF7F50 solid;

/* 设置四个边框为圆角 */

border-radius: 20px;

/* 设置右上边框为圆角 */

border-top-right-radius

}

外边距

外边距是边框以外与其他标签边框间的距离,使用margin标签属性来设置外边距,外边距可以影响盒子的位置,不能改变盒子的大小,可以设定四个方向上右下左(top,right,bottom,left),margin的值可以为auto,意思是设置外边距为最大值.

#d2{

/* 设置外边距的上下左右*/

margin-top: 10px;

margin-left: 10px;

margin-right: 10px;

margin-bottom: 10px;

/* margin左右属性值为auto 居中 */

margin: 10px auto;

}

更多相关技术内容咨询欢迎前往并持续关注六星社区了解详情。

程序员编程交流QQ群：805358732

如果你想用Python开辟副业赚钱，但不熟悉爬虫与反爬虫技术，没有接单途径，也缺乏兼职经验
关注下方微信公众号：Python编程学习圈，获取价值999元全套Python入门到进阶的学习资料以及教程，还有Python技术交流群一起交流学习哦。

发表于 2021-08-24 09:32
阅读 ( 514 )
分类：WEB前端开发

css盒子模型的定义和解释

你可能感兴趣的文章

相关问题

0 条评论

作家榜 »