html5隐藏盒子颜色,html(7)盒子模型(示例代码)

1. 理解什么盒子模型

网页中，所有的html标签，都可以做为一个盒子

网页元素(内容)：文字、图片

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.              标题标签——

ii.             段落标签——

iii.             层——

iv.              表格——

v.              表单——

vi.              列表：有序列表、无序列表、定义列表

2、  内联元素

常用的内联元素：、、 、、、

表单元素

3、            标准文档流规则：块级元素，包含内联元素，反之则不行

三、    控制元素显示和隐藏——display属性

none——隐藏                    block——显示