设置块级元素的 width 可以阻止它从左到右撑满容器。然后你就可以设置左右外边距为 auto 来使其水平居中。元素会占据你所指定的宽度,然后剩余的宽度会一分为二成为左右外边距。

  1. div{
  2. width: 600px;
  3. margin: 0 auto;
  4. }

唯一的问题是,当浏览器窗口比元素的宽度还要窄时,浏览器会显示一个水平滚动条来容纳页面。

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

  1. div {
  2. max-width: 600px;
  3. margin: 0 auto;
  4. }

这个知识点很简单,但是我觉得它很重要,于是也记录下来吧~

css布局学习笔记之max-width的更多相关文章

  1. CSS布局学习笔记之position

    CSS知识点 之 position布局 前段时间被同学怂恿,参加了百度前端技术学院的一个小培训,第一个阶段下来学到不少东西.课程的第一个阶段主要是HTML5 和 CSS 基础知识的一个小培训,给出的一 ...

  2. css布局学习笔记之position属性

    position属性用于定位元素,它的几个值分别如下: 1,static static 是默认值.任意 position: static; 的元素不会被特殊的定位.一个 static 元素表示它不会被 ...

  3. css布局学习笔记之box-sizing

    当你设置了元素的宽度,实际展现的元素却能够超出你的设置:因为元素的边框和内边距会撑开元素. .div{ width: 500px; margin: 20px auto; padding: 50px; ...

  4. CSS Grid 布局学习笔记

    CSS Grid 布局学习笔记 好久没有写博客了, MDN 上关于 Grid 布局的知识比较零散, 正好根据我这几个月的实践对 CSS Grid 布局做一个总结, 以备查阅. 1. 基础用法 Grid ...

  5. CSS3与页面布局学习笔记(八)——浏览器兼容性问题与前端性能优化方案

    一.浏览器兼容 1.1.概要 世界上没有任何一个浏览器是一样的,同样的代码在不一样的浏览器上运行就存在兼容性问题.不同浏览器其内核亦不尽相同,相同内核的版本不同,相同版本的内核浏览器品牌不一样,各种运 ...

  6. (2)《Head First HTML与CSS》学习笔记---img与基于标准的HTML5

    1.浏览器处理图像的过程: 1.服务器获取文件,显示出文本结构,以及预留默认的大小给<img>(如果该<img>有width-1值和height-1值,则根据这个值提前设好页面 ...

  7. css居中学习笔记

    css居中学习笔记 一.水平居中 以下面的代码为例: <body> <div class="parent"> <div class="chi ...

  8. CSS 3 学习笔记

    css 3 学习笔记 文本: word-wrap : normal | break-word取值:normal:    控制连续文本换行.break-word:    内容将在边界内换行.如果需要,词 ...

  9. 原生 CSS 网格布局学习笔记

    下是来自Oliver Williams的帖子. Oliver已经学习了相当长时间的原生CSS网格,可以说是在CSS网格方面有一定的发言权.在这篇文章中,他将以非同寻常的思路分析自己的CSS网格布局学习 ...

随机推荐

  1. javascript 过滤空格

    1: 过滤首尾空格trim.2:过滤左边空格ltrim    3:过滤右边空格 用正则方法写成三个函数. <script type="text/javascript"> ...

  2. Ecshop导航栏标题栏的伪静态设置

    当Ecshop的伪静设置成功之后,左侧的分类标签,包括具体的产品页面都可以顺利的打开伪静态页面,但是点击导航栏,或者标题栏的时候,却还是之前的数据库标签页的方式,这是怎么一回事呢? 这是由于,Ecsh ...

  3. Is Fibo

    fib = {} f = [1, 1] fib[1] = True while f[-1] < 1e10: # 不断的计算,然后加在尾部,最后比对“in” f.append(f[-1]+f[-2 ...

  4. Core Data入门-备用

    简介 Core Data是iOS5之后才出现的一个框架,它提供了对象-关系映射(ORM)的功能,即能够将OC对象转化成数据,保存在SQLite数据库文件中,也能够将保存在数据库中的数据还原成OC对象. ...

  5. ldd命令--查看命令依赖的库文件

    .在制作自己的发行版时经常需要判断某条命令需要哪些共享库文件的支持,以确保指定的命令在独立的系统内可以可靠的运行:在Linux环境下通过ldd命令即可实现,在终端下执行:ldd /bin/ls //l ...

  6. PHP CI框架下,如果配置NGINX(根目录和子目录两种模式)

    摸索了一会儿,先配置成功,再看看PATH_INFO之类的东东吧. A,根目录: location ~ \.php($|/) { root html; fastcgi_pass ; fastcgi_in ...

  7. format %x invalid or incompatible with argument问题解决方法

    现在还有好多朋友在用Protel 99se来画图,可是在现在的双核或四核电脑上运行Protel出现错误并且弹出对话框:“format '%x' invalid or incompatible with ...

  8. [置顶] Android EditText/TextView使用SpannableString显示复合文本

    在Android中EditText用于编辑文本,TextView用于显示文本,但是有时候我们需要对其中的文本进行样式等方面的设置.Android为我们提供了SpannableString类来对指定文本 ...

  9. 时间类处理<1>

    2016/05/31 14:47:21 [emerg] 14629#0: location "/nginx_status" is outside location "/p ...

  10. ucfirst() strtoupper() strtolower()

    ucfirst 将字符串第一个字符改大写. 语法: string ucfirst(string str); 返回值: 字符串 函数种类: 资料处理   内容说明 本函数返回字符串 str 第一个字的字 ...