css什么是自适应布局,CSS自适应布局

今天小编介绍自适应布局实现方法的demo，

1)左侧固定宽度，右侧自适应，随着窗口的宽度而变化；

2)右侧固定宽度，左侧自适应；

3)中间自适应，两边定宽

1、左定宽

用左侧margin-left设为负宽度的方法，因为左侧脱离文档流，右侧宽度设为100%

效果如下：

left.png

代码如下：

.head{

display: block;

text-align: center;

line-height: 50px;

height: 40px;

background-color: yellow;

color: purple;

}

.body{

display: block;

height: 400px;

width: 100%;

}

.left{

float: left;

width: 100px;

height: 100%;

background-color: pink;

margin-right: -100px;

}

.right{

height: 100%;

width: 100%;

color: white;

background-color: lightblue;

float: left;

margin-left: 100px;

}

.foot{

display: block;

width: 100%;

height: 40px;

background-color: yellow;

text-align: center;

}

细节解释：line-height等于height可以使文本上下居中，如果line-height超过height，以height为准

2、右定宽

仍然采用margin方法，但这里有一个瑕疵，左侧的部分会被遮挡

right.png

.right{

float: right;

width: 100px;

height: 100%;

background-color: pink;

margin-left: -100px;

}

.left{

height: 100%;

width: 100%;

color: white;

background-color: lightblue;

float: left;

}

3、中间自适应

实现方法是，左右两边浮动，且在html中先写左右标签，后写中间标签，利用浏览器从上到下解析html标签的特点

middle.png

.body{

display: block;

height: 400px;

width: 100%;

}

.left{

height: 100%;

float: left;

width: 100px;

background-color: pink;

}

.middle{

background-color: lightblue;

height: 100%;

}

.right{

height: 100%;

float: right;

width: 100px;

background-color: lightgreen;

}

css什么是自适应布局,CSS自适应布局相关推荐

CSS 实现左侧固定，右侧自适应两栏布局的方法
"左边固定,右边自适应的两栏布局",其中有老生常谈的float方法,BFC方法,也有CSS3的flex布局与grid布局.并非所有的布局都会在开发中使用,但是其中也会涉及一些知识点 ...
CSS 布局实例系列（三）如何实现一个左右宽度固定，中间自适应的三列布局——也聊聊双飞翼
文章转自:http://www.cnblogs.com/honoka/p/5161836.html 今天聊聊一个经典的布局实例: 实现一个三列布局,其中左侧和右侧的部分宽度固定,中间部分宽度随浏览器宽 ...
CSS 布局实例系列（三）如何实现一个左右宽度固定，中间自适应的三列布局——也聊聊双飞翼...
今天聊聊一个经典的布局实例: 实现一个三列布局,其中左侧和右侧的部分宽度固定,中间部分宽度随浏览器宽度的变化而自适应变化可能很多朋友已经笑了,这玩意儿通过双飞翼布局就能轻松实现.不过,还请容我在双飞 ...
CSS之布局系列--静态布局、流式布局、自适应布局、响应式布局的概念及区别
原文网址:CSS之布局系列--静态布局.流式布局.自适应布局.响应式布局的概念及区别静态布局.流式布局.自适应布局.响应式布局的概念及区别_IT利刃出鞘的博客-CSDN博客简介说明本文介绍前端的 ...
css什么是自适应布局,css 自适应布局阮一峰
转载一篇文章: 自适应网页设计(Responsive Web Design) 作者: 阮一峰移动设备正超过桌面设备,成为访问互联网的最常见终端.于是,网页设计师不得不面对一个难题:如何才能在不同大小 ...
css什么是自适应布局,CSS自适应布局思路
最近在做一个自适应布局的项目,所以学了下自适应,下面是总结.此总结只做效果,不关注效率和代码优化. 1.css3 html中添加 css中的整体布局 CSS Code复制内容到剪贴板 @mediasc ...
css什么是自适应布局,CSS中常见的自适应布局是什么
CSS中常见的自适应布局是什么发布时间:2020-12-05 13:24:07 来源:亿速云阅读:102 作者:小新这篇文章主要介绍CSS中常见的自适应布局是什么,文中介绍的非常详细,具有一定的 ...
HTML变列自适应布局三行,div自适应居中_典型的DIV CSS三行二列居中高度自适应布局...
摘要腾兴网为您分享:典型的DIV CSS三行二列居中高度自适应布局,弈玩游戏,携程,悟空单车,我和你等软件知识,以及驾考精灵,指尖遥控,广告拦截,浙江学习网,360主题桌面,平板电脑qq,咖啡厅室内 ...
css 左右布局高度自适应,CSS布局-高度自适应
前面一篇讲述了有关高度自适应的问题,现在来讨论下用CSS2来实现高度自适应的方式. 单个自适应当且只有个一个div的高度需要自适应时,我们可以使用以下方法,*{padding:0;margin:0; ...
java 自适应屏幕_自适应屏幕的CSS响应式布局设计技巧总结
摘要:这篇CSS教程栏目下的"自适应屏幕的CSS响应式布局设计技巧总结",介绍的技术点是"css响应式.响应式布局.响应式.自适应.CSS.设计",希望对大家开 ...

css什么是自适应布局,CSS自适应布局

css什么是自适应布局,CSS自适应布局相关推荐

最新文章

热门文章