盒模型


什么是盒模型

盒模型指css布局中html中的每个元素在浏览器中的解析都可以被看作一个盒子,拥有盒子一样的外形和平面空间。

content - 内容

元素大小一般有内容撑开,也可以通过width/height-宽高样式设置大小

1
2
3
4
width:100px;//宽度
height:100px;//高度
min-width:100px;//最小宽度
max-width:100px;//最小高度

margin - 外边距

设置元素的外边距,有上、右、下、左四个方位的外边距。

1
2
3
4
5
6
7
8
9
10
margin-top:10px;//设置上边距10px
margin-right:20px;//设置右边距10px
margin-bottom:10px;//设置底边距10px
margin-left:20px;//设置左边距10px
//简写
margin:10px 20px 10px 20px;
//如果上下值相等,和左右值相等,还可以简
margin:10px 20px;
//如果四个边值相等,还可以再简
margin:10px;

border - 边框

设置元素的边框线

1
2
3
4
5
6
7
8
9
10
11
12
13
//设置边框样式solid-实线 dashed-虚线
border-style:solid;
//设置边框粗细,也分四个边设置,也可简写
border-width:1px 1px 1px 1px;
//设置边框颜色,也分四个边设置,也可简写
border-color:black black black black;
//一边这样简写
border:1px solid black;
//可以单独设置每一条边
border-left:1px solid black;
border-right:1px solid black;
border-top:1px solid black;
border-bottom:1px solid black;

padding - 内边距

设置元素的内边距,有上、右、下、左四个方位的内边距。

1
2
3
4
5
6
7
8
9
10
padding-top:10px;//设置上内边距10px
padding-right:20px;//设置右内边距10px
padding-bottom:10px;//设置底内边距10px
padding-left:20px;//设置左内边距10px
//简写
padding:10px 20px 10px 20px;
//如果上下值相等,和左右值相等,还可以简
padding:10px 20px;
//如果四个内边值相等,还可以再简
padding:10px;

box-sizing

设置盒模型实际大小的计算方式

  • content:内容
  • border:边框
  • margin:外边距 - 实际大小不包括margin-外边距
  • padding:内边距

标准模式

标准模式是指,浏览器按W3C标准解析执行代码;

box-sizing默认属性是content-box,就是标准模式;

1
2
3
4
5
6
   /*
box-sizing: content-box;
标准模式计算方式
实际大小=border + padding + width
content = width
*/

怪异模式

怪异模式则是使用浏览器自己的方式解析执行代码,因为不同浏览器解析执行的方式不一样,所以我们称之为怪异模式。

如果在ie6,ie7,ie8下缺少头部声明DOCTYPE将会触发怪异模式

某些地方适合使用怪异模式,可以同过box-sizing设置属性为border-box

1
2
3
4
5
6
box-sizing: border-box;
/*
怪异模式计算方式
实际大小 = width
content = width - padding - border
*/

display

元素生成的框类型,块元素或行元素等

1
2
3
4
5
6
7
8
//设置为块元素属性
display:block;
//设置为行元素属性
display:inline;
//none-没有属性,所以不会在页面上显示,可以作为隐藏的方法
display:none;
//inline-block:以行元素的排列方式,同时也有块元素特点
display:inline-block;