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

标题: 王嘉乐-2022-10-17 前端浮动定位标准流 [打印本页]

作者: yousay！ 时间: 2022-10-17 23:53
标题: 王嘉乐-2022-10-17 前端浮动定位标准流
一、今日学习内容
1.传统网页布局的三种方式
浮动（float）：属性值：left：元素向左浮动 right：元素向右浮动 none：元素不浮动（默认值）
浮动的特性：1、浮动的元素会脱离标准流（脱标）2、浮动元素会一行内显示并且元素顶部对齐
                        3 、浮动元素会具有行内块元素的特性 4、浮动的元素不会压住下面盒子的文字内容，因为浮动的特性就是为了做到文字环绕的
                        5、浮动的元素之间默认是没有空隙的
   浮动布局的注意点：1、浮动和标准流父盒子的搭配
            先用标准流的父元素排列上下位置，之后内部的子元素采用浮动排列左右位置
                        2.一个元素浮动了，其他的兄弟元素理论上也要跟着浮动
               浮动  的盒子只会影响浮动  盒子后面的标准流，不会影响前面的标准流
清除浮动：如果父盒子没有添加清除浮动，那么子盒子浮动不占位置，父盒子不指定高度的话，后面的标准流会紧挨着父盒子来进行排列，所以要清除浮动。
         给父级标签添加overflow属性给父级添加after伪元素    父级添加双伪元素
2.定位
定位模式：position:static; （静态定位）position:relative;（相对定位）相对定位没有脱标position:absolute;（绝对定位）
绝对定位不再占有原来的位置（脱标）相对定位最大的作用就是给绝对定位当爹的（子绝父相）
二、今日遇到问题
白天懂了  写作业时候迷了
三、解决办法
熬夜实践学

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