1. 理解什么盒子模型
网页中，所有的html标签，都可以做为一个盒子
网页元素(内容)：文字、图片<img/>
2. 盒子的边框（顺时针：上右下左 ）
a) border-width:宽度( border-top-width border-right-width
border-bottom-width border-left-width)
b) border-style:样式( solid细边框、dashed虚线边框)
c) border-color:颜色
d) 简写：border:1px solid red;
|
属性 |
说明（顺时针：上右下左） |
|
|
border-top-color |
设置上边框颜色 |
|
|
border-right-color |
设置右边框颜色 |
|
|
border-bottom-color |
设置下边框颜色 |
|
|
border-left-color |
设置左边框颜色 |
|
|
border-color |
设置4个边框为同一颜色 |
border-color：red; |
|
上下边框颜色为blue 左右边框颜色为red |
border-color: blue red; |
|
|
上边框颜色为blue 左右边框颜色为red 下边框颜色为green |
border-color: blue red green; |
|
|
上、下、左、右边框颜色 分别为blue、red、green、black |
border-color: blue red green black; |
|
e) 外边距(盒子之间的距离)——margin
1、 居中——margin : 0px auto;
2、 margin-left\right\top\bottom：数字px;
f) 内边距(文字或图片和盒子中间的间隙)——padding
padding-top\right\bottom\left (数字px)
说明：边框、外边距、内边距，
简写方式方向（顺时针），按上、右、下、左设置
一、 标准文档流
1、 块级元素
a) 特征：单独占据一块区域，单独占一行，里面包含内联元素
b) 常用的块级元素：
i. 标题标签——<h1…h6>
ii. 段落标签——<p>
iii. 层——<div>
iv. 表格——<table>
v. 表单——<form>
vi. 列表：有序列表、无序列表、定义列表
2、 内联元素
常用的内联元素：<img/>、<span>、<strong> 、<em>、<a>、
表单元素
3、 标准文档流规则：块级元素，包含内联元素，反之则不行
三、 控制元素显示和隐藏——display属性
none——隐藏 block——显示