CSS基礎入門04

2021-09-22 19:58:03 字數 2650 閱讀 8314

一.複習:

1  偽類

2  行高:

定義:應用:將行高設定等於容器的高度可以讓文字垂直居中

原理:為什麼行高等於容器的高度可以讓文字垂直居中。

文字中的各條線。

2.1  補充:

1.0行高是可以繼承的。

abcef

2.0行高的單位:

今天不開心!

取值:

a.具體的畫素值。

b.使用em 

em指的是當前標籤設定的字型大小。

比如當前標籤字型大小為16px,那麼2em=32px,如果當前標籤字型大小為20px,那麼3em=60px;

c.使用%百分號:

與em一樣,都是以當前標籤的字型大小為基數,如果大小18px,那麼 line-height:200%;line-height: 36px;

d.可以什麼單位都不帶:

與em一樣,也是當前標籤的字型大小為基數。

注意:1.0在設定行高的時候,如果單位是em或者%,那麼將來行高會先計算出來結果以後再繼承給子元素。

2.0在設定行高的時候,如果單位是沒有,那麼將來行高會先繼承給子元素,然後再計算出行高。

看看我到底有多大

2.2  瀏覽器的補充:

瀏覽器的預設字型大小是多小?

谷歌預設大小是16px.

2.3  行高與font的關係

font: font-style font-weight font-size/line-height font-family.

今天又下雨了,你們的衣服幹了沒有!

3  margin兩種特殊的現象:

3.1  外邊距的合併現象:

如果兩個div上下排序,給上面乙個div設定margin-bottom,給下面乙個div設定margin-top,那麼兩個margin會發生合併現象,合併以後的值較大的那個。

div1

div2

3.2  margin塌陷現象:

如果乙個大盒子中包含乙個小盒子給小盒子設定margin-top大盒子會一起向下平移。

解決方案:

1.0給大盒子加乙個邊框

2.0給大盒子設定乙個overflow屬性。

3.0浮動也可以

二.浮動。

1  浮動的初體驗

問題:在頁面上有兩個盒子,乙個盒子靠著螢幕左側顯示另乙個盒子靠著螢幕的右側顯示?

作用:解決一行中顯示多個盒子的問題(並且這些盒子的位置可控。)

浮動的**:

float:left;

float:right;

2  浮動的特點

標準流:就是瀏覽預設擺放盒子的標準。

2.1  浮動的元素會脫離標準流:

如果乙個元素按照正常的標準流來顯示,會在html中所屬的位置佔位,後面的元素會緊跟著它。但是浮動脫了標準流,將來在看到浮動的元素之後,不能以正常的標準流來進行判斷。(在標準流中不佔位置了,它是在標準流之上)

2.2  浮動以後的元素會覆蓋在標準流的元素之上。

2.3  浮動規則:浮動找浮動,不浮動找不浮動

浮動找浮動:只有寫在同乙個結構下面的浮動才會浮動找浮動。

2.4  浮動顯示的位置與原本不浮動之前的位置是對應的:

12

3

2.5  浮動的重點:浮動的元素只會影響下面的元素,不會影響上面的元素:

2.6  浮動的元素會改變顯示方式:

不管元素是行內元素還是塊級元素將來在顯示 的時候都會在同一行中顯示。

浮動以後的元素可以設定寬高。

今天下雨啦

沒有

總結:浮動以後的元素的顯示方式與行內塊級元素一樣。

3  浮動的案例:

1.0使用浮動完成頁面的布局

版本一:

導航商標

頁面資訊

內容區域

底部

版本2:

導航商標

頁面資訊左右

底部

2.0製作導航

練習:**的頭部

注意:以後使用a標籤直接來製作導航是有問題的

1.0導航與導航之間應該是列表的關係,所以如果想要將這個些關係通過html語義化表示出來必須要用到ul標籤。

2.0如果這些a標籤你不用其它的標籤包裹起來,那麼將來瀏覽器會將這些a標籤中的文字當作全部一起顯示。seo在檢視頁面的時候會認為這個頁面進行作弊,就是進行了關鍵字的堆砌。

必須要用ul中的li標籤將a中的內容包裹起來。

3.0文字環繞

HTML CSS 基礎入門 04

lang en charset utf 8 註冊頁面title body rg layout rg left rg left p first child rg left p last child rg center rg right rg right p first child rg right p...

Opencv基礎入門筆記04

今天覆習影象操作,包括影象的取反,二值化,作與運算等!1.簡述 我們知道灰度圖由0 255表示,0為黑,255為白,則從位操作的角度出發,純黑色為0,不是純黑色為1,所以在一些純白色,或者純黑色背景裡,先轉為灰度圖,利用閾值將非背景色的內容 灰度值不是0和255 摳出來作為模板,再與原圖做位操作,進...

CSS入門基礎

一 選擇器詳解 下 符合選擇器部分 標籤指定式選擇器 交集選擇器 語法 標籤名 其他選擇器 示例 段落文字1 段落文字2 效果 段落文字1顯示紅色 結論 標籤指定式選擇器中的兩個選擇器是既 又的關係,如示例中,既是p標籤,又必須class屬性為content的元素被選中。後代選擇器 語法 選擇器1 ...