css3布局方式有几种

css3布局方式有几种

css3常用的布局有多栏布局、多列布局、弹性布局、流式布局、瀑布流布局和响应式布局。

下面我们来看看各种布局的效果吧。

一、多栏布局——栅格系统

栅格系统就是利用浮动实现的多栏布局,在bootstrap中用的非常多。

1.jpg

二、多列布局

栅格系统并没有真正实现分栏效果(如word中的分栏),CSS3为了满足这个要求增加了多列布局模块。(相关课程推荐:css视频教程

2.jpg

三、弹性布局(Flexbox)

弹性盒子是 CSS3 的一种新的布局模式。CSS3 弹性盒( Flexible Box 或 flexbox),是一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的布局方式。

引入弹性盒布局模型的目的是提供一种更加有效的方式来对一个容器中的子元素进行排列、对齐和分配空白空间。

3.jpg

四、流式布局(Fluid)

固定布局和流式布局在网页设计中最常用的两种布局方式。固定布局能呈现网页的原始设计效果,流式布局则不受窗口宽度影响,流式布局使用百分比宽度来限定布局元素,这样可以根据客户端分辨率的大小来进行合理的显示。

1069950-20161202135531615-528030479.png

五、瀑布流布局

瀑布流布局是流式布局的一种。是当下比较流行的一种网站页面布局,视觉表现为参差不齐的多栏布局,随着页面滚动条向下滚动,这种布局还会不断加载数据块并附加至当前尾部。最早采用此布局的网站是Pinterest,逐渐在国内流行开来。

4.jpg

六、响应式布局(Responsive)

Responsive design,意在实现不同屏幕分辨率的终端上浏览网页的不同展示方式。通过响应式设计能使网站在手机和平板电脑上有更好的浏览阅读体验。

5.jpg

Image placeholder
前端答疑
未设置
  51人点赞

没有讨论,发表一下自己的看法吧

推荐文章
css水平垂直居中有几种实现方式?

css水平垂直居中有几种实现方式?1、水平对齐+行高【思路一】text-align+line-height实现单行文本水平垂直居中 .f10.test{ text-align:center; line

css样式有哪几种?

CSS即层叠样式表(CascadingStyleSheets),是一种用来表现HTML或XML等文件样式的计算机语言。CSS主要用来设计网页的样式,美化网页;它不仅可以静态地修饰网页,还可以配合各种脚

架构修炼之道 | 一个传统网关系统有几种 “死” 法

本文节选自《架构修炼之道》,作者京东王新栋。图| meghan-holmes-779221-unsplash这里说的传统,是按照网关技术演进的阶段划分的,从同步到半同步,再到全异步,我们将同步和半同步

jquery有几种选择器?

jquery有几种选择器?很多种,大概归纳为9种。1、基本的有id、标签、类、通配符选择器:#id element .class *2、层次选择器:ancestordescendant parent>

几种常见的CSS 布局

课程推荐:CSS3基础视频教程#WEB前端必修课--学习猿地 本文概要 本文将介绍如下几种常见的布局: 单列布局两列自适应布局圣飞布局和双飞翼布局伪等高布局粘连布局一、单列布局 常见的单列布局有两种:

css3.0和css2.0区别?

css3.0和css2.0区别?css3加强了css2的功能,增加了新的属性和新的标签,并且删除了一些冗余的标签,在布局方面减少了代码量。以前比较复杂的布局现在一个属性就搞定了(columns之类的属

css3支持哪些浏览器?

CSS3带来众多全新的设计体验,但有一个问题值得考虑:浏览器对CSS3特性的兼容情况如何?因为页面最终离不开用浏览器来渲染,并不是所有浏览器都完全支持CSS3的特性。有时花时间写的效果只能在特定的浏览

css3实现元素不停旋转

css3实现元素不停旋转主要使用了@keyframes和animation,以及指定infinite,播放次数不限来实现。HTML代码如下: HTML中文网 CSS代码如下:(相关课程推荐:css视

css3选择器是啥意思

css3选择器是啥意思要明白css3选择器,我们首先需要知道什么是css选择器。css选择器是什么(推荐学习:CSS视频教程)●css选择器是用来规定css样式用于哪一个或哪一些dom元素的一种规范。

css3有内置图标吗?

css3有内置图标吗?css3没有内置图标,所有的图标都需要用户自己下载后使用。但是我们可以通过设置特殊字符,来实现图标的样式。(推荐学习:CSS视频教程)下面是一个特殊字符来代替图标的案例:

css3怎么实现菱形渐变?

css3怎么实现菱形渐变1、实现菱形渐变,首先需要实现一个菱形,使用了clip-path属性:.diamond{ width:200px; height:200px; clip-path:pol

CSS3pie是什么?

下面我就讲一讲PIE的具体用法CSS3PIE下载地址:官网http://css3pie.com/download/GitHubhttps://github.com/lojjic/PIE/downloa

css3中过渡和动画的区别是什么?

transition过渡让css变化平滑一些属性:属性描述transtion-property指定过渡的属性transtion-duration指定过渡所需时间transtion-timing-fun

html5 css3是什么?

html5和css3是什么?HTML5和CSS3是HTML和CSS的最新版本。HTML为构成网页的主要语言。通过这种语言,我们可以向计算机说明网页格式、内容、显示效果等等。CSS则是专门用来控制网页显

qq浏览器不支持css3怎么办?

qq浏览器不支持css3怎么办?css3属性,比如keyframe和animation都需要加webkit、ms前缀,针对手机不同浏览器可能还要加更多前缀。以此达到适配所以浏览器的目的。解决qq浏览器

css3有那些内置函数?

css函数属性函数:attr();背景图片函数:linear-gradient()、radial-gradient()、conic-gradient()、repeating-linear-gradie

css3-背景渐变

推荐课程:CSS3基础视频教程#WEB前端必修课--学习猿地免费体验课 线性渐变linear-gradient(direction,color-stop1,color-stop2,...);带兼容写法

一篇文章带你了解CSS3 背景知识

LoremIpsumDolorLoremipsumdolorsitamet,consectetueradipiscingelit,seddiamnonummynibheuismodtincidun

Java的Lambda表达式有何用处?如何使用?

本文转载自知乎,之前刚接触到Lambda表达式,看了好多文章,看完也还是一脸懵逼,后来刷知乎刷到这篇文章,顿开茅塞,让我明白了Lambda表达式到底是个啥,咋用。最重要的是第一点,知道了这个,其他的要

【CSS全解01】CSS基础-体系化学CSS

大纲 基础部分学习占比:HTML1%`CSS19%Javascript80%`(`基础部分?%框架?%`项目?%) CSS历史 AcidTestforbrowser CSS是艺术(非逻辑,用测试经验来

css栅格布局图文详解

圣杯布局圣杯布局是一种三列布局,两边定宽,中间自适应:css:*{ box-sizing:border-box; } html,body{ width:100%; height:100%; margi

CSS常见布局问题

1、多元素水平居中实现一下效果:平常人看见题目,最初感觉实现图片中的效果不难,设置小黑框的宽高边距,字体水平垂直居中即可。其实,题目应该实际上是考察多元素水平居中,即无论元素(小黑框)基数为多少,它们

为什么使用div css布局?

提起DIV+CSS组合,还要从XHTML说起。XHTML是一种在HTML(标准通用标记语言的子集)基础上优化和改进的新语言,目的是基于XML应用与强大的数据转换能力,适应未来网络应用更多的需求。为什么

css flex布局的优缺点是什么?

Flexbox布局(FlexibleBox)模块旨在提供一个更加有效的方式制定、调整和分布一个容器里的项目布局(基于一维),即使他们的大小是未知或者是动态的。(这里我们称为Flex)。Flex布局主要

css grid布局的优缺点是什么?

Grid(网格)布局使我们能够比以往任何时候都可以更灵活构建和控制自定义网格;能够将网页分成具有简单属性的行和列来完成我们需要的网格布局。grid布局的优点:1:固定和灵活的轨道尺寸2:可以使用行号,