資訊專欄INFORMATION COLUMN
摘要：相鄰的兄弟元素相鄰的兩個兄弟元素之間的外邊距會塌陷。塊級父元素與其第一個最后一個子元素如果塊級父元素中，上邊框?qū)挾燃吧蟽?nèi)邊距距離為時，此時這個塊級父元素和其第一個子元素就會發(fā)生上外邊距合并現(xiàn)象。
盒模型
在CSS中，使用標(biāo)準(zhǔn)盒模型描述這些矩形盒子中的每一個。這個模型描述了元素所占空間的內(nèi)容。每個盒子有四個邊：外邊距邊, 邊框邊, 內(nèi)填充邊 與 內(nèi)容邊。
在標(biāo)準(zhǔn)模式下，一個塊的總寬度= width + margin(左右) + padding(左右) + border(左右)
在怪異模式下，一個塊的總寬度= width + margin(左右)（即width已經(jīng)包含了padding和border值）
外邊距合并塊的頂部外邊距和底部外邊距有時被組合(折疊)為單個外邊距，這種行為稱為外邊距塌陷(margin collapsing)，有的地方翻譯為外邊距合并。
相鄰的兄弟元素：相鄰的兩個兄弟元素之間的外邊距會塌陷。
塊級父元素與其第一個/最后一個子元素：如果塊級父元素中，上邊框?qū)挾燃吧蟽?nèi)邊距距離為0時，此時這個塊級父元素和其第一個子元素就會發(fā)生上外邊距合并現(xiàn)象。
空塊元素：如果存在一個空的塊級元素，其 border、padding、inline content、height、min-height 都不存在。那么此時它的上下邊距中間將沒有任何阻隔，此時它的上下外邊距將會合并。
BFC它決定了塊級元素如何對它的內(nèi)容進行布局，以及與其他元素的關(guān)系和相互關(guān)系
創(chuàng)建BFC的方式如下：
根元素或其它包含它的元素（html標(biāo)簽）
浮動元素 (元素的 float 不是 none)
絕對定位元素 (元素的 position 為 absolute 或 fixed)
內(nèi)聯(lián)塊 (元素具有 display: inline-block)
表格單元格 (元素具有 display: table-cell，HTML表格單元格默認(rèn)屬性)
overflow 值不為 visible 的塊元素
彈性項 (display: flex 或 inline-flex元素的子元素)
網(wǎng)格項 (display: grid 或 inline-grid 元素的子元素)
BFC作用 水平居中子元素為行內(nèi)元素還是塊狀元素，寬度一定還是寬度未定，采取的布局方案不同。
子元素為
行內(nèi)元素：對父元素設(shè)置text-align:center;
定寬塊狀元素: 設(shè)置左右margin值為auto;
不定寬塊狀元素: 設(shè)置子元素為display:inline,然后在父元素上設(shè)置text-align:center;
通用方案: flex布局，對父元素設(shè)置display:flex;justify-content:center;
垂直居中對于子元素是單行內(nèi)聯(lián)文本、多行內(nèi)聯(lián)文本以及塊狀元素采用的方案是不同的。
父元素一定，子元素為單行內(nèi)聯(lián)文本：設(shè)置父元素的height等于行高line-height
父元素一定，子元素為多行內(nèi)聯(lián)文本：設(shè)置父元素的display:table-cell，再設(shè)置vertical-align:middle;
塊狀元素:設(shè)置子元素position:absolute 并設(shè)置top、bottom為0，父元素要設(shè)置定位為static以外的值，margin:auto;
通用方案: flex布局，給父元素設(shè)置{display:flex; align-items:center;}。
圣杯雙飛翼
FLEX布局flex
grid布局鏈接描述
CSS Grid 布局完全指南(圖解 Grid 詳細(xì)教程)
如何使用 CSS Grid 快速而又靈活的布局
設(shè)備像素，設(shè)備獨立像素，CSS像素
session，cookie，localStorage，sessionStorage淺談session,cookie,sessionStorage,localStorage的區(qū)別及應(yīng)用場景
transform、transition和animationCSS3中動畫屬性transform、transition和animation
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/51771.html
摘要：我的郵箱地址歡迎大家交流學(xué)習(xí)糾錯此篇博客是我的復(fù)習(xí)筆記，和學(xué)的時間太久了，忘得差不多了，最近要使用一下，所以重新打開的書略讀，后記錄了標(biāo)簽，元素，屬性的具體意義。有些標(biāo)記有屬性，具體格式，以標(biāo)記為例，其中為標(biāo)記的屬性。我的郵箱地址:[email protected]歡迎大家交流學(xué)習(xí)糾錯！ 此篇博客是我的復(fù)習(xí)筆記，html和css學(xué)的時間太久了，忘得差不多了，最近要使用一下，所以重新打開htm...
摘要：第二種情況控制樣式如果的值為那么樣式就是，否則就是寫在最后對于的屬性綁定和的屬性綁定是一樣一樣的。對于文章中所用的代碼是結(jié)合了學(xué)習(xí)筆記之?dāng)?shù)據(jù)綁定上面的例子做的，鏈接地址 簡介 基本HTML屬性 Css 類綁定 CSS 類綁定，[class] 全部替換的例子 CSS 類綁定，[class.sepcial] 部分替換的例子 CSS 類綁定，[ngClass] 替換多個的...
摘要：用標(biāo)記內(nèi)容的目的是為了賦予網(wǎng)頁語義。規(guī)定了一組標(biāo)簽，用來給內(nèi)容打上不同的標(biāo)記。最新的版本，又新規(guī)定了一批結(jié)構(gòu)化標(biāo)簽，用于對相關(guān)內(nèi)容的標(biāo)簽進行分組，從而更好地規(guī)范網(wǎng)頁的整體結(jié)構(gòu)。 用HTML標(biāo)記內(nèi)容的目的是為了賦予網(wǎng)頁語義（semantic）。換句話說，就是要給你的網(wǎng)頁內(nèi)容賦予某些用戶代理（user agent）能夠理解的含義。 HTML 規(guī)定了一組標(biāo)簽，用來給內(nèi)容打上不...
摘要：用標(biāo)記內(nèi)容的目的是為了賦予網(wǎng)頁語義。規(guī)定了一組標(biāo)簽，用來給內(nèi)容打上不同的標(biāo)記。最新的版本，又新規(guī)定了一批結(jié)構(gòu)化標(biāo)簽，用于對相關(guān)內(nèi)容的標(biāo)簽進行分組，從而更好地規(guī)范網(wǎng)頁的整體結(jié)構(gòu)。 用HTML標(biāo)記內(nèi)容的目的是為了賦予網(wǎng)頁語義（semantic）。換句話說，就是要給你的網(wǎng)頁內(nèi)容賦予某些用戶代理（user agent）能夠理解的含義。 HTML 規(guī)定了一組標(biāo)簽，用來給內(nèi)容打上不...
摘要：默認(rèn)為根據(jù)自己的指定的模板文件來生成特定的文件主要是針對多入口文件。那么選項就可以決定是否都使用這些生成的文件。壓縮壓縮通過使用可以看到項目各模塊的大小，可以按需優(yōu)化圖片來自于的 webpack4 常用plugin clean-webpack-plugin html-webpack-plugin mini-css-extract-plugin terser-webpack-plugi...
摘要：行內(nèi)元素不會在它本身之前或之后生成分隔符，所以可以出現(xiàn)在另一個元素的內(nèi)容中，而不會破壞其顯示。標(biāo)記標(biāo)記基本目的是允許創(chuàng)作人員將包含標(biāo)記的文檔與其他文檔相關(guān)聯(lián)。更多細(xì)節(jié)請看權(quán)威指南 題外話：HTML是一種結(jié)構(gòu)化語言，而CSS是它的補充；這是一種樣式語言。CSS是前端三板斧之一，因此學(xué)習(xí)CSS很重要。而我還是菜鳥，所以需要加強學(xué)習(xí)CSS。這個是我學(xué)習(xí)CSS權(quán)威指南的筆記，如有不對，請諒解和...
閱讀 1745·2021-10-18 13:30
閱讀 2636·2021-10-09 10:02
閱讀 2972·2021-09-28 09:35
閱讀 2099·2019-08-26 13:39
閱讀 3532·2019-08-26 13:36
閱讀 1960·2019-08-26 11:46
閱讀 1144·2019-08-23 14:56
閱讀 1703·2019-08-23 10:38
