跟着艾文一起学前端-第10篇-CSS背景与盒子模型

CSS中的背景

backgroud：background-color|| background-image|| background-repeat||background-attachment||background-position

1. 背景属性具体如下表所示：

属性名称	对应取值
background-color	颜色值
background-image	图片路径
background-repeat	该属性必须要先有background-image属性才行； repeat（默认值）:背景图像在纵向和恒向上平铺，就是图片比较小的时候你会发现背景被好多张图片一张挨着一张，像地板装一样铺开来; no-repeat: 背景图像不平铺; repeat-x:背景图在横向上平铺; repeat-y: 背景图像在纵向平铺
background-position	可以是：横向坐标px值，纵向坐标px值；例如20px，20px; 还可以是方位单词：水平方位，垂直方位；也是两个值，取值范围是： top/center/bottom/left/center/right,例如center，top； 水平居中并且靠上
background-attachment	scroll : 背景图像是随对象内容滚动 fixed: 背景图像固定，这里的滚动的意思是会滚出屏幕，固定的意思是一直在屏幕中的位置没动

同样的跟咱们之前看到的font的综合写法一样，背景的属性也可以简写
background属性的值书写顺序没有像font那样强制的标准，但是建议按照如下的顺序来写：
background: 背景颜色 背景图片地址 背景平铺 背景滚动 背景位置
background: transparent url(image.jpg) repeat-y scroll 50% 0 ;
如：

background: #ffffff url(images/mypic.png) no-repeat fixed center top ;

2.背景透明（CSS3 ）

背景半透明是指容器的透明度，对容器内的控件没有任何影响。CSS3中的半透明及高版本的浏览器才支持,CSS3中 背景半透明的写法： background: rgba(0,0,0,0.5);
rgba 分别对应的是 red green blue alpha
alpha的取值范围是 0~ 1 小数

CSS中的盒子模型

所谓盒子模型就是把HTML页面中的元素看做是一个一个矩形区域，因为它是一个容器，就像一个盒子一样，为了更形象的描述就把它称作盒子，每个盒子都由它里面的元素的：内容、内边距（padding）、边框（border）和外边距（margin）组成。也就是说

1. 盒子边框（border）

就是容器或者是元素的框的厚度或者是粗细，
连写：
border：border-width border-style border-color
border的常用属性与取值：

属性名称	属性值
border-width	像素值单位px
border-style	none: 无边框 solid:实线 dashed: 虚线
border-color	颜色值
border-radius（CSS3 IE8不支持圆角属性）	百分数或者px值 比如50%是圆形，10px是圆角半径为10px

因此border的连写举例：

border: 2px solid green;

示例代码：

<style>
/*border属性*/
    .dborder {
      width: 152px;
      height: 152px;
      border: 2px solid green;
    }
  </style>


<div class="dborder"> border属性的展示 </div>

效果图：

border是盒子的边框也就是四条线，盒子四条线是可以分开控制的，用法和border，分别对应的是上、下、左、右四个属性：border-top、border-bottom、border-left、border-right 单位是px。

2. 内边距（padding）

元素内容和元素所在盒子的边框之间的距离
我们先来看一个没有设置内边距的示例：

    .dout {
      width: 150px;
      height: 150px;
      border: 2px dashed blue;
    }

    .dinner {
      width: 80px;
      height: 80px;
      border: 2px dashed orange;
    }


<div class="dout">
    outter
    <div class="dinner">
      inner
    </div>
  </div>

效果图：

然后设置内边距：

.dout {
      width: 150px;
      height: 150px;
      border: 2px dashed blue;
      padding: 20px;
    }

效果图：

同样的跟border是类似的它也有四个方位的表示形式，padding-top、padding-bottom、padding-left、padding-right 距离上、下、左、右的内边距离单位是px
padding的简写：

• padding: 8px; 意思是上下左右内边距全都是8px
• padding: 0 8px; 意思是上下内边距是0，左右内边距是8px
• padding: 20px 10px 30px; 意思是上边的内边距是20px，左右内边距是10px， 下方内边距是30px
• padding: 10px 20px 30px 40px; 意思是上方内边距10px，右边内边距是20px，下方内边距是30px，左边内边距是40px，记忆技巧顺时针记忆法。

注意点：padding和border都会会撑开有宽度和高度的盒子，需要将超出的宽或者高度减掉。
只需要记住以下计算方法：
盒子的宽度= border-left + padding-left + width + padding-right + border-right;
盒子的高度= border-top + padding-top + height + padding-bottom + border-bottom
如果父盒子给了宽度，子盒子（块元素）则会自适应到和父盒子同样的宽度，且此时对没有设置宽度的子盒子设置padding属性不会撑开子盒子的宽度，及此时padding不会影响到盒子的宽度值。

3.外边距（margin）

元素与它所处的外部盒子边框的距离，或者是元素与元素之间的距离,margin的属性可以参照padding进行记忆
margin-top、margin-bottom、margin-left、margin-right 距离上、下、左、右的外边距离单位是px

注意点：除了div，每一个元素会有一个默认的margin 和 padding值，需要做一个通配符选择器或者是一个并集选择器设置padding:0; margin:0;来去清除内边距和外边距。否则会发现调整的时候会发生错位，怎么也调不了。

margin需要注意点:

1. 并列关系的盒子，垂直方向的外边距存在合并的情况，比如两个垂直并列的盒子divtop和divbottom分别设置为如下所示的margin：

	div {
      width: 200px;
      height: 200px;
      background-color: yellow;
      margin-bottom: 20px;
    }

    .divtop {
      background-color: orange;
      margin-top: 10px;
    }


  <div class="divtop"></div>
  <div class="divbottom"></div>

根据下图我们可以看出，在浏览器中实际展示的距离是20px

也就是说，相邻的垂直外边距，如果都给了值，那么只会取较大的值作为外边距，这就是margin的垂直外边距合并，解决方式是：避免同时使用相邻的两个边距，设置一个就好了。

2. 包含关系的盒子
   当内部垂直方向使用外边距属性，margin-top时，会发生外部的盒子随之一起下移，也被叫做外边距的塌陷，
   解决方式：
   • 可以为父元素定义1像素的上边框或者上内边距–注意的是增加的padding或者border需要按照上面讲到的计算方法减去；
   • 为父元素添加属性值 overflow:hidden; —该方式不会增加盒子的宽高，推荐使用该方法；

边距的总结

盒子尺寸计算：

盒子的高度 = 内部元素的高度及height + padding + border + margin
盒子的宽度 = 内容元素的宽度及width + padding + border + margin

盒内元素的实际尺寸计算：
元素的高度 = 元素的高度height + padding + border
元素的宽度 = 元素的宽度width

盒子的属性

• box-shadow 盒子的阴影写法：
  box-shadow: 水平阴影 垂直阴影 模糊距离 阴影尺寸 阴影颜色 内/外阴影; 对应的值如下：
  • h-shadow 水平阴影 必须写，正值是阴影往右移动的距离，负值相反
  • v-shadow 垂直阴影 必须写 同上面的一样，是往下移动的距离
  • blur 模糊距离 非必写 相当于增加了一种阴影边缘透明，渐变的感觉
  • spread 阴影的尺寸 非必写 及影子的大小，可以把影子放大或者缩小
  • color 阴影的颜色 非必写
  • inset 将外部阴影改为内部阴影 非必写

常见的写法：box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);

盒子的定位

CSS 中的定位有3种：普通流（或标准流）、浮动和定位

CSS定位-普通流

普通流（或标准流）就是一个网页内每一个标签元素正常的从上到下（块元素）或者从左到右（行元素）排列顺序。

CSS定位-浮动

浮动的起因是为了让多个div能够在同一行内显示，方便布局。设置了浮动属性的元素，可以摆脱标准流的控制，将元素移动到其父元素中指定的位置，写法：

选择器 {
	float: 浮动属性的值;
}

float 属性的值有如下几种：

• left 元素向左浮动
• right 元素向右浮动
• none 元素不浮动（默认值）

浮动的特点：

• 浮动只是浮动到上一级的父盒子，也就是只对爸爸浮动
• 浮动位于父容器内，且不会超过爸爸的内边距，也就是说浮动的位置，如果设置了父容器的内边距的话是浮动不到紧贴边框的
• 浮动元素的位置，跟上一个元素（块）有关，如果上一个块浮动，则该元素会与上一个元素顶部对齐，如果上一个元素是标准流，则该元素会和上一元素的底部对齐。
• 一般的如果一个父容器中的一个子元素块浮动，那么其他的并列关系子元素块也是要浮动的。
• 浮动隐含着模式转换，它可以把一个添加浮动的元素转换成行内块元素的特性。

我们先来看一个浮动的问题，上代码：

效果图：

清除浮动

由于浮动不再占用原来的位置，所以它会对后面的元素排版产生影响，为了解决这个问题，就需要在该元素中清除浮动后造成的影响。如果浮动元素的父容器不给高度的话，父容器的高度会为0。所以清除浮动的目的就是为了解决父级元素因为浮动引起内部高度为0的问题，把浮动的盒子圈到父盒子里面，让父盒子闭合出口和入口不让他们出来影响其他元素，可以通过css中的clear属性来清除浮动，清除浮动后，父容器可以不用指定高度，父容器会根据孩子容器的高度自适应自身的高度，以最高的子元素的高度为准。基本语法：

选择器 {clear: 属性值;}

clear 的属性值如下：

• left – 清除左侧浮动的影响；
• right – 清除右侧浮动的影响；
• both – 清除左右两侧浮动的影响 一般情况只要写这个就行了

清除浮动的方法

1. 额外标签法
   是w3c推荐的做法，通过在最后一个浮动的元素后面添加一个空的标签，例如<div style=“clear:both”></div>
   如下：
   
   效果图如下所示：
   
2. 父元素添加overflow属性方法
   可以通过给父元素添加overflow属性为hidden|auto|scroll都可以实现。
   所以可以对上面的代码作如下处理:

.nav {
	overflow: hidden;/*增加这一行就好了*/
}

效果图如上
3. :after伪元素
写法：

.clearfix:after {
	content:"";
	display: block;
	height: 0;
	clear: both;
	visibility:hidden;
}
.clearfix {/*为了适配IE7和IE6*/
	*zoom: 1;
}

只需要在父容器上添加该类选择器的引用就行了
于是1中的写法我们可以改为如下：

<div class="nav clearfix">

效果图跟上面的一样

4. :before和:after双伪元素清除浮动
   书写方法：

.clearfix:before, .clearfix:after {
	content:"";
	display:table;
}
.clearfix:after {
	clear:both;
}
.clearfix {
	*zoom:1;
}

使用方法跟上面的:after使用方式一样也是在父容器添加引用就好了

盒子内容的居中对齐

文字、行内元素、行内块元素的居中对齐

只需要对盒子设置text-align:center;即可

盒子的居中对齐(前提是盒子要有宽度)

1. 通过外边距来实现盒子的居中对齐，前提是块元素，并且这个块必须制定了宽度，然后给左右的边距都设置为auto就可以将块元素水平居中了
   实例代码：.hordiv {width: 600px; margin: 0 auto;}
   上面的一个div就是设置了宽度为600px的盒子，设置margin 为上下0，左右自动填充；

总结盒子的水平居中：
* margin: 0 auto;及上下外边距是0，左右是auto
* margin-left: auto; margin-right: auto; 和上面是同样的效果

文字居中和盒子居中的区别：

1. 文字的水平居中是 通过 text-align: center
2. 盒子水平居中 ： 指定盒子的宽度且设置margin 左右 值为 auto

大图片的顶部居中（如背景大图片）

设置背景图片居中,设置background 属性值为： top center，实例代码：
background: url(图片路径) no-repeat top center;