国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

HTML、CSS筆記

Aomine / 2859人閱讀

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

盒模型

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

在標(biāo)準(zhǔn)模式下，一個(gè)塊的總寬度= width + margin(左右) + padding(左右) + border(左右)

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

外邊距合并

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

相鄰的兄弟元素：相鄰的兩個(gè)兄弟元素之間的外邊距會(huì)塌陷。

塊級(jí)父元素與其第一個(gè)/最后一個(gè)子元素：如果塊級(jí)父元素中，上邊框?qū)挾燃吧蟽?nèi)邊距距離為0時(shí)，此時(shí)這個(gè)塊級(jí)父元素和其第一個(gè)子元素就會(huì)發(fā)生上外邊距合并現(xiàn)象。

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

BFC

它決定了塊級(jí)元素如何對(duì)它的內(nèi)容進(jìn)行布局，以及與其他元素的關(guān)系和相互關(guān)系
創(chuàng)建BFC的方式如下：

根元素或其它包含它的元素（html標(biāo)簽）

浮動(dòng)元素 (元素的 float 不是 none)

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

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

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

overflow 值不為 visible 的塊元素

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

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

BFC作用 水平居中

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

子元素為

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

垂直居中

垂直居中對(duì)于子元素是單行內(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è)備獨(dú)立像素，CSS像素

session，cookie，localStorage，sessionStorage

淺談session,cookie,sessionStorage,localStorage的區(qū)別及應(yīng)用場(chǎng)景

transform、transition和animation

CSS3中動(dòng)畫屬性transform、transition和animation

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

轉(zhuǎn)載請(qǐng)注明本文地址：http://m.specialneedsforspecialkids.com/yun/113073.html

相關(guān)文章

  • Html和Css學(xué)習(xí)筆記-html基礎(chǔ)知識(shí)

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

    yzzz 評(píng)論0 收藏0

  • Angular4學(xué)習(xí)筆記之HTML屬性綁定

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

    wawor4827 評(píng)論0 收藏0

  • CSS學(xué)習(xí)筆記(一) HTML標(biāo)記與文檔結(jié)構(gòu)

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

    yacheng 評(píng)論0 收藏0

  • CSS學(xué)習(xí)筆記(一) HTML標(biāo)記與文檔結(jié)構(gòu)

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

    jindong 評(píng)論0 收藏0

  • webpack4使用筆記之plugin

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

    ymyang 評(píng)論0 收藏0

  • CSS權(quán)威指南學(xué)習(xí)筆記系列(1)CSS和文檔

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

    peixn 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<