CSS2.0盒模型与层模型

盒子模型

一个元素由四个部分组成margin,border,padding,content,分别是外边距，边框，内边距，内容区，content不是由属性构成的，而是由width和height构成的。

margin：它设置这个元素距离外面靠近它的其他元素或浏览器的距离，这是一个复合属 性由margin-top, margin-right, margin-bottom, margin-left组成，也可以分开设置。复合属性的值也有四种写法：

1. 四个值 : 上，右，下，左 ——例如margin: 5px 10px 10px 20px;
2. 三个值 ： 上，左右，下
3. 两个值 ： 上下，左右
4. 一个值 ： 上下左右

其实margin不属于一个盒子的模型部分，盒子模型只有content, padding, border

现代大部分的浏览器的body元素都有一个默认的margin值8px

层模型（层定位）

position的意思是定位,同样作用就是给元素施加定位。一共有四个static, absolute, relative, fixed

---

1. static: 默认的属性，当我们没有写position时默认就是这个

2. absolute : 绝对定位, 它会使元素脱离当前位置进行定位,当元素脱离原来位置后,其他 元素就看不到他了,同时absolute也可以触发bfc

3. relative : 相对定位, 它会让元素保留原来位置进行定位,后面元素会看到它的位置

4. fixed : 相对于视口进行定位

当我们设置了定位后，这个元素就有四个属性可以使用了,分别是left，top,bottom,right这四个属性可以设置当前元素距离 左 右 上 下 边的距离。

---

absolute与relative相比较：

absolute :

1. 脱离原来位置进行定位
2. 相对于最近的有定位的父级进行定位

relative:

1. 保留原来位置定位
2. 相对于对象本身定位

浮动模型和伪元素

浮动模型，float属性 : float属性可以让元素像站队列一样浮动起来，他会让本来占满整行的元素只按照内容和设置的大小在父级里进行站队，当一行剩余不足，元素会自动换行。当容器不够大的时候，超出之后仍然按相同队形站队。

浮动元素会像absolute的元素一样脱离文档流,但不会脱离文字流

脱离文档流的意思就是正常的元素看不到他,这一点类似absolute,不脱离文字流则是display属性是inline或inline-block还是可以看到它,文字本身的属性是inline

单行文字溢出打点

下面是单行文字溢出打点的css代码：

            div {
                width : 100px;
                height : 20px;
                background-color : red;
                overflow : hidden;
                white-space : nowrap;//不让文字换行
                text-overflow : ellipsis;//溢出部分打点
            }

背景图片和其他

背景图片属性：

• background-image : url(); 可以设置背景图片

• background-size 可以设置背景图片大小

  1.cover : 让浏览器一张图片尽可能充满容器,当图片大的时候会截掉多余部分
  2.contain : 让浏览器尽可能展示图片，剩余部分填充相同图片
  3.设置X,Y像素值：例如 background-size : 50px 50px;
  4.百分数 ： background-size : 50% 50%;
  

• background-repeat : 默认是repeat,设置成no-repeat后，无论容器剩多少都不会复制填充了

• background-position 这个属性也有两种写法——1.百分比 2.像素值

  ！！！当图片是用来展示图片信息，如果这个图片不是用来展示这个图片内容而是用来修饰的，如网站logo，一般用背景图

如何让背景图不出来的时候显示文字？

1、利用text-indent

利用首行缩进,配合 white-space : nowrap 和 overflow : hidden；让元素内部有css时，被缩进到元素外，并被隐藏。

2、背景图放到padding中，高度设置为0

background-image是可以放在padding中的，我们利用padding-top撑起内容区，然后元素本身高度为0，这样当有css时，配合overflow : hidden;可以让文字隐藏，没css时，文字正常显示.（这种用的多）

额外知识

浏览器	内核
IE	trident
chrome	blink/webkit
firefox	gecko
opera	presto
safari	webkit