css的一些基礎(一)

2021-09-25 16:50:46 字數 2381 閱讀 2962

定位相關屬性用於設定目標元件的位置,常用的定位相關屬性如下。

屬性說明

position設定定位方法

static、relative、absolute、fixed

left

right為定位元素設定偏移量

長度、百分比、auto

top

bottom

z-index設定定位元素的層疊順序

數字靜態定位就是元素標準流的顯示方式(預設定位)。

說到相對定位,首先我們需要明確乙個概念,相對定位是相對於元素原來的位置進行定位。可以通過trbl來移動元素的位置,元素在視覺上相對原來的位置移動了,實際上該元素依然佔據文件中原有的位置。具體案例如下:

1、元素使用相對定位時,無論是否進行移動,元素仍然佔據原來的空間

2、使用相對定位的元素進行移動時,以自己原本的位置作為為參照

3、使用相對定位的元素不能進行元素的模式轉換

4、子元素設定絕對定位,父元素設定相對定位

1、當給乙個單獨的元素設定絕對定位時,元素會以瀏覽器左上角(body)為基準進行定位。

2、當元素發生巢狀關係的時候,如果祖先元素沒有設定定位,設定絕對定位的子元素會以瀏覽器左上角為基準進行定位。

3、當元素發生巢狀關係的時候,如果祖先元素設定了定位,設定絕對定位的子元素會以父盒子左上角為基準進行定位。

4、設定了絕對定位的元素不佔位置(脫離文件流)

5、給行內元素設定絕對定位後,該元素會轉化為行內塊元素

1、固定定位不佔位置(脫離標準文件流)

2、將行內元素轉化為行內塊元素

z-index屬性指定元素顯示的層疊順序,屬性的值是數值,且允許取負值。值越小,在層疊順序中就越靠後。這個屬性只有在元素重疊的情況下才會派上用場。

定義表單

表單是用於收集使用者輸入的,網頁中常見的表單有,登入表單,註冊,調查問卷。

定義表單域的標籤

想要把元素關聯起來,只需要把for屬性的值設定為元素的id屬性的值。

 

使用者名稱:label>

form>

也可以寫成這樣:

 

使用者名稱:

label>

form>

輸入密碼的表單域

輸入型別:type="password"定義密碼字段:

密碼:label>

確認密碼:label>

form>

檔案選取域

輸入型別:type="file"定義檔案選取按鈕。

上傳頭像:label> p> form>

單選按鈕

輸入型別:type="radio"定義單選按鈕。

 

性別: 男

女label> form>

複選按鈕

輸入型別:type="checkbox"定義複選按鈕。

 

愛好: 美食label>

旅遊label>

閱讀label>

遊戲label>

睡覺label>

form>

下拉列表

元素定義下拉列表

元素定義下拉列表中的列表項

 

居住城市:

北京option> 上海option> 天津option> 鄭州option> select> form>

多行表單域

元素定義多行文字域:

 

將表單元素分組

元素組合表單中的相關資料

元素為元素定義標題。

  賬戶資訊:legend>  使用者名稱:label>  p>   密碼:label>  p> 確認密碼:label>  p> fieldset>  個人資訊:legend> 上傳頭像:label>  p> 性別: 男 女label> p> 愛好: 美食label> 旅遊label> 閱讀label> 遊戲label

css一些基礎效果

1.旋轉 center bj div1 ul li img1 hover 旋轉 center bj div1 ul li img2 hover y軸旋轉 center bj div1 ul li img3 hover 2.縮放 center bj div2 d2 ul li div 父元素設定溢位隱...

css的一些基礎的東西

css匯入 第一種是把css文件放到 我們看到這裡應用了乙個,rel stylesheet 指連線的元素是乙個樣式表 stylesheet 文件。一般這裡是不需要您改動的。而後面的 href style.css 指的是需要連線的檔案位址。您只需把編輯好的 css 檔案的詳細路徑名寫進去 就可以了。這...

CSS的一些基礎知識

在屬性後面使用 important 會覆蓋頁面內任何位置定義的元素樣式。作為style屬性寫在元素內的樣式 id選擇器 類選擇器 標籤選擇器 萬用字元選擇器 瀏覽器自定義或繼承 同一級別 同一級別中後寫的會覆蓋先寫的樣式 規則是多個級別的組合,把選擇器中規則對應做加法,比較權值,如果權值相同那就後面...