2017 7 27 學習心得 css3第四天

2021-08-04 11:11:51 字數 1323 閱讀 2439

1、伸縮布局

對塊級元素布局變得十分靈活

設定伸縮盒子:

display:flex

x軸是主軸,預設從左到右,側軸從上到下

1)調整主軸方向:

flex-direction:

row 水平方向

reverse-row 反轉

column 垂直方向

reverse-column 反轉列

2)主軸的對齊方式

jusify-content:

flex-start 起點對齊

flex-end、 終點對齊

center    中間對齊

space-around、 環繞,在父盒子平分

space-between  兩端對齊

3)側軸對齊方式

alig-items:

flex-start、 起點對齊,預設和baseline基線一樣

flex-end、 終點對齊

center    中間對齊

strethc:  拉伸;要把盒子高度釋放掉 height:auto;

4)伸縮比例

flex:n;把盒子按比例分配

2、web字型

1)字型格式

不同瀏覽器所支援的字型格式是不一樣的

1、turetpe(.ttf)格式

.ttf字型是windows和mac的最常見的字型,是一種raw格式,支援這種字型的瀏覽器有ie9+、firefox3.5+、chrome4+、safari3+、opera10+、ios mobile、safari4.2+;

2、opentype(.otf)格式

.otf字型被認為是一種原始的字型格式,其內建在turetype的基礎上,支援這種字型的瀏覽器有firefox3.5+、chrome4.0+、safari3.1+、opera10.0+、ios mobile、safari4.2+;

3、web open font format(.woff)格式

woff字型是web字型中最佳格式,他是乙個開放的truetype/opentype的壓縮版本,同時也支援元資料報的分離,支援這種字型的瀏覽器有ie9+、firefox3.5+、chrome6+、safari3.6+、opera11.1+;

4、embedded open type(.eot格式

.eot字型是ie專用字型,可以從truetype建立此格式字型,支援這種字型的瀏覽器有ie4+;

5、svg(.svg)格式

.svg字型是基於svg字型渲染的一種格式,支援這種字型的瀏覽器有chrome4+、safari3.1+、opera10.0+、ios mobile safari3.2+;

2)字型圖示

2017 7 23 學習心得 css3

1 顏色 透明 opacity 父元素透明,子元素也會透明 transparent 完全透明 2 rgba hsla backgroud color rgba 0,155,255 backgroud color hsla 100,50 50 1 rgba red green blue 0 255 a...

CSS學習心得

三 網頁結果呈現 一條css樣式規則由兩個主要的部分構成 選擇器,以 包裹的一條或多條宣告 這條規則表明,頁面中所有的一級標題都顯示為藍色,字型大小為12像數。說明 1 選擇器是您需要改變樣式的物件 上圖的規則就一級標題生效 2 每條宣告由乙個屬性和乙個值組成。無論是一條或多條宣告,都需要用 包裹,...

CSS3 HTML5學習心得

1.字串 str.charat 字串索引 若索引超過字串長度,返回空。str.indexof 某字元 找到這個字元順序第一次出現的索引。str.lastindexof 某字元 找到某字串倒序最後出現的索引,若沒有返回 1。str.uppercase 將str轉換為大寫。str.lowercase 將...