CSS盒子模型

1.CSS盒子模型 （box model）

CSS盒子模型是在网页设计中常用CSS技术所使用的一种思维模型，CSS盒子模型本质上是一个盒子，封装周围的HTML元素，它包括：边距，边框，填充和实际的内容，通过对这些属性的设置可以丰富盒子的表现效果。

2.W3C标准|标准盒子模型 box-sizing: content-box;

一个块的总宽度= width + margin(左右) + padding(左右) + border(左右)

3.IE盒子模型|怪异盒子模型box-sizing: border-box; 

一个块的总宽度= width + margin(左右)（即width已经包含了padding和border值）

4.CSS盒子模型的组成

content内容

        内容区是盒子模型的中心，它呈现了盒子的主要信息内容，这些内容可以是文本、图片等，内容区有三个属性width、height 和overflow。使用width和height属性可以指定盒子内容区的高度和宽度，当内容信息太多，超出内容区所占范围时，可以使用overflow 溢出属性来指定处理方法。当overflow 属性值为hidden时，溢出部分将不可见；为visible时，溢出的内容信息可见，只是被呈现在盒子的外部；当为scroll时，滚动条将被自动添加到盒子中，用户可以通过拉动滚动条显示内容信息；当为auto时，将由浏览器决定如何处理溢出部分。

padding内边距

        内边距在边框和内容之间的距离。

border边框

        边框围绕在内边距和内容外，border-style边框线样式： solid实线， dashed虚线， dotted点线，double双实线。 border-width边框宽度。 border-上下左右-width。border-color 边框颜色。 border-top /right/bottom/left单独一条边。

margin外边距

        外边距在边框外周围的区域，它没有背景颜色，是完全透明的。

5.CSS盒子模型的定位position

<!-- 定位
		static默认值
		relative相对定位，相对浏览器定位，不脱离文档流
		fixed固定定位
		absolute绝对定位，脱离文档流，寻找父级是否有相对定位，如果有根据父级定位，
		如果没有找到会忘父级的父级寻找，直到浏览器，才会根据浏览器定位
		sticky粘性定位 -->

二

1. CSS  overflow：设置当对象的内容超过其指定高度及宽度时如何管理内容的属性,是添加滚动条、还是隐藏剪切超出内容

        overflow:hidden;溢出隐藏 
        visible默认值
        scroll内容超过固定区域会出现滚动条
        auto内容超出固定区域出现滚动条否则不出现
        overflow-x：hidden;隐藏横向滚动条
        overflow-y：hidden;隐藏纵向滚动条

2.关于选择器

        后代选择器(以空格     分隔)
        所有子元素选择器(以大于 > 号分隔）
        相邻兄弟选择器（以加号 + 分隔）
        所有普通兄弟选择器（以波浪号 ～ 分隔）

3.关于兼容
         -khtml-苹果浏览器
         -webkit-opacity兼容谷歌浏览器 
         -o-opacity兼容Opera浏览器
         -moz-opacity兼容火狐浏览器
         -ms-兼容IE，普通样式属性
         {
             兼容IE浏览器
             opacity:0.5;
             filter:alpha(opacity=50);
             50指的是百分之50%
         }