【零基础入门】 css学习笔记（2） 盒模型

盒模型

1，盒模型：

CSS看待元素的一种方式，它将每个元素看作由一个盒子表示。

2，五个属性：

从内往外：

1. width:内容的宽度，而不是盒子的宽度；
2. height：内容的高度，而不是盒子的高度；
3. padding：盒子的内边距；
4. border：盒子的边框；
5. margin：盒子的外边距

注：在css中设置了宽度width，但浏览器展现出的元素可能超出你的设置，因为元素的边框和内边距会撑开元素。如下图所示。


盒子实际占用的大小是：左border + 左padding + width + 右padding +右border=302px

3， 属性细节：

1） 一个块元素的默认宽度是”auto”，表示它会自动延伸占满可用的空间。这就是为什么块元素默认是占满浏览器的整个宽度。一般，一个元素的高度也默认是auto，在垂直方向上会延伸内容区，使所有内容都可见。

2） width：指定宽度可通过像素指定具体宽度、或使用百分数（为元素所在容器宽度的一个百分比，容器可以是body div等）

3） padding：可看作元素的一部分。如果想保持一个盒子的真实占有宽度不变，那么加width就要减padding。加padding就要减width。

4） margin：表示元素之间的距离，在边框外部。

5） 不能对padding和margin指定颜色，添加任何装饰。但如果元素设置了background-color或backgroud-image，则padding区域会有背景颜色/图像，即border以内的所有区域都有颜色。

6） padding、boder、margin 的属性既可以写综合属性，也可以按方向分开写：

• 综合写：padding: 10px 20px 30px 40px;
  如果是4个数，则是按上、右、下、左四个方向；如果只写3个，2个数，则按这个方向将没写的按对等的算出来。只写一个，表明四个方向的都一样。
• 应用：用小属性层叠大属性：

padding: 20px;
padding-left: 30px;

4， border属性：

有三要素：宽度，样式，颜色；
1）border: 1px solid red ;如果颜色不写，默认是黑色。三要素顺序可任意；

2）也可以按三个要素拆开来写：
border-width:1px; 也可用关键字指定宽度：thin/medium/thick
border-style:solid;

共有8种边框样式：
solid（实线）、double（双线）、dotted（虚线）、dashed（破折线）、groove、outset、inset、ridge

border-color:red; 与字体颜色设置方式类似

3）border的三个要素可按方向拆开写：

border-top-color:red;
border-bottom-style:dashed;
border-top-width:thick;

4）指定边框为圆角：

border-radius:15px;
border-top-left-radius:0px;
border-radius:50%;

5，background背景图像/颜色：（出现在内容区和内边距下面）

注：background-color和background-image都是不能继承的，想继承要显式地写：inherit。
1、背景色：background-color: orange;
2、背景图片：background-image: url(图片路径);

3、属性细节：
1）默认地，背景图像会平铺，即反复重复来填满整个背景空间，background-repeat 属性可控制这种平铺行为。

background-repeat;   //图像在水平和垂直方向上重复，这是默认行为。
background-repeat: no-repeat;   //图像显示一次，不重复
background-repeat: repeat-x;    //x方向重复；
background-repeat: repeat-y;    //y方向重复；
background-repeat:inherit;      //按父元素的设置来处理

2） 浏览器默认把图像放在元素的左上角。background-position 能设置图像的位置
background-position：向右移动量 向下移动量;
表示背景的定位，其值可以是关键字，如：center、 left、 right、 top、 bottom，也可以是百分比、像素值（正负都可）。

用关键词描述：

左右： left、 center、right ；
上下： top 、center、bottom
例：background-position: right bottom; 如下图所示。



应用场景：大背景图在页面中居中：
1） 大背景图居中: center top



2） 通栏banner : center top

用像素描述：
background-position:100px 200px;



像素值可以是负数，负数即向相反方向移动：

应用场景：
“css精灵”，英语css sprite，所以也叫做“css雪碧”技术。是一种CSS图像合并技术，该方法是将小图标和背景图像合并到一张图片上，然后利用css的背景定位来显示需要显示的图片部分。
css精灵优点，就是减少了http请求。比如4张小图片，原本需要4个http请求。但是用了css精灵，小图片变为了一张图，http请求只有1个了。

3） background-attachment:fixed；背景是否被固定，固定了，则不会被滚动条滚走。

4） background属性也是个综合属性，可将上述所有属性写在一起，与border类似
例：

background: red url(1.jpg) no-repeat 100px 100px fixed;

这些属性不一定要写全，可以省略其中的任意部分。