前端CSS選擇器盒子定位

1.2 層次選擇器

1.3 偽類選擇器

1.4 偽元素選擇器

1.5 屬性選擇器

2. 盒子

3. 定位

選擇器是css3中乙個重要內容，使用選擇器可以大幅度提高開發人員書寫和修改樣式表的效率，減少冗雜的**，便於開發。選擇器包括基礎選擇器，層次選擇器，偽類選擇器，偽元素選擇器，屬性選擇器。

如果所有的元素都需要定義相同的樣式效果就用通配選擇器。

統一定義常用標籤的基本樣式。

>
/*標籤選擇器*/
pstyle
>

類選擇器能為相同物件定義不同的樣式，為不同的物件定義相同的樣式，以「.」字首開頭，然後自定義乙個的類名，例如：.one。

>
/*類選擇器*/
.one
style
>

id選擇器以「#」開頭，然後接乙個自定義的id名。html所有的標籤都支援id選擇器，只要在標籤中定義id屬性就行了。id選擇器一般是用來定義html框架結構的布局效果，因為元素id都是唯一的。

>
#one
style
>

通過html的dom元素間的層次關係獲取元素，主要層次關係有後代、父子、相鄰兄弟和通用兄弟。

作用的是選擇元素的後代元素。包括子元素、孫輩元素等。

.div p

作用的是某元素的所有子元素，不能包括孫輩元素。

.div > h2

作用的是選擇與某元素位於同乙個父元素之中，且位於該元素之後的兄弟元素。

p + h2

p ~ h2

結構化偽類選擇器是css3的新增選擇器。常用的結構化偽類選擇器有:root 選擇器、:not 選擇器、:only-child 選擇器、:first-child 選擇器、:last-child 選擇器、:nth-child(n) 選擇器、:nth-last-child(n) 選擇器、:nth-of-type(n) 選擇器、:nth-last-of-type(n) 選擇器、:empty 選擇器、:target 選擇器。

:root 選擇器用於匹配文件根元素，使用「:root 選擇器」定義的樣式對所有頁面元素都生效。對於不需要該樣式的元素，可單獨設定樣式進行覆蓋。

排除子結構元素。

匹配有且僅有乙個孩子。

分別應用於第乙個或最後乙個子元素設定樣式。

所謂偽元素選擇器，是針對css中已經定義好的偽元素使用的選擇器。常用的偽元素選擇器有:before選擇器和:after選擇器。

css3在css2的基礎上新增了3個屬性選擇器，分別是e[attr^=「value」]、e[attr$=「value」]、e=[attr*=「value」]。三個新增的選擇器和已定義的e[attr]、e[attr=「value」]、e[attr~=「attr」]、e[attr|=「value」]共同構成強大的html屬性過濾器。

盒子是網頁布局的基礎。盒子模型，顧名思義，盒子就是用來裝東西的，它裝的東西就是html元素的內容。或者說，每乙個可見的 html 元素都是乙個盒子。

盒子居中：

position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);

清零

/*同時設定四條邊的邊距相等*/ margin : 10px; /*上下邊距，左右邊距*/ margin : 10px 10px; /*上邊距，左右邊距，下邊距*/ margin : 10px 10px 10px; /*上邊距，右邊距，下邊距，左邊距*/ margin : 10px 10px 10px 10px; /**/ margin-top : 10px; margin-right : 10px; margin-bottom : 10px; margin-left

: 10px;

rbackground-color屬性性設定元素的背景顏色。

顏色值有三種：color值；transparent透明，為預設的值；inherit，繼承父元素的color。

元素的背景是元素的總大小，包括填充（padding）和邊界（但不包括邊距margin）。

當我們為元素設定padding、border和margin屬性時，背景顏色會渲染到padding,而不會渲染到border和margin。

background-image屬性設定乙個html元素的背景，元素的背景是元素的總大小，包括填充（padding）和邊界（但不包括邊距margin）。預設情況下，會在垂直和水平方向重複顯示。

寫法：background-image: url('url');

background-repeat屬性定義是否在垂直和水平方向上重複顯示。

寫法：background-repeat: repeat-y||repeat-x||no-repeat;分別表示在垂直方向上重複、在水平方向上重複、不重複顯示。

background-size屬性定義背景的大小。

寫法：background-size: 10px 10px;分別表示寬、高，若只寫乙個值，表示寬、高為乙個值。

沒有規定background-repeat屬性，預設在水平和垂直方向都重複顯示背景。

背景復合屬性：

background:[background-color] [background-image] [background-repeat] [background-attachment] [background-position] [background-size] [background-clip] [background-orgin];

漸變屬性包括線性漸變和徑向漸變。

background-image: linear-gradient(direction, color1, color2 [stop]...);

background-image: linear-gradient(漸變角度，顏色值1，顏色值2…顏色值n);

direaction：表示線性漸變的方向。有以下三種表示方法。

to left：設定漸變為從右到左。

to bottom：設定漸變從上到下。這是預設值。

to right：設定漸變從左到右。

to top：設定漸變從下到上。

top：設定漸變從上到下。這是預設值。

bottom：設定漸變從下到上。

left：設定漸變從左到右。

right：設定漸變為從右到左。

角度用數字+單位來進行表示，單位使用deg。所有的顏色都是從中心出發，0deg是to top的方向，順時針是正，逆時針是負。

stop：color後面可以加上stop，stop可以使百分值也可以是畫素值，表示某個顏色在stop位置處固定

徑向漸變指從乙個中心點開始沿著四周產生漸變效果。由其中心點、邊緣形狀輪廓及位置、色值結束點（color stops）定義而成。

background-image: radial-gradient(color1,...colorn)

background-image: radial-gradient(漸變形狀圓心位置，顏色值1,…,顏色值n)

漸變形狀：可以是定義水平和垂直半徑的畫素值和百分比（例如「80px，50px」），也可以是關鍵字「circle」（指定圓形徑向漸變）和「ellipsre」（指定橢圓形徑向漸變）。

圓心位置：用「at」加上關鍵字或引數值定義徑向漸變的中心位置。

浮動可以使元素脫離標準文件流，實現多個元素在同一行。

float屬性

clear屬性

清除浮動

position屬性

fixed固定定位：相對瀏覽器視窗定位

pssition:fixed;
top:10px;
bottom:10px;
left:10px;
right10px;

relative相對定位：

absolute絕對定位：

前端CSS選擇器盒子定位

前端 css 選擇器

CSS基礎定位選擇器

Web 前端 CSS選擇器

前端CSS選擇器 盒子 定位

前端 css 選擇器

CSS基礎 定位 選擇器

Web 前端 CSS選擇器

相關推薦

前端CSS選擇器盒子定位

CSS基礎定位選擇器