成人无码视频,亚洲精品久久久久av无码,午夜精品久久久久久毛片,亚洲 中文字幕 日韩 无码

資訊專欄INFORMATION COLUMN

關(guān)于CSS的那些事

smallStone / 2648人閱讀

摘要：關(guān)于背景圖片的那些小技巧背景圖片太大沒辦法居中顯示怎么辦想完整顯示圖片如何按比例縮放想要在頁(yè)面上顯示兩個(gè)空格，應(yīng)該怎么寫代碼在代碼里寫才行。

CSS簡(jiǎn)介

想要制作出好看又高大上的網(wǎng)頁(yè)，除了編寫好HTML文件外，CSS的編寫也必不可少。CSS的英文全稱是Cascading Style Sheets，即層疊樣式表。CSS不僅可以靜態(tài)地修飾網(wǎng)頁(yè)，還可以配合各種腳本語(yǔ)言動(dòng)態(tài)地對(duì)網(wǎng)頁(yè)各元素進(jìn)行格式化。下面我來(lái)介紹一些關(guān)于CSS的小技巧。

什么是文檔流？

文檔流的英文是 Normal Flow，其含義為文檔內(nèi)元素的流動(dòng)方向，簡(jiǎn)單來(lái)說(shuō)就是內(nèi)聯(lián)元素從左往右，塊級(jí)元素從上往下流動(dòng)。文檔流中內(nèi)聯(lián)元素默認(rèn)從左到右排列，寬度不夠則自動(dòng)換行；而文檔流中塊級(jí)元素從上到下排列，每個(gè)元素占一行。其中，float:left、position:absolute、position: fixed 可以使元素脫離文檔流。

內(nèi)聯(lián)元素

給 inline 元素設(shè)置寬高是沒有任何效果的，但是為其設(shè)置 margin、padding都是有效果的。

div高度由什么決定？

div高度由其內(nèi)部文檔流元素高度總和決定，一旦元素脫離了文檔流就不再計(jì)入div高度中。

content-box 與 border-box 的區(qū)別是什么？

border-box 的 width 包括 padding 和 border，而content-box 正好與之相反，其width 不包括 padding 和 border。

關(guān)于背景圖片的那些小技巧

1 背景圖片太大沒辦法居中顯示怎么辦？

background-position:center center;

2 想完整顯示圖片如何按比例縮放？

background-size:cover;

3 想要在頁(yè)面上顯示兩個(gè)空格，應(yīng)該怎么寫代碼？
在代碼里寫    才行。

如何做橫向布局？

當(dāng)我們想要讓某些元素做橫向布局時(shí)，我們都可以用以下套路來(lái)實(shí)現(xiàn)：

給所有想要在一行內(nèi)的子元素加上float: left;屬性

給所有父元素加上 clearfix 類
其中 clearfix 類為：

  .clearfix::after{
     content: "";
     display: block;
     clear: both;
  }

CSS畫三角形

下面我們將利用純css來(lái)畫一個(gè)三角形:

div{
    border: 10px solid transparent;
    width: 0px;
    border-left-color: #e6686a;
    border-top-width: 0px;
}

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

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

相關(guān)文章

  • 關(guān)于CSS Reset 那些事（四）之 構(gòu)架CSS基礎(chǔ)樣式庫(kù)

    摘要：現(xiàn)在回到我們這一章節(jié)的標(biāo)題，將它做下補(bǔ)充關(guān)于那些事四之基于構(gòu)架基礎(chǔ)樣式庫(kù)基礎(chǔ)庫(kù)構(gòu)思為什么要做基礎(chǔ)庫(kù)我上一章節(jié)的末尾拋出了幾個(gè)問題假設(shè)你要做一個(gè)游戲單頁(yè)面，網(wǎng)頁(yè)上并不存在表單內(nèi)容，那么你就要移除一些冗余的代碼，開始自定義樣式來(lái)滿足自己的需求。 前言 先來(lái)回顧一下前幾章節(jié)，我們都說(shuō)了哪些內(nèi)容： CSS Reset 歷史 與 Normalize.css 介紹 Normalize.css...

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

  • 關(guān)于CSS Reset 那些事（四）之 構(gòu)架CSS基礎(chǔ)樣式庫(kù)

    摘要：現(xiàn)在回到我們這一章節(jié)的標(biāo)題，將它做下補(bǔ)充關(guān)于那些事四之基于構(gòu)架基礎(chǔ)樣式庫(kù)基礎(chǔ)庫(kù)構(gòu)思為什么要做基礎(chǔ)庫(kù)我上一章節(jié)的末尾拋出了幾個(gè)問題假設(shè)你要做一個(gè)游戲單頁(yè)面，網(wǎng)頁(yè)上并不存在表單內(nèi)容，那么你就要移除一些冗余的代碼，開始自定義樣式來(lái)滿足自己的需求。 前言 先來(lái)回顧一下前幾章節(jié)，我們都說(shuō)了哪些內(nèi)容： CSS Reset 歷史 與 Normalize.css 介紹 Normalize.css...

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

  • 關(guān)于CSS Reset 那些事（三）之 Normalize-zh.css 出爐

    摘要：本章節(jié)會(huì)完成所有源代碼翻譯整理，最終會(huì)整理出中文版本并開源至供大家交流使用?，F(xiàn)已將源代碼開源至項(xiàng)目地址源碼解讀上章節(jié)對(duì)與元素，元素，鏈接，語(yǔ)義化文本，內(nèi)嵌元素，群組元素等源碼內(nèi)容已經(jīng)做了解析，這章節(jié)繼續(xù)完成表單，表格部分。 前言 上一章節(jié)我們對(duì)Normalize.css源碼進(jìn)行解析，但是由于其代碼過(guò)長(zhǎng)導(dǎo)致不宜瀏覽，所以表單Forms，表格Table部分內(nèi)容放在此章節(jié)介紹。本章節(jié)會(huì)完成...

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

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

0條評(píng)論

閱讀需要支付1元查看
<