font默认行高覆盖相对定位绝对定位和float的区别

funnyZhang 发布于2019-08-29 18:32 / 1363人阅读

摘要：可以理解为真身还在原来的位置站着，魂通过进行移动，并且层级比未脱离文档流的元素高一级，移动到哪里就盖住哪个元素。

67-68讲开班信息案例

代码只写了67讲，主要还是line-heught让文字垂直居中，font覆盖行高的问题，这些在前面都讲过。68讲没什么重要知识点，代码没写，下面是67讲的代码：



导航条






     
        近期开班
        16年面授开班计划

69讲相对定位 特点

position:relative设置后，不会影响页面原有的布局，不会脱离文档流。可以理解为真身还在原来的位置站着，魂通过left,top,bottom,right进行移动，并且层级比未脱离文档流的元素高一级，移动到哪里就盖住哪个元素。

left,top,bottom,right和margin相似，通过这4个值可以进行相对当前定位的位置移动

相对定位块级元素，内联元素的性质没发视任何改变，就理解为和没开启相对定位一摸一样！这和float是大不相同的。

上图代码



导航条

70讲绝对定位 特点

与相对定位不同，开启绝对定位会脱离文档流，影响原有布局(后面元素往下钻)

只设置position:absulote在没有设置偏移量left,top,bottom,right的情况下，它还会在原有的位置，这点和相对定位一样

绝对定位的默认参照物是浏览器窗口的左上角，但是当祖先元素开启了定位以后参照参照物就会是最近开启定位的祖先元素，在这里最好看一看珠峰培训2018年周啸天的第97讲 DOM盒子模型7-盒子偏移量和OFFET。另外，也要区分和float的区别，float的浮动是无论如何也逃不出父元素的，没有参照物的概念。

开启了绝对定位元素的性质会发生改变，这里和float一样，内联变块级元素，块级元素宽度消失，并且对父元素造成高度塌陷问题

总结

绝对定位和float很容易混淆，但是要区分好。float独有的是逃不出父级的手掌心，据对定位是多了一个参照物。另外要说的一点是只有设置了position才能使用left,top,bottom,right属性并且也能使用margin，如果不设置position只能用margin



导航条

服务器托管云服务器相对定位-绝对定位中的绝对定位相对定位绝对定位

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/114401.html

font默认行高覆盖相对定位绝对定位和float的区别

摘要：可以理解为真身还在原来的位置站着，魂通过进行移动，并且层级比未脱离文档流的元素高一级，移动到哪里就盖住哪个元素。 67-68讲开班信息案例代码只写了67讲，主要还是line-heught让文字垂直居中，font覆盖行高的问题，这些在前面都讲过。68讲没什么重要知识点，代码没写，下面是67讲的代码：导航条 *{ margin:0px; ...

Rocture 2019-08-02 16:12 评论0 收藏0
浮动的补充丶文本和字体属性丶background丶定位

摘要：英语为了防止用户电脑里面，没有微软雅黑这个字体。因为绝对定位脱离标准流，影响页面的布局。一丶浮动的补充　　浮动的特性: 　　　　1.浮动的元素脱标　　　　2.浮动的元素互相贴靠　　　　3.浮动的元素有字围效果　　　　4.浮动的元素有收缩的效果　　　　前提是标准文档流,margin的垂直方向会出现塌陷问题　　　　如果盒子居中:margin: 0auto;如果盒子浮动了,margin...

番茄西红柿 2019-04-23 13:22 评论0 收藏0
CSS总结

摘要：，视窗高度，等于视窗高度的。并不会对他周围的元素产生任何影响。修改属性只会造成本元素的重绘。虽然它和普通的类相似，可以为已有的元素添加样式，但是它只有处于树无法描述的状态下才能为元素添加样式，所以将其称为伪类。 display inline/inline-block/block -->> 牛奶/果冻/坚果 inline: img, span, strong, em, i, em, a...

godlong_X 2019-08-30 14:04 评论0 收藏0
CSS简洁笔记

摘要：层叠性发生的前提样式冲突优先级权重行内引入标签通用把权重相加，值越大越有先权重一样，后面的样式起作用补充知识笔记表单优化写法用户名格式化列表图标表单合并设置表格边框合并，适用于表格格式化上下文默认值。 1.通用属性 name：名称，可以重复，可以一样; class：类名，可以重复，也可以拥有多个，给CSS用的；如; id：唯一标示，不能重复，一般多用在JavaScript中；命名规...

yanbingyun1990 2019-08-02 16:00 评论0 收藏0
CSS简洁笔记

摘要：层叠性发生的前提样式冲突优先级权重行内引入标签通用把权重相加，值越大越有先权重一样，后面的样式起作用补充知识笔记表单优化写法用户名格式化列表图标表单合并设置表格边框合并，适用于表格格式化上下文默认值。 1.通用属性 name：名称，可以重复，可以一样; class：类名，可以重复，也可以拥有多个，给CSS用的；如; id：唯一标示，不能重复，一般多用在JavaScript中；命名规...

FullStackDeveloper 2019-08-29 14:01 评论0 收藏0