最近在開發的時候發現一個小問題，<DIV>我們很熟悉的一個盒子元素

關于他的描述

1.按照我們正常人的思維邏輯

編寫好一個DIV盒子，然后再在盒子里面添加邊框border、內邊距padding、內容，這是我們的思維邏輯

但是DIV的編寫會隨著你添加的邊框border+內邊距padding 的增加而不斷增加

例如以下：第一個是什么也沒有加的，第二個盒子是加了內邊距，第三個盒子是加了邊框，總結出來的規律就是DIV在普通屬性下，是按照逆向思維執行，從內到外進行添加，這樣往往會破壞實際的邏輯結構，因此我們需要引入一個屬性來控制DIV，這個CSS屬性是box-sizing: border-box;?

content-box? 是默認值。如果你設置一個元素的寬為100px，那么這個元素的內容區會有100px寬，并且任何邊框和內邊距的寬度都會被增加到最后繪制出來的元素寬度中，就例如上面所示

當我們不希望自己的盒子被撐大，就需要box-sizing: border-box; 的屬性控制盒子的大小，讓盒子固定寬高，再在此基礎上添加內邊距和內容和邊框

?

border-box?告訴瀏覽器去理解你設置的邊框和內邊距的值是包含在width內的。也就是說，如果你將一個元素的width設為100px,那么這100px會包含其它的border和padding，內容區的實際寬度會是width減去border?+ padding的計算值。大多數情況下這使得我們更容易的去設定一個元素的寬高。（轉）

?

box-sizing: border-box;//其他瀏覽器
-webkit-box-sizing: border-box;//谷歌
-moz-box-sizing: border-box;//火狐

文字或者內容垂直居中只需要設置行高 line-height 等于父空間高度就行

?

文字或者內容水平居中需要設置 text-align:center 即可

看到選項卡導航條 就用ul和li 搭配float使用 去除一些固定的屬性 再來個定位即可

input的快捷輸入是 input+：+字母

?

有時候一些盒子放不下 其實不是盒子的問題 檢查一下是否有默認空格的情況出現 這時候只需要合并一下即可

?

在企業開發中想讓多個盒子的頂部對齊，我們可以讓多個盒子同時浮動

?

使用絕對定位去控制位置的時候，很多標準都會失效 例如控制居中 margin:0 auto就是失效

?

用span作標簽的時候，要注意這是一個行內元素 設置寬高的時候要設置屬性display:inline-block變成行內塊級元素才可以

開發中，看到某一元素覆蓋在另一元素上面的時候 就要想到定位 定位的時候就要想到子絕父相，同時用了絕對定位后，由于脫離標準流，行內塊級以及行內元素的改變屬性就會消失

?

行高可以撐起盒子高度 例如有了line-hight后就可以把height刪除

?

想要水平排版 只需要float:left就可以

刪除樣式可以用list-style:none

?

超出部分需要用overfloat:hidden 讓導航條不拖動超過的部分

?

創作挑戰賽新人創作獎勵來咯，堅持創作打卡瓜分現金大獎

總結

以上是生活随笔為你收集整理的关于HTML的盒子的一些小问题的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。