6-1-1盒模型和浮动定位属性.pptx

;教学目标;学习至此，我们对网页中的所有模块元素只能实现纵向的布局，如下图所示。

;我们在网页首页布局中经常会这些复杂的布局，这样的布局如何实现？

;;一、div标签与盒模型;2.盒子模型

盒模型（BoxModel）是从CSS诞生之时便产生的一个概念，是关系到设计中排版定位的关键问题，任何一个块级元素都遵循盒模型。

所谓盒模型，就是把每个HTML元素看作装了东西的盒子，盒子里面的内容到盒子的边框之间的距离即为填充（padding），盒子本身有边框（border），而盒子边框外和其它盒子之间还有边界（margin），每个网页就是由多个盒子堆积起来的。默认情况下盒子的边框是无，背景色是透明，所以我们在默认情况下看不到盒子。

;;一个盒子的实际宽度=左边界+左边框+左填充+内容宽度+右填充+右边框+右边界

一个盒子的实际高度=上边界+上边框+上填充+内容高度+下填充+下边框+下边界

;box-sizing属性;box-sizing属性;盒模型;;（1）元素的浮动属性-----float;（1）元素的浮动属性-----float;（1）一个盒子浮动;（2）多个盒子浮动;若包含的容器太窄，无法容纳水平排列的三个浮动元素，那么其他浮动块向下移动。但如果浮动元素的高度不同，那当它们向下移动时可能会被卡住。;盒子浮动定位;清除浮动;添加动画效果;清除浮动;;实例赏析：

/zh-cn/

;响应式设计;网页布局方式;网页布局方式;网页布局方式;手机端布局方式;手机端布局方式;;

规范的命名也是Web标准中的重要一项，标准的命名可以更好的看懂代码，因为：“当某日翻出自己过去写的代码居然看不懂了”，为了避免这种情况我们就要规范化命名，并且一个网站项目不是一个人就可以完成的，是需要大家互相合作的，如果没有规范化命名，别人就无法看懂你的代码，大大降低了工作效率，必须规范化命名！;关于CSS命名法，和其他的程序命名差不多，有以下三种：

骆驼命名法

帕斯卡命名法

匈牙利命名法;（1）骆驼命名法

说到骆驼大家肯定会想到它那明显的特征，背部的隆起，一高一低的，我们的命名也???这样一高一低，怎么才能这样，就用大小写字母呗!，大写的英文就相当于骆驼背部的凸起，小写的就是凹下去的地方了，但是这个也是有规则的，就是第一个字母要小写，后面的词的第一个字母就要用大写，如下：

#headerBlock

.navMenuRedButton;;;以上三种，在命名CSS选择器的时候都比较常用，当然这三种命名法可以混合使用，只需要遵守有一个原则就可以，就是“容易理解，容易认，方便协同工作”就OK了，没有必要强调是那种命名法。;页面模块的常用命名;课堂总结;