一.複習:
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 ...