css模型

目录

1、外边距

1、垂直方向

1、块元素

2、行内元素

3、行内快元素

2、水平方向

2、盒子水平布局

1、垂直方向

2、水平方向

---

1、外边距

1、垂直方向

1、块元素

        兄弟：

                当两个值都是正值时：谁大听谁的。

                当有一正一负时：两者相加。

                当两值都是负的时：看谁绝对值大听谁的。

        父子：

                当父子元素的外边距没有重合时，正常取值。

                当父子元素的外边距重合时，会出现外边距重叠问题，(解决思路：使父子外边距开始位置不同。)

                 解决办法：

                 1、给父元素设置边框，可能会出现撑开父元素(设置属性box-sizing="border-box")，子元素的margin-top是指上边框距离父元素上底边距离。

                2、给父元素设置内边距，同样会出现撑开父元素(设置属性box-sizing="border-box")。

                3、给父元素开启bfc(block formatting Context，块级格式化环境)

                          第一种，overflow的值非visible，但是副作用最小的是hidden。

                          第二种，通过float设置浮动属性。

                         第三种，通过position来设置绝对定位。

                4、在html中添加一个空的table，可能会影响到页面结构。

                5、通过伪类选择器来添加一个空的table

2、行内元素

在垂直方向可以设置外边距，但是没有效果。

3、行内快元素

二者正值时，两值是相加的。

2、水平方向

二者都是正值时，或一正一负时，都是通过相加的。(注：行内快元素在默认情况下是空白间隙的)

2、盒子水平布局

1、垂直方向

基本没有变化。

2、水平方向

1、width、padding、border、margin都设置了具体值

当小于父元素的width时，多余的值会被margin-right吸收。

2、width不设置或者设置为auto

margin-left设置了auto时，多余的部分会被其吸收。

margin-right设置了auto时，多余的部分会被其吸收。

注：当设置auto就将多余的部分给他，但是能设置的auto属性的有width、margin-left、margin-right

3、有两个属性设置为auto时

margin-left与margin-right同时设置为auto时，多余的部分两边平分，块元素居中。

width与margin-left/width与margin-right同时设置为auto时，多余的部分由width吸收，margin-left和margin-right没有值。