前端（CSS）第二周

9.浮动

网页布局第一准则：多个块级元素纵向排列用标准流，多个块级元素横向排列用浮动。

网页布局第二准则：先设置盒子大小，之后设置盒子位置。

选择器 {float: 属性值;}

 9.1浮动特性

1.脱标：浮动的盒子脱离标准流，移动到指定位置，并且不在保留原来在标准流中的位置。

2.如果有多个盒子浮动，则它们会按照属性值一行内显示并顶端对齐。

3.任何元素浮动之后都具有行内块元素相似的特性，添加浮动后，它的大小根据内容来决定，

浮动的盒子中间没有缝隙。

注：浮动元素一般搭配标准流父级（规定浮动元素界限）使用，浮动的盒子只会影响浮动盒子后面的标准流。

 9.2清除浮动

选择器{clear:属性值;}

几乎只用clear：both；

1.额外标签法（不推荐）：在浮动元素末尾添加一个空标签，例如<div style="clear:both"> </div>。

注：这个新标签必须是块级元素。

缺点：加了无意义代码。

2.父级添加overflow：给父级添加overflow属性，例如overflow:hidden;

缺点：无法显示溢出部分。

3.after伪元素法： 是额外标签法的升级版，也是给父元素添加，例如<div class="clearfix"> </div>。

.clearfix:after{
    content: "";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
    }

.clearfix{
    *zoom: 1;
    }

缺点：要照顾低版本浏览器。

4.双伪元素清除浮动法：也是给父元素添加，例如<div class="clearfix"> </div>。

.clearfix:before,.clearfix:after{
    content: "";
    display: table;
    }

.clearfix:after{
    clear:both;
    }

.clearfix{
    *zoom: 1;
    }

缺点：要照顾低版本浏览器。

10.PS切图

 10.1图层切图

最简单的切图方式：右击图层-->快速导出为PNG。

合并图层再导出：图层菜单-->合并图层（Ctrl+e）-->导出。

 10.2切片切图

利用切片选出图片，然后储存。

 10.3cutterman插件

11.定位

定位可以让盒子自由的在某个盒子内移动位置或者固定在屏幕的某个位置，并且可以压住其它盒子。

 11.1定位组成

定位=定位模式+边偏移

1.定位模式

通过position属性设置。

值	语义
static	静态定位
relative	相对定位
absolute	绝对定位
fixed	固定定位

2.边偏移

有top、bottom、left和right4个属性。

边偏	示例	描述
top	top:80px;	定义元素相对于其父元素上边线距离。
bottom	bottom:80px;	定义元素相对于其父元素下边线距离。
left	left:80px;	定义元素相对于其父元素左边线距离。
right	right:80px;	定义元素相对于其父元素右边线距离。

 11.2定位模式

子绝父相：子级是绝对定位的话，父级要用相对定位。如果父级元素不需要占用位置，子绝父绝也会遇见。

1.静态定位static：默认定位方式，无定位的意思，没有边偏移。

选择器 {position: static;}

2.相对定位relative：元素在移动位置时，是相对于原来的位置来移动的。

选择器 {position: relative;}

特点：不脱标

3.绝对定位absolute：元素在移动位置时，是相对于它的祖先元素来移动的。

选择器 {position: absolute;}

特点：

1.如果没有祖先元素或祖先元素没有定位，则以浏览器为准定位。

2.如果祖先元素有定位（静态定位除外），则以最近一级的有定位的祖先元素为参考点移动。

3.脱标。

4.固定定位fixed：元素固定于浏览器可视区的位置。

选择器 {position: fixed;}

特点：

1.以浏览器的可视窗口为参照点移动元素。

2.脱标。

5.粘性定位sticky:相对定位和固定定位的混合。

选择器 {position: sticky;
        top: 10px;  /*到这个距离就固定了*/
       }

特点：

1.以浏览器的可视窗口为参照点移动元素。

2.不脱标。

3.必须添加top、left、right、bottom其中一个才有效。

 11.3定位叠放次序

选择器 {z-index: 1;}

注：数值越大，盒子越靠上；如果属性值相同，后来居上；不能加单位；只有定位的盒子才有z-index属性。

  11.4定位的拓展

1.绝对定位的盒子居中：水平居中为

选择器 {
    position: absolute;
    left: 50%;
    /*负值为盒子宽度的一半*/
    margin: -100px;
    width: 200px;
}

垂直居中同理。

2.定位特殊特性：

（1）行内元素添加绝对或固定定位，可以直接设置高度和宽度。

（2）块级元素添加绝对或固定定位，如果不给高度或宽度，默认大小是内容大小。

3.绝对定位（固定定位）会完全压住盒子：

浮动元素只会压住标准流的盒子，不会压住标准流的盒子里的内容。

绝对定位（固定定位）会压住标准流的所有内容。