一些css屬性的理解和運用。

2022-08-09 16:45:21 字數 1569 閱讀 6567

1,彈性容器通過設定 display 屬性的值為 flex 或 inline-flex將其定義為彈性容器

常用flex來編寫盒子橫向分布;

flex-direction屬性指定了彈性子元素在父容器中的位置。

flex

-direction

:row

|row

-reverse

|column

|column

-reverse

內容對齊(justify-content)屬性應用在彈性容器上,把彈性項沿著彈性容器的主軸線(main axis)對齊。

justify-content:flex-start |flex-end|center |space-between |space-around

效果圖:

align-items設定或檢索彈性盒子元素在側軸(縱軸)方向上的對齊方式。

align-items:flex-start |flex-end|center |baseline |stretch

flex-wrap屬性用於指定彈性盒子的子元素換行方式、

flex-wrap:nowrap|wrap|wrap-reverse|initial|inherit;

align-content屬性用於修改flex-wrap屬性的行為。類似於align-items, 但它不是設定彈性子元素的對齊,而是設定各個行的對齊。

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

order:

用整數值來定義排列順序,數值小的排在前面。可以為負值。

在父級元素定義display: flex;

在子級元素新增

margin:

auto屬性

align-self屬性用於設定彈性元素自身在側軸(縱軸)方向上的對齊方式。

align-self:auto|flex-start |flex-end|center |baseline |stretch

flex屬性用於指定彈性子元素如何分配空間。

flex:auto|initial |none |inherit |[flex-grow ]||[flex-shrink ]||[flex-basis ]

可以理解為 子元素在父級元素中佔的份數!!!

一些css的屬性

一些css的屬性 使整個頁面的元素都沒有頁邊距 margin 與填充距離 padding body 使整個頁面居中顯示 padding 12px 元件能與邊緣的距離 moz border radius 6px 6px 6px 6px 圓角 float left div同行顯示 margin 30px...

css的一些屬性

1 文字的水平居中 css實現單行文字水平居中 text align center 2 塊元素居中 保證margin left和margin right都為auto,就可以保證塊元素水平居中 如果要是使用margin 0 auto來實現塊元素居中,就要 指定這個元素的寬度 3 行內元素 使用text...

vertical align屬性的一些理解與認識

在工作上遇到這個問題,只知道vertical align屬性設定元素的對齊方式,所以自己有必要深入理解vertical align作用,順便整理出來。先了解一下vertical align一些屬性 值描述 baseline 預設。元素放置在父元素的基線上。sub垂直對齊文字的下標。super 垂直對...