css的一些基本屬性

2021-10-07 20:25:45 字數 2096 閱讀 8208

css屬性的名稱是不會改變的,能改變的只有屬性的取值。

width 寬度

height 高度

color 字型顏色

background-color 背景顏色

text-align 字型格式(居中,靠左,靠右)

line-height 字型上下(靠上,靠下,垂直居中)

margin 設定所有外邊距屬性。該屬性可以有 1 到 4 個值。

/例子 1

margin:10px 5px 15px 20px;

上外邊距是 10px

右外邊距是 5px

下外邊距是 15px

左外邊距是 20px

例子 2

margin:10px 5px 15px;

上外邊距是 10px

右外邊距和左外邊距是 5px

下外邊距是 15px

例子 3

margin:10px 5px;

上外邊距和下外邊距是 10px

右外邊距和左外邊距是 5px

例子 4

margin:10px;

所有 4 個外邊距都是 10px/

padding 設定所有內邊距屬性。

font-size 字型大小 (單位為畫素)

border 設定邊框

display 元素應該生成的框的型別

/*flex 彈性布局

1.設定div為彈性盒子布局

display:flex

2.設定子元素的排列方向

flex-direction

3.設定子元素在一行顯示不下後是否換行或壓縮自己大小

4.設定主軸的對齊方式

justify-content

5.設定交叉軸的對齊方式

align-items

6.設定子元素的佔比

flex-grow

/border-radius 設定四個 border--radius 屬性,該屬性允許你為元素新增圓角邊框。單位px。

/flex容器指的是父元素

以下屬性寫在父元素的選擇器裡面

display:flex

下面所有屬性使用的前提是先寫了display:flex,將父元素改為flex元素,乙個div既可以成為它的子元素的容器也可以成為它的父元素的子專案,因為div是可以無線巢狀的。

flex-wrap:nowrap|warp|warp-reverse

1.nowrap是預設值,表示當父元素一行顯示不下所有子元素時,子元素不會自動換行,會壓扁自己

2.wrap與nowrap相反,子元素會自動換行

3.wrap-reverse 子元素會自動換行,且行會顛倒

4.flex-direction:row|row-reverse|colume|colume-reverse

row是預設值,表示子元素會按行進行排列

row-reverse表示子元素按行排列,但是會顛倒

column表示子元素按列排列

column-reverse表示子元素按列排列,但是子元素會顛倒

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

flex-start 表示子元素沿著主軸的起點對齊

flex-end 表示子元素沿著主軸的結束點對齊

center 表示子元素沿著主軸居中對齊

space-around 表示所有子元素外邊距等距

space-between 表示第乙個子元素靠起點對齊,最後乙個元素靠著結束點對齊,中間的子元素外邊距等距

交叉軸對齊方式

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

1.stretch預設值,子元素的高度會拉伸跟父元素一樣高

2.flex-start,子元素沿著交叉軸起點排列

3.flex-end,子元素沿著交叉軸的結束點排列

4.center,子元素在交叉軸居中排列

5.baseline,所有子元素沿著最後一段文字的底線排列/

text-decoration 設定文字位置(靠左,靠右,居中)

font-weight 設定字型粗細,bold為加粗(常用)

SlidingMenu的一些基本屬性

slidingmenu 常用屬性介紹 menu.setmode slidingmenu.left 設定左滑選單 menu.settouchmodeabove slidingmenu.touchmode fullscreen 設定滑動的螢幕範圍,該設定為全屏區域都可以滑動 menu.setshadow...

CSS基本屬性

一 visibility屬性 display none 隱藏元素 visibility 顯示 隱藏的 取值 1 visible 預設的可見的 2 hidden 隱藏 依然佔據頁面空間 3 collapse 使用在 元素上 刪除一行和一列的時候不影響 的整體布局 diplay 和 visibility...

CSS基本屬性

background 背景 background color 背景色 background image 背景 background repeat 背景圖平鋪方式 簡寫 background gray url xx.png no repeat 背景色,背景,平鋪方式 font 字型 font styl...