• home > webfront > style > css3 >

    writing-mode&direction趣解—如何考察前端对css盒模型的熟悉度

    Author:[email protected] Date:

    在前端的笔试题中?一般的笔试题是这样的:设 demo{width:100px;height:50px;padding:3px;margin:3px;border:3px;}则,demo的宽度多少??

    在前端的笔试题中,一般的笔试题是这样的:

    .demo{width: 100px;height: 50px;padding: 5px;margin: 5px;border: 1px;}
    //htmldemo

    demo在页面占位 长宽分别为多少?

    一般回答即为: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;}
    //htmldemo

    demo在页面占位 长宽分别为多少?

    到这里,就卡死了一部分求职者。但是,到这里

    …………真的偷窥到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