css什么是自适应布局,CSS中常见的自适应布局是什么

CSS中常见的自适应布局是什么

发布时间：2020-12-05 13:24:07

来源：亿速云

阅读：102

作者：小新

这篇文章主要介绍CSS中常见的自适应布局是什么，文中介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们一定要看完！

CSS中常见自适应布局有：左边定宽右边自适应；右边定宽左边自适应；两边定宽中间自适应

今天将介绍的是CSS中常见的自适应布局，有一定的参考价值，希望对大家有所帮助。接下来在文章中将为大家详细介绍自适应布局的几种方法

自适应布局：

自适应布局的特点就是根据不同的设备其屏幕尺寸的大小来自适应，也就是在每个静态布局中，页面元素会随着窗口的大小的调整发生变化

方法一

左边固定右边自适应，一般用于移动端Web的列表展示

HTML代码

实现方法：给父元素一个绝对定位使其子元素可以撑开父元素高度，固定一边定宽且左浮动，右边自适应的宽高给百分比

.box{

position: absolute;

width:100%;

height: 100%;

}

.left{

width:200px;

height:100%;

background: pink;

float: left;

}

.right{

width:100%;

height:100%;

background: skyblue;

}

效果图：

方法二

左边自适应，右边定宽

display:table-cell属性就是让标签元素以表格单元格的形式呈现，类似于td标签，这个属性只适用于目E8浏览器及其以上版本的和其他现代浏览器都是支持此属性的。这个属性的使用为我们的自适应式布局带来就简便

HTML代码：

实现方法：给父元素设置为table元素再通过display:table-cell完成.box{

position: absolute;

width:100%;

height: 100%;

display: table;

table-layout: fixed;

}

.left {

width: 200px;

height:100%;

display:table-cell;

background: pink;

}

.right {

display: table-cell;

width:100%;

height: 100%;

display: table-cell;

background: skyblue;

}

效果图：

方法三

两边定宽中间自适应

HTML代码

实现方法：flex 属性是用于设置或检索弹性盒模型对象的子元素如何分配空间。.box{

position: absolute;

display: flex;

width: 100%;

height: 100%;

}

.left {

width: 200px;

height:100%;

float:left;

background: pink;}

.content{

float: left;

height: 100%;

flex: 1;

background-color:#f1f19b;

}

.right {

display: table-cell;

width:200px;

height: 100%;

float: left;

background: skyblue;

}

效果图如下：

以上是“CSS中常见的自适应布局是什么”这篇文章的所有内容，感谢各位的阅读！希望分享的内容对大家有帮助，更多相关知识，欢迎关注亿速云行业资讯频道！

css什么是自适应布局,CSS中常见的自适应布局是什么相关推荐

Android中常见五种布局管理器——RelativeLayout、LinearLayout、FrameLayout、TableLayout、GridLayout
目录布局管理器 RelativeLayout 常见属性 Relative的实践操作(实现软件更新界面) LinearLayout 常见属性 LinearLayout的实践操作(模范登录以及微信底部) ...
Android笔记——在布局文件中插入另一个布局文件
假如有一个布局文件A.xml想把另外一个布局文件B.xml引进其布局,则可以通过下面的代码 <include layout="@layout/B" /> 程序猿必读转 ...
优秀的html布局,优秀的网页设计中常见的六大布局
在优秀网站设计中,不同类型的网站布局方式不一样,但是不管采用何种布局,都要围绕用户的浏览习惯去布局,布局的方式要主次分明,重点突出,比如,用户一般浏览网页都喜欢从左到右的浏览方式.如果网站布局从上下到 ...
Fluent中的网格自适应技术
Fluent中的网格自适应技术 Fluent中的网格自适应技术可以允许我们根据数据计算结果来修改网格梳密布置或网格走向.在fluent中非结构化网格特征的两个重要优点是: 1.跟结构化网格相比减少创建 ...
QML中的定位器和布局
QML中的定位器和布局 QML中的定位器和布局手动定位锚点定位器布局类型 QML中的定位器和布局手动定位通过设置项目的x,y属性,可以将它们放置在屏幕上的特定x,y坐标处.根据视觉坐标系规 ...
android怎么查看方法被谁调用,Android中查看布局文件中的控件（view,id）在哪里被调用（使用）...
在阅读别人的代码时通常是很痛苦的,有时很想要看一看布局中的控件在哪里被调用了,为之很苦恼在这里提供一种方法. 复制要查看的控件ID,到R文件中搜索到该ID, 接下来就好办的了,选中ID按下Ctrl鼠 ...
html左文右图布局方法,常见的图文布局
图文布局的效果图文布局的代码常见的图文布局 .all { width: 900px; margin: 0 auto; } .title { float: left; width: 100%; ba ...
html中页面布局技术,CSS基础之几种常见的页面布局
CSS基础之几种常见的页面布局本人前端菜鸟一枚,在学习 CSS 过程中发现网上流传的教程参差不齐,要么内容不够详细,要么方法就是错的,按照它给出的方法不能实现我想要的目的.于是自己决定写一篇经验.如 ...
在php中页面布局 3列左右侧固定中间自适应居中,css三列布局--两边固定中间自适应和中间固定两边自适应...
三列布局本篇讲三列布局,面试常考题,自己总结的,如有什么问题,欢迎指出!我会用红色标注出主要作用部分,都是最精简的写法,,没有多余的修饰. 布局方式一:两边固定中间自适应 1.flex布局思路:将 ...

css什么是自适应布局,CSS中常见的自适应布局是什么

css什么是自适应布局,CSS中常见的自适应布局是什么相关推荐

最新文章

热门文章