CSS101文章學習

2022-02-20 13:46:41 字數 2282 閱讀 6959

1.盒模型

說明: 外邊距:margin 內邊距:padding 邊框 border

注意:replaced / none-replaced (不可置換的沒有margin-top/margin-bottom)

2.選擇器

#id .class [rel=」nofollow」] :hover

分享樣式與結構 樣式重用

優先順序與效率

!important

高於一切

style=」」

1,0,0,0

id0,1,0,0

class 屬性選擇符 偽類

0,0,1,0 同級後來居上

*不計分 繼承

沒能specificity值,低於*選擇器

@import

通常有衝突時,相同規則 at rule近的優先順序都比較低

示例:

<

style

type

="text/css">

.a .b

style

>

<

div

id="alipay"

class

="b a">

<

span

>content

span

>

div>

輸出內容為:red的content
<

style

type

="text/css">

div #alipay

style

>

<

div

id="alipay"

class

="b a">

<

span

>content

span

>

div>

輸出內容為:blue的content
id

高效、最快

class

高效、較快

屬性選擇符、偽類

低效、慢

*低效、慢

3.定位

static(一般) relative(相對定位) absolute(絕對定位) fixed(固定定位)

position:static 元素預設。影響文件流,佔位

position:relative ;top:60px;left:50px; 影響文件流 佔位

position:absolute 不影響文件流 不佔位

position: fixed 不影響文件流 不佔位

定位:1.基於非static 的父節點定位

2.fixed基於頁面視窗定位

3.定位在ie6/ie7中有bug

4.浮動

浮動會例元素脫離文件,如果浮動後面還有內容的話,元素的框會把浮動忽略,但文字仍會被浮動影響環繞無浮動框

浮動與定位 清理浮動

<

style

type

="text/css">

.clearfix:after

.clearfix

style

>

5.規劃你的css

瀏覽器reset 頁面reset

模組化 : .module{}

.module .head{}

.module .body{}

.module .foot{}

6.7.css3

8.工具

0008 文章管理

先做個選擇文章專欄的下拉選擇框。用easyui提供的combobox來實現,通過傳送ajax獲取專欄資料,然後根據返回的json資料構造下拉框。前端頁面ajax請求 構造下拉框 function alert user id arti cate combobox arti cate combobox ...

學習ECCV 2020 文章 筆記

pnp演算法的數學公式 i 1l m i r mi t 1z2 rmi t 2.sum l left m i frac rm i t right 2.i 1 l mi 1z2 rm i t rm i t 2 其中mi是空間中三維點,mi是歸一化三維點,r是旋轉矩陣,t是平移矩陣,為求解該問題,代價函...

文章筆記 Phone 2010文章摘要

1.手機上的多種感測器整合,感知系統和使用者的行為。有一篇文章提出了一種監視器服務,能夠整合感測器 系統和使用者行為,為應用程式提供服務,可以讓開發者優化應用程式,提高系統的效能。另有一篇文章提出了一種應用程式框架,避免應用程式直接監視感測器。這樣可以降低能耗,尤其是在多個應用在同乙個裝置上使用時。...