CSS使用過程中的一些技巧以及注意點 一

2021-10-08 06:53:35 字數 4113 閱讀 8880

距離上次寫部落格已經是一年多以前,現在再次起筆是發現自己學的東西還是應該進行輸出比較好,一方面可以將這個作為複習的筆記,再者可以加深自己對知識的印象。本文主要是記錄一些在使用css學習過中學到的一些小技巧和在使用過程中需要注意的點。本次記錄分為兩個部分,這裡所記錄的為第乙個部分,第二部分將在後續加上。

1. css顯示模式

html一般分為塊元素和行內元素,還有一種特殊的稱為行內塊元素。

塊級元素

塊級元素主要有 h1-h6、p、div、ui、ol、li等。在後續的使用過程中檢視其特點可以很方便的對其進行分類。

塊級元素的特點:注意點:文字類的元素內不能放塊級元素,如p標籤、h1-h6,其中不能出現div。這些文字類標籤再放塊級元素,解析之後的元素和你想象的不同。

行內元素

行內元素包括 a、strong、b、em、i、del、s、ins、u、span等

行內元素的特點:顯示轉換顯示模式

display屬性對元素的顯示模式進行轉換

/*將當前元素轉為塊級元素*/

display

: block;

/*將當前元素轉為行內元素*/

display

: inline;

/*將當前元素轉為行內塊元素*/

display

: inline-block;

2. css中的三大特性

css中三個重要的特性:層疊性、繼承性、優先順序。

層疊性

相同元素存在樣式衝突的情況。

層疊性原則:

繼承性

css中的繼承:子標籤會繼承父標籤中的某些樣式,如文字顏色、字型大小。

優先順序

當乙個元素指定多個選擇器,就會產生優先順序

選擇器權重詳情如下表:

選擇器選擇器權重

繼承或者 *

0,0,0,0

素選擇器

0,0,0,1

選擇器,偽類選擇器

0,0,1,0

d選擇器

0,1,0,0

內樣式style=""

1,0,0,0

importment 重要的

無窮大在某些情況下如果你設定的樣式未能生效就需要考慮一下給元素設定樣式所對應的選擇器權重問題。對於上面的權重計算也即權重疊加,是對位相加,且越靠左越大。

3. 盒子模型

盒子模型的組成

盒子模型主要由四部分組成,分別為margin(外邊距)、border(邊框)、padding(內邊距)、content(內容)。

注意點:

.father

4. css三種傳統布局方式

css三種傳統布局方式:普通流(標準流)、浮動、定位。

標準流: 標籤按照規定好的預設方式進行排列。

浮動: float屬性用於建立浮動框,將其移動到一旁,直到左邊緣或右邊緣觸及包含塊或另乙個浮動框的邊緣。

特性:

注意點:

清除浮動

為什麼要清除浮動?

因為在很多時候父盒子的高度是不確定的,是不能直接設定高度的,如果不清除浮動,會導致子元素浮動而父元素感受不到使得父盒子高度變為0,從而影響父盒子後面標準流的盒子的展示。

方式一

/* 在最後乙個浮動元素再新增乙個標籤(必須是塊級元素),並給這個標籤設定樣式*/

.lastadd

方式二

/*給父級新增overflow屬性 子不教父之過*/

.father

方式三

/*父元素新增 after偽元素來清除 要求會使用*/

.clearfix:after

.clearfix

方式四

/*給父元素新增  雙偽元素清除浮動*/

.clearfix:before,.clearfix:after

.clearfix:after

.clearfix

定位:將盒子定在某乙個位置,所以定位也是在拜訪盒子,按照定位的方式移動盒子。

定位=定位模式 + 邊偏移

定位模式用於指定乙個元素在文件中的定位方式。

邊偏移則決定了該元素的最終位置。

靜態定位靜態定位是預設的定位方式,無定位的意義。靜態定位按照標準流特性擺放位置,他沒有邊偏移。

相對定位

絕對定位

絕對定位是元素在移動的時候,是相對它祖先來說的。

子絕父相:通過對相對定位和絕對定位的特點進行分析,通過結合相對定位和絕對定位可以很方便的解決一些比較困難的布局,如輪播圖中的左右箭頭和底部小點。

固定定位

固定定位是元素固定瀏覽器可視區的位置。主要使用場景:可以在瀏覽器頁面滾動時元素位置不會改變。

粘性定位(sticky)

可以理解為相對定位和固定定位的混合。

注意點:

小技巧單行文字垂直居中

/*讓文字的行高等於盒子的高度*/

/**/ 盒子高度

height

: 100px;

line-height

: 100px;

/*通過這種方式可以實現單行文字垂直據中*/

靈活使用背景

**邊框合併

/* **相鄰邊框合併在一起 */

border-collapse

: collapse;

外邊距讓塊級盒子水平居中

條件:

width

: 1024px;

margin

: 0 auto;

/* || */

margin

: auto;

/* || */

margin-left

: atuo;

margin-right

: auto;

行內元素和行內塊元素水平居中

為使行內元素和行內塊元素水平居中給其父元素新增text-align:center; 即可

/* 給父級元素設定text-align: center; */

.father

清除內外邊距

有些情況元素本身會帶有內外邊距,這樣會影響我們設定實際我們想要的內外邊距,因此一開始一般情況下我們需要清楚各種元素自帶內外邊距的影響。

*

浮動元素經常和標準流的父級搭配使用

為了約束浮動元素,我們一般採用的策略:父元素為標準流上下排列,之後子元素採取活動排列左右位置。

固定定位技巧–固定到版心右側

/*主介面  版心 盒子的樣式*/

.main

/*設定固定定位的盒子樣式*/

.fix

絕對定位的盒子居中

.box

Tomcat 使用過程中的一些技巧

原因 tomcat預設的在url傳輸時是用iso8859 1編碼。解決方案一 在使用get傳輸引數時,將引數中的中文轉換成url格式,也就是使用urlencode和urldecode來傳輸,使用這種方式就是把中文轉換成以 開頭的編碼在url中傳輸。使用這種方法時,要注意兩點。1.前台使用urlenc...

關於SpringBoot使用過程中的一些問題1 0

總結分析 idea基本設定裡propeties files properties 語言為gbk,應該改為utf 8。解決方案 在file settings editor file encodings 修改de t encoding for properties files 為utf 8,且勾上tra...

Metricbeat使用過程中的一些坑

使用metricbeat7.4監控elasticsearch 6.4 es 7.x使用metricbeat收集elasticsearch監視資料 es 6.x暫停資料收集 可選 metricbeat中elasticsearch xpack模組,檢視日誌時,metricbeat服務並沒有出現報錯,但是...