|
一． CSS的浮动 1. 传统的网页布局方式：标准流，浮动，定位 2. 块元素独占一行，从上到下一次排列；行内元素会从左到右依次排列，碰到父元素边界会自动换行；标准也叫默认排列（标准流） 3. 浮动：为社么需要浮动？很多布局效果，用标准流无法完成，浮动可以更好的控制盒子的位置； 属性：float 值：none 不浮动； left：左浮动 右：right 总结：多个块级元素横向排列，找浮动，纵向排列用标准流 浮动最典型的应用，就是让盒子(即块级元素)一行内排列显示 特性：浮动元素会脱离标准流； 浮动的元素会在一行内显示，并且沿元素顶部对齐，相邻之间的元素没有对齐，如果超过父级元素会自动换行显示；； 浮动的元素具有行内块的特性；；；； 浮动研发之初就是为了实现文字环绕，所以浮动的盒子并不会标准流盒子里面的文字；；；； 注意点：先用标准流父元素进行上下排列，内部的子元素使用浮动排列左右；；；； 理论上来说，当一个元素浮动了，那么他的兄弟元素也要跟着浮动----浮动不会影响前面的标准流，只会影响后面的标准流。 清除浮动：为社么要清除浮动：由于父盒子在一些情况下不方便给高度，但是盒子浮动又不占位置，所以高度为0了，会影响后面的标准流 清除浮动的方法：额外标签法，注意点：要求最后的新标签必须是块级元素， 优点：书写方便，通俗易懂 缺点：会添加没有意义的标签，结构化差；；； 给父级添加overflow：hidden；；； 父级添加after伪元素；；； 给父级添加双伪元素；；；； 二． 定位 1. 组成：定位=定位模式+边偏移 2. 定位模式指的是一个元素在文档种的定位上市，边偏一决定了该元素的最终位置 1. static：静态定位 2. relative：相对定位 3. absolute：绝对定位 4. fixed：固定定位 3. 静态定位：是按照标准流的特性去摆放盒子的，没有边偏移 4. 相对定位 relative：特点：他是相对于自己原来的位置进行移动；；；原来的标准流的位置继续占有，后面的盒子仍然以标准流的方式来对待他，（相对定位脱标） 5. 绝对定位 absolute：是元素在移动时候的时候，相对于他的祖先来说的，如果祖先元素没有定位，就以浏览器为标准进行定位；；；祖先有定位，就以最近的一级祖先元素为标准；；；绝对定位会脱标 6. 子绝父相：如果儿子是绝对定位，那么父亲就用相对定位限制儿子的偏移量 7. 固定定位 fixed：固定定位是元素固定于浏览器的可视位置；；以浏览器的可视窗口来做参考点的，进行偏移，跟父元素没有关系；；固定位置会进行脱标
| 
