CSS布局模型学习(Float、Position、Flexbox)
一、Float
float 属性定义元素在哪个方向浮动。以往这个属性总应用于图像,使文本围绕在图像周围,不过在 CSS 中,任何元素都可以浮动。浮动元素会生成一个块级框,而不论它本身是何种元素。
清除浮动的方法:
* 为父元素添加overflow:hidden,这样父元素就有高度了 ,父元素的高度便不会被破坏;
* 浮动父元素
* 通过在所有浮动元素下方添加一个clear:both的元素,可以消除float的破坏性。
* (推荐)——clearfix——
.clearfix {
*zoom: 1;
}
.clearfix:after {
display: table;
line-height: 0;
content: "";
}
二、Position
2.1、position: static
static定位是HTML元素的默认值,即没有定位,元素出现在正常的流中,因此,这种定位就不会受到top,bottom,left,right的影响;
2.2、fposition:fixed——相对于窗口的固定定位
fixed定位是指元素的位置相对于浏览器窗口是固定位置,不随着滚动条的移动而改变位置,且fixed定位使元素的位置与文档流无关,因此不占据空间,且它会和其他元素发生重叠。
2.3、position:relative——相对定位
相对定位是相对于元素默认的位置的定位。既然是相对的,就需要设置不同的值来声明定位在哪里,top、bottom、left、right四个数值配合,来明确元素的位置。
不脱离文档流的布局,只改变自身的位置,在文档流原先的位置遗留空白区域。定位的起始位置为此元素原先在文档流的位置。
2.4、position:absolute——绝对定位
脱离文档流的布局,遗留下来的空间由后面的元素填充。定位的起始位置为最近的父元素(postion不为static),否则为Body文档本身
三、Flexbox
3.1 什么是flexbox?
Flexbox 是 flexible box 的简称(意思是“灵活的盒子容器”),是 CSS3 引入的新的布局模式。它决定了元素如何在页面上排列,使它们能在不同的屏幕尺寸和设备下可预测地展现出来。
它之所以被称为 Flexbox ,是因为它能够扩展和收缩 flex 容器内的元素,以最大限度地填充可用空间。与以前布局方式(如 table 布局和浮动元素内嵌块元素)相比,Flexbox 是一个更强大的方式:
* 在不同方向排列元素
* 重新排列元素的显示顺序
* 更改元素的对齐方式
* 动态地将元素装入容器
3.2 用float和position不能方便且灵活的实现的布局情况?
* 在父内容里面垂直居中一个块内容。
* 使容器的所有子项占用等量的可用宽度/高度,而不管有多少宽度/高度可用。
* 使多列布局中的所有列采用相同的高度,即使它们包含的内容量不同。
3.3 flex 模型说明
在 Flexbox 模型中,有三个核心概念:
– flex 项(也称 flex 子元素),需要布局的元素
– flex 容器,其包含 flex 项
– 排列方向(direction),这决定了 flex 项的布局方向(主轴)
* 主轴(main axis)是沿着 flex 元素放置的方向延伸的轴(比如页面上的横向的行、纵向的列)。该轴的开始和结束被称为 main start 和 main end。
* 交叉轴(cross axis)是垂直于 flex 元素放置方向的轴。该轴的开始和结束被称为 cross start 和 cross end。
* 设置了 display: flex 的父元素(在本例中是 <section>)被称之为 flex 容器(flex container)。
* 在 flex 容器中表现为柔性的盒子的元素被称之为 flex 项(flex item)(本例中是 <article> 元素。
3.4 使用
1、创建flex容器
要创建一个 flex 容器,您只需要将一个 display: flex 属性添加到一个元素上。默认情况下,所有的直接子元素都被认为是 flex 项,并从左到右依次排列在一行中。如果 flex 项的宽度总和大于容器,那么 flex 项将按比例缩小,直到它们适应 flex 容器宽度。<div class="flex-container"> <div class="flex-item">1</div> <div class="flex-item">2</div> </div>
.flex-container {
display: flex;
}
2、将 flex 项排成一列
弹性盒子提供了 flex-direction 这样一个属性,它可以指定主轴的方向(弹性盒子子类放置的地方)— 它默认值是 row,这使得它们在按你浏览器的默认语言方向排成一排(在英语/中文浏览器中是从左到右)。.flex-container { display: flex; flex-direction: column; }
可以通过(在 flex 容器中)设置 flex-direction: column 使 flex 项垂直布局。也可以通过设置 flex-direction: column-reverse 或 flex-direction: row-reverse 来使 flex 项以相反的顺序排列。
3、靠右对齐的 flex 项.flex-container { display: flex; justify-content: flex-end; }
回想一下,每个 Flexbox 模型都有 flex 方向(主轴)。justify-content 用于指定 flex 项在 flex 方向(direction)上的对齐位置。在上面的例子中,justify-content:flex-end 表示 flex 项在水平方向上靠 flex 容器的末端对齐。这就是为什么他们被放在了右边。
4、居中对齐的 flex 项
.flex-container {
display: flex;
justify-content: center;
}
justify-content ——控制 flex 项在主轴上的位置,
* 默认值是 flex-start,这会使所有 flex 项都位于主轴的开始处。
* 也可以用 flex-end 来让 flex 项到结尾处。
* center 在 justify-content 里也是可用的,可以让 flex 项在主轴居中。
* space-around ——它会使所有 flex 项沿着主轴均匀地分布,在任意一端都会留有一点空间。
* space-between,它和 space-around 非常相似,只是它不会在两端留下任何空间。
5、铺开的 flex 项
您可以通过使用以下 justify-content 属性的三个间距值之一来指定容器中 flex 项之间应显示多少空间:
space-evenly : flex 容器起始边缘和第一个 flex 项之间的间距和每个相邻 flex 项之间的间距是相等。(该属性以前很少看到,原因是以前浏览器不支持,chrome 也是 60 版本之后才支持 )
space-between : 任何两个相邻 flex 项之间的间距是相同的,但不一定等于第一个/最后一个 flex 项与 flex 容器边缘之间的间距;起始边缘和第一个项目之间的间距和末端边缘和最后一个项目之间的间距是相等的。
space-around : flex 容器中的每个 flex 项的每一侧间距都是相等的。请注意,这意味着两个相邻 flex 项之间的空间将是第一个/最后一个 flex 项与其最近边缘之间的空间的两倍。
6、flex 项在交叉轴上的对齐
通常,我们想沿着 flex 方向(主轴)排列 flex 项,还可以在垂直于它的方向(交叉轴)上对齐 flex 项。通过设置justify-content: center和align-items:center,可以使 flex 项水平和垂直放置在 flex 容器的中心。.flex-container { display: flex; justify-content: center; align-items: center; }
align-items ——控制 flex 项在交叉轴上的位置,默认的值是 stretch,其会使所有 flex 项沿着交叉轴的方向拉伸以填充父容器。如果父容器在交叉轴方向上没有固定宽度(即高度),则所有 flex 项将变得与最长的 flex 项一样长(即高度保持一致)。
在上面规则中我们使用的 center 值会使这些项保持其原有的高度,但是会在交叉轴居中。这就是那些按钮垂直居中的原因。
可以设置诸如 flex-start 或 flex-end 这样使 flex 项在交叉轴的开始或结束处对齐所有的值
7、对齐某个特定的 flex 项
可以在某个特定的 flex 项上使用 align-self CSS 属性,来使该特定的 flex 项与容器中的其他 flex 项进行对齐<div class="flex-container">
<div class="flex-item flex-bottom">1</div>
<div class="flex-item">2 <br />2<br />2</div>
<div class="flex-item">3 <br />3<br /> 3<br /> 3<br /> 3</div>
</div>
.flex-container {
display: flex;
justify-content: center;
align-items: center;
}
.flex-bottom {
align-self: flex-end;
}
8、换行
默认情况下, flex 项不允许多行/列排列,如果 flex 容器尺寸对于所有 flex 项来说不够大,那么flex 项将被调整大小以适应单行或列排列。通过添加 flex-wrap: wrap ,可以将溢出容器的 flex 项将被排列到另一行/列中。
flex-wrap:wrap-reverse 仍然使 flex 项以多行/列排列,但是它们从 flex 容器的末尾开始排列的。
flex-flow 缩写:( flex-direction 和 flex-wrap 的缩写 flex-flow)你可以将
flex-direction: row;
flex-wrap: wrap;
替换为
flex-flow: row wrap;
9、多行/列排列的 flex 项在交叉轴上的对齐方式
默认情况下,当 flex 容器的交叉轴(cross axis)上存在多余空间时,您可以在 flex 容器上设置 align-content,以控制 flex 项在交叉轴(cross axis)上的对齐方式。可能的值是 flex-start,flex-end,center,space-between,space-around ,space-evenly 和 stretch(默认)。
10、flex 项的动态尺寸
article {
flex: 1;
}
这是一个无单位的比例值,表示每个 flex 项沿主轴的可用空间大小。本例中,我们设置 <article> 元素的 flex 值为 1,这表示每个元素占用空间都是相等的,占用的空间是在设置 padding 和 margin 之后剩余的空间。因为它是一个比例,这意味着将每个 flex 项的设置为 400000 的效果和 1 的时候是完全一样的。
您还可以指定 flex 的最小值:
article {
flex: 1 200px;
}
这表示“每个flex 项将首先给出200px的可用空间,然后,剩余的可用空间将根据分配的比例共享“。 尝试刷新,你会看到分配空间的差别。
11、flex: 缩写与全写
flex 是一个可以指定最多三个不同值的缩写属性:
* 第一个就是上面所讨论过的无单位比例。可以单独指定全写 flex-grow 属性的值。
* 第二个无单位比例 — flex-shrink — 一般用于溢出容器的 flex 项。这指定了从每个 flex 项中取出多少溢出量,以阻止它们溢出它们的容器。 默认值为 1,当设置为0时,该 flex 项将不会被收缩。
比如
.flex-item1{flex-shrink: 0;}
.flex-item2{flex-shrink: 1;}
.flex-item3{flex-shrink: 2;}
比例是1:2,意思是在收缩时,flex-item2收缩 1/3 ,而第二个项目flex-item3将被收缩 2/3 ;
* 第三个是上面讨论的最小值。可以单独指定全写 flex-basis 属性的值。
* 建议不要使用全写属性,除非你真的需要(比如要去覆盖之前写的)。使用全写会多些很多的代码,它们也可能有点让人困惑。
12、设置元素的大小
flex-basis: 200px;
lex-basis: 10%;
使用 flex-basis 定制 flex 项尺寸来代替元素的初始大小。默认情况下,其值为 flex-basis: auto,这意味该尺寸着从非 Flexbox CSS规则计算的。还可以将其设置为某个绝对值或相对于 flex 容器百分比的值;例如 flex-basis:200px 和flex-basis:10%
13、将 flex-grow, flex-shrink, 和 flex-basis 放在一起
flex: 1 0 100px;
3.5 什么情况下不建议使用 Flexbox ?
虽然 Flexbox 非常适合缩放,对齐和重新排序元素,但以下情况应该尽量避免使用 Flexbox 布局:
* 整体页面布局
* 完全支持旧浏览器的网站
CSS布局模型学习(Float、Position、Flexbox)的更多相关文章
- CSS布局模型学习
转自:http://www.cnblogs.com/erliang/p/4092192.html CSS布局模型学习 参考链接慕课网:HTML+CSS基础课程 知识基础 1. 样式 内联 嵌入 外 ...
- [浅谈CSS核心概念] CSS布局模型:float和position
1.流动模型 HTML元素在默认情况下都是按照"流动模型"进行布局的,网上也有人称之为"普通流"."文档流"之类的.这种布局模式的特点在于: ...
- jsp学习---css基础知识学习,float,position,padding,div,margin
1.常用页面布局 效果图: 代码: <!DOCTYPE html> <html> <head> <meta charset="UTF-8" ...
- HTML+CSS学习笔记 (12) - CSS布局模型
标签:HTML+CSS css布局模型 清楚了CSS 盒模型的基本概念. 盒模型类型, 我们就可以深入探讨网页布局的基本模型了.布局模型与盒模型一样都是 CSS 最基本. 最核心的概念. 但布局模型是 ...
- CSS布局 ——从display,position, float属性谈起(转)
CSS布局 ——从display,position, float属性谈起 页面布局,或者是在页面上做些小效果的时候经常会用到 display,position和float 属性,如果对它们不是很了 ...
- 从零开始学习前端开发 — 6、CSS布局模型
一.css布局模型 1.流动模型(Flow) 元素在不设置css样式时的布局模型,是块元素就独占一行,是内联元素就在一行逐个进行显示 2.浮动模型(Float) 使用float属性来进行网页布局,给元 ...
- 从零开始学习html(十二)CSS布局模型——上
一.css布局模型 清楚了CSS 盒模型的基本概念. 盒模型类型, 我们就可以深入探讨网页布局的基本模型了. 布局模型与盒模型一样都是 CSS 最基本. 最核心的概念. 但布局模型是建立在盒模型基础之 ...
- 熟悉HTML CSS布局模型
HTML最难的地方来了!这个我反复了很多遍, 包括现在写博客, 也对我自己算是一种温习, 我这块怕是没办法写的很好懂, 因为我自己还不能把我学到的准确通俗易懂的表达出来, 给自己记个笔记, 以后再来一 ...
- 浅析css布局模型1
css是网页的外衣,好不好看全凭css样式,而布局是css中比较重要的部分,下面来分析一下常见的几种布局. 流动模型 流动模型是网页布局的默认模式,也是最常见的布局模式,他有两个特点: 1.块状元素都 ...
随机推荐
- 整理版jq 复习贴子
1绝对定位(abs)与相对定位(relative) 区别是相对定位参照自己的位置进行移动(当然需要设置top left这些生效)并且原来的位置保留着 偏移后会把 其它的层遮罩住 绝对定位就是的参照位置 ...
- webpack 打包调试
本文适用于已经会使用webpack的前端开发人员,但是想进一步了解webpack细节和进阶. 首先请读者按照我前一篇文章 Webpack 10分钟入门介绍的步骤,在本地搭建一个webpack的hell ...
- Unity MVC 个人想法
Unity MVC 个人想法 Model 想要实现效果 保存服务器数据 没有业务逻辑 接受发送消息 代码实现 缓存服务器发来的数据 注册消息接口 提供消息发送接口 View 想要实现效果 实现单元测试 ...
- vue教程2-01 vue生命周期、钩子函数
vue教程2-01 vue生命周期.钩子函数 <!DOCTYPE html> <html lang="en"> <head> <meta ...
- (转)9 db2trc案例2(1,2)
原文:http://book.51cto.com/art/200906/130068.htm 9.3.3 db2trc案例2(1) 在AIX操作系统上,系统原先运行良好,而后用户从DB2 V8 FP ...
- apt 下载安装包
1) Try both without sudo, apt-get download will pass and apt-get -d install will fail (root required ...
- ASP.NET Core 中使用 GrayLog 记录日志
使用 UDP 协议发送日志 自定义好的查询 key 存储数据,尽量不要使用 graylog2-server 服务端格式化日志再存储 Ubuntu 安装服务端 sudo apt-get update & ...
- 公共技术点( Java 反射 Reflection)
转载路径:http://p.codekk.com/blogs/detail/5596953ed6459ae7934997c5 本文为 Android 开源项目源码解析 公共技术点中的 Java 反射 ...
- RETE算法介绍
RETE算法介绍一. rete概述Rete算法是一种前向规则快速匹配算法,其匹配速度与规则数目无关.Rete是拉丁文,对应英文是net,也就是网络.Rete算法通过形成一个rete网络进行模式匹配,利 ...
- PHP函数array_merge
今天因一个Bug重新审视了下array_merge()这个函数. 定义:array_merge — 合并一个或多个数组 规范:array array_merge(array $array1 [, ar ...