控制視窗與Stack之間的Layout邊界屬性
給於肝肝工程師小額捐款: ETH/ERC20
在我們剛開始寫CSS 的時候,我常常把Margin 與Padding 搞混
藉由這次機會, 我在這邊隨手做紀錄一下。
首先, 這張圖片裡面, 各種結構+屬性關係先弄熟!
參考: Margin and Padding – Xamarin | Microsoft Docs
範例測試
先用2個 Block 去強化這個概念
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<meta http-equiv=”X-UA-Compatible” content=”IE=edge”>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<link rel=”stylesheet” href=”CSS/BoxModel.css”>
<script src=”JS/undefined_Notdefined.js”></script>
<title>BoxModel</title>
</head>
<body>
<h1>實作盒模型</h1>
<div class =”box 1″>
<p>
1. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
</div>
<div class =”box 2″>
<p>2. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis
aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint
occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</body>
</html>
.box {
display: inline-block;
width: 300px;
height: 300px;
background: black;
margin-top:20px ;
margin-left: 20px;
margin-bottom: 30px;
margin-right:30px;
font-size:25px;
color: azure;
padding: 70PX;
border: 25px solid rgb(243, 18, 18)
}
CSS_用Margin 來玩玩
Margin-top
接下來, 我們將Margin-top = 20px 顯示出來
CSS_Margin-left
Margin-left =20px
意思是指:
以每個Stack (每個box 1, box 2)為主的邊界, 向右邊推20px。
1.若你的元素<div class=box > = Stack 並沒有去限制 width的話 : 就可以用padding 向外推出去。
2.反之, padding 加大的話, 會怎麼樣??
Stack. width沒有限制常數
{box padding =0px{box padding=70px你會發現, <p>元素與border之間的空間變大了
這個時候要請出排版結構圖 (汗
Stack. width有限制常數情況下
container.width= 400px讓我們把box.padding數值改成 120px 試試看。
box.padding=120px結果: box.Padding 仍可以把Stack 向外推!
結論
這個部分, 是對於我這個一邊工作一邊紀錄的金魚腦
很難短時間記清楚這些東西, 所下得一些功夫+解析
程式難在於…. 每個領域的用途差之甚遠
希望有看到這篇文章的各位有所幫助!
import 與 export 在Node.js 有提到其用法: Node.js require、module以及exports 模組設定 - Hugo Habor 每一個Javascript檔案可當作獨立模組系統(ES Module) 1. Module（模組）…
作者今天遇到一個很奇怪的問題 寫程式寫到一半... 點擊應用程式時... 怎麼都跳不出畫面... 後來查詢了一下是Reg註冊可能被微軟更新給搞掉了... 文章資訊來源: 【以解決】各位.exe檔案打不開，不要相信"在 Windows 7 或 Windows Vista 中無法打開 .EXE 檔案"這篇文章…
Node.js可以提供你很多模組，今天來探索如何使用 Node.js 的 http 模組來架設一個簡單的伺服器。 本篇使用模組require 載入你所需要的模組。這次我們使用'http' 模組來創造一個簡單的server。 資料參考 Node.js - createServer 起手式 - iT…
針對Node.js來談談 require、module以及exports 模組設定。這些概念允許開發者將大型程序分解成小的、可管理的、可重用的部分，稱為模塊。 下面將逐一介紹這些概念，以及它們如何與 JavaScript 關聯。 An Essential Guide to Node.js Modules (javascripttutorial.net) 1. Module（模組）…
像是很多專案必須讀取國家資料中心的metadata，許多檔案格式為CSV、JSON、Html可以利用網頁技術去爬蟲；拿一個範例來嘗試看看就知道這些語法的實際用途。 [主題週]專題報導-開放資料 (Open Data)相關議題與應用 (114230) - Cool3c 在這裡我們使用台北市資料大平台 UBike2.0 作為資料依據! 目的 來抓取空位數量 >15， 抓取空位數量 <15。…