盒子模型

课程内容

• 盒子模型概念
• 高和宽设置
• 边框设置
• 内边距设置
• 外边距设置
• 盒子的计算
• IE盒子模型
• 元素显示方式

 

一、 盒子模型概念

整个网页可以看成一个大盒子，在网页这个大盒子里放着元素和内容等一系列盒子，在元素里面，它又放着各种不同的盒子。比如我们有两个杯子，为了防止杯子破碎，我们在杯子外面包上报纸，放在两个盒子里面，然后再把两个盒子放在一个大盒子里，收纳起来。

 

二、 高和宽设置

1.宽度属性：

宽度:
width:长度值|百分比| auto

最大宽度:

max-width:长度值|百分比| auto

最小宽度:

min- width:长度值|百分比| auto

2.高度属性

高度:

height :长度值|百分比| auto

最大高度:

max-height:长度值|百分比| auto

最小高度:

min-height:长度值|百分比| auto

说明:设置块级元素和替换元素的内容高度

 

3.哪些HTML元素可设置高和宽属性

• 块级元素

　　<P>、<div>、 <h1> ~ <h6>、<ul>、<li>、<ol>、<dl>、<dt> 、<dd>等

• 替换元素

　　浏览器根据其标签的元素与属性来判断显示的具体内容<img>、<input>、 < textarea>策

 

4.height和width属性总结

①width和height 属性设置是内容的高和宽

②width和height属性设置对块级元素和替换元素有效

③max-height(width)/min-height(width)有兼容性问题，IE不支持

 

三、边框设置

 

1.边框属性

边框宽度( border-width )

边框颜色( border-color )

边框样式( border-style )

 

2.设置元素边框样式

border-style:值

值	描述
none	定义无边框。默认值
hidden	与"none" 相同。除非在表格元素中解决边框冲突时
dotted	定义点状边框。在大多数浏览器中呈现为实线
dashed	定义虚线。在大多数浏览器中呈现为实线
solid	定义实
double	定义双线
groove	定义3D凹槽边框
ridge	定义3D垄状边框
inset	定义3D inset边框
outset	定义3D outset边框
inherit	规定应该从父元素继承边框样式

 

3.边框语法

4个不同方向来表示(上、下、左、右)

表示:

border-[left| right | top | bottom]-width

border-[left | right | top | bottom]-color

border-[left| right | top| bottom]-style

 

4.缩写:

border: [宽度] I [样式] | [颜色]

不同方向:

border-top: [宽度] | [样式] | [颜色]

border-left : [宽度] | [样式] | [颜色]

border-right : [宽度] | [样式] | [颜色]

border-bottom : [宽度] | [样式] | [颜色]

 

四、内边距属性

1.设置元素的内容与边框之间的距离(内边距或填充) ,分4个方向

(上、右、下、左)

padding-top:长度值|百分比

padding-right :长度值| 百分比

padding-bottom :长度值|百分比

padding-left :长度值| 百分比

说明：值不能为负值

 

 

2.内边距属性缩写

padding:值1 ;    //4个方向都为值1

padding:值1值2;   //上下=值1, 左右=值2

padding:值1值2值3;   //上=值1，左右=值2，下=值3

padding:值1值2值3值4;   //上=值1,右=值2，下=值3,左=值4

 

五、外边距属性

1．外边距属性

设置元素与元素之间的距离(外边距)，4个方向(上、右、下、左)

margin-top: 长度值|百分比| auto

margin-right:长度值| 百分比| auto

margin-bottom: 长度值I百分比I auto

margin-left :长度值I百分比| auto

说明:值可为负值

 

2.外边距属性缩写

设置元素与元素之间的距离(外边距)，4个方向(上、右、下、左)

margin:值1;.             //4个方向都为值1

margin:值1值2 ;         //上下=值1，左右=值2

margin:值1值2值3;    //上=值1,左右=值2，下=值3

margin:值1值2值3值4; //上=值1，右=值2，下=值3,左=值2

 

注：

1．默认情况下,相应HTML块级元素存在外边距

body、h1~h6、p

2.声明margin属性 ,覆盖默认样式

body,h1 ,h2,h3,h4,h5,h6,p{ margin:0; }

4.margin值为auto ,实现水平方向居中显示效果

5.由浏览器计算外边距

6.垂直方向,两个相邻元素都设置外边距,外边距会发生合并

7.合并后外边距高度=两个发生合并外边距的高度中最大值

 

 

六、盒子模型计算

1.盒子在页面中所占的宽度

是由左边距+左边框+左填充+内容宽度+右填充+右边框+右边距组成

 

2.盒子在页面中所占的高度

是由上边距+上边框+上填充+内容高度+下填充+下边框+下边距组成

 

七、IE盒子模型

1、如果没有Doctype文档类型声明，各浏览器按照自己的方式解析。

2、如果有Doctype文档类型声明，按照标准盒子模型来解析。

 

 

八、元素显示方式

1.display属性

inline

元素将显示为内联元素,元素前后没有换行符

block

元素将显示为块级元素，元素前后会带有换行符

inline-block

行内块元素,元素呈现为inline ,具有block相应特性

none

此元素不会被显示

 

2.样式继承关系

 

样式属性	继承	说明
width height	不继承 块级元素、替换元素	对于样式属性，通过设置们 为inherit,指定从父元素 继承相对属性值。 例: div{padding:10px;} div p{padding:inherit;}
padding	不继承
margin	不继承
border	不继承