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 將...