css外边距

css外边距

<!-- <span class="span1">lorem</span>
<span class="span2">lorem</span> -->
<!-- 垂直方向
    块元素
        兄弟： 二个都是正值：谁大听谁的
               一正一负：二者相加
               二者都是负数：看绝对值大的
        父子：出现的问题：外边距重叠问题=》父子元素的外边距开始位置重合在一起
              解决思路：使父子外边距开始位置不同 
            解决方法：
               1.给父元素设置边框=》问题：①.会撑开父元素；box-sizing:border-box
                                        ②.子元素的margin-top设置的距离是上边框离父元素上底边距离
               2.给父元素设置内边距=》问题：会撑开父元素：box-sizing：border-box
               3.给父元素开启bfc
                  bfc（Block Formatting Context，块级格式化环境），是css的隐形属性，将父元素开辟一个单独的空间，
                   开启bfc方法：
                       1.overflow的值非visible，但是副作用最小的是hidden  
                       2.设置浮动，后面会说
                       3.设置绝对定位
               4.在html里面添加一个空的table，影响到html结构
               5.给父元素设置伪元素::before（注：伪元素选择器是在父元素里面添加一个子元素）添加一个table
    行元素：在垂直方向可以设置外边距，但是没有效果
    行内块：二者正值：二者相加
  -->
  <!-- 水平方向：
        行元素&行内块元素：二者都是正值，一正一负：相加 ，注意行内块元素在默认情况有空白间隙-->
<!-- 兄弟 -->
<!-- <p>lorem1</p>
<p>lorem2</p>
<hr> -->
<!-- 父子 
  需求：1.子元素离父元素左边50px
        2.子元素离父元素顶边50px
    -->

水平距离
.fa {
width: 500px;
height: 500px;
background-color: pink;
}
.son {
/* 水平：200+20+20+20=260px<500px /
width: 200px;
/ width: auto; /
height: 200px;
margin:0 10px;
/ margin-left: auto;
margin-right: auto; /
padding: 0 10px;
/ padding: auto; /
border: 10px solid red;
background-color: aqua;
/ margin-top: auto;
margin-bottom: auto; /
}
/ 盒子模型：content padding border margin /
/ 水平布局：
width+padding+border+margin<父元素的width
1. width+padding+border+margin都设置了确定值
当小于父元素的width时，多余的部分给margin-right吸收
2.当width不设置或者设置为auto值时，多余的部分有宽度吸收
当margin-left=auto,多余的部分由margin-left吸收
当margin-right=auto,多余的部分由margin-right吸收
总结：当设置了auto就将多余的部分给它，注意能设置auto值的属性：width，margin-left，margin-right
3.有二个属性设置auto时
width与margin-left/width和margin-right同时设置auto值时，对于部分有width吸收，margin-left/margin-right没有值
margin-left和margin-right同时设置为auto时，多余部分平分给左右外边距=》块元素的水平居中
4.设置三个auto
width与margin同时设置auto时，多余部分由宽度吸收