|
今日学习内容
CSS的浮动 标准流： 块元素会独占一行，从上到下排列，行内元素排列顺序从左到右依次排列，碰到父级元素自动换行 浮动： 很多布局效果用标准流无法完成，浮动可以更好地控制盒子位置 属性float：none，left，right 多个块级元素纵向排列用标准流，多个块级元素横向排列用浮动，浮动最典型的应用是：让多个块级元素一行内排列显示 浮动的特性： 浮动的元素会脱离标准流 浮动的元素会在一行内显示并且沿元素顶部对齐，相邻的元素之间没有空隙，如果超过附近宽度则自动换行 浮动的元素具有行内块元素的特性，可以设置宽高 浮动研发之初是为了实现文字环绕，所有浮动的盒子不会压住标准流盒子里的文字 浮动布局的注意点： 先用标准流父元素进行上下排列，内部的子元素采用浮动排列左右的位置 理论上说当一个元素浮动了，则它的兄弟元素也要跟着浮动 浮动只会影响后面的标准流，不会影响前面的标准流 清除浮动： 额外标签法 给父级添加overflow:hidden 父级添加after伪元素 给父级添加双伪元素 CSS的定位 定位的组成 定位模式：一个元素在文档中的定位方式 边偏移：决定了该元素的最终位置 定位模式： static静态定位：元素的默认定位方式，按标准流摆放，没有偏移 relative相对定位，是相对于自己原来的位置移动的，，原来在标准流的位置继续占有，后面的盒子仍然以标准流的方式对待它 absolute绝对定位，是元素在移动时相对于祖先元素说的，如果祖先元素没有定位，就以浏览器为标准进行定位，如果先祖有定位，就以最近的有定位的先祖为标准进行定位，绝对定位不再占有原来的位子，脱离标准流 fixed固定定位，是元素固定于浏览器可视界面的位置，以浏览器可视窗口为参照进行偏移，与父元素无关，固定定位不再占有原来的位置，即脱标 定位的叠放次序z-index,数值可以是正整数，0，或者负整数，数值越大，盒子越靠上。默认值为auto,如果属性相同，按照书写顺序，后来者居上，数字后面不可以加单位，只有定位的盒子才有z-index属性。
| 
