|
一、今日学习内容： CSS的浮动 传统网页布局的三种方式（标准流、浮动、定位） 1、标准流（标签按照默认的方式进行排列） 块元素会独占一行，从上到下顺序排列 行内元素是按照顺序，从左到右依次排列，碰到父元素的边缘就会自动换行 浮动 2、为什么需要浮动 很多的布局效果用标准流无法完成，浮动可以更好的来控制盒子的位置。 浮动的属性float none：元素不浮动（默认值） left：左浮动 right：右浮动 3、总结 ①多个块级元素纵向排列找标准流，多个块级元素横向排列找浮动 ②浮动最典型的应用就是让多个块级元素一行内排列显示 4、浮动的特性 ①浮动的元素会脱离标准流 ②浮动的元素会一行内显示并且沿元素顶部对齐，相邻的元素之间没有空白间隙，如果超过父级宽度会自动换行显示 ③浮动的元素具有行内块元素的特性 ④浮动研发之初就是为了实现文字环绕的，所以浮动的盒子并不会压住标准流盒子里面的文字 5、浮动布局的注意点 ①先用标准流父元素进行上下排列，内部的子元素采用浮动排列左右的位置。 ②理论上来说，当一个元素浮动了，那么它的兄弟元素也要跟着浮动。 ③浮动只会影响后面的标准流，不会影响前面的标准流。 6、清除浮动 为什么要清除浮动：由于父盒子在一些情况下不方便给高度，但是子盒子浮动又不占位置，所以父盒子的高度就会变成0，会影响后面的标准流盒子 7、清除浮动的方法 ①额外标签法：也叫做隔墙法，是W3C推荐的做法，要求最后的这个新的空标签必须是块级元素 优点：通俗易懂、书写方便 缺点：会添加很多没有意义的标签，结构化较差。 ②给父级添加overflow:hidden; ③给父级添加after伪元素 ④给父级添加双伪元素 CSS的定位 1、定位的组成 定位=定位模式 + 边偏移 定位模式指的是一个元素在文档中的定位方式，边偏移决定了该元素的最终位置 2、定位模式 ①static：静态定位 静态定位是元素的默认定位方式，也就是没有定位的意思。 静态定位是按照标准流的特性来摆放盒子的，没有边偏移 ②relative：相对定位 特点：它是相对于自己原来的位置进行移动的；原来在标准流的位置继续占有，后面的盒子仍然以标准流的方式来对待它（相对定位不脱标） ③absolute：绝对定位 绝对定位是元素在移动的时候，是相对于它的祖先元素来说。 特点：如果祖先元素没有定位、就以浏览器为标准进行定位 如果祖先元素有定位，就以有定位最近的一级祖先元素为标准 绝对定位不会再占有原来的位置（脱离标准流） 子绝父相：如果儿子是绝对定位，那么父亲就用相对定位来限制儿子的边偏移的边界。 ④fixed：固定定位 固定定位是元素固定于浏览器可视区域的位置 特点：以浏览器的可视窗口为参展点进行偏移，跟父元素没有关系；固定定位不再占有原来的位置（脱标） 3、定位的叠放次序 在使用定位的时候会出现盒子重叠的情况，需要使用z-index来控制盒子的前后次序 注意点： ①数值可以是正整数、负整数或者0，默认值是auto，数值越大，盒子越靠上 ②如果属性值相同，按照书写的顺序，后来者居上 ③数字后面不可以加单位 ④只有定位的盒子才有z-index属性 二、今日问题：无 三、解决方案：无
| 
