我对CSS的认识
Created by @dongtianee / Powered by reveal.js
在我看来
CSS
是全世界的
不断进步的
值得深究的
有内在规律的
具有魔力的
为排版服务的标记语言
1. margin值的计算
父元素宽度600px,高度300px.子元素margin:10%的计算值为多少？
是的，margin的上下和左右都是根据父元素的宽度来计算的。
但是？
改变书写方向为纵向
margin值便会根据父元素的高度来计算
同理，在margin：auto可以实现垂直居中，而非水平居中
同受书写方向影响的属性还有margin折叠、padding百分比值的计算等
2.position:fixed
肯定会针对浏览器视口定位吗？
那可不一定。
bug：经过transform变换后，其内position:fixed元素效果将等同于absolute
以上两点看出
CSS是为排版服务的标记语言
同时她也是为全世界所共有的,不断更新进步的
说她"肯定"会怎样时，一定要慎重
菜单的隐藏和显示
不使用负责交互的JavaScript
- 你能想到什么方式
- 我总结出了三种
- DEMO
使用CSS画出图标
在合适的情况下，减少一个图片请求吧
这些图标全部都是CSS3画出来的。CSS3图标
合理利用border,border-radius,box-shadow，transform.
不仅实用，还很有趣，更能检阅自己对CSS属性的认知程度
以上两点看出
CSS是为排版服务的标记语言
同时她现在也可以做一些排版之外的事情
值得我们去深究
关于清除浮动
两类清除浮动的方法
1. clear:both
2. 构造BFC
BFC是在CSS2.1中提出的一个概念。
- postion为absolute和fixed
- float非none
- overflow非visible
- display为inline-block,table-cell或table-caption
古老的IE浏览器有个layout，特性和BFC相近。
CSS中使用图片
浏览器渲染到当前节点，发现其CSS样式有使用背景图，便会请求此背景图片。
<style>
.div{background:url('a.png')}
#main{background:url('b.png')}
</style>
<div id="main"></div>
浏览器会请求几张图？
为什么？
再加上一个属性呢？
<style>
.div{background:url('a.png')}
#main{background:url('b.png');display:none;}
</style>
<div id="main"></div>
以上两点看出
CSS是为排版服务的标记语言
同时她也有内在的联系和规律
知其所以然，才能写出高效的代码
未知大小的文字，显示指定宽度的内容
1. 根据文字大小：13px，加上每个链接间的间隔，计算出总宽度
中英文文字大小不一致。
2. 创建一个隐藏的段落，不断向其中增加文字，jQuery获取其宽度,直到超过540px
3. CSS
<style>
#main{width:540px;overflow:hidden}
#main a{float:left;white-space:nowrap}
</style>
<div id="main">
<a href="xxx";>链接</a;>
<a href="xxx";>链接</a;>
<a href="xxx";>链接</a;>
<a href="xxx";>链接</a;>
</div>
在CSS中，有一个属性，仅靠她一个便可让元素重叠
margin的妙用1:1px圆角
1px圆角margin的妙用2:紧跟在后的说明文字
以上两点看出
合理利用CSS给我们带来的特性
在某些情况下可以省下很多功夫
所以：
CSS
是全世界的
不断进步的
值得深究的
有内在规律的
具有魔力的
为排版服务的标记语言
THE END
谢谢大家！