溫故知新 css布局

2021-09-25 23:02:47 字數 1260 閱讀 6230

本文針對多種css布局進行解析

**:github

- 浮動(float)

- left 將元素浮動到左側。

- right 將元素浮動到右側

- none(預設) 不浮動

- inherit 繼承父元素的浮動屬性

- 定位(position)

- static(預設) 靜態定位: 將元素放在文件布局流的預設位置

- relative 相對定位: 允許我們相對元素在正常的文件流中的位置移動它

- absolute 絕對定位: 將元素完全從頁面的正常布局流中移出

- fixed 固定定位: 與絕對定位非常類似,除了它是將乙個元素相對瀏覽器視口固定,而不是相對另外乙個元素

- sticky 粘性定位: 粘性定位可以被認為是相對定位和固定定位的混合。元素在跨越特定閾值前為相對定位,之後為固定定位

- **

- 彈性盒子

- flex-direction 它可以指定主軸的方向

- row 橫向

- row-reverse 橫向,排列方向相反

- column 縱向

- column-reverse 縱向,排列方向相反

- flex-wrap 換行

- nowrap flex的元素被擺放到到一行,這可能導致溢位 flex 容器

- wrap flex元素被打斷到多個行中

- wrap-reverse 和 wrap 的行為一樣,但方向相反

- flex

1. flex-grow 無單位比例

2. flex-basis 最小值

- align-items 控制 flex 項在交叉軸上的位置

- stretch(預設) 使所有 flex 項沿著交叉軸的方向拉伸以填充父容器

- center 保持其原有的高度,但是會在交叉軸居中

- justify-content 控制 flex 項在主軸上的位置

- flex-start(預設) 使所有 flex 項都位於主軸的開始處

- center 使 flex 項在主軸居中

- space-around 它會使所有 flex 項沿著主軸均勻地分布,在任意一端都會留有一點空間

- space-between 和 space-around 非常相似,只是它不會在兩端留下任何空間

- 網格

- grid-gap 設定網格的間隔

- grid-template-columns 基於 網格列 的維度,去定義網格線的名稱和網格軌道的尺寸大小。

溫故知新 css基礎

css練習 專案參考至mdn 點此檢視效果哦 任務介紹 為整體卡片的容器提供乙個固定的寬 高,背景顏色,邊框,以及邊框圓角等等。為header提供乙個漸變的背景顏色,從更暗到更亮,加上圓角,配合在卡片容器上設定的圓角。為footer提供乙個漸變的背景顏色,從更亮到更暗,加上圓角,配合在卡片容器上設定...

css溫故知新 彈性盒子

css3 彈性盒 flexible box 或 flexbox 是一種當頁面需要適應不同的螢幕大小以及裝置型別時確保元素擁有恰當的行為的布局方式。通過display flex 來指定盒子型別 彈性父元素屬性 flex direction 指定了彈性子元素在父容器中的位置。flex direction...

溫故知新 ROWTYPE

rowtype 相當於資料庫表裡的一行資料記錄的變數型別。declare 定義乙個emp表裡的一行記錄的資料型別的變數 v emp emp rowtype begin 查詢的emp表裡的資料列必須與v emp的列順序以及個數保持一致 select empno,ename,job,mgr,hireda...