css基礎知識,溫故知新1

2021-08-30 21:31:14 字數 2246 閱讀 9467

border常用的屬性有4個;

1、寬度:border-width

2、樣式:border-stye dotted(點) dashed(曲線) solid(實線) none(沒邊框)

3、顏色:border-color

4、圓角:border-radius

小技巧可以用border來實現小三角型,梯形等圖案;

示例:

有5種定位模式

*static:預設值,及沒有定位,不受left,right,top,bottom的影響

*relative:相對布局(參照原位置),受left,right,top,bottom的影響

*absolute:絕對定位,經常以relative元素為父容器,不佔空間,會出現重疊;

*fixed:固定位置,不受滑動視窗滑動影響

*sticky:可設定left,right,top,bottom之一作為閾值;

達到閾值前表現為relative,達到閾值後表現為fixed;

具體效果可看菜鳥教程。

應用:做滑動選單等;

當有多個背景圖,屬性之間用','分隔;

文字的豎直對齊方式 vertical-align作用物件不為text,是img...

文字修飾 text-decoration

指定文字第一行縮排 text-indent:50px;

設定行間距 line-height 可用於文字的豎直居中

設定單詞間距/字元間距 word-space/letter-space

控制文字的書寫方向 direction: rtl;

unicode-bidi 屬性與 direction 屬性一起使用,來實現文字的倒寫

css3新增屬性:

background-size:設定背景圖大小;可以設定畫素大小,也可以用百分數;

background-origin,用於指定背景影象顯示的位置;

content-box;在內容部分顯示;

padding-box;在內邊距顯示;

margin-box;在外邊距顯示;

background-clip,用於指定背景影象開始顯示的位置;

content-box;從內容部分開始;

padding-box;從內邊距開始;

margin-box;從外邊距開始;

*語法:transform:none | translate()……

translate(x,y)方法,以x,y軸為參考進行平移操作;px

rotate(x)方法,在乙個給定讀書順時針旋轉,可以為負值;deg

scale(x,y)方法,規模的變化,寬度變為x倍,高度變為y倍;

skew(x,y),分別表示x軸,y軸傾斜的角度;

(類似於極座標,使用後以該座標係為標準)

上述方法均可以單獨對乙個座標軸使用;(例:scale y());

matrix()方法。將所有的2d方法合併成乙個;

元素從一種樣式改變為另一種樣式的效果

在@keyframes裡定義動畫

把動畫繫結到乙個選擇器,否則不會有任何效果;

@keyframes myfirst

to //from,to和0%,100%對應。常用下面選擇器

/* 0%

25%

50%

100%

*/}div

常用屬性(其他屬性可查文件)

屬性描述

column-count

指定元素應該被分割的列數。

column-fill

指定如何填充列

column-gap

指定列與列之間的間隙

column-rule

所有 column-rule-* 屬性的簡寫

column-rule-color

指定兩列間邊框的顏色

column-rule-style

指定兩列間邊框的樣式

column-rule-width

指定兩列間邊框的厚度

column-span

指定元素要跨越多少列

column-width

指定列的寬度

columns

設定 column-width 和 column-count 的簡寫

滴水穿石,不是力量大,而是功夫深

溫故知新 css基礎

css練習 專案參考至mdn 點此檢視效果哦 任務介紹 為整體卡片的容器提供乙個固定的寬 高,背景顏色,邊框,以及邊框圓角等等。為header提供乙個漸變的背景顏色,從更暗到更亮,加上圓角,配合在卡片容器上設定的圓角。為footer提供乙個漸變的背景顏色,從更亮到更暗,加上圓角,配合在卡片容器上設定...

溫故知新 css布局

本文針對多種css布局進行解析 github 浮動 float left 將元素浮動到左側。right 將元素浮動到右側 none 預設 不浮動 inherit 繼承父元素的浮動屬性 定位 position static 預設 靜態定位 將元素放在文件布局流的預設位置 relative 相對定位 允...

css溫故知新 彈性盒子

css3 彈性盒 flexible box 或 flexbox 是一種當頁面需要適應不同的螢幕大小以及裝置型別時確保元素擁有恰當的行為的布局方式。通過display flex 來指定盒子型別 彈性父元素屬性 flex direction 指定了彈性子元素在父容器中的位置。flex direction...