? ? ? 說起css的盒子模型大家都不陌生。盒子寬度=width+padding+border，我們有沒有對于盒子的高度有疑惑呢狐胎？直接指定height，簡單粗暴歌馍，在不指定的情況下height是怎么確定的呢握巢？下面就來講講。
1.到底有哪些盒子骆姐？
? ? ? 說起有哪些盒子镜粤，我們很快想到display為block的塊級盒子，inline-block的行內(nèi)塊級盒子玻褪，inline行內(nèi)盒子肉渴。而盒子的形成一般是因?yàn)槲覀冊谖臋n中加入了相應(yīng)的標(biāo)簽，例如常用到的行內(nèi)塊級盒子带射，input 同规，textarea ，img窟社，button等標(biāo)簽生成的 盒子券勺。像span，i灿里，a等標(biāo)簽生成的就是行內(nèi)盒子关炼。那么我們直接寫在盒子里面的文字屬于盒子嗎？屬于哪種盒子匣吊？
2.inline boxes模型
? ? ? 我們知道行級盒子是在同一行排列的儒拂。排在同一行的這些盒子都是inline boxes。由標(biāo)簽生成的inline-block和inline盒子是有名字的inline boxes色鸳，而文字則屬于匿名的inline boxes社痛。
3.line boxes模型
? ? ? 說了這么久line boxes到底是個(gè)啥呢？line boxes就是代表包含眾多inline boxes的這行命雀。line boxes的高度等于這行內(nèi)高度最高的inline boxes的高度蒜哀，在上面的圖中就是textarea的高度。沒有指定高度的塊級元素和行內(nèi)塊級元素其高度就是由多個(gè)這樣的line boxes累計(jì)堆起來的吏砂。
? ? ? 那么問題來了撵儿，我們知道line boxes有啥作用呢？不知道大家看到上圖中的input框沒有狐血，它是超出了line boxes的高度的统倒，也就是說它發(fā)生了錯(cuò)位，這是由于它的vertical-align默認(rèn)值為baseline氛雪，我們明天再來講講vertical-align是怎么回事，想要弄明白vertical-align和line-align這兩個(gè)屬性耸成，盒子的line boxes模型是一定要知道的报亩。最后說個(gè)我們常用的單行文字垂直居中的一個(gè)方法浴鸿，line-align=盒子的高度。其實(shí)line-align=X弦追，是規(guī)定了非替換元素line boxes高度的最小值岳链，相應(yīng)的line box高度變了，盒子的高度也就變了劲件。
? ? ? 感謝3金大神的博客分享掸哑。
? ? ? 張鑫旭的博客
