繼續。
第乙個示例,就管它叫「距離產生美」:
>
>
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樣式表 行內式概念 通過標籤的...