CSS布局的一些技巧
2024-10-15 02:26:44
max-width
通常使元素水平居中用的较多的方法为:
#main {
width: 600px;
margin: 0 auto;
}
但是,当浏览器窗口比元素的宽度还要窄时,浏览器会显示一个水平滚动条来容纳页面,从而影响页面可观性。
用 max-width 替代 width 可以使浏览器更好地处理小窗口的情况。这点在移动设备上显得尤为重要。
#main {
width: 600px;
margin: 0 auto;
}
目前所有的主流浏览器包括IE7+在内都支持 max-width。
box-sizing
当你设置一个元素为 box-sizing: border-box; 时,此元素的内边距和边框不再会增加它的宽度。
下面的div1和div2宽度相同:
.div1{
width: 500px;
margin: 20px auto;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.div2 {
width: 500px;
margin: 20px auto;
padding: 50px;
border: solid blue 10px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
一些CSS开发者想要页面上所有的元素都有如此表现。所以开发者们把以下CSS代码放在他们页面上:
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
这样可以确保所有的元素都会用这种更直观的方式排版。
flexbox
使用 Flexbox 居中布局非常方便(详见:http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html):
.div {
height: 300px;
display: -webkit-flex;
display: flex;
-webkit-align-items: center;
align-items: center;
-webkit-justify-content: center;
justify-content: center;
}
注:文章参考了http://zh.learnlayout.com/
最新文章
- 使用OpenSSL为支付宝生成RSA私钥
- OEIS A140358
- php preg_match($p, $str, $match)方法简介
- loj 1018(状压dp+记忆化搜索)
- grade web的构建约定 convention
- PHP json_encode中日语问题
- 最新Connectify注冊码(序列号) Connectify3.7序列号 破解版
- 3631: [JLOI2014]松鼠的新家
- HTML阶段总结
- jquery each 遍历
- Docker部署Elasticsearch集群
- 剑指Offer——动态规划算法
- Linux文件权限与属性详解 之 ACL
- 【BZOJ2154】Crash的数字表格
- 2018.08.29 hdu3507 Print Article(斜率优化dp)
- PHP中的PEAR是什么?
- java ";Too small initial heap"; 错误
- 一个优秀的Javascript框架--Prototype解说
- C++ const引用
- SSM整合所需jar包
热门文章
- LeetCode题解之Copy List with Random Pointer
- 转:C#常用的集合类型(ArrayList类、Stack类、Queue类、Hashtable类、Sort)
- Linux清除用户登录记录和命令历史方法(个人笔记)
- from urllib.request import urlopen
- 【2017下集美大学软工1412班_助教博客】个人作业2——APP案例分析
- MySQL Error Code文档手册---摘自MySQL官方网站
- BZOJ4735:你的生命已如风中残烛(组合数学)
- pandas中的series数据类型
- Scala学习之路 (五)Scala的关键字Lazy
- android 7.0以上共享文件(解决调用系统照相和图片剪切出现的FileUriExposedException崩溃问题)