WEB前端元素和盒子模型（学习笔记）

元素的种类：
1.区块元素：
（1）每个元素独占一行
（2）支持所有的样式
（3）不设置宽度时宽度等于父元素宽，不设置高度时高度为0，有内容时高度由内容撑开
（4）不会解析换行符
（5）常见的区块元素：div ul ol li p h1~h6 dl table form pre hr
2.内联元素
（1）在一行有空间时，可以和非区块元素同行显示
（2）不支持宽高样式，使用部分样式（上下margin和padding时）会出现问题
（3）宽高完全由内容撑开
（4）换行符会被解析
（5）常见的内联元素：span a strong b i a em sub sup ins del img input label br
3.元素的属性和样式：
（1）title属性：标记的标题，可以在鼠标移入该元素时显示出来
（2）class属性：元素的类名，多个元素可以使用相同的类名，常见的类名有：
页头：header；标志：logo；侧栏：aside；广告：banner；导航：nav；菜单：menu；搜索：search 滚动：scroll；页面主体：main；内容：content；列表：list；标题：title；服务：service；热点：hot 新闻：news；下载：download；注册：regsiter；合作伙伴：partner；按钮：btn；页脚：footer
（3）id属性：元素的编号，不同于class，id的值在页面内是唯一的。
（4）style属性：元素的样式，用来书写css层叠样式表的，常见的样式有：
a.width和height：区块元素的宽和高
b.color：字体颜色
c.background-color：背景颜色
盒子模型：content margin padding border
1.content：盒子内容，元素内容的区域，由width和height组成
2.padding：内填充，元素内容和边框之间的区域，在设置四个值时，分别代表上，右，下，左；设置三个值时，分别代表上，左右，下；设置两个值时，分别代表上下，左右；设置一个值时：分别代表上下左右；
3.margin：外边距，该元素与其他元素之间的间距，margin是复合样式，同padding；
4.border：边框，元素的最外层结构；border的集合样式必须包含 width，style color三个值
5.块状元素常用居中方式：margin：0 auto；
6.外边距重叠：相邻的两个盒子的上下边距可以结合成一个单独的外边距，这种合并外边距的方法被称为折叠，折叠结果遵循下列计算原则：
（1）两个相邻的外边距都是正数时，折叠结果是两者之间较大的值
（2）两个相邻的外边距都是负数时，折叠结果是两者绝对值的较大值
（3）两个相邻的外边距一正一负时，折叠结果是两者相加
（4）消除父子元素边距重叠，给父元素加边框，给父元素加padding
7.盒模型的兼容问题和解决方法：
（1）在各种浏览器中，实际盒模型有两种：内容盒模型和边框盒模型
（2）盒模型的公式：盒子的宽=width+padding-left+padding-right+border-left-width+border-right-width；
（3）在低版本浏览器中使用的是边框盒模型，边框盒模型中我们设置的宽实际上是盒子的宽，而标准浏览器的内容盒模型我们为元素设置的宽是内容的宽。
（4）css3中提出一个样式：box-sizing：border-box/content.box（默认），该样式用来修改盒模型的种类。
（5）由于该样式是css3样式，低版本浏览器不兼容，因此一般我们会将盒模型的值设置成border-box(怪异盒模型)来统一效果，而且该盒模型在页面布局计算时也会很方便。

练习1：用一个区块元素的下边框画出一个蓝色三角形
练习2：设置两个div元素，父元素(盒子大小300px*300px，背景黄色)和子元素(宽高100px，背景红色)，要求用内填充、外边距等样式使子元素恰好在父元素正中心