HTMLCSS學習筆記(二十六) CSS3彈性盒

2021-10-09 06:46:48 字數 3126 閱讀 8605

box-sizing 屬性允許您以特定的方式定義匹配某個區域的特定元素。

語法:box-sizing: content-box|border-box|inherit;

屬性值描述

content-box

這是由 css2.1 規定的寬度高度行為。

寬度和高度分別應用到元素的內容框。

在寬度和高度之外繪製元素的內邊距和邊框。

border-box

為元素設定的寬度和高度決定了元素的邊框盒。

就是說,為元素指定的任何內邊距和邊框都將在已設定的寬度和高度內進行繪製。

通過從已設定的寬度和高度分別減去邊框和內邊距才能得到內容的寬度和高度。

inherit

規定應從父元素繼承 box-sizing 屬性的值。

可以看到,在標準盒模型下,width和height是內容區域即content的width和height。

在標準模式下:

總寬度= width + margin(左右) + padding(左右) + border(左右)

總高度= height + margin(上下) + padding(上下) + border(上下)

而ie盒模型或怪異盒模型顯而易見的區別就是,width和height除了content區域外,還包含padding和border。

總寬度= width + margin(左右)(即width已經包含了padding和border值)

總高度= height + margin(上下)(即height已經包含了padding和border值)

當設定為box-sizing:content-box時,將採用標準模式解析計算,也是預設模式;

當設定為box-sizing:border-box時,將採用怪異模式解析計算;

彈性盒子是 css3 的一種新的布局模式。

css3 彈性盒( flexible box 或 flexbox),是一種當頁面需要適應不同的螢幕大小以及裝置型別時確保元素擁有恰當的行為的布局方式。

引入彈性盒布局模型的目的是提供一種更加有效的方式來對乙個容器中的子元素進行排列、對齊和分配空白空間。

注意:彈性容器外及彈性子元素內是正常渲染的。彈性盒子只定義了彈性子元素如何在彈性容器內布局。

彈性子元素通常在彈性盒子內一行顯示。預設情況每個容器只有一行。

flex容器:採用 flex 布局的元素的父元素;

flex專案:採用 flex 布局的元素的父元素的子元素;

容器預設存在兩根軸:水平的主軸(main axis)和垂直的交叉軸(cross axis)。主軸的開始位置(與邊框的交叉點)叫做main start,結束位置叫做main end;交叉軸的開始位置叫做cross start,結束位置叫做cross end。

專案預設沿主軸排列。單個專案佔據的主軸空間叫做main size,佔據的交叉軸空間叫做cross size。

display:flex、inline-flex——注意,設為 flex 布局以後,子元素的float、clear和vertical-align屬性將失效。

flex-direction屬性 決定主軸的方向(即專案的排列方向)——flex-direction: row(橫向從左到右排列(左對齊),預設的排列方式) | row-reverse(反轉橫向排列(右對齊,從後往前排,最後一項排在最前面)) | column(縱向排列) | column-reverse(反轉縱向排列,從後往前排,最後一項排在最上面)

flex-wrap屬性,定義子元素是否換行顯示——flex-wrap: nowrap | wrap | wrap-reverse

flex-flow ——flex-flow屬性是flex-direction屬性和flex-wrap屬性的簡寫形式,預設值為row nowrap

justify-content屬性 定義了專案在主軸上的對齊方式。——justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly;

align-items屬性定義專案在交叉軸上(側軸)如何對齊。——align-items: flex-start | flex-end | center | baseline | stretch(預設值);

align-content屬性定義了多根軸線**(行與行之間)的對齊方式**。對於單行子元素,該屬性不起作用。

- align-content: flex-start | flex-end | center | space-between | space-around | stretch;

- align-content在側軸上執行樣式的時候,會把預設的間距給合併。對於單行子元素,該屬性不起作用align-self屬性

- auto 預設值。元素繼承了它的父容器的 align-items 屬性。如果沒有父容器則為 「stretch」。

- stretch 元素被拉伸以適應容器。

- center 元素位於容器的中心。

- flex-start 元素位於容器的開頭。

- flex-end 元素位於容器的結尾。

order 屬性

- number排序優先順序,數字越大越往後排,預設為0,支援負數。注意與z-index進行比較flex屬性

- 復合屬性。設定或檢索彈性盒模型物件的子元素如何分配空間

- flex-grow 乙個數字,規定專案將相對於其他靈活的專案進行擴充套件的量(放大的比例),預設為0,即如果存在剩餘空間也不放大。

- flex-shrink 乙個數字,規定專案將相對於其他靈活的專案進行收縮的量(縮小比例),預設為1,即如果空間不足該專案將縮小。

- flex-basis 專案的長度。

Swift學習筆記(二十六) 擴充套件

1.擴充套件的作用 1 使用擴充套件新增屬性 2 使用擴充套件新增方法,可變方法 3 使用擴充套件新增構造器 4 使用擴充套件新增下標 5 使用擴充套件新增巢狀型別 2.擴充套件的特性 1 使用擴充套件新增屬性,方法,可變方法,構造器,下標,巢狀型別 2 可以使乙個已有型別符合乙個或者多個協議 3 ...

學習二十六 雙快取技術

在 react 中,dom 的更新採用可雙快取技術,雙快取技術致力於快速的 dom 更新。什麼是雙快取?舉個例子,使用 canvas 繪製動畫時,在繪製每一幀前都會清除上一幀的畫面,清除上一幀需要花費時間,如果當前幀畫面計算量又比較大,又需要花費比較長的時間,這就導致上一幀清除到下一幀顯示中間會有較...

二十六 遮蔽中斷

1.6410和210採用向量中斷,由硬體執行。有兩組中斷源,相應的控制暫存器也有多個 2.6410和210使能和遮蔽是分開的暫存器 3.遮蔽控制暫存器的讀寫操作從而遮蔽中斷,都是寫入全1 4.6410的 遮蔽中斷,要操作兩個暫存器,目的是將使能中斷暫存器的相關位清除 define vic0inten...