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
- 阅读 ( 610 )
- 分类：WEB前端开发
