盒模型

标签：写法   矩形   tom   padding   居中   垂直   显示   背景图   矩形选框   

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

盒模型

标签：写法   矩形   tom   padding   居中   垂直   显示   背景图   矩形选框   

原文地址：https://www.cnblogs.com/xsqlj/p/12402810.html