amazeui学习笔记--css(基本样式2)--基础设置Base
amazeui学习笔记--css(基本样式2)--基础设置Base
一、总结
1、盒子模型:外margin,内padding,这里的内外指的边框
2、border-box:
Amaze UI 将所有元素的盒模型设置为 border-box
-moz-box-sizing: border-box;
3、em和px:根据字号做相应变化的场景也使用了 em
,需要像素级别精确的场景也使用了 px
4、字号设置:Amaze UI 将浏览器的基准字号设置为 62.5%
,也就是 10px
,现在 1rem = 10px 例如:
font-size: 1.6rem; /* =16px */
5、rem:rem
只跟基准设置关联,只要修改基准字号,所有使用 rem
作为单位的设置都会相应改变。 实例:html { font-size: 62.5%; }
二、基础设置Base
Amaze UI 定义的一些基础样式。
CSS 盒模型
曾几何时,IE 6 及更低版本的非标准盒模型被喷得体无完肤。IE 原来的盒模型真的不好么?最终,时间给了另外一个答案。 W3C 终认识到所谓标准盒模型在实际使用中的复杂性,于是在 CSS3 中增加 box-sizing
这一属性,允许用户自定义盒模型。
You tell me I'm wrong, Then you better prove you're right.
King of Pop – Scream
这就是 W3C 的证明。
扯远了,Amaze UI 将所有元素的盒模型设置为 border-box
。这下好了,妈妈再也不用担心你没计算好 padding
、border
而使布局破相了。咱来写样式,不是来学算术。
*,
*:before,
*:after {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
参考链接:
- https://developer.mozilla.org/en-US/docs/Web/CSS/box-sizing
- http://www.paulirish.com/2012/box-sizing-border-box-ftw/
- Box Sizing
字号及单位
Amaze UI 将浏览器的基准字号设置为 62.5%
,也就是 10px
,现在 1rem = 10px
—— 为了计算方便。然后在 body
上应用了 font-size: 1.6rem;
,将页面字号设置为 16px
。
html {
font-size: 62.5%;
}
body {
font-size: 1.6rem; /* =16px */
}
与 em
根据上下文变化不同,rem
只跟基准设置关联,只要修改基准字号,所有使用 rem
作为单位的设置都会相应改变。
当然,并非所有所有浏览器的默认字号都是 16px
,所以在不同的浏览器上会有细微差异。
另外,一些需要根据字号做相应变化的场景也使用了 em
,需要像素级别精确的场景也使用了 px
。
参考资源:
- FONT SIZING WITH REM
- Type study: Sizing the legible letter
- The rem checker
- Mixins for Rem Font Sizing
amazeui学习笔记--css(基本样式2)--基础设置Base的更多相关文章
- amazeui学习笔记--css(基本样式4)--打印样式Print
amazeui学习笔记--css(基本样式3)--打印样式Print 一.总结 1.打印显示url方法: 利用 CSS3 content 属性,将 <a> 和 <abbr> 的 ...
- amazeui学习笔记--css(基本样式3)--文字排版Typography
amazeui学习笔记--css(基本样式3)--文字排版Typography 一.总结 1.字体:amaze默认非 衬线字体(sans-serif) 2.引用块blockquote和定义列表:引用块 ...
- amazeui学习笔记--css(基本样式)--样式统一Normalize
amazeui学习笔记--css(基本样式)--样式统一Normalize 一.总结 1.统一浏览器默认样式: Amaze UI 也使用了 normalize.css,就是让不同浏览器显示相同的样式 ...
- amazeui学习笔记--css(常用组件11)--分页Pagination
amazeui学习笔记--css(常用组件11)--分页Pagination 一.总结 1.分页使用:还是ul包li的形式: 分页组件,<ul> / <ol> 添加 .am-p ...
- amazeui学习笔记--css(常用组件9)--导航nav
amazeui学习笔记--css(常用组件9)--导航nav 一.总结 1.导航基本使用:<ul> 添加 .am-nav class 以后就是一个基本的垂直导航.默认样式中并没有限定导航的 ...
- amazeui学习笔记--css(常用组件8)--列表list
amazeui学习笔记--css(常用组件8)--列表list 一.总结 1.链接列表:就是多个链接在一起组成的列表, 使用 <ul> 结构嵌套链接列表,添加 .am-list.还是ui包 ...
- amazeui学习笔记--css(常用组件6)--图标Icon
amazeui学习笔记--css(常用组件6)--图标Icon 一.总结 1.关注用法即可:在 HTML 上添加添加 am-icon-{图标名称} class. <span class=&quo ...
- amazeui学习笔记--css(常用组件1)--小徽章Badge
amazeui学习笔记--css(常用组件1)--小徽章Badge 一.总结 1.am-badge:添加am-badge来声明小徽章对象 <span class="am-badge a ...
- amazeui学习笔记--css(HTML元素4)--图片image
amazeui学习笔记--css(HTML元素4)--图片image 一.总结 1.响应式图片:随着页面宽度而变化 .am-img-responsive class. <img src=&quo ...
随机推荐
- 紫书 习题 10-22 UVa 10479 (找规律)
自己一直在纠结这个串的构造方法 而没有观察串本身的规律-- 2的63次方用 unsigned long long 然后可以发现串是递归构造的. 将串分成1,1,2,4,8,16, 然后会发现s串里面1 ...
- 便捷编程-Xcode常用第三方插件 (随时更新)
Xcode工具插件 1.XAlign 让Xcode编辑器中的代码以多种方式瞬间对齐 地址:https://github.com/qfish/XAlign 2.VVDocumenter-Xcode 在X ...
- Unity容器实现自动注册
如何创建Unity容器? 首先NuGet搜索Unity, 该示例中使用的版本为4.0.1 新建控制台程序 示例中使用常规操作, 创建一个IPay接口, 分别有两个实现类: ApplePay.Huawe ...
- POJ——T 3067 Japan
http://poj.org/problem?id=3067 Time Limit: 1000MS Memory Limit: 65536K Total Submissions: 29474 ...
- codevs——T1006 等差数列
http://codevs.cn/problem/1006/ 时间限制: 1 s 空间限制: 128000 KB 题目等级 : 黄金 Gold 题解 查看运行结果 题目描述 Descr ...
- storm单词计数 本地运行
import java.io.File; import java.io.IOException; import java.util.Collection; import java.util.HashM ...
- 小白学开发(iOS)OC_ SEL数据类型(2015-08-10)
// // main.m // SEL数据类型 // // Created by admin on 15/8/12. // Copyright (c) 2015年 admin. All rig ...
- 66.app.use(express.static)
转自:https://blog.csdn.net/u010977147/article/details/60956502
- Javascript函数的基本概念+匿名立即执行函数
函数声明.函数表达式.匿名函数 函数声明:function fnName () {…};使用function关键字声明一个函数,再指定一个函数名,叫函数声明. 函数表达式 var fnName = f ...
- hadoop集群环境配置成功与否查看方法
1.Hadoop启动jobhistoryserver来实现web查看作业的历史运行情况,由于在启动hdfs和Yarn进程之后,jobhistoryserver进程并没有启动,需要手动启动jobhist ...