<!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. Python 中 and 和 or 的短路原则

    对于 and 来说: 如果第一个条件的结论为假,那么 and 前后两个条件组成的表达式计算结果一定为假,后面的条件计算机不会进行计算 对于 or 来说: 如果第一个条件的结论为真,那么 or 前后两个 ...

  2. "美女相册"的 js 实现代码

    划重点拉!  先来解释一下子标题 这个所谓的美女相册呢  并不是和你们想的一样龌龊 当然了 好像看起来也很龌龊 但是很多的版面都能用到这个功能的 然后在此处  我要为我的my$函数来进行一个诠释 就是 ...

  3. Android studio 在一个项目上添加另一个项目，引用其内部参数

    Setting.gradle 里面 添加 include ':app',‘imagePicker’ 其中 imagePicker 为要引入的项目名 build.gradle(Module: app)  ...

  4. 安卓开发之Room实体定义数据

    使用Room实体定义数据 在Room库中,entities(实体)代表着相关字段集.每一个entity(实体)代表着相关联数据库中的一个表.entity 类必须通过Database 类中的entiti ...

  5. [20170825]11G备库启用DRCP连接3.txt

    [20170825]11G备库启用DRCP连接3.txt --//昨天测试了11G备库启用DRCP连接,要设置alter system set audit_trail=none scope=spfil ...

  6. Mac上用spotlight搜索输入几个字母后闪退

    最近使用电脑时遇到的问题: 使用spotlight进行搜索时,只要输入字母超过一定个数(在我的Mac上是3个),spotlight就闪退了. 谷歌搜索得到大部分解决方案是在系统自带词典的偏好设置里取消 ...

  7. My strength (C-A-R)

    My strength: I am good at problem resolving Challenge In the first year when I come to America I pas ...

  8. centos7下rsync+crontab定期同步备份

    最近需求想定期备份内部重要的服务器数据到存储里面,顺便做个笔记 以前整过一个win下的cwrsync(客户端)+rsync(服务端:存储)的bat脚本 这次整一个Linux下的脚本sh,执行定期自动备 ...

  9. CentOS7.4下编译Hadoop-2.7.6

    1. 使用系统和软件 操作系统:CentOS Linux release 7.4.1708 (Core) 64位 使用软件如下: jdk1.8.0_112.tar.gz hadoop-2.7.6-sr ...

  10. SSM框架下使用websocket实现后端发送消息至前端

    本篇文章本人是根据实际项目需求进行书写的第一版,里面有些内容对大家或许没有用,但是核心代码本人已对其做了红色标注.文章讲解我将从maven坐标.HTML页面.js文件及后端代码一起书写. 一.mave ...