04_CSS盒子模式
04_CSS盒子模式
CSS 中每一個選取項 (selector) 都是以盒子模式 (box model) 來呈現，也就是說， CSS 制定的樣式 (style) 使 HTML 文件中的元素都具有邊界 (margin) 、邊框 (border) 與邊距 (padding)
css file
div {
color: white;
background-color: black;/*底色*/
width: 20%;/* 寬度 */
height: 40%;/* ��度 */
margin: 1%;/* 邊界 */
border: thick blue solid;/* 邊框 */
padding: 10%;/* 邊距 */
text-align: center;/* 文字至中 */
}
jash {
color: white;
background-color: black;/*底色*/
width: 50%;/* 寬度 */
height: 40%;/* ��度 */
margin: 30%;/* 邊界 */
border: thick blue solid;/* 邊框 */
padding: 10%;/* 邊距 */
text-align: center;/* 文字至中 */
}
span {
color: white;
background-color: black;
margin: 2;
border: thick blue solid;
padding: 6;
}
|
html file
<html>
<head>
<title>網頁標題</title>
<linkrel="stylesheet"type="text/css"
href="demo01.css">
</head>
<body>
<span>There is no spoon.</span>
<div>There is no spoon.</div>
<jash>There is no spoon.</jash>
</body>
</html>
|