css一些事兒

2022-03-08 17:02:57 字數 1447 閱讀 2987

如果邊界畫一條線,則margin的屬於邊界外,padding屬於邊界內

當我們給元素背景色時,margin區域不會被著色,而padding區域會被著色。

當上下兩個塊元素,乙個設定margin-bottom:10px,下面的設定margin-top:20px,兩個塊元素的距離不是30 而是20。 而padding則是相加的情況

margin是用來隔開元素與元素的間距;padding是用來隔開元素與內容的間隔。margin用於布局分開元素使元素與元素互不相干;padding用於元素與內容之間的間隔,讓內容(文字)與(包裹)元素之間有一段「呼吸距離」

定義:塊的頂部外邊距和底部外邊距有時被組合(摺疊)為單個外邊距,其大小是組合到其中的最大外邊距

1、相鄰的兄弟姐妹元素

上面的段落

下面的段落

兩者的邊距不是兩者和30,而是二者較大的20.

2、塊元素與其第乙個或者最後乙個子元素

my title

children

children

position 這個屬性決定了元素將如何定位。它的值大概有以下五種:

position 值

如何定位

static

position的預設值。元素將定位到它的正常位置(上文提到過),其實也就相當於沒有定位。元素在頁面上佔據位置。不能使用 top right bottom left 移動元素位置。

relative

相對定位,相對於元素的正常位置來進行定位。元素在頁面佔據位置。可以使用 top right bottom left 移動元素位置。

absolute

絕對定位,相對於最近一級的定位不是 static 的父元素來進行定位。元素在頁面不佔據位置。 可以使用 top right bottom left 移動元素位置。

fixed

絕對定位,相對於瀏覽器視窗來進行定位。其餘和 absolute 一樣,相當於一種特殊的 absolute。

inherit

從父元素繼承 position 屬性的值。

對於塊級元素,子元素的寬度預設為父元素的100%,

父元素寬度 = 子元素寬度 + padding + margin

當時img這種元素時,不管我們怎麼設定父元素的寬度和高度,而不設定img的寬和高時,img總是表現為其原始的寬和高。當寬和高設定乙個時,另乙個則等比例縮放。當寬和高都100%時則鋪滿這個父元素

同為塊元素,脫離文件流時候,以浮動為例當父元素有寬度,子元素沒有寬度,子元素浮動後,注意子元素大小;當子元素有寬度,父元素沒有寬度,子元素浮動後,注意父元素大小

WiFi的一些事兒

我突然想起了一件事情,新聞曾經說乙個少年發明了一種演算法可以減少wifi間的干擾,從而增加頻寬。其實,不同wifi之間是會相互干擾的,所以合理地設定wifi的熱點位置,可以避免這種相互干擾的情況。但現實是,大家想怎樣發射wifi都沒人管,所以訊號一多,大家的網速都像蝸牛一樣慢。既然現實不能改變,那就...

測試的一些事兒(一)

對於很多開發人員來說,準確地區分整合測試與單元測試一直是乙個難題。實際上,單元測試專注於單元本身,它需要隔絕與其他模組之間的關係。所以,我們需要各種單元測試框架,包括isolation framework和mock framework等等。而整合測試的重點在與整合,它同時包含了多個模組。也就是說,在...

css一些筆記

文章大部分借鑑 明凱部落格 中 在此宣告 css全稱 層疊樣式表 或 級聯樣式表 簡稱css樣式表。是對文字樣式的編輯語言。引入方法彙總如下 1 內聯樣式表 a.把樣式表規則放在 head 和 head 的中間,從而使樣式表對整個當前 html 頁面產生作用。b.直接插入方式,寫在hmtl 頁面中某...