CSS, Cascading Style Sheets(层叠样式表). 用来控制网页布局, 颜色, 效果等
盒模型
W3C的盒模型, 包括内容宽高, 内外边距, 边框
IE5盒模型, 包括内容宽高, 外边距
格式化上下文
即初始化元素定义的环境, 文档中常规流(Normal flow)中的块行都属于一个格式化上下文. 定义于CSS 2.1 Section 9.4
块格式化上下文(Block formatting contexts, 简称FBC)
CSS3里称为flow root
触发方式
overflow: auto/hidden/scroll/overlay
float: left/right;
display: inline-block/table/table-cell/table-caption/-webkit-box/-webkit-inline-box/flex/inline-flex/inline-table;
作用
避免与上一个元素的垂直外边距折叠(两个相互作用的外边距都大于零, 距离取决于值较大的外边距)
避免垂直上外边距与紧贴着的子元素的同向垂直上外边距折叠
避免浮动对布局的影响
行内格式化上下文
Inline formatting context
参考:
http://w3help.org/zh-cn/kb/010
https://www.w3.org/TR/CSS2/visuren.html#normal-flow
浮动
浮动元素不属于文档中的普通流, 不影响其后块元素的布局, 但会影响该块元素内文本的排列
清除浮动
浮动元素后的块元素添加clear: both/left/right; 不推荐添加带clear属性的空标签
只解决父级不塌陷的方法
父级设置overflow: hidden/auto;或dispaly: table;或浮动, 若纯粹清浮动, 都不推荐
父级添加
.clearfix{ *zoom: 1; }
.clearfix:after { clear: both; display: block; content: '\200B'; height: 0; }
居中
文字或行元素垂直居中
div { height: 100px; line-height: 100px; }
父级伪类(或空标签)垂直居中
article { height: 100%; }
article:before { display: block; content: ''; height: 50%; margin-bottom: -25px; }
article div { width: 50px; height: 50px; }
定位居中
div { position: absolute; top: 0; left: 0; right: 0; bottom: 0; width: 100px; height: 100px; margin: auto; }
div { position: absolute; top: 50%; left: 50%; width: 100px; height: 100px; margin: -50px; }
属性顺序
位置(display, opacity, position, z-index, float)
大小(width, height, padding, margin)
文本(line-height, font, color等)
背景(background, border等)
其他(animation, transform等)
字体
font: italic small-caps bold 12px/26px Arial; (必须有size和family)
font-family: "Microsoft Yahei", simsun, \5b8b\4f53;
用Unicode编码写字体避免文件编码(UTF-8等)不匹配而产生乱码
微软雅黑, \5FAE\8F6F\96C5\9ED1
宋体, \5B8B\4F53
参考: http://code.ciaoca.com/style/cssfont2unicode/
隐藏
display: none; visibility: hidden; 都隐藏元素, 无法点击
display: none; 不占空间, 子元素无法显示, 产生回流
visibility: hidden; 仍占空间, 子元素可以通过visible显示, 不产生回流
超出省略
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
强制换行
word-break: break-all;
IE hack
ie5/6 _width: 1px;
ie6/7 *width: 1px;
ie7 *+width: 1px;
ie6/7/8 width: 1px\9;
ie8 width: 1px\0;
背景
background: #000 url(1.png) repeat fixed left top / auto auto; (部分设备不兼容)
background: #000 url(1.png) repeat fixed left top;
background-size: contain;
注释
css: /* ... */
html: <!-- ... -->
js: /* ... */ 或 //...
浏览器内核
Trident
css前缀-ms
主要浏览器: IE
WebKit
css前缀-webkit
主要浏览器: Safari, Opera
Blink
css前缀-webkit
主要浏览器: Chrome
Gecko
css前缀-moz
主要浏览器: Firefox