定位流和浮动定位

Posted 2022-07-02 yaoqingzhuan

定位流(position属性)的分类
1、相对定位(relative)
2、绝对定位
3、固定定位
4、静态定位

相对定位
什么是相对定位？
就是相对于自己以前在标准流中的位置来移动，相对定位需要配合top/left/right/bottom属性使用

相对定位注意点
1、相对定位是不脱离标准流的，会继续在标准流中占用一份空间
2、在相对定位中，同一个方向上的属性只能使用一个
3、由于相对定位是不脱离标准文档流的，所以在相对定位中是区分块级元素/行内元素/行内块级元素，
即行内元素即使设置为position属性，设置宽高不起作用
4、由于相对定位是不脱离标准文档流的，而且相对定位的元素会占用标准流中的位置，所以当给相对定位
的元素设置margin padding等属性时会影响到标准流中的布局，即margin padding等属性先生效，然后再也生效后位置相对定位

相对定位应用场景？
1、用于微调元素布局
2、配合绝对定义使用

相对定位的弊端
相对定位是不脱离标准流的，会继续在标准流中占用一份空间，不利于布局

绝对定位
什么是绝对定位？
position属性设置为absolute
默认相对于body来定位
和相对定位一样需要配合top/left/right/bottom属性使用

绝对定位注意点
1、绝对对位的元素是脱离标准流的
2、绝对定位的元素是不区分块级元素/行内元素/行内块级元素，被设置为绝对定位的元素都可以设置宽高

绝对定位参考点
1、默认情况下，所有的绝对定位元素，无论有没有定位元素，都会以body作为参考点
2、如何一个定位元素有祖先元素，而且祖先元素也是定位流，那么这个绝对定位的元素就会以定位流的那个祖先元素作为参考点
3、只要是这个元素的祖先元素都可以
4、定位流指的是相对定位/绝对定位/固定定位
5、静态定位不行
6、如果祖先元素中有多个定位元素，那么就会以最近的祖先元素作为参考点
7、如果一个绝对定位元素是以body作为参考点，那么其实是以网页首屏的宽度和高度作为参考点，而不是以整个网页的宽度和高度作为参考点
8、一个绝对定位元素会忽略祖先元素的padding
绝对定位的应用场景
1、

绝对定位的弊端？
默认情况下是以body作为参考点，是以网页首屏的宽度和高度作为参考点，当浏览器大小发生变化后，会随着屏幕大小变化而变化

相对定位和绝对定位应用场景
子绝父相
子元素使用绝对定位，父元素使用相对定位


固定定位
什么是固定定位？
position属性设置为fixed
是指被设置的元素不会随着滚动条的滚动而变动位置
同样需要配合top/left/right/bottom属性使用

固定定位注意点
1、固定定位的元素是脱离标准流的，不会占用标准流中的空间，
2、固定定位和绝对定位一样不区分块级元素/行内元素/行内块级元素
3、固定定位的元素仍现在标准流的位置，只会影响其后面的元素

元素在父元素中居中
设置margin: 0 auto即可
如果该元素还需要设置其他的margin属性，需要放在margin: 0 auto后面
如margin: 0 auto;
margin-top: 50px;
这样 margin-top: 50px;才能生效
但是在绝对定位中不生效

如何让绝对定位元素的水平居中
left: 50%;
margin-left: -元素宽度的一半 px;

文字居中，如p标签、a标签
line-height: 50px;
text-align: center;
line-height设置为其父元素的高度，或者父元素设置line-height属性为高度值
因为子元素(如p标签、a标签)可以继承该属性

text-align : center 和 margin: 0 auto的区别
text-align : center 设置盒子中的文字内容和图片水平居中
margin: 0 auto 设置盒子自身在父盒子中水平居中

静态定位：
默认元素就是静态定位

z-index属性
什么是z-index属性
默认情况下所有的元素都有一个z-index属性，取值是0
z-index属性的作用是专门用于控制定位流覆盖关系
1、默认情况下，定位流元素会覆盖标准流元素
2、默认情况下，定位流元素会覆盖前面的定位流元素
3、如果定位流中的元素设置了z-index属性，那么谁的z-index属性比较大，谁就显示在上面
注意点
从父现象
1、如果两个定位元素的父元素没有设置z-index属性,那么谁的z-index属性比较大，谁就显示在上面
2、如果两个定位元素的父元素设置z-index属性,那么子元素的z-index属性就会失效，也就是谁的父元素
的z-index属性、谁就显示在上面

box-sizing
1、这个属性可以保证我们给盒子设置padding和border属性后，盒子的宽度和高度不变
2、那这个属性是如何保证盒子元素宽度和高度不变的呢？
增加padding和border属性后，想保持不变，必须减去一部分内容的高度和宽度

3、box-sizing的取值
content-box 默认值,元素的宽高 = 边框 + 内边框 + 内容宽高
border-box 元素的宽高 = width/height的宽高

 

选择器：
ul li:nth-of-type(4) 选择li中的第四个元素


行高


浮动流
1、浮动流是一种半脱离标准流的排版方式
2、浮动流只有一种排版方式，就是水平排版，它只能设置某个元素左对齐或者右对齐
3、属性 float ，取值 right/left/none
4、在其父盒子中左浮动或右浮动
5、应用，水平方向的布局

注意点：浮动流没有居中对齐，也就是没有center这个取值
在浮动流中margin ：0 auto是不生效的
特点：
在浮动流中是不区分行内元素/行内块级/块级元素
在浮动流中无论是行内元素/行内块级/块级元素，都可以设置宽高
综上：所有元素都可以当作行内块级元素

什么是浮动流脱标？
脱标：脱离标准流
当某个元素浮动之后，那么这个元素看上去就像被从标准流中删除了一样，这个就是浮动元素的脱标。
脱标后有什么元素？
如果前面的元素脱标了，而后面的元素没有脱标，那么前面的元素会盖住后面的元素(对于兄弟元素)

浮动元素排序规则
1、相同方向上的浮动元素，先浮动的元素会显示在前面，后浮动的元素显示在后面
2、不同方向上的元素，左浮动会找左浮动，右浮动会找右浮动
3、浮动元素浮动后的位置，由浮动元素在浮动之前在标准流中的位置来确定(重点理解)


浮动元素的贴靠现象
当父元素有足够宽，所有后浮动元素紧贴着前面浮动的元素
当父元素无法显示下浮动元素时，浏览器为了显示出浮动元素，就会往前一个浮动元素贴靠
如果还显示不下，继续往前前一个浮动元素贴靠，直到能显示
如果最后都无法显示，则贴靠到父元素上

浮动元素字围现象
浮动元素不会覆盖没有浮动元素中的文字
应用：人物介绍中的图文排版

浮动元素高度问题
在标准流中内容可以撑起父元素的高度
在浮动流中浮动元素是不能撑起父元素的高度的

清除浮动的方式
1、给前面的父元素设置高度，但是在企业开发中，我们能不写高度就不写高度，所以这种方式用的很少
2、给后面的盒子设置clear属性
none默认取值，安装浮动元素的排序规则来排序(左浮动找左浮动，右浮动找右浮动）
left 不要找之前的左浮动元素
right 不要找之前的右浮动元素
both 不要找前面的左浮动元素和右浮动元素(开发中常用这个）
例如；两个div中分别右3个p标签，div没有设置高度
让所有的p标签都左浮动，这时所有的p标签都会现在在一行
如果想p标签分别在自己的div中左浮动，此时需要清除浮动，给第二个div设置clear属性
注意点：
如果某个元素设置了clear属性，那个这个元素是margin属性就会失效
3、隔墙法
外墙法
a、在两个盒子中间，添加一个额外块级元素(一般div)
b、给这个额外添加的元素设置clear：both属性
注意点：隔墙法它可以让第二个盒子使用margin-top属性
隔墙法不可以让第一个盒子使用margin-bottom属性
一般实际开发中，设置额外块级元素的高度
内墙法
a、在第一个盒子中所有子元素后添加一个额外块级元素(一般div)
b、给这个额外添加的元素设置clear：both属性
注意点：隔墙法它可以让第二个盒子使用margin-top属性
隔墙法也可以让第一个盒子使用margin-bottom属性
也可以设置额外块级元素的高度

外墙法和内墙法的区别？
外墙法不能撑起第一个盒子的高度
内墙法可以撑起第一个盒子的高度

4、隔墙法和伪元素选择结合
使用伪元素选择器给第一个盒子所有子元素后添加一个额外块级元素
.box1::after
content: "0"; // 设置添加的内容为空
display: block; // 设置添加的元素为宽街
height: 0; // 高度为0
clear: both; // 清除浮动
visibility: hidden; // 隐藏

本质和内墙法一样

5、给第一个盒子设置overflow: hidden属性

伪元素选择器？
伪元素选择器作用就是给指定标签内容的前面添加子元素或者给指定标签内容的后面添加子元素
格式
标签名称::before 指定标签内容的前面添加子元素
标签名称::after 指定标签内容的后面添加子元素

div::before
content: "内容前面"; // 内容
background-color: red;
display: block;


overflow: hidden作用
1、可以将操作标签范围的内容裁剪掉
2、清除浮动
3、可以设置该属性(父盒子)，让里面的盒子设置margin-top之后，外面的盒子不会被顶下来