CSS盒子模型各屬性層級及基礎知識

2021-07-12 06:15:19 字數 2166 閱讀 7330

1.設定浮動屬性後,會對相鄰的元素產生影響,相鄰元素特指僅鄰後面的元素。

2.受到影響的元素清除flow影響的方法:clear:both;只適用於緊鄰後面的元素的清楚浮動,而當父包含塊縮成一條時就不起作用了。

或者同時設定width:100%;+overflow:hidden;例p受到影響,p

3.三種定位形式:static(靜態)relative(相對)absolute(絕對)

相對定位:相對於自身原有位置進行偏移;仍處於文件流中;隨即擁有偏移屬性和z-index屬性;

絕對定位:建立以包含塊為基準的定位;完全脫離了標準文件流;隨即擁有偏移屬性和z-index屬性;

未設定偏移量,無定位祖先元素,以為參考基準

使用absolute實現橫向兩列布局:relative-父元素相對定位;absolute-自適應寬度元素絕對定位

css:

1.id選擇器( # myid)

2.類選擇器(.myclassname)

3.標籤選擇器(div, h1, p)

4.相鄰選擇器(h1 + p)

5.子選擇器(ul < li)

6.後代選擇器(li a)

7.萬用字元選擇器( * )

8.屬性選擇器(a[rel = 「external」])

9.偽類選擇器(a: hover, li: nth - child)

優先順序為:

!important > id > class > tag

important 比 內聯優先順序高

css新增的偽類:

p:first-of-type 選擇屬於其父元素的首個

元素的每個

元素。

p:last-of-type 選擇屬於其父元素的最後

元素的每個

元素。

p:only-of-type 選擇屬於其父元素唯一的

元素的每個

元素。

p:only-child 選擇屬於其父元素的唯一子元素的每個

元素。

p:nth-child(2) 選擇屬於其父元素的第二個子元素的每個

元素。

:enabled :disabled 控制表單控制項的禁用狀態。

:checked 單選框或核取方塊被選中。

如何居中div?如何居中乙個浮動元素?

給div設定乙個寬度,然後新增margin:0 auto屬性

div

居中乙個浮動元素

確定容器的寬高 寬500 高 300 的層

設定層的外邊距

.div

列出display的值,說明他們的作用。position的值, relative和absolute定位原點是?

1. block 象塊型別元素一樣顯示。

none 預設值。象行內元素型別一樣顯示。

inline-block 象行內元素一樣顯示,但其內容象塊型別元素一樣顯示。

list-item 象塊型別元素一樣顯示,並新增樣式列表標記。

2. *absolute

生成絕對定位的元素,相對於 static 定位以外的第乙個父元素進行定位。

*fixed (老ie不支援)

生成絕對定位的元素,相對於瀏覽器視窗進行定位。

*relative

生成相對定位的元素,相對於其正常位置進行定位。

* static 預設值。沒有定位,元素出現在正常的流中

*(忽略 top, bottom, left, right z-index 宣告)。

* inherit 規定從父元素繼承 position 屬性的值。

css3有哪些新特性?

css3實現圓角(border-radius:8px),陰影(box-shadow:10px),

對文字加特效(text-shadow、),線性漸變(gradient),旋轉(transform)

transform:rotate(9deg) scale(0.85,0.90) translate(0px,-30px) skew(-9deg,0deg);//旋轉,縮放,定位,傾斜

增加了更多的css選擇器 多背景 rgba

css盒子模型 CSS 盒子模型

css 盒子模型基本上是面試的必考題,因為實在是太重要了。以前寫 css 總是感覺元素的寬高十分難調,其中乙個很大的問題就是忽略了盒子模型的重要性。說到 css 盒子模型,你可能會說我知道呀,就是 margin 包 border,border 包 padding,padding 包 content ...

CSS基礎 盒子模型

width和height指內容區域的寬度和高度 元素實際寬度 左右外邊距 左右邊框 左右內邊框 width 元素實際高度 上下外邊距 上下邊框 上下內邊距 height 定義元素的寬和高需要使用下面屬性 1 width寬度 height高度 固定的寬度和高度,當內容超出寬度和高度之後,不會自動填充擴...

CSS屬性 盒子模型 border屬性

border 表示盒子的邊框 分為四個方向 top 上面 right 右面 bottom 下面 left 左面 取值方式 border top border right border bottom border left 每個邊都包含三種屬性 color 顏色 width 粗細 style 樣式 寫...