CSS浮动

清除浮动总结
  • 父级没高度
  • 子盒子浮动
  • 影响下面布局

PS切图

图层切图

右击图层->快读导出；合并图层ctrl+e

切片切图

切片工具，导出，存储为web所用格式，选中的切片

Cutterman

cutterman工具 - 最好用的切图工具

书写习惯

  1. 布局定位属性：display / position / float / clear / visibility / overflow
  2. 自身属性：width / height / margin / padding / border / background
  3. 文本属性：color / font / text-decoration / text-align / vettical-align / white-space / break-word
  4. 其他属性(CSS3)：content / cursor / border-radius / box-shadow / text-shadow

CSS定位（毒瘤广告）

原因

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

定位组成

定位：将盒子定在某个位置，所以定位也就是摆放盒子，按照定位的方式移动盒子

定位= 定位模式 + 边偏移

定位模式用于指定一个元素在文档中的定位方式，边偏移决定了该元素的最终位置

定位模式

css中的position 属性设置

属性值 描述
static 静态定位
relative 相对定位
absolute 绝对定位
fixed 固定定位
边偏移

边偏移就是定位的盒子移动到最终位置；

有 top | bottom | left | right 4个属性

定位

子绝父相

相对定位经常用来作为绝对定位的父级

总结：因为父级需要占有位置，子盒子不需要占有位置

静态定位

选择器 { position : static ;}

  • 静态定位按照标准流特性摆放位置，没有边偏移
相对定位（限制绝对定位）

相对定位在元素移动时，是相对于原来的位置来说的

选择器 {position : relative;}

虽然相对位置移动，但不脱标，原来的位置仍然保留

绝对定位

绝对定位是元素在移动时，相对与它祖先元素来说的

选择器 {position : absolute;}

  • 如果没有祖先元素或者祖先元素没有定位，则以浏览器（整个文档）为准定位
  • 如果父元素有定位（相对，绝对，固定定位），则以最近一级的有定位父元素为参考点移动位置
  • 绝对定位不再占有原先的位置 （脱标）
固定定位

固定定位是元素固定于浏览器可视区的位置

选择器 {position : fixed;}

  • 以浏览器的可视窗口为参照点移动元素
  • 跟父元素没有关系
粘性定位

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

选择器 {position : sticky; top: 10px}

  • 以浏览器的可视窗口为参照点移动元素（固定定位）
  • 粘性定位占有原先的位置（相对定位）
  • 必须添加top、left、right、bottom其中一个才有效
总结
定位模式 是否脱标 移动位置 是否常用
static静态定位 否 不能使用边偏移 很少
relative相对定位 否（占有位置） 相对于自身位置移动 常用
absolute绝对定位 是（不占有位置） 带有定位的父级 常用
fixed固定定位 是（不占有位置） 浏览器可视区 常用
sticky粘性定位 否（占有位置） 浏览器可视区 当前阶段少
定位叠放次序

z-index

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

选择器 { z-index: 1;}

  • 数值可以是正整数，负整数或0，默认是auto，数值越大，盒子越靠上；
  • 如果属性值相同，后来者居上
定位拓展
绝对定位盒子居中

水平居中

left:50%;

margin-left: 宽度一半 px

垂直居中

top:50%;

margin-top: 高度一半 px

定位特殊属性

绝对定位和固定定位也和浮动类似

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

浮动元素会压住下面标准流的盒子，但是不会压住标准流里的文字图片

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

浮动之所以不会压住文字，因为浮动产生的目的最初是为了做文字环绕效果