css布局学习笔记之max-width
设置块级元素的 width 可以阻止它从左到右撑满容器。然后你就可以设置左右外边距为 auto 来使其水平居中。元素会占据你所指定的宽度,然后剩余的宽度会一分为二成为左右外边距。
div{
width: 600px;
margin: 0 auto;
}
唯一的问题是,当浏览器窗口比元素的宽度还要窄时,浏览器会显示一个水平滚动条来容纳页面。
在这种情况下使用 max-width 替代 width 可以使浏览器更好地处理小窗口的情况。
div {
max-width: 600px;
margin: 0 auto;
}
这个知识点很简单,但是我觉得它很重要,于是也记录下来吧~
css布局学习笔记之max-width的更多相关文章
- CSS布局学习笔记之position
CSS知识点 之 position布局 前段时间被同学怂恿,参加了百度前端技术学院的一个小培训,第一个阶段下来学到不少东西.课程的第一个阶段主要是HTML5 和 CSS 基础知识的一个小培训,给出的一 ...
- css布局学习笔记之position属性
position属性用于定位元素,它的几个值分别如下: 1,static static 是默认值.任意 position: static; 的元素不会被特殊的定位.一个 static 元素表示它不会被 ...
- css布局学习笔记之box-sizing
当你设置了元素的宽度,实际展现的元素却能够超出你的设置:因为元素的边框和内边距会撑开元素. .div{ width: 500px; margin: 20px auto; padding: 50px; ...
- CSS Grid 布局学习笔记
CSS Grid 布局学习笔记 好久没有写博客了, MDN 上关于 Grid 布局的知识比较零散, 正好根据我这几个月的实践对 CSS Grid 布局做一个总结, 以备查阅. 1. 基础用法 Grid ...
- CSS3与页面布局学习笔记(八)——浏览器兼容性问题与前端性能优化方案
一.浏览器兼容 1.1.概要 世界上没有任何一个浏览器是一样的,同样的代码在不一样的浏览器上运行就存在兼容性问题.不同浏览器其内核亦不尽相同,相同内核的版本不同,相同版本的内核浏览器品牌不一样,各种运 ...
- (2)《Head First HTML与CSS》学习笔记---img与基于标准的HTML5
1.浏览器处理图像的过程: 1.服务器获取文件,显示出文本结构,以及预留默认的大小给<img>(如果该<img>有width-1值和height-1值,则根据这个值提前设好页面 ...
- css居中学习笔记
css居中学习笔记 一.水平居中 以下面的代码为例: <body> <div class="parent"> <div class="chi ...
- CSS 3 学习笔记
css 3 学习笔记 文本: word-wrap : normal | break-word取值:normal: 控制连续文本换行.break-word: 内容将在边界内换行.如果需要,词 ...
- 原生 CSS 网格布局学习笔记
下是来自Oliver Williams的帖子. Oliver已经学习了相当长时间的原生CSS网格,可以说是在CSS网格方面有一定的发言权.在这篇文章中,他将以非同寻常的思路分析自己的CSS网格布局学习 ...
随机推荐
- angularjs directive 实例 详解
前面提到了angularjs的factory,service,provider,这个可以理解成php的model,这种model是不带html的,今天所说的directive,也可以理解成php的mo ...
- 帮小黎解决问题C++巩固获得数字每个位置上的数
现在有一个数字 a= 12345; 想要取得这个数字上的没一个数字 使用 除法 +模除 的方法可以获得 原理:除(/)得到的是商 模除(%)的到的是余数 采用这种方式,先将要求的数的某一位 ...
- Windows软件使用Q&A集锦【持续更新】
以下不注明原创的均为转载,感谢原作者,希望大家电脑用的都舒心 Q: QQ电脑管家的默认程序的程序推荐如何关闭?我右键点击文件打开方式,选择默认程序的时候,qq管家总弹出来,还给我推荐程序.如何关闭? ...
- LeetCode_Container With Most Water
Given n non-negative integers a1, a2, ..., an, where each represents a point at coordinate (i, ai). ...
- Eclipse配置JDK的源代码的src.zip
Eclipse配置JDK的源代码的src.zip包很简单.只需要简单的几个步骤. 1.点 “window”-> “Preferences” -> “Java” -> “Install ...
- [Android]通过setImageURI设置网络上面的图片
设置imageView显示网络上的图片 picUrl = new URL(getIntent().getExtras().getString("map_url")); Bitmap ...
- bzoj3393 [Usaco2009 Jan]Laserphones 激光通讯
Description Input 第1行输入w和H,之后W行H列输入地图,图上符号意义如题目描述. Output 最少的对角镜数量. Sample Input 7 8 ....... ...... ...
- SQL server 中 COUNT DISTINCT 函数
目的:统计去重后表中所有项总和. 直观想法: SELECT COUNT(DISTINCT *) FROM [tablename] 结果是:语法错误. 事实上,我们可以一同使用 DISTINCT 和 C ...
- poj 3190 Stall Reservations 贪心 + 优先队列
题意:给定N头奶牛,每头牛有固定的时间[a,b]让农夫去挤牛奶,农夫也只能在对应区间对指定奶牛进行挤奶, 求最少要多少个奶牛棚,使得在每个棚内的奶牛的挤奶时间不冲突. 思路:1.第一个想法就是贪心,对 ...
- poj 3685 Matrix(二分搜索之查找第k大的值)
Description Given a N × N matrix A, whose element × i + j2 - × j + i × j, you are to find the M-th s ...