float

Posted 2020-09-06

、浮动定位(重难点)
1、定位
元素在页面中的位置就是定位
2、定位的分类
按照定位的效果，可将定位分成以下几种:
1、普通流定位(默认定位)
2、浮动定位
3、相对定位
4、绝对定位
5、固定定位
3、定位-普通流定位
普通流定位，又称为文档流定位，是页面元素的默认定位方式
页面中的块级元素：按照从上到下的方式逐个排列
页面中的行内元素：按照从左到右的方式逐个排列

让多个块级元素在一行内显示--浮动定位
4、浮动定位
1、什么是浮动(特点)
如果将元素的定位方式设置为浮动定位的话，那么将具备以下几个特征
1、浮动定位元素会被排除在文档流之外-脱离文档流(不占据页面空间)，其余的元素要上前补位
2、浮动元素会停靠在父元素的左边或右边，或停靠在其他已浮动元素的边缘上(元素只能在当前所在行浮动)
3、浮动元素依然位于父元素之内
4、浮动元素处理的问题-解决多个块级元素在一行内显示的问题
2、语法
属性：float
取值：1、none 默认值，无浮动
2、left 左浮动，让该元素停靠在父元素的左边，或停靠在左侧已有的浮动元素边缘上
3、right 右浮动，让该元素停靠在父元素的右边，或停靠在右侧已有的浮动元素边缘上
3、浮动带来的特殊效果
1、当一行内，显示不下所有的已浮动元素时，最后一个将换行
2、元素一旦浮动起来之后，那么宽度将变成自适应(宽度由内容决定)
3、元素一旦浮动起来之后，那么将变成块级元素，尤其对行内元素，影响最大
块级元素：允许修改尺寸
行内元素：不允许修改尺寸
4、文本，行内元素，行内块元素是采用环绕的方式来排列的，是不会被浮动元素压在底下的，会巧妙的避开浮动元素
4、清除浮动
作用：清除当前元素前面的元素浮动所带来的影响
属性：clear
取值：1、none 无清除，默认值，不做任何清除浮动的操作
2、left 清除前面元素左浮动带来的影响
3、right 清除前面元素右浮动带来的影响
4、both 清除前面元素所有浮动带来的影响
5、浮动元素对父元素的影响
由于浮动元素会脱离文档流，所以导致不占据页面空间，所以会对父元素高度带来一定影响。如果一个元素中包含的元素全部是浮动元素，那么该元素高度将变成0
解决方案如下：
1、直接设置父元素的高度
弊端：必须要知道父元素高度是多少
2、设置父元素浮动
弊端：对后续元素会有影响
3、为父元素设置overflow属性
取值：hidden或auto
弊端：如果有内容要溢出显示(弹出菜单)，也会被一同隐藏
4、父元素中，追加空的子元素，并设置其clear属性为both(推荐使用)
5、...
2、显示
1、显示方式
属性：display(用的比较多)
取值：1、none 让生成的元素不显示，并且脱离文档流
所谓的隐藏
2、block 让生成的元素表现的跟块级一样
独占一行，允许修改宽和高
3、inline 让生成的元素表现的跟行内元素一样
多个元素在一行，不允许修改尺寸
4、inline-block 让生成的元素表现的跟行内块元素一样
特点：
1、多个行内块与行内元素能够在一行内显示
2、行内块元素允许修改尺寸
2、显示效果
1、元素可见性
属性：visibility(可见)
取值：
1、visible 默认值，元素可见
2、hidden 隐藏，没脱离文档流，依然占据页面空间
3、collapse 用在表格上，删除一行或一列时，不影响表格布局
面试题：display：none与visibility：hidden的区别
1、display：none
本质上是改变元素的显示方式，脱离文档流，不占据页面空间
2、visibility：hidden
本质上是改变元素的可见性，隐藏元素，但未脱离文档流，所有隐藏后，地方还在
2、元素透明度
属性：opacity
取值：0.0(完全透明) ~ 1.0(完全不透明)
3、内容垂直对齐
属性：vertical-align
场合：可以使用在行内块元素、单元格以及图像中(img)，主要用于行内块以及图像两边的文本，相对于他们的垂直对齐方式
取值：
1、top 顶部对齐
2、middle 居中对齐
3、bottom 底部对齐
4、baseline 基线对齐，默认值
相对文本来讲：最后一行文本的底部，就是基线
相对图片来讲：图片底部向下3px的位置是基线位置
3、光标
属性：cursor
取值：
1、default 默认光标显示形态
2、pointer 小手(a标记上面的形态)
3、crosshair +形态
4、text I形态
5、wait 等待(沙漏或者旋转的圈)
6、help 帮助 ?
3、列表样式
1、列表项标志
属性：list-style-type
取值：
1、none 无标记显示
2、disc 实心圆
3、circle 空心圆
2、列表项图像
作用：将列表中默认的标识，替换成自定义的图像
属性：list-style-image
取值：url()
3、列表项位置
默认位置，标识是在内容区域之外，在列表的内边距范围内
属性：list-style-position
取值：
1、outside 默认值 标记位于文本的左侧，列表的内边距范围内
2、inside 将标记放置于文本区域之内
4、列表属性
属性：list-style
取值：type url() position
常用：list-style:none;
4、定位
(相对定位，绝对定位，固定定位)
1、定位属性
1、position
作用：指定元素的定位方式
取值：
1、static 默认值，即静态定位，不改变元素默认的定位方式
2、relative 相对定位
3、absolute 绝对定位
4、fixed 固定定位
注意：如果指定元素的position属性值为relative/absolute/fixed其中的任何一个的话，那么该元素称之为“已定位元素”
2、偏移属性
作用：改变元素的位置
属性：top/bottom/left/right
取值：px为单位的数值
向着名字相同的方向移，负值，反之正值
3、堆叠顺序
属性：z-index
取值：没有单位的数值 只针对已定位元素有效
2、定位方式
1、相对定位
1、什么是相对定位
元素会相对于它原来的位置偏移某个距离
改变元素位置后，元素原本的空间依然会被保留
2、语法
属性：position
取值：relative
配合着偏移属性(top/right/bottom/left)实现位置的改变
3、使用场合
位置微调时使用
配合 绝对定位 来使用
2、绝对定位
1、什么是绝对定位
如果元素被设置为绝对定位的话，将具备以下几个特征
1、脱离文档流-不占据页面空间
2、通过偏移属性固定元素位置
1、相对于 最近的已定位的祖先元素实现位置固定
2、如果没有已定位祖先元素，那么就相对于最初的包含块(body,html)去实现位置的固定
2、语法
属性：position
取值：absolute
配合着 偏移属性(top/right/bottom/left)实现位置的固定
3、场合
1、关联定位时使用-弹出菜单
4、注意
1、绝对定位的元素会变成块级元素
2、绝对定位的元素依然可以使用margin，但是margin:auto;会失效
3、堆叠顺序
属性：z-index
取值：无单位数值，谁大，谁在上面
取值可以为负，如果为负数就在页面所有内容之下
注意：
1、默认情况，后出现的元素在最上面
2、只要已定位的元素才能使用z-index
3、父子级元素无法改变z-index，永远都是子压在父上
4、固定定位
作用：将元素固定在页面的某个位置处，不会随着滚动条而发生位置移动
属性：position
取值：fixed
通过 偏移属性 实现元素的位置的固定
注意：固定定位的元素，永远都是相对body实现位置定位
固定定位的元素，会脱离文档流

允许修改行内元素尺寸的方式：1、浮动 2、display 3、绝对定位 4、固定定位