css一些事儿

1. margin和padding

如果边界画一条线，则margin的属于边界外，padding属于边界内

1. 当我们给元素背景色时，margin区域不会被着色，而padding区域会被着色。

2. 当上下两个块元素，一个设置margin-bottom:10px,下面的设置margin-top:20px,两个块元素的距离不是30 而是20。 而padding则是相加的情况

3. margin是用来隔开元素与元素的间距；padding是用来隔开元素与内容的间隔。margin用于布局分开元素使元素与元素互不相干；padding用于元素与内容之间的间隔，让内容（文字）与（包裹）元素之间有一段“呼吸距离”

2. 外边距塌陷

定义：块的顶部外边距和底部外边距有时被组合(折叠)为单个外边距，其大小是组合到其中的最大外边距

1、相邻的兄弟姐妹元素

<p style="margin-bottom: 10px;">上面的段落</p>
<p style="margin-top: 20px;">下面的段落</p>

两者的边距不是两者和30，而是二者较大的20.

2、块元素与其第一个或者最后一个子元素

<style>
    .my-title{
        margin:0;
        background-color: #808080;
    }
    .parent{
        margin-top:35px;
        background-color: #00FF00;

    }
    .children-first{
        margin-top:20px;
        margin-bottom:40px;
    }
    .children-second{
        margin-top:20px;
    }
</style>

<div class="my-title">
    my title
</div>
<div class="parent">
    <div class="children-first">
        children
    </div>
    <div class="children-second">
        children
    </div>
</div>

3. 定位position

position 这个属性决定了元素将如何定位。它的值大概有以下五种：

position 值	如何定位
static	position的默认值。元素将定位到它的正常位置（上文提到过），其实也就相当于没有定位。元素在页面上占据位置。不能使用 top right bottom left 移动元素位置。
relative	相对定位，相对于元素的正常位置来进行定位。元素在页面占据位置。可以使用 top right bottom left 移动元素位置。
absolute	绝对定位，相对于最近一级的 定位不是 static 的父元素来进行定位。元素在页面不占据位置。 可以使用 top right bottom left 移动元素位置。
fixed	绝对定位，相对于浏览器窗口来进行定位。其余和 absolute 一样，相当于一种特殊的 absolute。
inherit	从父元素继承 position 属性的值。

其它

1. 对于块级元素，子元素的宽度默认为父元素的100%，
   
   父元素宽度 = 子元素宽度 + padding + margin

2. 当时img这种元素时，不管我们怎么设置父元素的宽度和高度，而不设置img的宽和高时，img总是表现为其原始的宽和高。当宽和高设置一个时，另一个则等比例缩放。当宽和高都100%时则铺满这个父元素

3. 同为块元素，脱离文档流时候，以浮动为例当父元素有宽度，子元素没有宽度，子元素浮动后，注意子元素大小；当子元素有宽度，父元素没有宽度，子元素浮动后，注意父元素大小