css盒子模型_css盒子模型深入了解

行高：line-height

行高是文字基线到基线的距离

一行文字的行高当年等于父元素的高度时，文字垂直居中显示

当一个盒子没有设置高度时，里面要有内容，可以用行高撑开盒子

浏览器默认的字体大小是16px

如果子元素没有设置行高

当行高数值由em、%为单位是，子元素的行高是继承父元素的行高乘字体大小的结果

当行高数值是px为单位时，子元素直接继承父元素的行高

当行高无单位直接是数值的时候，子元素行高是子元素的文字大小和子元素的行高相乘

子元素设置行高的时候使用子元素的行高，不继承(inherit)

盒子模型

总宽度：margin+border+margin+content

外边距：margin

上下盒子都有外边距会取大的

包含的子盒子设置上外边距会造成塌陷(给子盒子设置上外边距后，父盒子会随着子盒子同时向下移动)，解决办法是给父盒子设置overflow：hidden；或者个给父元素设置边框(不推荐使用)

内边距：padding

会撑大盒子尺寸

会影响盒子的宽度

继承的盒子宽度不会被撑大，子元素的宽度如果是从父元素继承来的，设置内边距。盒子的宽度不会改变，但是仅在内边距小于父盒子宽度的情况下生效，垂直方向上没有此规则

边框：border

border：宽度 样式 颜色(没有顺序要求，样式必须写)

边框合并：border-collapse：sellapse

table的边框覆盖td的边框

内容：content

盒子居中显示：margin：0 auto；

label：绑定标签

显示文字

点击"显示文字"可获取光标焦点，也可以执行：focus伪类，获取焦点发生的样式变换

border：0 none：去掉边框

outline：none；去掉轮廓线

FireWorks的基本应用