1. 非替換元素

請註意，對於非替換的行內元素來說，盡管內容周圍存在內邊距與邊框，但其占用空間（行高）由 line-height 屬性決定。

替換元素：瀏覽器根據其標簽的元素與屬性來判斷顯示具體的內容。比如：

<img>、<input>、<textarea>

不可替換元素：他們將內容直接告訴瀏覽器，將其顯示出來，比如

<p>wanmei.com</p>

2. margin和padding

如果邊界畫一條線，則margin的屬於邊界外，padding屬於邊界內

1. 當我們給元素背景色時，margin區域不會被著色，而padding區域會被著色。

2. 當上下兩個塊元素，一個設置margin-bottom:10px,下面的設置margin-top:20px,兩個塊元素的距離不是30 而是20。 而padding則是相加的情況

3. margin是用來隔開元素與元素的間距；padding是用來隔開元素與內容的間隔。margin用於布局分開元素使元素與元素互不相幹；padding用於元素與內容之間的間隔，讓內容（文字）與（包裹）元素之間有一段“呼吸距離”

3. 外邊距塌陷

定義：塊的頂部外邊距和底部外邊距有時被組合(折疊)為單個外邊距，其大小是組合到其中的最大外邊距

1. 相鄰的兄弟姐妹元素

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

兩者的邊距不是兩者和30，而是二者較大的20.

1. 塊元素與其第一個或者最後一個子元素

<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>

4. 定位position

position 這個屬性決定了元素將如何定位。它的值大概有以下五種：

其它

1. 對於塊級元素，子元素的寬度默認為父元素的100%，
   父元素寬度 = 子元素寬度 + padding + magin

2. 當時img這種元素時，不管我們怎麽設置父元素的寬度和高度，而不設置img的寬和高時，img總是表現為其原始的寬和高。當寬和高設置一個時，另一個則等比例縮放。當寬和高都100%時則鋪滿這個父元素

3. 同為塊元素，脫離文檔流時候，以浮動為例當父元素有寬度，子元素沒有寬度，子元素浮動後，註意子元素大小當子元素有寬度，父元素沒有寬度，子元素浮動後，註意父元素大小

css一些事兒