排版經驗，

排版經驗，

1.  讓圖片填滿一個固定寬高的div且圖片不變形:

css:
.div{    width:100px;    height:100px;}.div1 img{    width:100%;    height:100%;    object-fit:cover;//控製圖片不變形的樣式                }

2.  解決父元素的第一個子項目的margin-top越界的問題：

　問題如：

 

　主要原因：div3是div2的第一個子項目！

　解決方案：

css:
div2:befor{    content:" ";//有空格    display:table;      }

3. 解決所有的子項目浮動後父元素高度為0（一個大div裡有很多小div以浮動排列，大div就會沒有高度，導致排版出現問題）

　解決方案：

css：<style>    .a:after{        content: " ";        display: table;        clear: both;    }    .b{        width:100px;        height: 100px;        float: left;    }    .c{        clear: both;    }    .d{        width: 200px;        height: 200px;        background: greenyellow;    }</style>
HTML：<div class="a">//設定它的：after（...）    <div class="b">我是div1</div>    <div class="b">我是div2</div>    <div class="c"></div>//加入一個空div清除浮動</div><div class="d"></div>

綜合2和3，就有了bootstrap裡的：after和：before。

4. css設定垂直置中：

css:<style>    .a{        position: relative;        width:300px;        height: 300px;        background: yellow;    }    .b{        width: 100px;        height: 100px;        background: pink;        position: absolute;        top:50%;//設定top為父元素的50%高度        transform:translateY(-50%);//向上位移自身的50%高度    }</style>HTML：<div class="a">    <div class="b">我是div1</div></div>    

5. css設定滑鼠的顯示類型：

css:cursor: pointer;//一隻手cursor: wait;//一隻表或是沙漏cursor: help;//一個問號或氣球cursor: text;//文本cursor: crosshair;//十字線cursor: move;//可被移動

6. 實現響應式網頁的必要知識：css3媒體查詢

css:<style>    @media screen and (min-width: 990px){//該代碼只在媒體查詢為真的情況下執行（螢幕最小寬度大於990px時執行）        div{            width:300px;            height: 300px;            background: yellow;        }    }</style>