一切應(yīng)為Border-box

雖然很多初學(xué)者并不了解box-sizing這個屬性，但是它確實相當(dāng)?shù)闹匾?。而最好的理解它的方式就是看看它的兩種取值:

• 默認(rèn)值為content-box，即當(dāng)我們設(shè)置某個元素的heght/width屬性時，僅僅會作用于其內(nèi)容尺寸。而所有的內(nèi)邊距與邊都是在其之上的累加，譬如某個<div>標(biāo)簽設(shè)置為寬100，內(nèi)邊距為10，那么最終元素會占用120(100 + 2*10)的像素。
• border-box:內(nèi)邊距與邊是包含在了width/height之內(nèi)，譬如設(shè)置了width:100px的<div>無論其內(nèi)邊距或者邊長設(shè)置為多少，其占有的大小都是100px。

將元素設(shè)置為border-box會很方便你進行樣式布局，這樣的話你就可以在父元素設(shè)置高寬限制而不擔(dān)心子元素的內(nèi)邊距或者邊打破了這種限制。

以背景圖方式使用Images

如果需要在響應(yīng)式的環(huán)境下展示圖片，有個簡單的小技巧就是使用該圖片作為某個<div>的背景圖而不是直接使用img標(biāo)簽?；谶@種方式配合上background-size與background-position這兩個屬性，可以很方便地按比例縮放:

CSS1234567891011121314151617img {    width:300px;    height:200px;} div {    width:300px;    height:200px;    background:url('http://cdn.tutorialzine.com/wp-content/uploads/2016/08/bicycle.jpg');    background-position:centercenter;    background-size:cover;} section{    float:left;    margin:15px;}

不過這種方式也是存在缺陷的，譬如你無法設(shè)置圖片的懶加載、圖片無法被搜索引擎或者其他類似的工具抓取到，有個不錯的屬性叫object-fit可以解決這個問題，不過該屬性目前的瀏覽器支持并不是很完善。

Better Table Borders

HTML中使用Tables進行布局一直是個很頭疼的問題，它們使用起來很簡單，但是無法進行響應(yīng)式操作，并且也不方便進行全局樣式設(shè)置。譬如，如果你打算為Table的邊與單元的邊添加樣式，可能得到的結(jié)果如下:

CSS1234567891011table {    width:600px;    border:1pxsolid#505050;    margin-bottom:

 2/6   首頁 上一頁 1 2 3 4 5 6 下一頁 尾頁