CSS布局方式有哪些
CSS布局方式有哪些
- 静态布局
- 自适应布局
- 流式布局
- 响应式布局
- 弹性布局
1.静态布局
最传统的布局方式,网页中所有尺寸都是由px作为单位,设置了min-width,如果宽度小于就会出现滚动条,如果大于这个宽度则内容居中外加背景。
实现方法:
PC:居中布局,所有样式使用绝对宽度/高度(px),设计一个Layout,在屏幕宽高有调整时,使用横向和竖向的滚动条来查阅被遮掩部分;
移动设备:另外建立移动网站,单独设计一个布局,使用不同的域名如wap.或m.。
优点:采用之前的css2的布局方式,布局简单,没有兼容性问题。
缺点: 在手机端不能合理的显示,移动端不能使用pc端页面,需要再写一个布局来呈现。
实践案例:
- Float 布局
- 绝对布局
2.自适应布局
可以看成是不同屏幕下由多个静态布局组成的。自适应布局是为不同的屏幕分辨率分别定义不同的布局。改变屏幕分辨率可以切换不同的静态布局(页面元素位置可能发生改变),但在每个静态布局中,页面元素不随窗口大小的调整发生变化。自适应布局页面里面元素的位置会变化,很好的解决了流式布局中的大屏空间利用率不高弊端。
屏幕分辨率变化时,页面里面元素的位置会变化而大小不会变化。
3.流式布局(又别名 百分比布局 %)
网页中主要的划分区域的尺寸使用百分数(搭配min-*、max-*属性使用),分别为不同的屏幕设置布局格式,当屏幕大小改变时,会出现不同的布局,意思就是在这个屏幕下这个元素块在这个地方,但是在那个屏幕下,这个元素块又会出现在那个地方。只是布局改变,元素不变。可以看成是不同屏幕下由多个静态布局组成的。
而流式布局的特点是随着屏幕的改变,页面的布局没有发生大的变化,可以进行适配调整,这个正好与自适应布局相补。使用%百分比定义宽度,高度大都是用px来固定住,可以根据可视区域 (viewport) 和父元素的实时尺寸进行调整,尽可能的适应各种分辨率。往往配合 max-width/min-width 等属性控制尺寸流动范围以免过大或者过小影响阅读。这种布局方式在Web前端开发的早期历史上,用来应对不同尺寸的PC屏幕(那时屏幕尺寸的差异不会太大),在当今的移动端开发也是常用布局方式,但缺点明显:主要的问题是如果屏幕尺度跨度太大,那么在相对其原始设计而言过小或过大的屏幕上不能正常显示。因为宽度使用%百分比定义,但是高度和文字大小等大都是用px来固定,所以在大屏幕的手机下显示效果会变成有些页面元素宽度被拉的很长,但是高度、文字大小还是和原来一样(即,这些东西无法变得“流式”。
屏幕分辨率变化时,页面里元素的大小会变化而但布局不变。
主要案例:
- 左侧固定+右侧自适应
- 左右固定宽度+中间自适应
- 圣杯布局
原理:用相对定位、浮动、负边距布局、而不加任何标签 - 双飞翼布局
原理:中间设左右边距,左右设浮动、负边距归位,消除相对定位
4.响应式布局
通过响应式设计能使网站在手机和平板电脑上有更好的浏览阅读体验。屏幕尺寸不一样展示给用户的网页内容也不一样。利用媒体查询可以检测到屏幕的尺寸(主要检测宽度),并设置不同的CSS样式,就可以实现响应式的布局。主要依靠是css的媒体查询。
每个屏幕分辨率下面会有一个布局样式,即元素位置和大小都会变。
5.弹性布局 (rem/em flex布局)
- rem/em
- flex
CSS布局方式有哪些相关推荐
- css布局方式_手把手教你CSS Flex布局「真香」
作者:EcbJS 转发链接:https://blog.csdn.net/EcbJS/article/details/106466757 前言 之前做项目,关于布局方面没怎么深入研究过,好多页面都是 ...
- 常见 五大CSS 布局方式 总结
常见 五大CSS 布局方式 总结 之所以总结是因为最近也是在看css方面,让我迷惑的是有很多文章 关于布局名词都没有听说过,工作中也很少用.但是我们要与时俱进,叫的多了,它就成为正式名词了.比如 '双 ...
- 前端学习总结——CSS布局方式之传统布局
传统布局 传统布局即是早期在平板电脑.智能手机等移动设备并不流行的时候使用的布局方式. 一.表格布局 例如:采用表格方式实现如下简单模型的布局 (1)固定布局 即用具体的像素值来确定模型的宽和高等值. ...
- css布局方式_网页布局都有哪种?一般都用什么布局?
随着Web技术不断的革新,CSS近几年也变得多年前要更强大.在Web开发中,CSS是不可或缺的一部分,对于很多Web开发者来说,有很多CSS属性不知道,或者说他们知道,但忘记在最恰当的时候使用最适合的 ...
- css布局方式_收藏!40 个 CSS 布局技巧
简介:CSS是Web开发中不可或缺的一部分,随着Web技术的不断革新,CSS也变得更加强大.CSS的众多属性你知道了多少?具体开发中该使用什么属性才最适合恰当?如今的一些CSS属性可以让我们节约更多的 ...
- css布局方式,实现四宫格,九宫格,16宫格等切换
1.借助absolute方位值,实现自适应的网格布局,用伪元素间隔 absolute+四个方位值撑开局面.float+宽度百分比实现横向排列.高度百分比实现自适应. 最外层的父元素使用absolute ...
- CSS几种常见的页面布局方式介绍
问题:CSS几种常见的页面布局方式介绍? CSS常见的有以下7种,必须要掌握的是前3种: flex弹性盒子(弹性布局): rem布局(一般都是flex+rem使用的比较多): 响应式布局(响应式布局的 ...
- css五大布局方式详解
css布局方式 table布局 float布局 flex布局 响应式布局 Grid布局 table布局 table布局在如今已经很少使用,原因是:table布局比其它html标记占更多的字节,会阻挡浏 ...
- CSS常见的几种布局方式
在看前端面试题的时候经常会看到css的布局方式,今天整理一下分享给大家. #单列布局 #两列自适应布局 #三栏布局(圣杯布局和双飞翼布局) 一.单列布局 常见的单列布局有两种: header.cont ...
最新文章
- QIIME 2用户文档. 12数据筛选Filtering data(2019.7)
- java 交换机_Java交换机案例:有或没有大括号?
- hadoop 依赖式job_Hadoop Job使用第三方依赖jar文件
- assertThat的使用方法
- 使用 Arthas 排查开源 Excel 组件问题
- iOS:(接口适配器3)--iPhone适应不同型号 6/6plus 前
- inline用法详解
- pandas 检查某个元素是否在index中
- 智慧园区主要功能及典型案例分析
- python 异常处理_异常处理 — Python 3.7.9 文档
- pandas numpy处理缺失值,none与nan比较
- Modelsim软件的使用教程
- 使用STL标准模板库实现的个人通讯录
- html5空白站位符号,空格代码(隐形空白符号)
- 京东数科发布《京东区块链技术实践白皮书2020》(附白皮书下载链接)
- 一、Zstack基础知识(ZCCT云计算认证)
- 程序员与颈椎病(三):颈椎病终极解决办法
- Intellij IDEA中修改Maven项目的项目名称
- gitee仓库人员上限如何一键删人
- 深度了解自监督学习,就看这篇解读 !何恺明新作MAE:通向CV大模型