CSS頁面

開發工具與關鍵技術:MVC/C#
作者:張文靜
撰寫時間:2019/4/7
1、pt:指絕對長度
即px:pixel,像素,屏幕上顯示的最小單位,主要用於網頁設計,同樣px的元素在不同分辨率的顯示器中會呈現爲不同的大小;
pt:point,是一個標準的長度單位(一般音譯爲磅),1pt=1/72英寸,即1px=0.75pt,主要用於印刷業,同樣pt的元素在不同的打印機中打印出來大小都是一樣的。見截圖
在這裏插入圖片描述
2、box-sizing 屬性允許您以特定的方式定義匹配某個區域的特定元素。它的語法包含box-sizing:content-box和box-sizing:border-box和box-sizing:inherit,即
box-sizing:content-box(規定寬度和高度,寬度和高度分別應用到內容框,在元素之外繪製內邊距和外邊距)
box-sizing:border-box(爲元素設定的寬度和高度決定了元素的邊框盒,也就是說,爲元素指定的任何內邊距和邊框都將在已設定的寬度和高度內進行繪製。通過從已設定的寬度和高度分別減去邊框和內邊距才能得到內容的寬度和高度。)
box-sizing:inherit(規定應從父元素繼承box-sizing屬性的值),見截圖
在這裏插入圖片描述
3、rem 指em ,即1rem=16px ,em:即%,在CSS中,1em=100%,是一個比率,結合CSS繼承關係使用,具有靈活性。見截圖
在這裏插入圖片描述
4、max-width 定義元素的最大寬度,即
max-width:none(默認,定義元素的最大寬度沒有限制 )
max-width:length(定義元素的最大寬度值 )
max-width:%(定義基於包含它的塊級對象的百分比最大寬度)
max-width:inherit(規定應該從父元素繼承max-width屬性的值),見截圖
在這裏插入圖片描述
5、text-align 文本對齊方式,包括
text-align:conter (文本排列到中間),
text-align:left(文本排列到左邊),
text-align:right (文本排列到右邊),
text-align:justify (實現兩端對齊文本),
text-align:inherit(規定應該從父元素繼承text-align屬性的值),見截圖
在這裏插入圖片描述
6、margin:外邊距,外邊距屬性,分別設置上、右、下、左外邊距,即margin-top、margin-right、margin-bottom、margin-left,見截圖
在這裏插入圖片描述
7、padding:內邊距 ,內邊距屬性,分別設置上、右、下、左內邊距,即padding-top、padding-right、padding-bottom、padding-left,見截圖
在這裏插入圖片描述
8、font-weight 該屬性設置文本的粗細,值分別有
font-weight:normal(默認值,定義標準的字符)、
font-weight:bold(定義粗體字符)、
font-weight:bolder(定義更粗的字符)、
font-weight:lightter(定義更細的字符)、
當font-weight:normal、font-weight:bold見截圖圖1和圖2;當font-weight:bolder、font-weight:lightter見截圖圖3和圖4,
在這裏插入圖片描述
9、border 邊框,即四種邊框,分別是
border-left(設置左邊框,一般設置左邊框樣式使用)
border-right(設置右邊框,一般設置右邊框樣式使用)
border-top(設置上邊框,一般設置上邊框樣式使用)
border-bottom(設置下邊框,一般設置下邊框樣式使用),見截圖
在這裏插入圖片描述
10、display:flex 佈局方式,flex是Flexible Box的縮寫,意思是”彈性佈局”,用來盒狀模型提供最大的靈活性,見截圖
在這裏插入圖片描述
11、nth-child(n)選擇器的意思, :nth-child選擇器匹配屬於其父元素的第n個子元素,不論元素的類型。n可以是數字、關鍵字、或公式。Odd和Event是可用匹配下標是奇數和偶數的子元素的關鍵詞(第一個子元素是下標1),使用公式(an+b)。描述:週期的長度,n是計數器(從0開始),b是偏移量。CSS中 “>” 號,表示css3特有的選擇器,即當A>B表示選擇A元素的所有子B元素。與A B的區別在與,A B選擇所有後代元素,而A>B只選擇一代。列子:
first-child表示選擇列表中的第一個標籤
last-child表示選擇列表中的最後一個標籤
nth-child(3) 表示選擇列表中的第3個標籤
nth-child(2n) 這個表示選擇列表中的偶數標籤,即選擇 第2、第4、第6…… 標籤
nth-child(2n-1) 這個表示選擇列表中的奇數標籤,即選擇 第1、第3、第5、第7……標籤
nth-child(n+3) 這個表示選擇列表中的標籤從第3個開始到最後。
nth-child(-n+3) 這個表示選擇列表中的標籤從0到3,即小於3的標籤。
nth-child(3n)表示選擇列表的標籤從3的倍數開始
nth-last-child(3) 這個表示選擇列表中的倒數第3個標籤。
見截圖:
在這裏插入圖片描述

頁面的樣式和它的運行結果,見截圖:
在這裏插入圖片描述
在這裏插入圖片描述

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章