前端學習筆記二 CSS(4)關於容器的內 外距

2021-10-08 01:52:57 字數 1691 閱讀 1635

繼續。

第乙個示例,就管它叫「距離產生美」:

>

>

charset

="utf-8"

/>

name

="viewport"

content

="width=device-width, initial-scale=1"

>

>

title

>

head

>

type

="text/css"

>

*.img

#box

style

>

>

"box"

>

class

="img"

>

src=

"../05%20baiducloud%20menu/img/資料夾.png"

>

>

資料夾div

>

class

="img"

>

src=

"../05%20baiducloud%20menu/one/img/壓縮包.png"

>

/>

壓縮包div

>

class

="img"

>

src=

"../05%20baiducloud%20menu/one/img/檔案.png"

>

/>

其他檔案

div>

div>

body

>

html

>

執行結果如圖:

能夠看到有居中的乙個大容器和三個存放元素的小容器,小容器裡存在元素與邊框和邊框與大容器之間的兩道間隙。

之前其實零零散散的將講過關於margin和padding屬性的內容,但是既不系統也不詳細。(我自己回頭看也發現了講的有點亂) 再列乙個**來重點描述一下:

屬性內容

值margin

設定元素的整個邊框的邊距寬度(即本容器的邊框與父容器的邊框之間的距離)

px或auto(水平居中)

margin-top

設定元素的上邊框的邊距寬度

pxmargin-bottom

設定元素的下邊框的邊距寬度

pxmargin-left

設定元素的上邊框的邊距寬度

pxmargin-right

設定元素的上邊框的邊距寬度

pxpadding

設定元素的整個邊框的填充寬度(即容器元素容器邊框之間的距離)

pxpadding-top

設定元素的上邊框的填充寬度

pxpadding-bottom

設定元素的下邊框的填充寬度

pxpadding-left

設定元素的左邊框的填充寬度

pxpadding-right

設定元素的右邊框的填充寬度

px至於內外邊框的應用。。示例裡展示過了,就是能夠調整一組漂浮元素在瀏覽器裡的具體位置。

前端學習筆記4 CSS入門二

前言 雖然做了幾個前端專案,但是屬於專案組的趕鴨上架。我的前端基礎還是非常薄弱,在網上找了一些 用於空閒時間學習。在此做下學習筆記,以做複習使用。的課程講的很好,很適合像我這樣零基礎的人學習,非常感謝 的維護者,推薦下 綠葉學習網 1.控制字型的有,font family 字型型別 font siz...

前端筆記(CSS二)

1 emmet 語法 emmet語法的前身是zen coding,它使用縮排,來提高html css的編寫速度,vscode內部已經整合該語法。1 快速生成html結構語法 2 快速生成css樣式語法 1.1快速生成html結構語法 1 生成標籤直接輸入標籤名 按tab鍵即可 比如 div 然後ta...

前端學習筆記(二) CSS(1)

1 認識css 主要用於設定html頁面中的文字內容 字型 大小 對齊方式等 的外形 寬高 邊框樣式 邊距等 以及版面的布局和外觀顯示樣式。css以html為基礎,提供如字型 顏色 背景的控制及整體排版等豐富的功能,同時可以針對不同的瀏覽器設定不同的樣式。2 引入css樣式表 行內式概念 通過標籤的...