学IT到菁瑞优智

一、盒模型

1、“盒子”与“模型”的概念

网页设计中常听的属性名：

内容(content)、填充(padding)、边框(border)、边界(margin)， 这些都是CSS盒子具备属性。

这些属性我们可以把它转移到我们日常生活中的盒子（箱子）上来理解，日常生活中所见的盒子也就是能装东西的一种箱子，也具有这些属性，所以叫它盒子模型。CSS盒子模型就是在网页设计中经常用到的CSS技术所使用的一种思维模型。

特点是每个盒子都有：边界、边框、填充、内容四个属性；并且每个盒子都有尺寸。

每个属性都包括四个部分：上、右、下、左；这四部分可同时设置，也可分别设置。

列如：我们把盒子模型理解网上购物的包装盒，填充可以理解为盒子里的抗震辅料厚度，而边框有大小和颜色之分，我们又可以理解为生活中所见盒子的厚度以及这个盒子是用什么颜色材料做成的，边界就是该盒子与其它东西要保留多大距离。

在HTML中，所有的容器标签都可以认为是一个盒子，但是行内标签与块标签有着明显的差别。

行内标签无法设置尺寸（宽度和高度）等等，块标签是一个完整的盒子。

2、盒模型的尺寸

width 宽度

• 默认值auto自动
• length，例如500px
• %，例如100%
• em/rem，例如100em
• 只有block块元素才可以设置宽度，inline行内元素无法设置宽度。

height

• 默认值auto
• length
• %，父容器有高度的时候才有效
• em/rem
• 只有block块元素才可以设置高度，inline行内元素无法设置高度。

min-width，表示最小宽度

max-width，表示最大宽度

min-heigh，表示最小高度

max-height，表示最大高度

3、内边距padding

内边距也可以称为填充，是边框与内容之间的距离。

元素嵌套之间，可用于处理父子关系之间的间距。

inline元素垂直方向的内边距不占据高度。

padding：

• padding-top，上边距
• padding-right，右边距
• padding-bottom，下边距
• padding-left，左边距

padding的值为不同的个数的情况

• 如果只提供一个，将用于全部的四条边。
• 如果提供两个，第一个用于上下，第二个用于左右。
• 如果提供三个，第一个用于上，第二个用于左右，第三个用于下。
• 如果提供全部四个参数值，将按上、右、下、左的顺序作用于四边。

4、外边距margin

是处理相邻的兄弟元素之间的间距。

inline元素的垂直外边距不起作用。

margin：

• margin-top，上间距
• margin-right，右间距
• margin-bottom，下间距
• margin-left，左间距
• margin为多个值的情况，与padding是一样的。

margin的上下叠加:

只发生在block元素上(不包括float、absolute、inline-block元素)，而且是相邻的兄弟元素。

只发生在垂直方向上。

规则：正正取大值、正负值相加、负负最负值。

margin的上下传递:

父级元素和第一个或最后一个子元素，父子级的margin重叠又叫margin传递。

父子级margin重叠需要满足以下几个条件(以margin-top重叠为例)。

• 父元素不是BFC元素
• 父元素没有padding-top值
• 父元素没有border-top值
• 父元素和第一个子元素之间没有inline元素分隔

5、border边框

1）border的四条边

• border-top，上边框
• border-right，右边框
• border-bottom，下边框
• border-left，左边框

2）border的三个属性

• border-width，边框宽
• border-color，边框颜色
• border-style，边框属性，这是属性不能缺省：solid、dashed

3）border简写

border:1px solid #000;

inline元素垂直方向的边框不占据高度

4）border-radius：圆角半径

先用ps切片圆角，作为背景图片实现。

再用border-radius实现，正圆：50%

胶囊圆角，当盒子的高度不确定的时候，可以设置一个远大于高度的半径值，实现胶囊圆角。

6、overflow溢出

• visible：默认值
• hidden：隐藏
• auto：没有超过高度则没有滚动条，超过了高度自动出现滚动条
• scroll：一直都有滚动条

二、标准模式与怪异模式

盒模型一共有两种模式，一种是标准模式，另一种就是怪异模式。

当创建网页时通常会在第一行写上标准声明，如：

以上几种DOCTYPE都是标准的文档类型，无论使用哪种模式完整定义DOCTYPE，都会触发标准模式，而如果DOCTYPE缺失则在ie6，ie7，ie8下将会触发怪异模式（quirks模式）。

CSS3怪异盒模型被纳入了标准。

1、标准盒模型

width是content-width，盒子的总宽度=width+左右padding+左右border

       盒子的占位宽度=width（content内容可用宽）+左右padding+左右border

盒子的占位高度=height（content内容可用高）+上下padding+上下border

2、怪异盒模型

盒子设置的width=盒子的content内容宽+左右padding+左右border

 3、box-sizing盒模型设置

CSS3提供的这个属性可以修改盒模型的运算方式。

作用：设置或检索对象的盒模型组成模式。

语法：box-sizing：content-box | border-box

默认值：content-box

content-box：将对象定义为标准模式下的盒模型，{element width=border+padding+width}。

border-box：将对象定义为怪异模式下的盒模型，width = content+padding+border

三、列表样式

1、list-style

• list-style-type
• list-style-image
• list-style-position

2、常见案例

• 普通文章列表
• 排行榜列表
• 侧边栏导航

四、表格样式

1、宽高width/height

2、边框

border（边框）

table,td,th{
    border:1px solid #000;
}

border-collapse英[klæps]单元格之间的缝隙

collapse 合并

separate 间隔

table{
    
    border-collapse:collapse;
}

border-spacing 单元格边界之间的距离

length 一个值表示横向和纵向的间距一样

length length 第一个作用于横向间距，第二个作用于纵向间距

table{
    border-collapse:separate;
    
    border-spacing:10px 5px;
}

3、单元格内对齐

text-align，左右对齐

vertical-align，垂直对齐

4、单元格内边距

为td、th设置padding

5、背景和文本颜色

backgrond和color

五、鼠标形状 cursor

作用：设置或检索当鼠标滑过样式控制的对象时改变鼠标形状。

语法：cursor: auto| crosshair| default| hand| move| help| wait| text| w-resize|s-resize| n-resize|e-resize| ne-resize|sw-resize| se-resize| nw-resize|pointer| url (*url*)

hand（手型，IE8及以下，新版浏览器要使用Pointer表示点击的手型）、crosshair（“十”型）、text（“I”型）、wait（等待）、default（默认）、help（帮助）、e-resize（东箭头）、ne-resize（东北箭头）、n-resize（北箭头）、nw-resize（西北箭头）、w-resize（西箭头）、sw-resize（西南箭头）、s-resize（南箭头）、se-resize（东南箭头）和auto（自动）

注： 常在非超链接的对象上设置成手型，配合JavaScript效果，让用户认为是可以点击的模块。

六、课堂总结

1、重点

盒模型的属性。

block和inline盒模型的区别。

2、难点

怪异盒模型的计算方式。

inline盒模型不能设置宽高，垂直方向的内边距、边框、外边距不占据高度，垂直方向的外边距无效。

3、学习方法

把不熟练的单词抄写3遍以上。

多敲代码，多思考。

4、排错技巧

利用chrome浏览器的开发者调试工具。