css使用總結

最近一直在做專案的頁面樣式，做了一些總結

（***：常用，**：一般 ，^：較少)

首先從基礎的開始，

文字：*** text-align：文字對齊。（left/right/center) 

^ text-transform:lowercase。文字轉換屬性是用來指定在乙個文字中的大寫和小寫字母。可用於所有字句變成大寫或小寫字母，或每個單詞的首字母大寫。

** line-height:設定行高。行高是指上下文本行的基線間的垂直距離，當文字的line-height設定為父容器的高度就可以實現文字垂直居中（我在實際專案不會使用行高哎，一般都是通過文字對齊）

背景：*** background-color和background：

描述元素的背景，其中color為backgroud預設的第乙個屬性值。

no-repeat,背景影象不平鋪。

字型：大小，顏色，粗細

*** font-size,color,font-weight( 定義由粗到細的字元,100到900。400 等同於 normal，而 700 等同於 bold。)

字型的設定是很常見的，一般專案會在common.less檔案中設定全域性的一些字型樣式.字型的粗細常用的就是400和bold

列表：ul:無序列表

ol：有序列表

** list-style-type屬性指定列表項標記的型別—— disc，預設為實心圓。none是無標記

邊框：!! border-color單獨使用是不起作用的，必須得先使用border-style來設定邊框樣式。

*** boder:width style color（預設順序）

(style)*** solid：實線邊框

顯示隱藏：隱藏元素 - display:none或visibility:hidden

visibility隱藏元素但仍占用空間。display隱藏元素並且不占用空間。

塊級元素和行內元素

塊元素是乙個元素，占用了全部寬度，在前後都是換行符。（乙個元素一行）如：

內聯元素只需要必要的寬度，不強制換行。（不會換行）如:

diaplay:inline/block.可以變更元素的顯示型別

******** css定位（重點）

position：

static(預設，無定位）

fixed:相對於瀏覽器， 視窗是滾動的它也不會移動：

relative:相對其正常位置（ 相對定位元素經常被用來作為絕對定位元素的容器塊。）

absolute：相對最近的position父元素（ absolute 定位使元素的位置與文件流無關，因此不佔據空間。）一般用於是元素左右對齊

//div2在div1的左下角

.div1}

*** overflow:auto/scroll  內容超出時就會顯示滾動條

css3

** 圓角實現：border-radius設定四個邊框的半徑 ，也可以單獨指定，如border-top-left-radius

** 漸變實現：background-image: linear-gradient(direction, color-stop1, color-stop2, ...);

例如：從左上角開始（到右下角）的線性漸變。起點是紅色，慢慢過渡到黃色：

background-image: linear-gradient(to bottom right, red, yellow);

********flex布局（重點）：

display:flex

flex-direction：row/column 主軸的方向

justify-content:主軸對齊

flex-start | flex-end | center | 起始|結尾|中間|

align-items ：交叉軸對齊

flex-wrap 屬性用於指定彈性盒子的子元素換行方式， 預設， 彈性容器為單行

css3 transition 過渡使用總結

1.案例1 transition 2s 我是top aaa 2.綜合寫法 過渡時間 延遲時間 過渡樣式 過渡函式第二個預設是延遲時間 transition 3s 3s width linear,0s 1s height ease in out 3.分開寫 預設是 all width height 不...

CSS學習總結

1.使用外部 extenal 樣式表，相對於內嵌 inline 和內部式 internal 的，有以下優點 樣式 可以復用。乙個外部css檔案，可以被很多網頁共用。便於修改。如果要修改樣式，只需要修改css檔案，而不需要修改每個網頁。提高網頁顯示的速度。如果樣式寫在網頁裡，會降低網頁顯示的速度，如果...

常用css總結

1 只有下劃線的文字框 input style border 0 border bottom 1 solid black background 2 軟體序列號式的輸入框 script for t event onkeyup if value.length 3 document.all event.s...