CSS中margin属性的用法
这篇文章给大家分享的是有关CSS中margin属性的用法的内容。小编觉得挺实用的,因此分享给大家做个参考。一起跟随小编过来看看吧。
成都创新互联-专业网站定制、快速模板网站建设、高性价比浑江网站开发、企业建站全套包干低至880元,成熟完善的模板库,直接使用。一站式浑江网站制作公司更省心,省钱,快速模板网站建设找我们,业务覆盖浑江地区。费用合理售后完善,十载实体公司更值得信赖。
代码入下:HTML文件和CSS文件。
MarginCollapsing01.html
创新互联margin属性的偏移量创新互联
MarginCollapsing01.css
.BaseCanvas { margin-left: 32px; margin-right: 32px; margin-top: 32px; width: calc(100%-64px); height: 320px; background-color: #E0E0E0; border: solid 1px #202020; } .MarginFrame1 { width: 80%; background-color: #fff2a9; border: solid 1px #ff6a00; margin-top: 40px; margin-bottom: 40px; margin-left: 12px; margin-right: 8px; } .MarginFrame2 { width: 80%; background-color: #9effb5; margin-top: 40px; margin-bottom: 40px; margin-left: 12px; margin-right: 8px; }
MarginFrame1 在底部设置40个像素的边距,MarginFrame2设置顶部的40个像素的边距。上框和下框之间的距离等于外框和上框之间的距离,从而不获取具有每个边缘的80像素的边缘,并且可以确认只有40像素的距离。
更改margin大小
编辑CSS文件并将MarginFrame 1下方的边距更改为60像素。
MarginCollapsing01.css
.BaseCanvas { margin-left: 32px; margin-right: 32px; margin-top: 32px; width: calc(100%-64px); height: 320px; background-color: #E0E0E0; border: solid 1px #202020; } .MarginFrame1 { width: 80%; background-color: #fff2a9; border: solid 1px #ff6a00; margin-top: 40px; margin-bottom: 60px; margin-left: 12px; margin-right: 8px; } .MarginFrame2 { width: 80%; background-color: #9effb5; margin-top: 40px; margin-bottom: 40px; margin-left: 12px; margin-right: 8px; }
设置float的值
代码如下:
MarginCollapsing02.html
框架1框架2框架3框架4
MarginCollapsing02.css
.BaseCanvas { margin-left: 32px; margin-right: 32px; margin-top: 32px; width: calc(100%-64px); height: 320px; background-color: #E0E0E0; border: solid 1px #202020; } .MarginFrame1 { width: 160px; float: left; background-color: #fff2a9; border: solid 1px #ff6a00; margin-top: 32px; margin-bottom: 48px; margin-left: 24px; margin-right: 24px; } .MarginFrame2 { width: 160px; float: left; background-color: #fff2a9; border: solid 1px #ff6a00; margin-top: 32px; margin-bottom: 48px; margin-left: 24px; margin-right: 24px; } .MarginFrame3 { width: 160px; float: left; background-color: #fff2a9; border: solid 1px #ff6a00; margin-top: 32px; margin-bottom: 48px; margin-left: 24px; margin-right: 24px; } .MarginFrame4 { width: 160px; float: left; background-color: #fff2a9; border: solid 1px #ff6a00; margin-top: 32px; margin-bottom: 48px; margin-left: 24px; margin-right: 24px; }
效果如下:
感谢各位的阅读!关于CSS中margin属性的用法就分享到这里了,希望以上内容可以对大家有一定的帮助,让大家可以学到更多知识。如果觉得文章不错,可以把它分享出去让更多的人看到吧!
网页题目:CSS中margin属性的用法
当前URL:http://pwwzsj.com/article/gpccgd.html