CSS笔记05

CSS笔记05

• 需要设定一个标准流的父亲来框定浮动子元素
• 父级元素有内边距，浮动子元素仍然受到内边距的影响
• 浮动原则：一有全有

background: #1c036c url(../images/banner.png) no-repeat center top;

• 图片要是下面有背景色，应当在图片前面设置相应的背景色
• 堆在一块联想到是否没给高或者清除浮动问题

• a里面包span 只需设置span是float:right;即可实现span内容向右居中

  浮动和定位的盒子不会引起外边距合并塌陷的问题

定位（position）：

使用定位后会自动转为行内块
浮动盒子无法使用margin: auto;

• 定位=定位模式+边偏移

边偏移必须和定位连用，分别是top 、 bottom 、left 、 right。

定位方式：

• static：默认方式，即普通标准流，没有边偏移。
• relative：相对定位，以自己在标准流左上角为基准进行偏移，但是原来的位置还是保留的，相对定位不脱标。
• absolute：绝对定位，先看有没有父级，父级有没有定位，如果父级没有定位，则以浏览器（body）为左上角为基准进行定位，如果父级也有定位，那么则以父级左上角为基准进行定位，如果父级也没有定位，但是父级的父级（爷级）有定位，则按照爷级左上角为基准进行定位，依次类推，但是绝对定位是脱标的，走了之后不占位置 。
• fixed：固定定位，相当于绝对定位的一种特殊形式，只认准浏览器左上角为准进行定位，固定定位是脱标的，定位后不占位置，同时拉动滚动条也不会动，不受层叠影响，执行顺序为先上后下先左后右，所以在写的时候最好分开写。

    position: relative;
    top: 100px;
    ……

定位使用大部分是“子绝父相”，子级用绝对定位，父级用相对定位。

定位的盒子水平居中：
走父级的一半，回自己的一半

left: 50%;
margin-left: - 自己宽度的一半; 

层级：
z-index: 1;
数字越大，越靠上层显示，可以是正数，负数，0，如果序号一致，则按照书写顺序排列。
只有定位的盒子有层级