网页的本质就是超级文本标记语言,通过结合使用其他的Web技术(如:脚本语言、公共网关接口、组件等),可以创造出功能强大的网页。因而,超级文本标记语言是万维网(Web)编程的基础,也就是说万维网是建立在超文本基础之上的。超级文本标记语言之所以称为超文本标记语言,是因为文本中包含了所谓“超级链接”点。
如今的网页布局是需要适应于各种屏幕的,因此就需要来实现自适应使得网页中的内容来完全的显示,所以,今天的这篇文章就来给大家介绍一下关于css宽度自适应的内容。详细的说一说css自适应布局中css宽度自适应该如何实现。
我们经常会看到这样的页面,左侧(或者右侧)为固定的导航或者菜单栏,另一侧将会随着浏览器的缩放而自适应改变其大小,这其实就是宽度自适应的实现。
css宽度自适应中最常见的实现方法有两种,一种是两列布局,另一种是三列布局
下面我们就来对这两种方法分别简单介绍一下。
一. css宽度自适应之两列布局:
我们以右侧宽度固定,左侧宽度自适应为例:
1、固定宽度区浮动,自适应区不设宽度而设置 margin
<div id="wrap">
<div id="sidebar" style="height:500px;background:red;color:#fff;">固定宽度区</div>
<div id="content" style="height:500px;background:#000;color:#fff;">自适应区</div>
</div>