css 盒子溢出問題

css 默認(rèn)盒子樣式是 content-box, 寬高設(shè)定的是內(nèi)容的寬高，設(shè)置邊框可能會(huì)出現(xiàn)溢出的問題

創(chuàng)新互聯(lián)建站是一家朝氣蓬勃的網(wǎng)站建設(shè)公司。公司專注于為企業(yè)提供信息化建設(shè)解決方案。從事網(wǎng)站開發(fā)，網(wǎng)站制作，網(wǎng)站設(shè)計(jì)，網(wǎng)站模板，微信公眾號(hào)開發(fā)，軟件開發(fā)，小程序開發(fā)，10多年建站對混凝土攪拌機(jī)等多個(gè)方面，擁有多年的網(wǎng)站設(shè)計(jì)經(jīng)驗(yàn)。

可以通過設(shè)置 border-sizing：border-box

我更喜歡用border-box，因?yàn)閎order-box更靈活一點(diǎn)，舉個(gè)例子，我在業(yè)務(wù)中遇到一個(gè)問題，我的商品詳情頁的一個(gè)盒子是高度自適應(yīng)的，為146px，但是在ie8瀏覽器上顯示為146.8px，如何解決，如果對盒子設(shè)置height:146px;則會(huì)出現(xiàn)被撐高的情況，因?yàn)閎ox-sizing默認(rèn)為content-box，你給元素設(shè)置寬高，只是給元素內(nèi)容設(shè)置寬高，你元素的總高度是heigtht + border + padding所以就會(huì)出現(xiàn)撐高，解決方法就是給當(dāng)前的盒子設(shè)置box-sizing: border-box這樣你設(shè)置高度為146px時(shí)，會(huì)默然將元素內(nèi)容的高度進(jìn)行相應(yīng)減少來保證整體高度為146px，這個(gè)最大的好處就是你這個(gè)盒子有好幾個(gè)，而且有不同的padding和border值，解決這個(gè)的最好的方法就是給盒子設(shè)置border-box

CSS 指定溢出方向 應(yīng)該如何設(shè)置?

如果CSS設(shè)置塊的溢出方向，在不設(shè)置的情況下，都是右邊溢出，或者下邊溢出.

設(shè)定溢出方向可以用float,position:absolute這類脫離文檔流的方式。

float:left,float:right, postion:absolute后設(shè)置left/top/bottom/right,的一項(xiàng)為0；

請問在CSS里這個(gè)圖片“溢出”的情況，應(yīng)該怎么給圖片一個(gè)屬性？

在外層的div固定寬高，里面的img如果你要寬度鋪滿

如 div style="width:150;height:200px; overfloat:hidden"img style="width:100%"http://div

如果想圖片高度鋪滿 img style="height:100%"/ 但是這樣圖片就不能完整顯示

如果你的圖片都是一樣的尺寸，div設(shè)置相同比例 ， img style="width:100%; height:100%"/