<!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. loj#2002. 「SDOI2017」序列计数(dp 矩阵乘法)

    题意 题目链接 Sol 质数的限制并没有什么卵用,直接容斥一下:答案 = 忽略质数总的方案 - 没有质数的方案 那么直接dp,设\(f[i][j]\)表示到第i个位置,当前和为j的方案数 \(f[i ...

  2. TurboLinux系统管理习题一

    TurboLinux系统管理习题一 1. 使用vi编辑文本只读时,强制存盘并退出的命令是?(单选题)A :w!        B :q!       C   :wq!        D   :e!答案 ...

  3. Code::Blocks + GDAL

    [root@server20 ~]# yum install cmake cmake-gui [root@server20 ~]# yum install cairo-devel libcurl-de ...

  4. Linux 时间及时区设置

    时间以及时区设置 by:授客 QQ:1033553122 1.首先确认使用utc还是local time. UTC(Universal Time Coordinated)=GMT(Greenwich ...

  5. 关注的Elasticsearch大牛博客

    1.http://wangnan.tech/ 2.https://elasticsearch.cn/people/wood 3.https://www.jianshu.com/u/244399b1d7 ...

  6. json替换jsonp实现跨域请求

    最近遇到h5前端页面和web后端双方的请求存在跨域,普通的jquery.ajax请求已不能实现(因为js是不允许跨域的(如果可以跨域,那就能随便改别人的网页了),js的原理), 最后经过艰苦奋斗,终于 ...

  7. 洗礼灵魂，修炼python（32）--面向对象编程（2）—进一步认识类

    上一篇文章已经看到了如何定义类,但是我想你应该有很多疑惑的吧?最好的学习方法就是不断思考,不断问为什么,不断和已有知识做类比,从中获得理解.那么这一篇博文就是从解惑答疑中进一步认识类. 解惑答疑 我按 ...

  8. REPLACE函数的使用方法

    Replace函数的含义~ 用新字符串替换旧字符串,而且替换的位置和数量都是指定的. replace函数的语法格式 =Replace(old_text,start_num,num_chars,new_ ...

  9. [HDFS_add_1] HDFS 启动过程分析

    0. 说明 HDFS 文件概念 && HDFS 启动过程分析 1. HDFS 文件概念 [1.1 NameNode 职能] 存储文件类型.大小.权限.路径等等元数据 通过 edits( ...

  10. php解决前后端验证字符串长度不一致

    前端代码 function getStrleng(str){ var myLen =0; for(var i=0;i<str.length;i++){ if(str.charCodeAt(i)& ...