HTML、CSS筆記

Aomine 發(fā)布于2019-08-29 14:22 / 2874人閱讀

摘要：相鄰的兄弟元素相鄰的兩個兄弟元素之間的外邊距會塌陷。塊級父元素與其第一個最后一個子元素如果塊級父元素中，上邊框?qū)挾燃吧蟽?nèi)邊距距離為時，此時這個塊級父元素和其第一個子元素就會發(fā)生上外邊距合并現(xiàn)象。

盒模型

在CSS中，使用標準盒模型描述這些矩形盒子中的每一個。這個模型描述了元素所占空間的內(nèi)容。每個盒子有四個邊：外邊距邊, 邊框邊, 內(nèi)填充邊與內(nèi)容邊。

在標準模式下，一個塊的總寬度= 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)容進行布局，以及與其他元素的關系和相互關系
創(chuàng)建BFC的方式如下：

根元素或其它包含它的元素（html標簽）

浮動元素 (元素的 float 不是 none)

絕對定位元素 (元素的 position 為 absolute 或 fixed)

內(nèi)聯(lián)塊 (元素具有 display: inline-block)

表格單元格 (元素具有 display: table-cell，HTML表格單元格默認屬性)

overflow 值不為 visible 的塊元素

彈性項 (display: flex 或 inline-flex元素的子元素)

網(wǎng)格項 (display: grid 或 inline-grid 元素的子元素)

BFC作用 水平居中

子元素為行內(nèi)元素還是塊狀元素，寬度一定還是寬度未定，采取的布局方案不同。

子元素為

行內(nèi)元素：對父元素設置text-align:center;
定寬塊狀元素: 設置左右margin值為auto;
不定寬塊狀元素: 設置子元素為display:inline,然后在父元素上設置text-align:center;
通用方案: flex布局，對父元素設置display:flex;justify-content:center;

垂直居中

垂直居中對于子元素是單行內(nèi)聯(lián)文本、多行內(nèi)聯(lián)文本以及塊狀元素采用的方案是不同的。
父元素一定，子元素為單行內(nèi)聯(lián)文本：設置父元素的height等于行高line-height
父元素一定，子元素為多行內(nèi)聯(lián)文本：設置父元素的display:table-cell，再設置vertical-align:middle;
塊狀元素:設置子元素position:absolute 并設置top、bottom為0，父元素要設置定位為static以外的值，margin:auto;
通用方案: flex布局，給父元素設置{display:flex; align-items:center;}。

圣杯布局和雙飛翼布局

圣杯雙飛翼

FLEX布局

flex

grid布局

鏈接描述
CSS Grid 布局完全指南(圖解 Grid 詳細教程)
如何使用 CSS Grid 快速而又靈活的布局

各種像素單位

設備像素，設備獨立像素，CSS像素

session，cookie，localStorage，sessionStorage

淺談session,cookie,sessionStorage,localStorage的區(qū)別及應用場景

transform、transition和animation

CSS3中動畫屬性transform、transition和animation

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/113073.html

Html和Css學習筆記-html基礎知識

摘要：我的郵箱地址歡迎大家交流學習糾錯此篇博客是我的復習筆記，和學的時間太久了，忘得差不多了，最近要使用一下，所以重新打開的書略讀，后記錄了標簽，元素，屬性的具體意義。有些標記有屬性，具體格式，以標記為例，其中為標記的屬性。我的郵箱地址:[email protected]歡迎大家交流學習糾錯！此篇博客是我的復習筆記，html和css學的時間太久了，忘得差不多了，最近要使用一下，所以重新打開htm...

yzzz 2019-04-23 11:47 評論0 收藏0
Angular4學習筆記之HTML屬性綁定

摘要：第二種情況控制樣式如果的值為那么樣式就是，否則就是寫在最后對于的屬性綁定和的屬性綁定是一樣一樣的。對于文章中所用的代碼是結(jié)合了學習筆記之數(shù)據(jù)綁定上面的例子做的，鏈接地址簡介基本HTML屬性 Css 類綁定 CSS 類綁定，[class] 全部替換的例子 CSS 類綁定，[class.sepcial] 部分替換的例子 CSS 類綁定，[ngClass] 替換多個的...

wawor4827 2019-08-21 18:36 評論0 收藏0
CSS學習筆記(一) HTML標記與文檔結(jié)構(gòu)

摘要：用標記內(nèi)容的目的是為了賦予網(wǎng)頁語義。規(guī)定了一組標簽，用來給內(nèi)容打上不同的標記。最新的版本，又新規(guī)定了一批結(jié)構(gòu)化標簽，用于對相關內(nèi)容的標簽進行分組，從而更好地規(guī)范網(wǎng)頁的整體結(jié)構(gòu)。用HTML標記內(nèi)容的目的是為了賦予網(wǎng)頁語義（semantic）。換句話說，就是要給你的網(wǎng)頁內(nèi)容賦予某些用戶代理（user agent）能夠理解的含義。 HTML 規(guī)定了一組標簽，用來給內(nèi)容打上不...

yacheng 2019-08-28 18:01 評論0 收藏0
CSS學習筆記(一) HTML標記與文檔結(jié)構(gòu)

摘要：用標記內(nèi)容的目的是為了賦予網(wǎng)頁語義。規(guī)定了一組標簽，用來給內(nèi)容打上不同的標記。最新的版本，又新規(guī)定了一批結(jié)構(gòu)化標簽，用于對相關內(nèi)容的標簽進行分組，從而更好地規(guī)范網(wǎng)頁的整體結(jié)構(gòu)。用HTML標記內(nèi)容的目的是為了賦予網(wǎng)頁語義（semantic）。換句話說，就是要給你的網(wǎng)頁內(nèi)容賦予某些用戶代理（user agent）能夠理解的含義。 HTML 規(guī)定了一組標簽，用來給內(nèi)容打上不...

jindong 2019-08-01 14:42 評論0 收藏0
webpack4使用筆記之plugin

摘要：默認為根據(jù)自己的指定的模板文件來生成特定的文件主要是針對多入口文件。那么選項就可以決定是否都使用這些生成的文件。壓縮壓縮通過使用可以看到項目各模塊的大小，可以按需優(yōu)化圖片來自于的 webpack4 常用plugin clean-webpack-plugin html-webpack-plugin mini-css-extract-plugin terser-webpack-plugi...

ymyang 2019-08-23 14:57 評論0 收藏0
CSS權(quán)威指南學習筆記系列(1)CSS和文檔

摘要：行內(nèi)元素不會在它本身之前或之后生成分隔符，所以可以出現(xiàn)在另一個元素的內(nèi)容中，而不會破壞其顯示。標記標記基本目的是允許創(chuàng)作人員將包含標記的文檔與其他文檔相關聯(lián)。更多細節(jié)請看權(quán)威指南題外話：HTML是一種結(jié)構(gòu)化語言，而CSS是它的補充；這是一種樣式語言。CSS是前端三板斧之一，因此學習CSS很重要。而我還是菜鳥，所以需要加強學習CSS。這個是我學習CSS權(quán)威指南的筆記，如有不對，請諒解和...

peixn 2019-08-28 18:30 評論0 收藏0