前端基礎知識點總結CSS篇(問題例項)

2021-09-26 09:19:07 字數 1721 閱讀 6466

line-height

color

visibility

cursor

如果需要居中的元素為inline或inline-block,為父元素設定text-align: center;即可實現

如果要居中的元素為乙個塊級元素的話,一般使用margin: 0 auto;進行居中。

把border的其他三條邊設為透明

注意,這裡要把border-widthborder-styleborder-color分開寫。

.tri

行框的排列會受到中間空白(回車\空格)等的影響,因為空格也屬於字元, 這些空白也會被應用樣式,佔據空間,所以會有間隔,把字元大小設為 0,就沒有空格了

浮動的框可以向左或向右移動,直到他的外邊緣碰到包含框或另乙個浮動框的邊框為止浮動框脫離文件流,所以文件的普通流的塊框表現得就像浮動框不存在一樣。浮動的塊框會漂浮在文件普通流的塊框上。

清除方法:

.clearfloat:after

.clearfloat

在結尾處新增空 div 標籤 clear:both

class

="parent"

>

class

="left"

>

leftdiv

>

class

="right"

>

rightdiv

>

class

="clearfloat"

>

div>

div>

>

.left

.clearfloat

style

>

父級 div 定義 overflow:auto。 同時需要父級指定寬度

參考鏈結幾種常用的清除浮動方法

content 屬性專門應用在 before/after 偽元素上,用於插入額外內容或樣式

元素豎向的百分比設定是相對於容器的寬度,而不是高度

link > visited > hover > active

簡稱 lvha(love-ha)

偽類的特殊性(應用優先順序)是同樣的,所以後出現的偽類會覆蓋先出現的偽類(同時啟用)

在這裡,比如把hover放在active後面,那麼實際你在啟用(active)鏈結的時候就觸發了hover偽類,hover在後面覆蓋了active的顏色,所以始終無法看到active的顏色

偽元素:在內容元素的前後插入額外的元素或樣式,但是這些元素實際上並不在文件中生成。它們只在外部顯示可見,但不會在文件的源**中找到它們,因此,稱為「偽」元素。例如:

p::before

p::after

p::first-line

p::first-letter

偽類: 將特殊的效果新增到特定選擇器上。它是已有元素上新增類別的,不會產生新的元素。例如:

a:hover

p:first-child

設定元素浮動後,該元素的 display 值自動變成 block

CSS基礎知識點總結

一 css的簡介 1 什麼是css 層疊樣式表,css是對html進行樣式修飾語言 層疊 就是層層覆蓋疊加,如果不同的css樣式對同一html標籤進行修飾,樣式有衝突的部分應用優先順序高的,不衝突的部分共同作用 樣式表 就是css屬性樣式的集合 2 css的作用 1 修飾html的 使其html樣式...

css前端知識點總結 必看篇

1 css的概念 cascadingstylesheet級聯樣式表 優點 1.內容與表現分離。用網頁的內容xhtml就可以與表象分開 2.表象統一 3.豐富的樣式 4.減少網頁 5.運用獨立於網頁的css 2.選擇器 1.標籤選擇器 標籤名 屬性 屬性值 2.類選擇器 類名 屬性 屬性值 標籤名 c...

CSS基礎知識點

1.css基礎 1.css選擇器 元素選擇器 p id選擇器 p1 類選擇器 pre 2.css注釋 注釋 3.css尺寸 width 寬度height 高度 4.css背景 background color 背景顏色 background image url imagepath 做背景 url b...