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

标题: 前端-毛少涵-20221115 [打印本页]

作者: 微小星晨 时间: 2022-11-16 22:53
标题: 前端-毛少涵-20221115
今日学习内容：CSS的浮动 1.传统网页布局的三种方式（标准流、浮动、定位）

1.1标准流（标签按照默认的方式进行排列）块元素会独占一行，从上到下顺序排列

行内元素是按照顺序，从左到右依次排列，碰到父元素的边缘就会自动换行

2浮动

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

浮动的属性float值none：元素不浮动（默认值）left：左浮动right：右浮动

总结：多个块级元素纵向排列找标准流，多个块级元素横向排列找浮动

浮动的特性

1、浮动的元素会脱离标准流

2、浮动的元素会一行内显示并且沿元素顶部对齐，相邻的元素之间没有空白间隙，如果超过父级宽度会自动换行显示

3、浮动的元素具有行内块元素的特性

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

浮动布局的注意点

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

2、当一个元素浮动了，那么它的兄弟元素也要跟着浮动。

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

清除浮动的方法

1、额外标签2、给父级添加overflow:hidden;3、父级添加after伪元素4、给父级添加双伪元素

CSS的定位定位=定位模式 + 边偏移

定位模式static：静态定位relative：相对定位absolute：绝对定位fixed：固定定位

相对定位relative1、它是相对于自己原来的位置进行移动相对定位不脱标）

绝对定位absolute绝对定位是元素在移动的时候，是相对于它的祖先元素来说。

绝对定位不会再占有原来的位置（脱离标准流）

固定定位 fixed固定定位是元素固定于浏览器可视区域的位置固定定位不再占有原来的位置脱标

今日问题；无

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