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