<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>max-width</title>

    <style>

        .main {

            max-width: 700px;

            border: 1px solid red;

            margin: 0 auto;

        }

    </style>

</head>

<body>

    <div class="main">

        在这种情况下使用 max-width 替代 width 可以使浏览器更好地处理小窗口的情况。<br />

        这点在移动设备上显得尤为重要，调整下浏览器窗口大小检查下吧！<br />

        顺便提下， 所有的主流浏览器包括IE7+在内都支持 max-width ，所以放心大胆的用吧。

    </div>

</body>

</html>

结果：

调整浏览器的窗口，div宽高自动缩放，真是很棒啊。

原文地址： http://zh.learnlayout.com/max-width.html

学习CSS布局 - max-width的更多相关文章

  1. 《学习CSS布局》学习笔记

    近几天做了一个小的企业展示网站.虽然页面是在模板的基础上改的,但改的多了不熟悉CSS也很麻烦.正好我看到了学习CSS布局这个网站,于是补习了一下CSS知识. CSS的显示 CSS的元素分为两类:块级元 ...

  2. “学习CSS布局” 笔记

    学习网址:http://zh.learnlayout.com/no-layout.html 本文仅为学习笔记,内容非原创. position 默认值:static 没有添加额外属性的relative和 ...

  3. 学习CSS布局 - position例子

    position例子 通过具体的例子可以帮助我们更好地理解“position”.下面是一个真正的页面布局. 结果: 代码如下: <!DOCTYPE html> <html lang= ...

  4. 学习CSS布局 - position

    position 为了制作更多复杂的布局,我们需要讨论下 position 属性. 它有一大堆的值,名字还都特抽象,别提有多难记了. 让我们先一个个的过一遍,不过你最好还是把这页放到书签里. 先看下运 ...

  5. 学习CSS布局 - box-sizing

    box-sizing 人们慢慢的意识到传统的盒子模型不直接,所以他们新增了一个叫做 box-sizing 的CSS属性. 当你设置一个元素为 box-sizing: border-box; 时,此元素 ...

  6. 学习CSS布局 - 盒模型

    盒模型 在我们讨论宽度的时候,我们应该讲下与它相关的另外一个重点知识:盒模型. 当你设置了元素的宽度,实际展现的元素却超出你的设置: 这是因为元素的边框和内边距会撑开元素. 看下面的例子,两个相同宽度 ...

  7. 学习CSS布局 - dispaly属性

    "display"属性 display 是CSS中最重要的用于控制布局的属性. 每个元素都有一个默认的 display 值,这与元素的类型有关. 对于大多数元素它们的默认值通常是  ...

  8. 学习CSS布局 - margin: auto;

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  9. 学习CSS布局 - 没有布局

    如果你只想把所有内容都塞进一栏里,那么不用设置任何布局也是OK的. 然而,如果用户把浏览器窗口调整的很大,这时阅读网页会非常难受: 读完每一行之后,你的视觉焦点要从右到左移动一大段距离. 试着调整下浏 ...

随机推荐

  1. cSharp:use Activator.CreateInstance with an Interface?

    ///<summary> ///数据访问工厂 ///生成時間2015-2-13 10:54:34 ///塗聚文(Geovin Du) /// (利用工厂模式+反射机制+缓存机制,实现动态创 ...

  2. SQL Server: create table sql script

    ---摇奖observeh数据库设计 Function getSpace lottery /* -- Author:geovindu 涂聚文 -- Date: 20180427 为了自写生成代码.根据 ...

  3. ionic 一些常见问题和命令

    最近项目需要用到ionic就马上去撸,但是做下来发现官方文档的native插件,按照文档来做也遇到很多坑或者暂时想不出办法实现的. ionic这种属于跨平台的开发,是适用于比较常见通用的平台,安卓机, ...

  4. Angular基础(三) TypeScript

    一.模仿Reddit a) 运行ng new –ng4angular-reddit创建应用,从随书代码中复制样式文件,新建组件app-root,代码为: 界面可以看到了: b) 对于界面输入的数据,获 ...

  5. 《InsideC#》笔记(十) 异常处理

    CLR的作用之一是处理异常.通过自动的内存和资源管理可以避免一部分异常,然后借助强类型系统还可以捕获运行时异常. 一 异常基础 异常处理系统保护四个关键字:try,catch,throw,finall ...

  6. The packaging and installation process of Android programs

    D:\android\adt-bundle-windows-x86-20131019\sdk\platform-tools工具的路径. 安卓工程经过eclipse编译然后通过aapt工具打包生成一个. ...

  7. sql 删除默认索引，对象 依赖于 列，由于一个或多个对象访问此列

    declare @name varchar(50)select  @name =b.name from sysobjects b join syscolumns aon b.id = a.cdefau ...

  8. windows10不能获取有效IP的问题

    最近我的windows10系统一直不能有效获取IP地址(无论有线还是无线),但手工设置IP后又能正常上网,所以怀疑是某个服务未启动的原因. 查了一下百度,发现还真是,现将解决方案记录如下: 1.打开系 ...

  9. Java中常用的字节流和字符流

    IO流(输入流.输出流) 字节流.字符流 1.字节流: InputStream.OutputStream InputStream抽象了应用程序读取数据的方式: OutputStream抽象了应用程序写 ...

  10. Django应用：学习日志网站

    目录 一.创建虚拟环境(Windows) 二.创建项目 三.创建应用程序 四.创建网页:学习笔记主页 五.创建其他网页 六.用户输入数据 七.用户账户 八.让用户拥有自己的数据 九.设置应用程序样式 ...