前端學習筆記(一)2020 02 25

2021-10-03 05:33:21 字數 1666 閱讀 4166

使用em標籤的強調作用時:

通過font-style: normal改變字型傾斜

font屬性簡寫需要遵循順序

style weight size family

a標籤偽類選擇器需要遵循順序

link visied hover active

有長寬獨佔一行

寬度預設為父級寬度

可以放行內元素和塊級元素

ps:h、p、dt文字標籤中不能存放塊級元素

相鄰行內元素在一行上

寬高設定無效

預設寬度為他內容的寬度

行內元素之容納文字和其他行內元素

ps: a標籤裡不能放a標籤

行內元素為照顧其相容性,只設定左右內外邊距,不設定上下內外邊距

相鄰的行內塊級元素在一行上,但中間有空隙

預設寬度是他內容的寬度

高度、行高、內外邊距都可以控制

選擇器型別

權重*或繼承

0,0,0,0

單個標籤元素

0,0,0,1

單個類與偽類

0,0,1,0

id選擇器

0,1,0,0

行內樣式表

1,0,0,0

!important

無窮大一、盒子的實際尺寸:內容寬高+內邊距+邊框

ps:如果盒子沒有寬度,則padding不會撐開盒子

二、塊級盒子水平居中:

盒子必須有寬度

外邊距左右設定為auto

text-align:center讓變遷中文字內容居中

margin:0 auto;讓塊級元素居中

插入多運用在產品展示類,只能通過盒子模型移動

背景一般運用於小圖示背景或超大背景圖

只出現在垂直外邊距上

取兩個值中的較大者

解決方案:只給乙個盒子margin值

解決方法:

為父元素設定上邊框

給父元素設定乙個上邊距padding

給父元素新增overflow:hidden

浮動,固定,絕對,相對定位

標準流

塊級佔一行,從上至下

行內元素從左至右,碰到父元素邊框換行

浮動 脫離標準流

移動指定位置

作用將塊級盒子水平排列成一行

實現盒子左右水平對齊

最早用來控制,實現文字環繞的效果

定位/* 待定*/

浮動——漂浮在標準流之上,不佔位置

將之前的位讓給標準流

float會改變元素的display屬性為inline-block,但元素之間沒有縫隙

1.子盒子不會超過父盒子的邊框與內邊距

2.乙個盒子裡有多個盒子,如果其中乙個盒子浮動了,其他的兄弟也應該浮動,防止引起問題

清除浮動

原因:多數情況下。例如:父盒子不方便給高度,內容有多少父親高度有多少,自動抻開父盒子的情況。

父親不給高,孩子進行浮動,會使得父親消失。

清除浮動主要是為了解決父級元素因為子級浮動引起的內部高度為零的問題,清除浮動後,父級就會根據浮動的子盒子自動檢測高度。

解決方法:

額外標籤法

父級新增overflow

使用after偽元素清除

使用before、after偽元素清除

前端學習筆記《一》

表頭 caption 合併行單元格 colspan 合併列單元格 rowspan 取消邊框縫隙 cellspacing 0 中內容位置 valign top middle bottom 多行文字框 屬性 cols 字元長度 rows 輸入的字元的行數 input type file 上傳檔案 inp...

前端學習筆記一

這裡推薦乙個簡短有趣的鏈結,可以同時對比其他的布局方案 學習css布局 flexbox。另外moz的開源 也有介紹 使用 css 彈性盒子。不過介紹最清晰的還是阮一峰的flex布局教程 語法篇。在各種場合下,居中使用的方式也不一樣。這裡簡要記錄一下目前使用到的比較有效的方式 flex設定父物體為re...

前端學習筆記一

這裡推薦乙個簡短有趣的鏈結,可以同時對比其他的布局方案 學習css布局 flexbox。另外moz的開源 也有介紹 使用 css 彈性盒子。不過介紹最清晰的還是阮一峰的flex布局教程 語法篇。在各種場合下,居中使用的方式也不一樣。這裡簡要記錄一下目前使用到的比較有效的方式 flex設定父物體為re...