今天聽這個css課程,感覺這個老師真的講的很爛,明明可以很輕鬆理解,非得扯上一堆的if什麼的,明明很容易就能理解,硬生生給我說懵了。
內外邊距倒是蠻有意思的
內邊距,自然就是塊級標籤自己內部的一些距離,然後外邊距,就是標籤和同級標籤之間的距離
margin: 用於控制元素與元素之間的距離;margin的最基本用途就是控制元素周圍空間的間隔,從視覺角度上達到相互隔開的目的。
padding: 用於控制內容與邊框之間的距離;
border(邊框) 圍繞在內邊距和內容外的邊框。
content(內容) 盒子的內容,顯示文字和影象。
上面是內外邊距四個非常重要的引數,下面來看看演示案例吧
doctype html如果用圖形來表示就是這個樣子>
<
html
lang
="en"
>
<
head
>
<
meta
charset
="utf-8"
>
<
title
>title
title
>
<
style
>
.div1
.div2
.outer
.outer2
body
style
>
head
>
<
body
>
<
div
class
="outer2"
>
<
div
class
="outer"
>
<
div
class
="div1"
>hello div1
div>
<
div
class
="div2"
>
div>
<
span
>uuu
span
><
span
>ooo
span
>
div>
div>
body
>
html
>
然後有乙個更為經典的例子
牆上掛了四副油畫,邊框寬度就是border,畫面距離邊框的寬度就是padding,然後兩幅畫之間的距離就是margin
這些引數在設定的時候,可以設定乙個引數,兩個引數,三個或是四個引數
以margin為例:
margin:10px 5px 15px 20px;-----------上右下左
margin:10px 5px 15px;----------------上(右左)下
margin:10px 5px;---------------------(上下)(右左)
margin:10px; ---------------------上右下左
總之就是按照順時針方向走的,從上開始,然後前後兩個就是上下
所以得到乙個很重要的結論:當您指定乙個css元素的寬度和高度屬性時,你只是設定內容區域的寬度和高度。要知道,完全大小的元素,你還必須新增填充,邊框和邊距。
當然你也可以在margin後面增加left、right、top、bottom來分別進行具體設定。
練習:300px*300px的盒子裝著100px*100px的盒子,分別通過margin和padding設定將小盒子 移到大盒子的中間
doctype html思考1:>
<
html
lang
="en"
>
<
head
>
<
meta
charset
="utf-8"
>
<
title
>title
title
>
<
style
>
.div1
.div2
style
>
head
>
<
body
>
<
div
class
="div1"
>
<
div
class
="div2"
>
div>
<
div
class
="div2"
>
div>
div>
body
>
html
>
邊框在預設情況下會定位於瀏覽器視窗的左上角,但是並沒有緊貼著瀏覽器的視窗的邊框,這是因為body本身也是乙個盒子(外層還有html),在預設情況下, body距離html會有若干畫素的margin,具體數值因各個瀏覽器不盡相同,所以body中的盒子不會緊貼瀏覽器視窗的邊框了,為了驗證這一點,加上:
body
.div1
.div2
style
>
head
>
<
body
>
<
div
style
="background-color: cadetblue;width: 300px;height: 300px"
>
div>
<
div
class
="div1"
>
<
div
class
="div2"
>
div>
<
div
class
="div2"
>
div>
div>
body
>
html
>
如果需要設定子標籤與父標籤的同級標籤之間產生距離,這個實際上是需要在父標籤裡面增加podding引數即可,大可把子標籤當做乙個div標籤,都是內部套連關係
1兄弟div:上面div的margin-bottom和下面div的margin-top會塌陷,也就是會取上下兩者margin裡最大值作為顯示值
2父子div
if 父級div中沒有 border,padding,inline content,子級div的margin會一直向上找,直到找到某個標籤包括border,padding,inline content 中的其中乙個,然後按此div 進行margin ;(這段說的真的很垃圾)
但是後期回過來看,不清楚原理的時候倒是可以參考一下。
以上是今天的全部內容。
Python學習第67天(css中float屬性)
今天的學習場景很獨特,為了能早點回家看到兩位寶寶,特地到廣州坐飛機,所以在機場中學習真的還是不錯的,下面就說一下今天的核心內容float,因為太累了,看的內容較少。先來了解一下block元素和inline元素在文件流中的排列方式。block元素通常被現實為獨立的一塊,獨佔一行,多個block元素會各...
python第25天 學習python第25天
今天是在尚學堂學習python第25天今天學習了使用者管理,許可權管理 使用者管理 1.使用者的登入與退出 語法 mysql h hostname p port u username p dbname e h hostname 指定要連線mysql的主機名或者ip hostname就是具體的主機名或...
python學習第7天
崔鑫陽 2019.225 課堂檢測題 輸入兩個數 求出他們之間所有的素數 把這些素數放在 乙個列表裡 求這個列表裡素數的和 以及 最大值 和最小值 寫到乙個 裡 num 1 int input 輸入第乙個數 num 2 int input 輸入第二個數 if num 1 num 2 turn num...