css(四）-盒子模型

一.基础

页面布局的三大核心是盒子模型，浮动和定位

width和height指的是内容的宽度
盒子的宽度 = 内容宽度 + 左填充 + 右填充 + 左边框 + 右边框 + 左边距 + 右边距
盒子的高度 = 内容高度 + 上填充 + 下填充 + 上边框 + 下边框 + 上边距 + 下边距

盒子模型组成：由内而外：内容（content），内边距（padding，），边框（border），外边距（margin）
边框（border）会影响盒子实际大小
内边距（padding）是边框与内容的距离，会影响盒子实际大小（撑开盒子）；如果不指定盒子宽度，则padding不撑开盒子
外边距（margin）会改变盒子的位置，控制盒子与盒子之间的距离

应用
外边距典型应用：块级盒子水平居中对齐，必须满足两个条件：1.盒子必须制定宽度；2.盒子左右外边距设置位auto
行内元素和行内块元素水平居中：给父元素添加text-align:center即可
外边距合并：导致嵌套块元素塌陷问题
解决：1.给父元素定义上边框；2.为父元素定义上内边距；3.为父元素添加overflow：hidden

css3新增样式：
圆角边框：border-radius
盒子阴影：box-shadow：h-shadow(水平阴影的位置） v-shadow（垂直阴影的位置） blur（模糊距离） spread（阴影的尺寸） color（阴影的颜色） inset（内部阴影还是外部阴影）10px 10px 10px 10px black。默认的是外阴影，但是不可以写outset，盒子阴影不占用空间，不会影响其他盒子排列
文字阴影：text-shadow：h-shadow(水平阴影的位置） v-shadow（垂直阴影的位置） blur（模糊距离） color（阴影的颜色）

二.面试题

1.说说对盒子模型的理解？
从三个方面来说，分别是盒子模型的概念，组成以及分类
概念：每个元素都占有一定的空间，所有元素均可以看成是一个盒子
组成：内外边距，边框和内容
分类：w3c标准盒子，IE盒子，可以用box-sizing来切换盒模型。
box-sizing的取值为content-box或者是border-box，默认是content-box（w3c标准盒模型），又称内容盒子，他所说的width只包含内容，不包含padding和margin；
IE盒子又称怪异盒模型（边框盒子），他所指的width包括content，padding和border
2.js如何获取盒模型对应的宽度和高度？
方式一：dom.style.width/height，这种方式只能获取行内样式的宽度和高度；
方式二（通用型）：window.getComputedStyle(dom).width/height，这种方式获取的是浏览器渲染以后的元素的宽和高，这种写法兼容性更好一些；
方式三（IE独有的）：dom.currentStyle.width/height，这种方式获取的是浏览器渲染以后的元素的宽和高，无论是用何种方式引入的css样式都可以，但只有IE浏览器支持这种写法；
方式四：dom.getBoundingClientRect().width/height，这种方式获得到的宽度是内容content+padding+border，获取一个元素的绝对位置。绝对位置是视窗 viewport 左上角的绝对位置。此 api 可以拿到四个属性：left、top、width、height。
3.边距重叠解决方案
1.给父元素定义上边框；
2.为父元素定义上内边距；
3.为父元素添加overflow：hidden
4.行内元素与块元素的区别，怎么相互转换（BFC）

块元素	行内元素
即各个块级元素独占一行，默认垂直向下排列	和其他元素都在一行，即行内元素和其他行内元素都会在一条水平线上排列
高度、宽度、margin及padding都是可控的，设置有效，有边距效果	高度、宽度是不可控的，设置无效，由内容决定。
宽度没有设置时，默认为100%
块级元素中可以包含块级元素和行内元素	行内元素最好只包含行内元素，不包含块级元素。

转换： 使用display属性能够将三者任意转换：

(1)display:inline;转换为行内元素；

(2)display:block;转换为块状元素；

(3)display:inline-block;转换为行内块状元素。