html(7)盒子模型

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——显示