css系列之position与float

fnngj 发布于2019-08-29 13:52 / 1330人阅读

摘要：同时设置属性不起作用生成相对定位的元素，相对于其正常位置进行定位生成绝对定位的元素，相对于浏览器窗口进行定位默认值。额外标签法缺点不过这个办法会增加额外的标签使结构看起来不够简洁。

position

同时设置float属性不起作用

relative

生成相对定位的元素，相对于其正常位置进行定位

fixed

生成绝对定位的元素，相对于浏览器窗口进行定位

static

默认值。没有定位，元素出现在正常的流中

absolute

生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位，如果元素没有拥有position属性的父级元素会根据标签也就是页面的根节点进行定位

如果元素设置width则width优先，否则元素自知应宽度

导致父元素宽高塌陷

sticky

杀了个回马枪，还是说说position:sticky吧

float

语法：

clear: none | left | right | both

取值：

none:  默认值。允许两边都可以有浮动对象
left:  不允许左边有浮动对象
right:  不允许右边有浮动对象
both:  不允许有浮动对象

如果要浮动一个非置换元素，需要配合width属性

设置之后，vertical-align,display无效

浮动元素会按顺序排下来而不会发生重叠

清除浮动

因为float会破坏inline-box，所以导致父元素高度为0。
额外标签法

（缺点：不过这个办法会增加额外的标签使HTML结构看起来不够简洁。）
使用after伪元素
该方法中必须为需要清除浮动元素的伪对象中设置 height:0，否则该元素会比实际高出若干像素

.parent{
    zoom: 1
}
.parent:after {
    content:".";
    height:0; 
    line-height: 0;
    visibility:hidden;
    display:block;
    clear:both;
}

overflow + zoom方法(zoom, IE独有属性)

.fix{
    overflow:hidden; 
    zoom:1;
}

有问题的，就是这个overflow:hidden，要是里面的元素要是想来个margin负值定位或是负的绝对定位，岂不是直接被裁掉了，所以此方法是有不小的局限性的

不设偏移

relative，可以看作为static

absolute，依据父元素来定位，不一定是定位父元素元素

float，依据父元素来定位，不一定是浏览器窗口

设置偏移

relative，相对自身，对周围元素无影响

absolute，依据定位父元素元素

float稍微复杂点

只设置top/left(bottom/right)，则设置值要依据浏览器窗口，未设置值要依据父元素

设置了top,left，则需要依据浏览器窗口

同时设置top, bottom(left,right)，则bottom(right)不起效

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

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

CSS系列之常用布局

摘要：流式布局特点等宽不等高参考链接纯实现瀑布流多列及布局原生实现瀑布流效果参考链接：干货!各种常见布局实现+知名网站实例分析前端布局基础概述https://juejin.im/post/599970...https://juejin.im/post/5bbcd7...http://elevenbeans.github.io/...一些有趣的 CSS 魔法和布局（上）等高布局负mar...

qylost 2019-08-30 14:05 评论0 收藏0
css系列之水平垂直居中

摘要：水平居中水平居中没有什么好说的啦，对于行内元素使用对于块级元素使用前提是已经为元素设置了适当的宽度垂直居中单行文本多行文本伪元素行内元素伪元素未知宽高绝对居中绝对定位已知宽高负要考虑兼容性浮动元素垂直居中父元素水平居中水平居中没有什么好说的啦，对于行内元素使用text-align;对于块级元素使用margin: auto（前提是已经为元素设置了适当的 width 宽度）; 垂直居中...

MiracleWong 2019-08-29 13:44 评论0 收藏0
CSS:Margin与布局

摘要：参考线示意图如图所示按箭头所指方向使参考线变化的值都为正值。栗子没在上加前效果如图发生了堆叠。因此效果上来看便符合了预期如图此布局便利用了原理，通过元素对相邻元素位置的控制来达到预期的效果。 Margin与宽高度的关系博客同步地址Margin与布局在讲此之前，必须知道什么是containing-box以及一些宽高度的一些关系，关于containing-box的概念以及与宽高度的关系...

ivan_qhz 2019-08-28 18:24 评论0 收藏0
知识整理之CSS篇

摘要：如对知识点感兴趣，可移步至知识整理之篇就是针对不同的浏览器或不同版本浏览器写特定的样式达到让浏览器兼容的过程。对于伪元素的定义伪元素在中创建了一些抽象元素，这些对象不存在与常文档流中。隐藏元素的几种方法该属性隐藏元素，单元素在文档流中仍占据 CSS篇主要从CSS兼容、CSS3新特性、CSS选择器、高频属性、高频布局、高频知识点、性能优化等方面进行归纳。如对HTML知识点感兴趣，可移步至...

ermaoL 2019-08-30 15:55 评论0 收藏0
深入学习CSS布局系列（一）布局常用属性

摘要：布局涉及到的属性常用属性值此元素不会被显示它和属性不一样。当所有父元素中的所有元素脱离文档流之后，父元素将失去原有默认的内容高度浮动塌陷配合使用属性规定元素的哪一侧不允许其他浮动元素。 @(CSS技巧)[CSS, 布局] 深入学习CSS布局系列（一）布局常用属性一直感觉自己对CSS的各个属性很了解，可是在前几天一次面试后发现自己真的很多地方感觉自己知道，可是实际上自己并不是真的理解了...

Noodles 2019-08-30 12:53 评论0 收藏0