一、判斷方法
1.判斷是否元素寬高為200的盒子
只需要看：邊框+內邊距+內容寬度/內容高度的值是否等于200
2.判斷是否內容寬高為100的盒子
只需要看：width和heght的值是否等于100
3.判斷是否元素空間寬高為300的盒子
只需要看：外邊距+邊框+內邊距+內容寬度/內容高度的值是否等于300
二、使用方法
我們拿到對元素、元素空間、內容的大小的要求的時候，我們需要按照公式進行計算來達到我們的需求，
三、box-sizing屬性
div.content>div.aside+div.article然后按下table會自動填充成 <div class="content"> <div class="aside"></div> <div class="article"></div> </div> 下面我們講解box-sizing屬性 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>d113_height_and_width_of_box</title> <style> .content{ width:300px; height:300px; background-color: red; } .aside{ width: 100px; height:200px; background-color: blue; float:left; } .article{ width:200px; height:200px; background-color: yellow; float:right; } </style> </head> <body> <div class="content"> <div class="aside"></div> <div class="article"></div> </div> </body> </html>
我們在類article中加一個屬性
border:20px solid black;
這種情況溢位了，這在后面編輯網頁的時候會經常遇到，需要已經寫好了，但是又在該需求，這種牽一發而動全身，因此我們引入box-sizing屬性
效果可見下面的屬性值
box-sizing: border-box;
解釋：
我們的屬性值：
content-box 表示里面的元素的寬高 = 邊框 + 內邊距 + 內容寬高
border-box 表示里面的元素恒等于width屬性
四、原始碼：
d114_attribute_of_box-sizing.html
地址:
https://github.com/ruigege66/HTML_learning/blob/master/d114_attribute_of_box-sizing.html
2.CSDN：https://blog.csdn.net/weixin_44630050（心悅君兮君不知-睿）
3.博客園：https://www.cnblogs.com/ruigege0000/
4.歡迎關注微信公眾號：傅里葉變換，個人賬號，僅用于技術交流，后臺回復“禮包”獲取Java大資料學習視頻禮包
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/120030.html
標籤：Html/Css
上一篇：html解決空格顯示問題
下一篇：XML Schema