首页 > 代码库 > html(7)盒子模型

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

html(7)盒子模型