CSS基础（二）

8、背景和阴影

8.1 背景

1、背景颜色

background-color:颜色值;

• 默认值是 transparent

2、背景图片

background-image: url('...');

3、背景平铺

当图片面积小于盒子的时候，图片就会自我复制，然后平铺整个盒子，我们可以利用 background-repeat 来设置是否平铺

background-repeat: repeat | no-repeat | repeat-x | repeat-y

• repeat：平铺，默认值
• no-repeat：不平铺
• repeat-x：横向平铺
• repeat-y：纵向平铺

4、图片位置

background-positon 属性可以改变图片在背景中的位置

background-positon: x y

参数代表的意思是：x坐标 和 y坐标，可以使用 方位名词 或者 精确单位

• length： 百分数 或 数值+单位
• position：方位词，如：top、bottom、left、center、right

position方位词

/* 左上角，两个顺序颠倒没关系 */
background-positon: top left

• 如果只写一个，那么第二个默认是 center

参数精确单位

background-positon: 20px 50px;

• 如果只写一个，那么第二个默认是居中

5、背景图片固定

background-attachment：设置图片是否固定 或 者 随页面的其余部分滚动

background-attachment : scroll | fixed

• scoll：背景图片随着对象内容滚动（默认值）
• fixed：背景图片固定

背景复合写法：

background: 颜色 地址 是否平铺 是否滚动 位置

8.2 盒子阴影

box-shadow 属性为盒子添加阴影

box-shadow: h-shadow v-shadow blur spread color inset

值	描述
h-shadow	必需，水平阴影的位置 （数值+ 单位）
v-shadow	必需，垂直阴影的位置 （数值+ 单位）
blur	可选，模糊距离 （数值+ 单位）
spread	可选，阴影的尺寸 （数值+ 单位）
color	可选，阴影的颜色
inset	可选，将外部阴影（outset）改为内部阴影 （默认是外部阴影）

box-shadow: 0 0px 15px 5px #333;

盒子阴影不会占空间

8.3 文字阴影

text-shadow 设置文本阴影

box-shadow: h-shadow v-shadow blur color

与盒子阴影相同

box-shadow: 0 0px 15px #333;

9、浮动

9.1 什么是浮动

首先讲一下标准流，标准流就是我们正常的div、h1~h6、span等一系列块元素和行内元素按照顺序从上到下，从左到右排序的方式

所以，标准流就是按照默认方式排列，是最基本的布局方式

而所谓浮动，就是更改元素的排序方式，让一个多多个元素在一行内排列显示

9.2 浮动

float用于创建浮动框，将其移动到一边，可以是左浮，也可以是右浮

float: left | right | none

• none：不浮动（默认）
• left：左浮动
• right：右浮动

9.3 浮动特性

1. 浮动元素会脱离标准流

   • 浮动元素不再保留原来的位置，会浮起来

2. 一行显示并且顶部对齐

   • 浮动元素会紧贴在一起，如果一行装不下了，会另起一行显示

3. 浮动元素会有行内元素的特性

   • 任何元素都可以设置浮动
   • 可以修改大小

注意点：

1. 浮动元素与标准流的父盒子搭配

   1. 先用标准流法父元素排序上下位置，内部子元素采取浮动排序 （常见的方式）
2. 一个元素浮动了，理论上其余兄弟也应该浮动
3. 浮动的盒子只会影响后面的标准流盒子，不会影响前面的

9.4 清除浮动（重点）

由于浮动元素不再占有源文档流的位置，所以它会对后面的元素排版产生影响

一句话：父盒子没有高度，子盒子浮动了，影响下面布局

清除浮动本质是：清除浮动元素脱离标准流带来的影响；

清除浮动后，父级就会根据浮动盒子的自动检测高度，父级有了盒子就不会影响下面的标准流

清除浮动的四种方法

清除浮动的策略是：闭合浮动，就是将浮动锁在父盒子中，不影响父盒子外面的其它盒子

1、额外标签法

.clear {
    clear: both;
}

<div class="box">
    <div class="demo1">大毛</div>
    <div class="demo2">二毛</div>
    <!-- 清除浮动 -->
    <div class="clear"></div>
</div>
<div class="demo3">三毛</div>

这样大毛、二毛的浮动就影响不了标准流三毛了

注意：

• 新的空标签必须是一个块元素
• 优点：通俗易懂、书写方便
• 缺点：添加无意义的标签，结构化差
• 用得较多

2、给父元素添加 overflow

给浮动盒子的父元素添加 overflow属性，属性值可以是 hidden、auto、scroll

.box {
    overflow: hidden
}

• 优点：简单
• 缺点：溢出的内容不显示

3、:after伪元素法

:after 方式是额外标签法的升级版，也是给父级元素添加的

.box:after {
    content: "";
    /* 转换为块元素，因为其有换行的特性 */
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}

• 优点：没有增加标签，照顾低版本浏览器
• 缺点：样式有点复杂

有的还会添加下面这个，用来协助浮动清除，防止容器坍塌

.box {
 zoom: 1;
}

4、双伪元素清除法

在父盒子的前后都添加清除元素

.clearfix:before,
.clearfix:after {
    content: "";
    /* 转化为表格，也是块级元素 */
    display: table;
}

.clearfix:after {
    clear: both;
}

.clearfix {
    /* IE6、7 专有 */
    *zoom: 1;
}

10、定位（重点）

定位可以让盒子自由地在某个盒子内移动位置或者固定到屏幕中的某个位置

10.1 静态定位

静态定位就是默认的定位方式，即无定位，一般没怎么用

10.2 相对定位

相对定位就是相对自己原来的位置来进行移动的（以我为中心）

div {
    position: relative;
    top: 100px;
    left:100px;
}

数值也可以是 百分比

注意：

• 相对定位是不脱标的，即仍然保留原先的位置；
• 注意是保留原先的位置，至于移动之后就是飘起来的，会挡到其它盒子的
• 最典型的应用就是给绝对定位当爹（子绝父相）

10.3 绝对定位

绝对定位是元素的移动是相对于它的父元素来说的

div {
    position: absolute;
    top: 100px;
    left:100px;
}

注意：

• 绝对定位是脱标的，不再占有原先的位置
• 如果没有父元素或者父元素没有定位的话，则相对于浏览器视口
• 如果祖先元素有定位（相对、绝对、固定定位），则以最后一级有定位的祖先元素作为参考点移动位置

10.4 固定定位

固定定位是固定于浏览器可视区域的位置，相对于浏览器可视区域

使用场景：可以在浏览器滚动页面是时使元素的位置不会变

div {
    position: fixed;
    top: 100px;
    left:100px;
}

注意：

• 固定定位是脱标的
• 以浏览器可视窗口为参照 不随滚动滚动为滚动

固定定位可以看做是特殊的绝对定位

10.5 粘性定位

粘性定位可以被认为是相对定位和固定定位的混合，Sticky 粘性的

语 法

div { 
    position : sticky; 
    top : 10px;
}

粘性定位的特点：

1. 以浏览器的可视窗口为参照点移动元素（固定定位特点）
2. 粘性定位占有原先的位置（相对定位特点）
3. 必须添加 top、left、right、bottom 其中一个才有效，否则就是一个相对定位

10.6 定位叠放次序z-index

在使用定位布局时，可能会出现盒子重叠的情况，此时可以用 z-index 来控制盒子的前后次序（Z轴）

div {
    z-index: 100
}

1. 数值可以是正整数、负整数或0，默认是 auto，数值越大你，盒子越靠上
2. 如果属性值相同，则按照书写顺序，后者居上
3. 数字后面不要加单位
4. 只有定位的盒子才有 z-index 属性

10.7 定位的扩展

1、子绝父相

子绝父相是定位中最常用的一种定位方式：子级是绝对定位的话，父级要用相对定位

1. 子级绝对定位不会占有位置，不会影响父盒子里面其他的兄弟盒子
2. 父盒子需要加定位限制子盒子内显示
3. 父盒子布局时，需要占有位置，因此父亲只能是相对定位

当然，因为父级需要占有位置，因此是相对定位；如果父元素不需要占有位置，子绝父绝也是可以的

2、绝对定位的盒子居中

加了绝对定位的盒子不能通过 margin:0 auto 水平居中，但是可以通过以下方法实现水平和垂直居中

1. left:50% 让盒子的左侧移动到父级元素水平中心位置
2. margin-left:-25px : 让盒子左移自身宽度的一半

.son {
    width: 50px;
    height: 100px;
    background-color: pink;
    position: absolute;
    left: 50%;
    top: 50px;
    margin-left: -25px;
}

3、定位特殊性质

1. 行内元素添加 绝对 或 固定定位（脱标的），可以直接设置高度和宽度
2. 块级元素添加 绝对 或 固定定位，如果不给宽度和高度，默认大小是内容的大小

4、脱标的盒子不会触发外边距坍塌

浮动元素、绝对定位、固定定位的元素不会触发外边距合并的问题

5、绝对定位（固定定位）会完全压住盒子

浮动的盒子，只会压住它下面标准流的盒子，但是不会压住下面标准流盒子里面的文字

但是，绝对定位、固定定位会压住下面标准流所有的内容