菁英数字科技（猩码）-猩码学苑-专注软件开发人才菁英教育

标题: 雷盟-前端预科(11)-20221115 [打印本页]

作者: 奔黄昏而去 时间: 2022-11-15 23:56
标题: 雷盟-前端预科(11)-20221115

今日学习内容

CSS的浮动

标准流：

块元素会独占一行，从上到下排列，行内元素排列顺序从左到右依次排列，碰到父级元素自动换行

浮动：

很多布局效果用标准流无法完成，浮动可以更好地控制盒子位置

属性float：none，left，right

多个块级元素纵向排列用标准流，多个块级元素横向排列用浮动，浮动最典型的应用是：让多个块级元素一行内排列显示

浮动的特性：

浮动的元素会脱离标准流

浮动的元素会在一行内显示并且沿元素顶部对齐，相邻的元素之间没有空隙，如果超过附近宽度则自动换行

浮动的元素具有行内块元素的特性，可以设置宽高

浮动研发之初是为了实现文字环绕，所有浮动的盒子不会压住标准流盒子里的文字

浮动布局的注意点：

先用标准流父元素进行上下排列，内部的子元素采用浮动排列左右的位置

理论上说当一个元素浮动了，则它的兄弟元素也要跟着浮动

浮动只会影响后面的标准流，不会影响前面的标准流

清除浮动：

额外标签法

给父级添加overflow:hidden

父级添加after伪元素

给父级添加双伪元素

CSS的定位

定位的组成

定位模式：一个元素在文档中的定位方式

边偏移：决定了该元素的最终位置

定位模式：

static静态定位：元素的默认定位方式，按标准流摆放，没有偏移

relative相对定位，是相对于自己原来的位置移动的，，原来在标准流的位置继续占有，后面的盒子仍然以标准流的方式对待它

absolute绝对定位，是元素在移动时相对于祖先元素说的，如果祖先元素没有定位，就以浏览器为标准进行定位，如果先祖有定位，就以最近的有定位的先祖为标准进行定位，绝对定位不再占有原来的位子，脱离标准流

fixed固定定位，是元素固定于浏览器可视界面的位置，以浏览器可视窗口为参照进行偏移，与父元素无关，固定定位不再占有原来的位置，即脱标

定位的叠放次序z-index,数值可以是正整数，0，或者负整数，数值越大，盒子越靠上。默认值为auto,如果属性相同，按照书写顺序，后来者居上，数字后面不可以加单位，只有定位的盒子才有z-index属性。

欢迎光临菁英数字科技（猩码）-猩码学苑-专注软件开发人才菁英教育 (http://www.xingmaxueyuan.com/)