溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
什么是盒子模型？很多新手對此不是很清楚，為了幫助大家解決這個難題，下面小編將為大家詳細講解，有這方面需求的人可以來學習下，希望你能有所收獲。
盒子模型有兩種：W3C和IE盒子模型
盒子模型包括margin、border、padding、content
W3C的元素寬度=content的寬度
IE的元素寬度=content+padding+border
我個人認為W3C定義盒子模型與IE定義的盒子模型，IE定義的比較合理，
元素的寬度應該包含border（邊框）和padding（填充），這個和我們現實生活的盒子是一樣的，
W3C也認識到自己的問題了，所以在CSS3中新增了一個樣式box-sizing，
包含兩個屬性content-box 和 border-box。
content-box ： width=content+padding+border
border-box： width=width（樣式指定的寬度）
1.對于行級元素，margin-top和margin-bottom對于上下元素無效，margin-left和margin-right有效
2.對于相鄰的塊級元素margin-bottom和margin-top 取值方式
1） 都是正數： 取最大值 距離=Math.max(margin-botton,margin-top)
2） 都是負數： 取最小值 距離=Math.min(margin-botton,margin-top)
3）上面是正數，下面是負數或者 上面是負數，下面是正數： 正負相加 距離=margin-botton+margin-top
看完上述內容是否對您有幫助呢？如果還想對相關知識有進一步的了解或閱讀更多相關文章，請關注億速云行業資訊頻道，感謝您對億速云的支持。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
