11.6 延遲時間animation-delay屬性
一、animation-delay屬性 在CSS3中,我們可以使用animation-delay屬性來定義動畫播放的延遲時間。其中,
11.7 播放次數animation-iteration-count屬性
一、animation-iteration-count屬性 在CSS3中,我們可以使用animation-iteration-cou
11.8 播放方向animation-direction屬性
一、animation-direction屬性 在CSS3中,我們可以使用animation-direction屬性定義動畫的播放方
11.9 動畫播放狀態animation-play-state屬性
一、animation-play-state屬性 在CSS3中,我們可以使用animation-play-state屬性來定義動畫的
11.10 時間外屬性animation-fill-mode
一、animation-fill-mode屬性 在CSS3中,我們可以使用animation-fill-mode屬性定義在動畫開始之
11.11 本章總結
在CSS3中,動畫效果使用animation屬性來實現。animation屬性和transition屬性功能是相同的,都是通過改變元素的屬性值來實現動畫效果。但是這兩者又
12.1 CSS3多列布局簡介
一、CSS3多列布局 在CSS3推出之前,如果想要設計類似報紙那樣的多列布局,一般有2種方式可以實現:(1)浮動布局;(2)定位布局
12.2 定義列數column-count屬性
一、column-count屬性 在CSS3的多列布局中,我們可以使用column-count屬性指定多列布局的列數,而不需要通過列
12.3 定義列寬column-width屬性
一、column-width屬性 在CSS3的多列布局中,我們可以使用column-width屬性定義多列布局中每一列的寬度。
12.4 列間距column-gap屬性
一、column-gap屬性 在CSS3多列布局中,我們可以使用column-gap屬性定義列與列之間的間距(列間距)。
12.5 列邊框column-rule屬性
一、column-rule屬性 在CSS3的多列布局中,我們可以使用column-rule屬性來定義列與列之間的邊框樣式,其中邊框樣
12.6 跨列column-span屬性
一、column-span屬性 跨列,類似於我們在HTML入門教程中學過的合並列colspan屬性 。在CSS3多列布局時,有時候我
12.7 本章總結
使用CSS3多列布局,可以讓我們輕松地實現類似報紙、雜志那樣的多列布局,而且適應性非常好。
13.1 彈性盒子模型簡介
一、彈性盒子模型 為了解決傳統布局的“死板”以及不足,CSS3新增了新型的彈性盒子模型。通過彈性盒子模型,我們可以輕松地創建自適應浏
13.2 盒子的布局方向box-orient屬性
一、box-orient屬性 在CSS3彈性盒子模型中,我們可以使用box-orient屬性定義彈性盒子內部中“子元素”的排列方向。
13.3 盒子的布局順序box-direction屬性
一、box-direction屬性 在CSS3彈性盒子模型中,我們可以使用box-direction屬性來設置彈性盒子內部中“子元素
13.4 盒子的布局位置box-ordinal-group屬性
一、box-ordinal-group屬性 從上一節,我們知道box-direction屬性可以設置彈性盒子內部“子元素”的排列順序
13.5 盒子的彈性空間box-flex屬性
一、box-flex屬性 在CSS3彈性盒子模型中,我們可以使用box-flex屬性來定義彈性盒子內部的子元素是否具有彈性空間。如果
13.6 盒子內部對齊box-pack屬性與box-align屬性
當彈性元素與非彈性元素混合排版時,有可能會出現所有子元素的尺寸大於或小於盒子的尺寸,從而出現盒子空間不足或者富余的情況。這時就需要一種方法來管理盒子的空間。如果子元素的總
13.7 本章總結
在CSS3中,使用彈性盒子模型可以輕松實現自適應布局以及響應式布局。 彈性盒子模型屬