最近在開發(fā)的時(shí)候發(fā)現(xiàn)一個(gè)小問題，<DIV>我們很熟悉的一個(gè)盒子元素

關(guān)于他的描述

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

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

但是DIV的編寫會(huì)隨著你添加的邊框border+內(nèi)邊距padding 的增加而不斷增加

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

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

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

?

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

?

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

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

?

文字或者內(nèi)容水平居中需要設(shè)置 text-align:center 即可

看到選項(xiàng)卡導(dǎo)航條 就用ul和li 搭配float使用 去除一些固定的屬性 再來(lái)個(gè)定位即可

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

?

有時(shí)候一些盒子放不下 其實(shí)不是盒子的問題 檢查一下是否有默認(rèn)空格的情況出現(xiàn) 這時(shí)候只需要合并一下即可

?

在企業(yè)開發(fā)中想讓多個(gè)盒子的頂部對(duì)齊，我們可以讓多個(gè)盒子同時(shí)浮動(dòng)

?

使用絕對(duì)定位去控制位置的時(shí)候，很多標(biāo)準(zhǔn)都會(huì)失效 例如控制居中 margin:0 auto就是失效

?

用span作標(biāo)簽的時(shí)候，要注意這是一個(gè)行內(nèi)元素 設(shè)置寬高的時(shí)候要設(shè)置屬性display:inline-block變成行內(nèi)塊級(jí)元素才可以

開發(fā)中，看到某一元素覆蓋在另一元素上面的時(shí)候 就要想到定位 定位的時(shí)候就要想到子絕父相，同時(shí)用了絕對(duì)定位后，由于脫離標(biāo)準(zhǔn)流，行內(nèi)塊級(jí)以及行內(nèi)元素的改變屬性就會(huì)消失

?

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

?

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

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

?

超出部分需要用overfloat:hidden 讓導(dǎo)航條不拖動(dòng)超過的部分

?

創(chuàng)作挑戰(zhàn)賽新人創(chuàng)作獎(jiǎng)勵(lì)來(lái)咯，堅(jiān)持創(chuàng)作打卡瓜分現(xiàn)金大獎(jiǎng)

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。