CSS基础之盒子模型

在页面中所有元素都可以有宽高，所有元素都是一个矩形，可以将这些元素看成一个盒子。盒子包括外边距+边框+内边距+元素内容。

外边距设置

外边距方向：top bottom left right

外边距尺寸：CSS规定的尺寸单位，如px、em、rem、百分比

语法：margin-方向:尺寸单位； margin-top|margin-bottom|margin-left|margin-fight


使用百分比时，参考的是父级的尺寸。尺寸单元允许使用负值。

外边距简写

外边距的顺序也是上、右、下、左

margin: 10px 20px 30px 40px

margin:10px 20px 30px 10px是上边距 20px表示左右外边距 30px表示下外边距

margin:10px 20px 10px表示上下外边距 20px表示左右外边距

margin:10px 每个外边距均为10px

外边距当初踩过的坑

当元素上下排列时，上下外边距会合并，上下外边距取最大值保留。

当元素左右排列时，左右外边距会叠加，左右外边距的值会相加。

行级元素只有左右外边距，没有上下外边距

行内块级元素可以设置上下外边距、左右外边距

内边距设置

内边距，简单的理解就是发快递时，放在快递盒子内气泡膜或泡沫，这些气泡膜或泡沫包裹的就是快递，也就是元素内容。

所有元素都可以设置内边距。

语法：padding-方向:尺寸单位;

使用百分比时，参考的是父级的尺寸。内边距的尺寸单元不允许使用负值。

内边距的简写和外边距简写一致。

内边距和边框踩过的坑

内边距和边框会撑大盒子的尺寸。

box-sizing属性

正常情况下，内边距和边框是在元素设置的宽度和高度之外进行绘制。

为不影响整体排版及其他元素，可以使用box-sizing进行设置

box-sizing:context-box 这是默认值，内边距和边框是在元素设置的宽度和高度之外进行绘制

box-sizing:border-box 内边距和边框是在元素设置的宽度和高度之内进行绘制，会压缩元素内容尺寸。

border-box设置的宽带等于左边框+右边框+左内边距+右内边距+元素内容宽度

border-box设置的高带等于上边框+下边框+左内边距+右内边距+元素内容高度

ie9以下的浏览器版本及一些老版本的其他浏览器都不支持box-sizing。

解决方法：

-moz-box-sizing:

-webkit-box-sizing:

溢出隐藏

当元素内容超过设置的尺寸则会超出设置尺寸。

语法：overflow:hidden|visible|scroll|auto

overflow属性是规定内容溢出了元素边框时发生的事情如何处理

visible：内容不会被修剪，会显示在元素边框之外，默认值

hidden：内容会被修剪，溢出的内容不可见。实际开发中常用的属性值

scroll：溢出内容会被修剪，会显示滚动条，以便查看溢出的内容

auto：当内容大于元素框时，内容会被修剪，会显示滚动条，以便查看溢出的内容，当内容小于元素框时，不会显示滚动条

通过设置行高解决文字显示一半的问题。

元素居中及样式重置

块级元素水平居中：margin:0 auto；0表示上下外边距，auto表示左右外边距；只对块级元素有效；无法实现上下居中

样式重置：

marging:0

padding:0

border:0;

img{border:none;vertical-align:top|center}

box-sizing:border-box

text-decoration:none;

outline:none

font-weight:normal

font-style:normal