css div頁面布局詳解(二)

2021-10-10 04:56:09 字數 1579 閱讀 2310

css復合選擇器

後代選擇器:

語法格式:

選擇器1 選擇器2
後代選擇器中用空格分開

子代選擇器:

語法格式:

選擇器1 > 選擇器2
後代選擇器使用者大於號分開

並集選擇器:

語法格式:

選擇器1,選擇器2
並集選擇器用逗號分開,最後乙個選擇器不需要逗號

交集選擇器:

語法格式:

選擇器1選擇器2
既…又…的關係應用場景不多

鏈結偽類選擇器:

針對鏈結的不同狀態設定不同的樣式

鏈結偽類選擇器 說明

a:link 選擇所有未被訪問的鏈結

a:visited 選擇所有已經被訪問的鏈結

a:hover 選擇滑鼠指標位於其上的鏈結

a:active 選擇啟用鏈結(滑鼠按下未抬起的鏈結)

focus偽類選擇器:

在表單中突出顯示當前獲得焦點的表單元素,提公升使用者體驗

語法格式:

>

​ input

​ input:focus

​ style

>

input和冒號中間不能有空格

元素的顯示模式

塊元素:

特點:1.獨佔一行;2.可以設定寬高等屬性;3.寬度預設是父級容器的寬度;4.可以存放其他行內元素和塊元素

行內元素:

特點 :1.一行可以存在多個;2.設定寬高等屬性無效;3.預設寬度是內容的寬度;4.只能容納文字和其他行內元素

行內塊元素:

特點:1.一行顯示,顯示多個;2.預設寬度是本身內容的寬度;3.可以設定寬、高等屬性

模式轉換:

display:block:轉換為塊結構;

display:inline:轉換為行內結構;

display:inline-block:轉換為行內塊結構;

背景

背景:語法:

background-image: none | url(url);
優點:非常容易控制位置

背景平鋪:

引數 說明

repeat 預設,水平垂直平鋪

no-repeat 不平鋪

repeat-x 水平平鋪

repeat-y 垂直平鋪

背景位置:

方位名詞:

background-position可以改變在背景中的位置

水平方向:left、center、right

垂直方向:top、center、right

精確單位:

background-position :x y;

如果只指定了乙個值,系統預設是方向的值,另乙個方向垂直居中顯示

背景固定:

background-attachment控制背景固定

scroll:背景影象跟隨滾動(預設)

fixed:背景影象固定

css div頁面布局中position的位置屬性

position的4個屬性 relative absolute fixed static 筆記整理 1.relative相對定位 相對於元素自身在文字流中原先的位置進行定位。結合left right top bottom屬性進行定位。top的值表示物件相對原位置向下偏移的距離,bottom的值表示物...

Css Div布局學習(二) 清理Clear

我們在css div布局學習 一 div布局基礎 這篇文章裡面講解了基本的布局方法,footer內有clear both 屬性就一句帶過了,事後想了一下對於清理還是有些話要講清楚的。那我就開闢一篇專門講一下。masthead sidebar a sidebar b content footer 這個...

CSS div頁面水平居中的布局方法總結

一 margin auto 0 與 text aligh center 在現代瀏覽器 如internet explorer 7 firefox opera等 現代瀏覽器實現水平居中的方法很簡單,只要設定到左右兩側的空白為自動即可。意即 wrap wrap 上面這段 的意思是說使wrap這個div到左...