二十七、盒子
代碼
<html>
<head>
<meta content="text/html;charset=utf-8">
<title>盒子</title>
<style>
div{background:#CCC;border-color:#00F;}
</style>
</head>
<body>
<div>這是一個盒子</div>
</body>
<html>
擴展
- 給div添加CSS樣式：padding:20px;border-width:4px;margin:15px;border-color:#00F;border-style:solid;
答案：(1)padding：內邊距，負責內容-邊框的距離
(2)border：邊框，負責邊框的粗細
(3)margin：外邊距，負責邊框-盒子外緣的距離
(4)border-style：邊框樣式，值：solid（默認值）/dashed/dotted/double
二十八、邊框
代碼
<html>
<head>
<meta content="text/html;charset=utf-8">
<title>盒子</title>
<style>
div{background:#CCC;border-color:#00F;border:4xp #0000FF solid;}
</style>
</head>
<body>
<div>這是一個盒子</div>
</body>
<html>
知識點
- border爲簡寫形式：-width、-color、-style可調換
擴展
- 給div添加CSS樣式：border-left:1px orange dashed
答案：(1)可使用-<方位>設置單獨邊框屬性，且優先級更高
(2)方位：top right bottom left
- （在擴展1基礎上）給div添加CSS樣式：border-left-color:red
答案：可使用border-<方位>-<屬性>設置單獨邊框的單獨屬性
- （在擴展2基礎上）給div添加CSS樣式：border-width，值先後試試“4px 8px”、“4px 8px 12px”、“4px 8px 12px 16px”
答案：border-width可傳入1到4個值，分別代表
1：全部
2：上下 左右
3：上 左右 下
4：上 右 下 左
二十九、內/外邊距
代碼
<html>
<head>
<meta content="text/html;charset=utf-8">
<title>盒子</title>
<style>
div{background:#CCC;border-color:#00F;padding:4px 8px;margin:8px 4px;}
</style>
</head>
<body>
<div>這是一個盒子</div>
</body>
<html>
知識點
- padding和margin亦適用邊框大小的簡寫式
