首页 > 技术文章 > 盒模型

xsqlj 2020-03-06 14:30 原文

1、外边距:改变元素外边的间距(margin可以为负值)

            margin:一个值;一个值 改变四个方向 padding:34px;
             margin:两个值;每个值控制两个方向 padding:5px 24px;上下 左右
             margin:三个值;上 左右 下
            margin:四个值;上 右 下 左

 margin:20px auto;(auto指左右居中)

margin:auto;(只左右居中,垂直不居中)

margin常见bug:嵌套关系的元素,子元素和父元素的外边距相遇,取较大值。

                          上下外边距相遇,只显示较大值。

第二种写法:margin-top:20px ; 顶部内边距
                     margin-bottom:20px; 底部内边距
                     margin-left:45px; 左内边距
                     margin-right:56px; 右内边距
2、内边距:改变元素与内容的间距(padding不能为负值,不会对背景图的位置造成影响)
             padding:一个值;一个值 改变四个方向 padding:34px;
             padding:两个值;每个值控制两个方向 padding:5px 24px;上下 左右
             padding:三个值;上 左右 下
             padding:四个值;上 右 下 左
第二种写法:padding-top:20px ; 顶部内边距
                     padding-bottom:20px; 底部内边距
                     padding-left:45px; 左内边距
                     padding-right:56px; 右内边距

3、盒模型占位大小计算

w=width+左右边框+左右内边距+左右外边距

h=height+上下边框+上下内边距+上下外边距

4、矩形选框工具选中----ctrl+c-----ctrl+n---ctrl+v----ctrl+shift+alt+s

推荐阅读