HTML、CSS筆記

Aomine 發布于2019-08-29 14:22 / 2848人閱讀

摘要：相鄰的兄弟元素相鄰的兩個兄弟元素之間的外邊距會塌陷。塊級父元素與其第一個最后一個子元素如果塊級父元素中，上邊框寬度及上內邊距距離為時，此時這個塊級父元素和其第一個子元素就會發生上外邊距合并現象。

盒模型

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

在標準模式下，一個塊的總寬度= width + margin(左右) + padding(左右) + border(左右)

在怪異模式下，一個塊的總寬度= width + margin(左右)（即width已經包含了padding和border值）

外邊距合并

塊的頂部外邊距和底部外邊距有時被組合(折疊)為單個外邊距，這種行為稱為外邊距塌陷(margin collapsing)，有的地方翻譯為外邊距合并。

相鄰的兄弟元素：相鄰的兩個兄弟元素之間的外邊距會塌陷。

塊級父元素與其第一個/最后一個子元素：如果塊級父元素中，上邊框寬度及上內邊距距離為0時，此時這個塊級父元素和其第一個子元素就會發生上外邊距合并現象。

空塊元素：如果存在一個空的塊級元素，其 border、padding、inline content、height、min-height 都不存在。那么此時它的上下邊距中間將沒有任何阻隔，此時它的上下外邊距將會合并。

BFC

它決定了塊級元素如何對它的內容進行布局，以及與其他元素的關系和相互關系
創建BFC的方式如下：

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

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

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

內聯塊 (元素具有 display: inline-block)

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

overflow 值不為 visible 的塊元素

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

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

BFC作用 水平居中

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

子元素為

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

垂直居中

垂直居中對于子元素是單行內聯文本、多行內聯文本以及塊狀元素采用的方案是不同的。
父元素一定，子元素為單行內聯文本：設置父元素的height等于行高line-height
父元素一定，子元素為多行內聯文本：設置父元素的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的區別及應用場景

transform、transition和animation

CSS3中動畫屬性transform、transition和animation

GPU云服務器云服務器 html css HTML+CSS html+css: 學完html css

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/113073.html

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

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

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

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

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

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

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

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

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

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

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

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

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