writing-mode&direction趣解—如何考察前端对css盒模型的熟悉度
Author：zhoulujun@live.cn Date：
在前端的笔试题中，一般的笔试题是这样的：
.demo{width: 100px;height: 50px;padding: 5px;margin: 5px;border: 1px;}
//htmldemodemo在页面占位 长宽分别为多少？
一般回答即为：100+5*2+5*2+1*50+5*2+5*2+1*2。
但是，真的是这样的吗？
是在现代浏览器还是老旧的IE？box-size属性如何？这些都清楚了，那么再设置：
.box{width: 500px;height: 300px;}
.demo{width: 20%;height:10%;padding: 1%;margin: 1%;border: 1px solid #ccc;}
//htmldemodemo在页面占位 长宽分别为多少？
到这里，就卡死了一部分求职者。但是，到这里
…………真的偷窥到css盒模型的真（）蒂了吗？
css盒模型也也没用想当然地那么简单。
关于这么方面的问题，推荐访问：https://github.com/chokcoco/iCSS
又比如如下，
.box,.box2{width: 500px;height: 300px;}
.box2{writing-mode:vertical-lr;}//writing-mode将页面默认的水平流改成了垂直流
.demo{width: 20%;height:10px;padding: 1%;margin: 1%;border: 1px solid #ccc;}demo 宽高？分别是多少？？
关于writing-mode属性与盒模型的计算，可以推荐看《设置不同块级流方向时的属性百分比计算》
在css中writing-mode和direction都是用来设置文本的展现方式的，两者有些共同点又有本质的区别。
css3：
writing-mode:horizontal-tb;//默认：水平方向，从上到下 tb:tob -bottom
writing-mode: vertical-rl;//垂直方向，从右向左 rl:right-left
writing-mode: vertical-lr;//垂直方向，从左向右 lr:left-right
ie私有属性：
主要的:
writing-mode: lr-tb ;//从左到右，从上到下。默认
writing-mode: tb-rl;//从上到下，从右向左
writing-mode:tb-lr (IE8+);//水平方向，从上到下，从左到右
direction
direction: ltr //left-to right
direction:rtl //righ to left
因为vertical-rl此时的文档流为垂直方向，rl表示水平方向，此时再设置direction:rtl，实际上值rtl改变的是垂直方向的内联元素的文本方向，一横一纵，没有交集。而且writing-mode可以对块状元素产生影响，直接改变了CSS世界的纵横规则，要比direction强大和鬼畜的多(摘自：《writing-mode属性》
转载本站文章《writing-mode&direction趣解—如何考察前端对css盒模型的熟悉度》,
请注明出处：https://www.zhoulujun.cn/html/webfront/style/css3/2016_0314_7703.html
延伸阅读：
- 排序算法图文讲解（php，javascript，java）
- 原码, 反码, 补码-减法变加法-同余理论：详解
- IM官网全新蜕变: 改版（第一期）设计总结
- css样式重置的一些方法
- CSS选择器的浏览器支持
- ios自适应：CSS Media Queries for iPads & iPhones
- 深入理解CSS3 gradient斜向线性渐变
- 浏览器滚动条设置与自定义及移动端滚动出现的坑
- CSS3 flex 布局
- 伪元素表单控件默认样式重置与自定义大全
- 【CSS深入】设置不同块级流方向时的属性百分比计算
- CSS3 实现iOS7毛玻璃模糊效果 (iOS7 live blur)
- 垂直居中相关知识总结
- 响应式布局----像素密度与viewport
- 关于css3之transform一些坑的总结－transform对普通元素的N多渲染
- css一些易忽视的点—iCss问题个人汇总
- 新建BFC与hasLayout触发场景浅析—高度塌陷原因分析
- web app响应式字体设置！rem之我见
- Retina真实还原1px边框的解决方案