浮动,定位,flex布局

更新日期: 2019-05-28阅读: 2k标签: 布局

什么是文档流

英文原文是:

Normal flow. In css 2.1, normal flow includes block formatting of block-level boxes, inline formatting of inline-level boxes, and relative positioning of block-level and inline-level boxes.

正常的布局流是将元素放置在浏览器视口内的系统:
块级元素(display:block)在视口中垂直布局——每个都将显示在上一个元素下面的新行上,并且它们的外边距将分隔开它们。
内联元素(也叫行内元素display:inline)表现不一样——它们不会出现在新行上;相反,它们互相之间以及任何相邻(或被包裹)的文本内容位于同一行上,只要在父块级元素的宽度内有空间可以这样做。如果没有空间,那么溢流的文本或元素将向下移动到新行。
通俗一点来说就是像在地铁站排队一样,正常情况,排成一队,一个一个来的就是内联元素,来一群人他们可能直接再排一队(不文明哈),那他们就是块级元素。


定位

静态(static)
这是默认的定位,没什么特别的。

相对定位(relative)
设置相对定位之后,就可以使用left right top bottom 啦。
相对定位到底是相对什么呢?
他相对的是他原本正常的位置,如果设置为left:20px意思就是相对原位置的左边,向右移动20px,如果是-20px那就向左移动。
同理,设置bottom:20px那就是相对原位置的下边,向上移动20px,如果是负数就向下移动。
一般我们要定一个元素的位置,只要两个就够了,left和right不要一起用,top和bottom不要一起用。
一起用有什么后果呢?一般是会忽略right,和bottom的。但还可能浏览器的不同,和文档流的不同,产生其他的特殊效果,暂且不提了。

绝对定位(absolute)
说他绝对啊,其实又不是绝对的,他也是一种相对。
它是以父元素为相对的对象,而且这个父元素啊,必须非static的定位,如果是static,那就找他爷爷(pis:不要找他的兄弟哈,兄弟不管事的),爷爷不行就找他祖爷爷,直到找到不是默认的static的元素,就以那个为参照了。
但是,还有人说了,真心找不到了怎么办,那最后那就是参照整个浏览器窗口了。
好啦,他的位置通过left right top bottom定好之后呢,那他后面的兄弟就看他不爽了,就挤到他的位置去了。
绝对定位的元素不再存在于正常文档布局流中。相反,它坐在它自己的层独立于一切。
这位兄弟这样抢位置是不对的,所以,absolut的元素他会在上面挡住他兄弟,不让其露脸。
可是他不光会挡住抢位置的,他还可能挡住其他的元素。所以上帝就设计了z-index来约束他。
z-index:默认是auto(IE浏览器默认为0),一般要设置在正常元素上面就设置z-index:1数字越大越在上层,也可以设置负数,数字越小越下层。
固定定位(fixed)
他是相对于整个浏览器的定位的。一般用在边上,设置成透明(opacity:0-1;)或者利用其他元素的margin来空出一定的位置。


浮动

浮动的设计目的是为了让文字环绕图片,说到文字,那就不得不说文本流了。
设置float是会脱离了文档流,他后面的元素块会占用他的位置,但是元素块中的文字却还是定位在float元素旁边,所以他没有脱离文本流。
如果一个float元素的上一个元素也是float的,那么它会紧紧的跟在后面,不留一点空隙。
文本流就像是守规矩的好孩子,虽然他的兄弟float了,但它们还是会为他留出空间。就算是他的爸爸的兄弟,他爸占位了,他也不会占位。
float的用处很多时候用来清除间隙,用在<li>,<img>等元素中。
清除float的方法

{style=“clear: both”;}/*添加一个空的div放在要清除浮动元素的最后面*/ 
{overflow: hidden;}/*同上*/ /*下面这个方法是bootstrap框架用的,可以兼容IE低版本*/
 .clearfloat:after { content: ''; display: table; clear: both; }
 .clearfloat { *zoom: 1; }


flexbox


主要搞清楚几个属性
flex-direction:控制布局方向,默认row属性横向布局,还可以column属性竖向布局。row-reverse横向反方向,column-reverse竖向反方向。
flex-wrap:控制元素换行,默认nowrap 规定灵活的项目不拆行或不拆列。wrap 规定灵活的项目在必要的时候拆行或拆列。wrap-reverse 规定灵活的项目在必要的时候拆行或拆列,但是以相反的顺序。

flex-flow:属性是 flex-direction 和 flex-wrap的简写。

flex:属性是flex-grow,flex-shrink ,flex-basis的简写
flex-grow:flex-grow 属性定义弹性盒子项(flex item)的拉伸因子。(可以给元素设置不同的值来控制大小比例)
flex-shrink:属性指定了 flex 元素的收缩规则。flex 元素仅在默认宽度之和大于容器的时候才会发生收缩,其收缩的大小是依据 flex-shrink 的值。只能是正数。
flex-basis:指定了 flex 元素在主轴方向上的初始大小。如果不使用 box-sizing 来改变盒模型的话,那么这个属性就决定了 flex 元素的内容盒(content-box)的宽或者高(取决于主轴的方向)的尺寸大小。

align-items 控制 flex 项在交叉轴上的位置。

默认的值是 stretch,其会使所有 flex 项沿着交叉轴的方向拉伸以填充父容器。如果父容器在交叉轴方向上没有固定宽度(即高度),则所有 flex 项将变得与最长的 flex 项一样长(即高度保持一致)。center 值会使这些项保持其原有的高度,但是会在交叉轴居中。这就是那些按钮垂直居中的原因

justify-content 控制 flex 项在主轴上的位置。

默认值是 flex-start,这会使所有 flex 项都位于主轴的开始处。

你也可以用 flex-end 来让 flex 项到结尾处。center 在 justify-content 里也是可用的,可以让 flex 项在主轴居中。

而我们上面用到的值 space-around 是很有用的——它会使所有 flex 项沿着主轴均匀地分布,在任意一端都会留有一点空间。

还有一个值是 space-between,它和 space-around 非常相似,只是它不会在两端留下任何空间。

链接: https://www.fly63.com/article/detial/3452

css两端对齐——div+css布局实现2端对齐的4种方法总结

css两端对齐,通过margin负值、justify、space-between、column-count等多种方式来实现css的两端对齐。

flex布局,学习flex弹性布局总结

flex布局(Flexible Box)是对界面css盒模型的一个优化,适应不同尺寸的屏幕,被定义flex的容器可以控制子元素的排列方向和大小,能够用更简单清晰的代码来完成复杂的布局。

html通过css,js实现div悬浮效果总汇,如原生JS实现滚动到一定位置实现div悬浮

在我们的实际开发中,经常会遇到页面中需要悬浮效果,本文将介绍通过fixed的实现,以及通过原生Js实现滚动到一定位置,实现div的悬浮

理解css中Grid布局,在项目中如何实现grid页面布局

CSS中Grid是一种二维网格式布局方式,Grid是为了解决二维布局问题而创建的CSS模块。使用Gird的好处,Gird在浏览器的兼容性,Grid布局的示例源码...

使用flex实现5种常用布局

flex常用布局:经典的上-中-下布局。在上-中-下布局的基础上,加了左侧定宽 sidebar。左边是定宽 sidebar,右边是上-中-下布局。还是上-中-下布局,区别是 header 固定在顶部,不会随着页面滚动。左侧 sidebar 固定在左侧且与视窗同高,当内容超出视窗高度时,在 sidebar 内部出现滚动条。

你以为 CSS 只是个简单的布局?

本文中,所有的图形都是在单个标签内实现的,大量使用了 CSS3 中的 ::before 、::after 伪元素,transparent 、border,多重线性与径向渐变,多重内外阴影,如果你的效果不尽人意,请尝试在 Chrome 浏览器下预览。

html实现时间轴_纯css实现响应式竖着/垂直时间抽布局效果

html实现用时间点来展示事件发生点来代替用table展示一条条数据,能够给人清晰、一目了然能够看清事情发生的过程,UI页面也显示的那么清晰。如何用css+html做出时间轴展示事件点的?

基于jquery 横向/纵向 时间轴插件推荐

这篇文章主要整理一些关于基于jquery,实现横向/纵向时间轴的插件推荐:jquery.jqtimeline插件、timeline.js插件、Timeglider.js插件、Melon HTML5 、jQuery Timelinr、Timeline Porfolio

CSS position 属性_css中常用position定位属性介绍

css可以通过为元素设置一个position属性值,position定位是指定位置的定位,以下为常用的几种:static(静态定位)、relative定位(相对定位)、absolute定位(绝对定位)、fixed(固定定位)、inherit定位

css圣杯布局的实现方式

css圣杯布局思路:外面一个大div,里面三个小div(都是浮动)。实现左右两栏宽度固定,中间宽度自适应。中间栏优先渲染。

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!