CSS參考手冊自用版（新增flex布局）

什麼是選擇器

css的繼承、層疊和特殊性

css格式化排版——文字排版

css盒模型——布局

**css布局型別**

css**縮寫，占用更少的頻寬

單位和值

css樣式設定小技巧

垂直居中

**改變display型別

**css3 flex布局**

flex彈性盒子布局

==子級屬性==

css官方參考手冊

這裡文字是紅色

.box

選擇器

.類選器名稱

#setgreen

.firt>span

.first span

偽類選擇符

//最常用，其他存在相容性問題

a:hover

分組選擇符

-為多個標籤同時設定同一種樣式，如下：

h1,span

border:1px solid red;

p

p//將會顯示上面那個p，而忽略層疊規則

body

body

p span

p a

.oldprice

h1

h1

主要問題： padding/ border content-box 平時普通盒子模型，padding，border，盒子會變大，向外擴充套件 border-box 盒子模型，padding，border，盒子模型不變大，向內擴充套件 calc(公式): //注意：+-*/ 具體如下 clac(100px-20px) ×

clac(100px - 20px) √

display:flex

新增瀏覽器字首：-webkit

(真實工作中通常使用postcss外掛程式完成)

父級身上的其他屬性：

justify-content: 子元素的水平排列方式 √

`center ` 居中 `space-betwwen` 兩端對齊 `space-around` 牽手對齊 `flex-start` 居左

`flex-end` 居右

align-items：子元素垂直排列 √

`center` 居中 `flex-start` 開始

`flex-end` 底部

align-content：多行同時選擇垂直排列

`center`                          居中...

flex-direction：排列方式 √

`row` 橫向排列（預設） `row-reverse` 橫向翻過排列 `column` 縱向排列

`column-reverse` 縱向翻過排列

flex-wrap：子元素是否顯示在一行 √

`no wrap` 不換行（預設）

`wrap` 換行

flex-grow :混合輸入

flex:11是乙個係數 √

align-selt用來覆蓋父級align-items垂直排列

flex-grow:1定義子元素放大比例

order:規定子元素順序

CSS 參考手冊

css 各個屬性詳情，可參看 1 white space 屬性設定如何處理元素內的空白。這個屬性宣告建立布局過程中如何處理元素中的空白符。可能的值 normal 預設，忽略空白符，忽略原有換行符。自動換行，不會有滾動條 pre 保留空白符保留換行符，即保留原有格式 nowrap 忽略空白符，文字不...

jQuery 參考手冊 CSS 操作

previous page next page jquery css 操作函式下面列出的這些方法設定或返回元素的 css 相關屬性。css 屬性描述 css 設定或返回匹配元素的樣式屬性。height 設定或返回匹配元素的高度。offset 返回第乙個匹配元素相對於文件的位置。offsetpar...

CSS 選擇器參考手冊

選擇器描述 attribute 用於選取帶有指定屬性的元素。attribute value 用於選取帶有指定屬性和值的元素。attribute value 用於選取屬性值中包含指定詞彙的元素。attribute value 用於選取帶有以指定值開頭的屬性值的元素，該值必須是整個單詞。attribut...

CSS參考手冊自用版（新增flex布局）

CSS 參考手冊

jQuery 參考手冊 CSS 操作

CSS 選擇器參考手冊

相關推薦