資訊專欄INFORMATION COLUMN
摘要：一排版原理改變盒模型計(jì)算方式取值初始值舉個(gè)例子演示結(jié)果文檔二一些容易被忽視的小細(xì)節(jié)下面代碼，標(biāo)簽的高度是多少解析默認(rèn)情況下是沒有高度只有寬度。使用場(chǎng)景可以利用的百分比來做出一些固定寬高比的盒子。另外注意水平垂直居中的實(shí)現(xiàn)方式。
一、CSS排版原理 box-sizing
改變盒模型計(jì)算方式
取值：border-box | content-box
初始值：content-box
舉個(gè)例子：
Box ABox B
演示結(jié)果：
box-sizing mdn文檔
二、一些容易被忽視的小細(xì)節(jié) 2.1 下面代碼，p標(biāo)簽的高度是多少？Some text
解析：默認(rèn)情況下body是沒有高度只有寬度。所以p標(biāo)簽的父級(jí)是body默認(rèn)高度為0，所以p的高度也是0。
解決辦法：可以設(shè)置height: 100vh，使用一些屏幕的單位如vh vw，一個(gè)屏幕的高度是100vh。
以上代碼padding-top等于父容器body的寬度，實(shí)現(xiàn)了一個(gè)響應(yīng)式的正方形
解析：padding不管是padding-top還是padding-left，它的百分比都是根據(jù)父容器的"寬度"來決定的。
使用場(chǎng)景：可以利用padding的百分比來做出一些固定寬高比的盒子。
2.3 Margin Collapse 合并以前是為了讓報(bào)紙、排版而設(shè)定的
a與b之間的高度還是100px，這就是margin合并。
2.4 利用border可以制作任意角度的三角形通過給border的其他的三條邊設(shè)置透明色，就可以制作任意角度的三角形。
思考題：這個(gè)圖標(biāo)怎么做？
方法1：使用border構(gòu)造相間的三角形，然后使用overflow-hidden和border-radius剪裁成圓。另外注意水平、垂直居中的實(shí)現(xiàn)方式。
方法2：利用svg的虛線來做，這個(gè)方法比較靈巧，不容易理解，請(qǐng)多次調(diào)試stroke和stroke-dasharray的值加深理解。
方法3：利用css3新特性：錐形漸變。
方法4：也可以使用canvas和js等等。
三、視覺格式化模型視口（viewport）： 瀏覽器的可視區(qū)域
塊級(jí)元素
會(huì)被格式化成塊狀的元素
例如 p div section
將display設(shè)置為block、list-item、table將元素變?yōu)閴K級(jí)
行級(jí)元素
不會(huì)為其內(nèi)容生成塊級(jí)框
讓其內(nèi)容分布在多行中
display設(shè)置為inline、inline-block、inline-table使元素變?yōu)樾屑?jí)
盒子的生成
每個(gè)塊級(jí)元素生成一個(gè)主塊級(jí)盒，用它來包含子級(jí)盒
每個(gè)行級(jí)元素生成一個(gè)行級(jí)盒，行級(jí)盒分布于多行
塊級(jí)盒子中的子盒子的生成
塊級(jí)盒子中可以包含多個(gè)子塊級(jí)盒子
也可以包含多個(gè)行級(jí)盒子
不在行級(jí)元素里面的文字，會(huì)生成匿名行級(jí)盒。比如
Some Text
，some在塊級(jí)盒子里，并且沒有被行級(jí)元素包裹，所以會(huì)生成匿名的行級(jí)盒子。塊級(jí)盒子中不能同時(shí)包含塊級(jí)和行級(jí)盒子。遇到這種情況時(shí)，會(huì)生成匿名塊級(jí)盒來包含行級(jí)盒。比如 標(biāo)題
2018-5-12
行級(jí)盒子內(nèi)的子盒子的生成
行級(jí)盒子內(nèi)可以包含行級(jí)盒子
行級(jí)盒子包含一個(gè)塊級(jí)盒子時(shí)，會(huì)被塊級(jí)盒子拆成兩個(gè)行級(jí)盒子，這兩個(gè)盒子又分別被匿名塊級(jí)盒包含。
舉個(gè)栗子文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/113451.html
摘要：今日勵(lì)志語錄有志者自有千計(jì)萬計(jì)，無志者只感千難萬難。三動(dòng)畫技術(shù)越來越不陌生，使用門檻也漸漸降低，而且動(dòng)畫還可以使用控制。掃一掃查看效果打開微掃一掃關(guān)注早讀君，每天早晨為你推送前端知識(shí)，度過擠地鐵坐公交的時(shí)光 今日勵(lì)志語錄有志者自有千計(jì)萬計(jì)，無志者只感千難萬難。 文章原出處：騰訊ISUX 開始閱讀之前你可以先掃一掃體驗(yàn)demoshowImg(https://segmentfault.co...
摘要：今日勵(lì)志語錄有志者自有千計(jì)萬計(jì)，無志者只感千難萬難。三動(dòng)畫技術(shù)越來越不陌生，使用門檻也漸漸降低，而且動(dòng)畫還可以使用控制。掃一掃查看效果打開微掃一掃關(guān)注早讀君，每天早晨為你推送前端知識(shí)，度過擠地鐵坐公交的時(shí)光 今日勵(lì)志語錄有志者自有千計(jì)萬計(jì)，無志者只感千難萬難。 文章原出處：騰訊ISUX 開始閱讀之前你可以先掃一掃體驗(yàn)demoshowImg(https://segmentfault.co...
摘要：大家最為熟知的就是負(fù)，使用負(fù)的，可以用來實(shí)現(xiàn)類似多列等高布局垂直居中等等。那還有沒有其他一些有意思的負(fù)值使用技巧呢下文就再介紹一些負(fù)值有意思的使用場(chǎng)景。但是希望無論左側(cè)內(nèi)容較多還是右側(cè)內(nèi)容較多，兩欄的高度始終保持一致。 寫本文的起因是，一天在群里有同學(xué)說誤打誤撞下，使用負(fù)的 outline-offset 實(shí)現(xiàn)了加號(hào)。嗯？好奇的我馬上也動(dòng)手嘗試了下，到底是如何使用負(fù)的 outline-o...
摘要：在正式前端一些小細(xì)節(jié)前端掘金英文原文，翻譯未來的太讓人興奮了一方面，是全新的頁面布局方式另一方面，是酷炫的濾鏡顏色等視覺效果。老司機(jī)教你更好的進(jìn)行編程個(gè)技巧前端掘金并不總是容易處理。 CSS3 實(shí)現(xiàn)文字流光漸變動(dòng)畫 - 前端 - 掘金來自百度前端技術(shù)學(xué)院的實(shí)踐任務(wù)：有趣的鼠標(biāo)懸浮模糊效果，參考：http://ife.baidu.com/course/d...，用CSS3實(shí)現(xiàn)了一下，順便...
閱讀 3408·2021-11-22 09:34
閱讀 675·2021-11-19 11:29
閱讀 1381·2019-08-30 15:43
閱讀 2258·2019-08-30 14:24
閱讀 1895·2019-08-29 17:31
閱讀 1251·2019-08-29 17:17
閱讀 2640·2019-08-29 15:38
閱讀 2777·2019-08-26 12:10
