頁面製做HTML+CSS基礎亂燉

時間 2019-11-06

標籤頁面製做 html+css html css 基礎欄目 CSS 简体版

原文原文鏈接

1.`<meta charset="utf-8">`

<head></head> 裏的 <meta charset="utf-8"> 必定要放在第一行，若是放在了<title>下面可能會有問題。css

2.標籤大集合

3.HTML5語義化標籤

4.頁面內錨點

<a href="#jump">我跳！</a>
...
<div id="jump">跳到這裏來！</div>

可用於「回到頂部」功能。web

5.`<img>`標籤通常要求寫上`alt`屬性

6.HTML5中能夠用<video>標籤插入視頻，用<audio>標籤插入音頻segmentfault

7.總記不住row表示行，column表示列。表格中tr表示行(table row)，th和td(table data cell)表示列。ide

8.語義化的好處

（1）SEO（Search Engine Optimization）搜索引擎優化
（2）提升可訪問性，使盲人使用屏幕閱讀器更好的訪問。
（3）提升代碼可讀性，便於多人修改維護，提升開發效率。佈局

9.實體字符

&nbsp;
&gt;
&lt;
...

10.css引入flex

<link rel="stylesheet" href="common.css">

11.屬性選擇器

<input class="section-left" type="text" disabled value="張三">
<p class="section-right">right</p>
<div class="nav">nav</div>

//css

[disabled] { ... }

input[type="text"] { ... } 
//屬性值不加雙引號也能夠哎 [type=text] { ... }
//關因而否須要使用引號：當屬性值包含空格或者有特殊符號時，必需要使用引號

[class^="section"] { ... } 
//這樣能夠選中以class屬性以"section"開頭的元素，即上面的input 和 p

僞類選擇器: 一個冒號

12.a標籤上的僞類選擇器順序從上到下不能變：link visited hover active優化

13.li:nth-child(even) { ... } 或 li:nth-child(2n) { ... } 選中偶數項li元素動畫

14.:not(p) 不包含p元素。
:not(.class-a) 不包含class值有class-a的元素。搜索引擎

僞元素選擇器:: CSS3變爲兩個冒號

15.::first-letter { ... } 第一個字母或漢字
16.::first-line { ... } 第一行
17.::before 和 ::afterspa

p::before{ content: "before"; }//在元素前添加內容
p::after{ content: "after"; }//在元素後添加內容

18.::selection{ ... } 應用於被用戶選中的內容的樣式

19.兄弟選擇器 h1+p { ... } 選中h1後面同級的緊鄰着的一個p元素
20.多個兄弟選擇器 h1~p { ... } 選中h1後面同級的全部p元素，不須要緊鄰着

21.繼承屬性：color , font , text-align , list-style
22.非繼承屬性：background , border , position
如何從文檔中知道當前屬性是否能夠繼承？文檔中Inherited爲yes即爲能夠繼承。

23.選擇器優先級

https://jsfiddle.net/DarcyAn/... 奇怪，這個咋是僞元素選擇器優先級比僞類的高呢？

注意僞類與類優先級相同，僞元素與標籤優先級相同。

24.優先級最高： p { color: red !important; }

CSS文本

25.font屬性至少要設置font-size 和 font-family.

26.text-indent屬性本來用於設置首行縮進，通常設置爲2em，也可設置負值而後配合overflow: hidden;來達到隱藏文本的效果。

27.white-space：
nowrap不換行。
pre 完完整整保留了tab和空格，超出時也不會換行。
pre-wrap 保留了tab和空格。當超出時會自動換行。

28.word-wrap: break-word; 長單詞超出時換行。屬性名現由word-wrap改成overflow-wrap。

29.text-shadow: 1px 2px pink; 文字陰影：x軸偏移 y軸偏移 [陰影模糊半徑]? [顏色]?。

30.text-overflow: clip | ellipsis;
必定要配合 overflow: hidden; white-space: nowrap; 同時服用。

CSS盒模型

盒模型概念、width、height、padding、margin(水平居中)、border、border-radius、overflow、box-sizing、box-shadow、outline

31.margin合併

（1）相鄰元素的margin會合並
（2）父元素與子元素的margin會合並。（前提是父子元素之間沒有padding、border和其餘元素）
MDN外邊距合併

32.`border-radius: 50%;`是一個圓

圓角的水平半徑是寬度的50%，垂直半徑是高度的50%，因此是一個圓。

33.box-shadow: 4px 4px 3px 3px red能夠只設置前兩個值.

還能夠設置 inset 內陰影，以及多陰影（用逗號隔開便可）。

CSS背景

34.background-attachment: scroll | local ; 設置當內容滾動時，背景圖片的狀態。
scroll: 背景圖不動。
local: 背景圖隨與內容一塊兒滾動。

35.background-position: 20% 50%; 設置爲百分比的值要特別注意。
上述語句意思是：x軸上圖片的20%在容器的20%的位置，y軸上圖片的50%在容器的50%的位置，看圖：

若是這樣設置：background-position: 50% 50%;，就居中了。也等於background-position: center center;

能夠設置負值，這在sprite雪碧圖中常常用到。

36.線性漸變 linear-gradient() 能夠用來畫出漸變背景。

background: linear-gradient(to bottom, white,black);

向下漸變

37.background縮寫： position與 size 之間要加 / 否則會衝突。

CSS佈局

佈局簡介、display(水平居中、居中導航)、position(輪播頭圖、固定頂欄、遮罩、三行自適應佈局)、float(兩列布局)、flex(三行兩列自適應)

38.position定位，若是同時設置top和bottom，那麼元素會被撐開變大。

39.z-index 存在一個棧的概念。
紅色元素的父元素z-index 爲 9 ，藍色元素的z-index爲1，因此雖然藍色元素z-index爲100大於紅色的1，可是由於紅色的參照物的z-index高，因此紅色仍是在藍色上面。至關於兩副撲克牌上下疊加，下面那一副撲克牌無論內部怎樣調整，都沒法跑到上面那副撲克牌上面。

40.position: relative; 參照物爲元素自己，最經常使用的使用場景爲絕對定位元素的參照物(=ﾟωﾟ)ﾉ

41.position: absolute; 默認寬度是內容寬度，脫離文檔流。

42.position: fixed; 經常使用場景：遮罩mask。

43.clear屬性清除浮動通用方案：.clearfix:after{ ... } 其實是添加了一個看不見的點號。

主要代碼：

.clearfix: after {
  content: ".";
  display: block;
  clear: both;
  //到這爲止的前三條是用於清除浮動：設置了clear:both的塊級元素能夠清除浮動
  height: 0;
  overflow: hidden;
  visibility: hidden;
  //後面三條是爲了讓點號不可見
}

將clearfix這個class添加到浮動元素的父元素上，就清除了由於子元素浮動縮成一條的父元素的影響，完整代碼見：
jsfiddle栗子

44.flex佈局實現三行自適應+兩列自適應
東西略多，放到這裏了：
https://segmentfault.com/a/11...

CSS變形 `transform:`

45.transform: translate(20%,20%); 移動。這裏的20%參照物是本元素的寬和高

46.transform: skew(30deg); 傾斜。
y軸負方向向 x軸正方向傾斜， x軸正方向向 y軸負方向傾斜。
一張至關直觀的圖在這裏：

47.transform: translate(100px) rotate(45deg); 先移動，再旋轉。
與先旋轉，再移動：transform: rotate(45deg) translate(100px); 效果是不同的。
由於旋轉後，x軸與y軸方向已經發生了變化。

CSS動畫: 過渡效果`transition` + 動畫`animation`

48.transition語法：

transition: <single-transition> [,<single-transition>]; //可包含多個動畫
//每一個動畫的變化
<single-transition>: <transition-property> <transition-duration> <transition-timing-function> <transition-delay>

eg1:transition: color 2s ease 3s, left 2s;
eg2:transition: 2s; 等價於 transition: all 2s ease 0;

49.animation 與 transition區別：
（1）transition須要hover或click或js去觸發，而animation是自動運行的。
（2）animation能夠作多幀動畫。

50.animation語法：

animation: <single-animation>[,<single-animation>]
//每一個動畫包含：
<single-animation>: <animation-name> <duration> <timing-function> <delay> <iteration-count> <direction> <fill-mode> <play-state>;

@-webkit-keyframes abc {
  0%{ left:0; top: 0;}
  50%{ left: 250px; top: 100px; }
  100%{ left: 500px; top: 0; }
}
// 0% 等價於 from , 100% 等價於 to

@-webkit-keyframes flash { //閃動效果
  0%, 50%, 100% { opacity: 1; }
  25%, 75% { opacity: 0.1; }
}

eg1: animation: abc 2s ease 0s infinite reverse both running;
eg1: animation: abc 2s, abcd 2s both;