css3盒模型新知識點 Fllexbox

2021-07-05 09:19:33 字數 593 閱讀 7146

在工作中遇到了新的css3布局方法,突然覺得什麼浮動和定位都弱爆了,乙個好的前端工程師應該是頁面中都沒什麼定位的,我只是菜鳥,有幸遇到乙個前端大牛的主管。分享下自己掌握的內容。

flexbox是布局模組,不是乙個簡單的屬性,他包含父級元素和子元素的屬性。

flexbox主要是可以讓你的布局根據瀏覽器的大小便不安進行自動伸縮。

建立flex容器

flexbox布局首先要建立乙個父級元素,給父級元素設定上display:box

然後建立他的子集元素設定上flex

四個div平均水平分布的**例項

水平或者垂直分布語法

box-orient定義分布的座標軸:vertical和horizional。這兩個值分別定義盒子垂直顯示和水平顯示:

.container

box-orient: horizontal|vertical|inline-axis|block-axis|inherit;

今天就到這裡,後期會一點點的補上這個盒模型的所有屬性,我是菜鳥,慢慢成長。

C 新知識點筆記

定義了 cin cout cerr 和 clog 物件,分別對應於標準輸入流 標準輸出流 非緩衝標準錯誤流和緩衝標準錯誤流。cout value of str is str endl cin name signed unsigned 在計算機中,可以區分正負型別的數,成為 有符號數 signed 無...

css3 新知識(張鑫旭學)

1.新增濾鏡 給新增濾鏡,背景圖是加的,然後給mix blend mode screen 就可以實現濾鏡 給新增filter hue rotate 180deg 可以使變色 2.切換轉場動畫 in keyframes clipcirclein 100 使用的是clip path中的circle方法,...

HTML5新知識點

html5 中的新標籤 標籤描述 定義注釋。定義文件型別。定義錨。定義縮寫。定義只取首字母的縮寫。定義文件作者或擁有者的聯絡資訊。定義影象對映內部的區域。定義文章。定義頁面內容之外的內容。定義聲音內容。定義粗體字。定義頁面中所有鏈結的預設位址或缺省目標。不贊成使用。定義頁面中文字的預設字型 顏色或尺...