關于CSS的那些事

smallStone 發(fā)布于2019-08-30 15:54 / 2546人閱讀

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

CSS簡介

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

什么是文檔流？

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

內聯(lián)元素

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

div高度由什么決定？

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

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

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

關于背景圖片的那些小技巧

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

background-position:center center;

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

background-size:cover;

3 想要在頁面上顯示兩個空格，應該怎么寫代碼？
在代碼里寫才行。

如何做橫向布局？

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

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

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

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

CSS畫三角形

下面我們將利用純css來畫一個三角形:

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

云服務器 GPU云服務器云服務器那些事那些奇怪的錯誤云計算的股票有那些不備案的網(wǎng)站有那些

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

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

關于CSS Reset 那些事（四）之構架CSS基礎樣式庫

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

mj 2019-08-28 18:13 評論0 收藏0
關于CSS Reset 那些事（四）之構架CSS基礎樣式庫

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

Yu_Huang 2019-08-01 14:48 評論0 收藏0
關于CSS Reset 那些事（三）之 Normalize-zh.css 出爐

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

harryhappy 2019-08-28 18:11 評論0 收藏0