CSS布局之盒子模型属性

　　应用于: 块级元素和替换元素

　　百分数: 相对于包含块的宽度(高度)

max-width | max-heightt

　　初始值: none

　　应用于: 块级元素和替换元素

　　百分数: 相对于包含块的宽度(高度)

[注意]当最小宽度(高度)大于最大宽度(高度)时，以最小宽高的值为准

内边距padding

　　相比于盒模型的其他属性(如在定位中经常使用负值的margin)，padding显得中规中矩了很多，没有什么兼容性，也没有一些特殊的问题

　　对于行内元素，左内边距应用到元素的开始处，右内边距应用到元素的结尾处，垂直内边距不影响行高，但会影响自身尺寸，加背景颜色可以看出

　　[注意]内边距不能是负值

padding

　　初始值: 未定义

　　百分数: 相对于包含块的width

【50%】

　　块级元素通过padding:50%可以实现正方形的效果，因为水平和垂直padding的百分比值都是相对于包含块的宽度决定的，常常用于移动端头图

外边距margin

设置外边距margin会在元素外创建额外的空白，空白通常指不能放其他元素的区域，而且在这个区域中可以看到父元素的背景

margin

　　初始值: 未定义

　　应用于: 所有元素

　　百分数: 相对于包含块的width

[注意]对于普通元素来说，包含块就是块级父级元素，对于定位元素来说，包含块是定位父级。所以，普通元素的margin百分比相对于块级父级元素的width，定位元素的margin百分比相对于定位父级的width

margin可以设置为负值，margin和宽高支持auto，以及margin具有非常奇怪的重叠特性。

介绍外边距margin的几个重点部分，包括重叠、auto和无效情况

1.重叠

【前提】

??margin重叠又叫margin合并，发生这种情况有两个前提

??1、只发生在block元素上(不包括float、absolute、inline-block元素)

??2、只发生在垂直方向上(不考虑writing-mode)

【分类】

??margin重叠的情况

1、相邻的兄弟元素

<style>
p{
    line-height: 2em;
    margin: 2px 0;
    
background-color
: lightblue;
    display:inline-block;
    width: 100%;}
</style>
<p>兄弟一</p>
<p>兄弟二</p>

2、父级元素和第一个或最后一个子元素，父子级的margin重叠又叫margin传递

<style>
.box{
    background-color: pink;
    height:30px;}
.inner{
    margin-top: 1em;
    background-color: lightblue;}
</style>
<div class="box">
    <div class="inner">子级</div>
</div>

??所以，图片要水平居中，需要设置为display:block元素

3.无效情形

??1、行内元素垂直margin无效

??因为行内元素垂直布局主要是通过行高line-height和垂直对齐vertical-align来影响的，垂直margin并不会影响它们，所以不会影响垂直布局。而在显示方式，margin区域不会显示元素背景，所以也不会影响自身元素的显示，所以行内元素垂直margin无效。[注意]不包括inline-block

　　2、某些表格类元素margin无效

<thead>``<tbody>``<tfoot>``<tr>``<col>``<colgroup>``<td>``<th>　　不可设置margin。

　　3、BFC造成的margin看似无效

??左侧元素使用浮动，右侧元素使用overflow-hidden实现两栏自适应的布局时，右侧元素的margin-left值只有足够大，才能看到效果。这是因为margin-left是相对于父元素左侧，而不是图片右侧

相信看了这些案例你已经掌握了方法，更多精彩请关注Gxl网其它相关文章！