您的位置:新葡亰496net > 新葡亰官网 > 最常用的css垂直居中方法,CSS文本方向

最常用的css垂直居中方法,CSS文本方向

发布时间:2019-08-03 20:00编辑:新葡亰官网浏览(109)

    改变CSS世界纵横规则的writing-mode属性

    2016/04/30 · CSS · writing-mode

    原文出处: 张鑫旭(@张鑫旭)   

    引言

      css垂直居中一直以来都是一个被大家说烂了的话题,翻来覆去的炒。不过说实话,正是因为css没有提供标准的垂直居中方法(不过在css3中已经有了相关规范),所以大家才会对它进行专门的研究。这研究来研究去,垂直居中的方法比水平居中都要多了。但又说回来,各种方法人云亦云,不同的方法对于不同层次的人理解起来又有不同,用处也不同。本文结合技术实现的复杂度、理解性的难易度、以及大多数人的接触顺序对常用的垂直居中方法进行分等级的系统讲解,希望能对读者的工作和学习有所帮助。

      OK,闲话扯了一堆,下面开始正文,先来一个大家最先接触到的。

    前面的话

      一般地,正常网页文本方向都是从上到下,从左到右。实际上,有多种设置文本方向的属性,前面已经详细介绍过text-align,HTML全局属性中有一个"dir"属性就是专门用来设置文本方向的,设置文本方向的CSS样式有direction、unicode-bidi和writing-mode。本文将详细介绍网页文本方向的设置方法

     

    新葡亰496net 1

    一、冉冉升起的writing-mode

    writing-mode这个CSS属性,我们是不是很少见到,很少用到!我们往往称不常见的东西为“生僻”,就像是不常见的文字我们叫“生僻字”,因此不常见的CSS属性,我们可以叫做“生僻属性”,writing-mode给我们的感觉就是一个“生僻属性”,很弱,可有可无。

    但是,实际上,我们都错了,大错特错,writing-mode很弱?卧槽,别开玩笑了,writing-mode可以说是CSS世界里面最逆天的CSS属性了,直接颠覆CSS世界的众多规则。

    writing-mode之所以给人“生僻”的感觉,是有原因的。

    实际上writing-mode这个CSS属性在上古时代就诞生了,IE5.5浏览器就已经支持了:
    新葡亰496net 2

    那就奇怪了!writing-mode既然这么鸟,同时时间早,资格老,为啥一直沉寂了差不多20年呢?

    那是因为,在很长一段时间里,FireFox, Chrome这些现代浏览器都不支持writing-modewriting-mode基本上就是IE浏览器的私有产物,大家对IE一直没啥好感,对吧,爱屋及乌由此及彼,自然对writing-mode也不待见。

    然而,就在我们被流行前端技术一叶蔽目的时候,各大现代浏览器纷纷对writing-mode实现了更加标准的支持(主要得益于FireFox浏览器的积极跟进),也就是说,不知什么时候起,writing-mode的兼容性已经不成问题了,加上该属性本身特性逆天,我去,我仿佛看到了一个冉冉升起的新星,不对,是新月,而且是圆月。新葡亰496net 3

    Level 1:绝对定位

      兼容性:

    Firefox  Chrome Internet Explorer Opera Safari
    (Yes) (Yes) IE8 (Yes) (Yes)

     

    1 <div class="vertical">
    2      <div class="content"></div>
    3 </div>
    
     1 .vertical {
     2     position: relative;
     3     width: 200px;
     4     height: 200px;
     5     margin: 0 auto;
     6     margin-top: 10px;
     7     border: 1px solid blue;
     8 }
     9 .content {
    10     position: absolute;
    11     width: 50px;
    12     height: 50px;
    13     background-color: red;
    14     margin: auto;
    15     left: 0;
    16    right: 0;
    17    top: 0;
    18    bottom: 0;
    19 }
    

      技术讲解:子元素宽高固定,设置 position: absolute,top 和 bottom 设置为0之后可以实现自适应垂直居中,同理也可以实现水平居中。垂直居中是大多数人最早开始接触到的垂直居中方法,实现简单,理解起来也不复杂,兼容性强,在实际中的运用也比较广泛。但是因为元素使用绝对定位会脱离文档流,所以这种方法常常用来对对话框和弹窗进行定位,也常常用于对界面基础结构进行布局。(如下)

    新葡亰496net 4

    新葡亰496net 5

      技术要点:绝对定位的定位参照物为第一个具有非 static 定位的祖先元素,所以父元素的 position 属性必须是非 static 的属性才能实现垂直居中,且子元素需设置 margin: auto。

      优点:实现简单,易理解,兼容性强,适用于多种场景,自适应性强。

      缺点:只能对 block 元素进行垂直居中,切会脱离文档流,所以使用的时候需要注意。

       

    text-align

      水平对齐实现上影响的是一个元素中的文本的水平对齐方式,关于text-align的详细信息移步至此

      值: left | center | right | justify | inherit

      初始值: left

      应用于: 块级元素(包括block和inline-block)

      继承性: 有

    //left: 1 23 456
    //right: 1 23 456
    

    Genius only means hard-working all one's life.

    二、writing-mode的原本作用

    float属性有些类似,writing-mode原本设计的是控制内联元素的显示的(即所谓的文本布局-Text Layout)。因为在亚洲,尤其像中国这样的东亚国家,存在文字的排版不是水平式的,而是垂直的,例如中国的古诗古文。

    新葡亰496net 6

    因此,writing-mode就是用来实现文字可以竖着呈现的。

    您可以狠狠地点击这里:CSS writing-mode与文字垂直排版demo

    截自IE11浏览器IE8模式:
    新葡亰496net 7

    writing-mode语法
    writing-mode的语法学习相比其他CSS属性要高一些,因为我们需要记住两套不同的语法。一个是IE私有属性,第二个是CSS3规范属性。

    先看下未来所需的CSS3语法:

    /* 关键字值 */ writing-mode: horizontal-tb; /* 默认值 */ writing-mode: vertical-rl; writing-mode: vertical-lr; /* 全局值-关键字inherit IE8 ,initial和unset IE13才支持 */ writing-mode: inherit; writing-mode: initial; writing-mode: unset;

    1
    2
    3
    4
    5
    6
    7
    8
    9
    /* 关键字值 */
    writing-mode: horizontal-tb;    /* 默认值 */
    writing-mode: vertical-rl;
    writing-mode: vertical-lr;
     
    /* 全局值-关键字inherit IE8 ,initial和unset IE13才支持 */
    writing-mode: inherit;
    writing-mode: initial;
    writing-mode: unset;

    各个关键字属性值的含义,我们透明名称就能知道其大概的意思,例如,默认值horizontal-tb表示,文本流是水平方向(horizontal)的,元素是从上往下(tb:top-bottom)堆叠的。

    vertical-rl表示文本是垂直方向(vertical)展示,然后阅读的顺序是从右往左(rl:right-left),跟我们古诗的阅读顺序一致。
    vertical-lr表示文本是垂直方向(vertical)展示,然后阅读的顺序还是默认的从左往右(lr:left-right),也就是仅仅是水平变垂直。

    下面是各个值下的中英文表现对照(参考自MDN):
    新葡亰496net 8

    //zxx: 大家会发现英文字符横过来了,可以试试使用text-orientation:upright让其直立,IE不支持,FireFox, Chrome支持。

    下面来看下老IE浏览器的语法,由于历史原因,显得相当的复杂,IE官方文档.aspx)显示如下:

    -ms-writing-mode: lr-tb | rl-tb | tb-rl | bt-rl | tb-lr | bt-lr | lr-bt | rl-bt | lr | rl | tb

    1
    -ms-writing-mode: lr-tb | rl-tb | tb-rl | bt-rl | tb-lr | bt-lr | lr-bt | rl-bt | lr | rl | tb

    根据自己的测试(非原生IE8,IE9),-ms-私有前缀是可缺省的,直接writing-mode所以IE浏览器都是支持的。-ms-writing-mode这种写法IE7浏览器是不支持的,但是官方有如下说明:

    Windows Internet Explorer 7. The rl-tb, and bt-rl values are available to the -ms-writing-mode

    就是说IE7的-ms-writing-mode可以使用rl-tbbt-rl这两个值,但这和自己的测试不符,我觉得可能是原生IE7浏览器,但我没有原生IE7,没有进行过测试,因此,此说法(原生IE7支持)只是自己的推测。

    我扳指头数了数,IE浏览器下的关键字值多达11个,正好可以组个足球队,新葡亰496net 9

    lr-tb
    IE7 浏览器支持。初始值。内容从左往右(left-right),从上往下(top-bottom)水平流动,以及下一行水平元素在上一行元素的下面,所有符号都是直立定位。大部分的书写系统都是使用这种布局。

    rl-tb
    IE7 浏览器支持。内容从右往左(right-left,从上往下(top-bottom)水平流动,以及下一行水平元素在上一行元素的下面,所有符号都是直立定位。这种布局适合从右往左书写的语言,例如阿拉伯语,希伯来语,塔安那文,和叙利亚语。

    tb-rl
    IE7 浏览器支持。内容从上往下(top-bottom),从右往左(right-left)垂直流动, 下一个垂直行定位于前一个垂直行的左边,全角符号直立定位,非全角符号(也可以被称作窄拉丁文或者窄假名符号)顺时针方向旋转90°。这种布局多见于东亚排版。

    bt-rl
    IE7 浏览器支持。内容从下往上(bottom-top),从右往左(right-left)垂直流动, 下一个垂直行定位于前一个垂直行的左边,全角符号直立定位,非全角符号(也可以被称作窄拉丁文或者窄假名符号)顺时针方向旋转90°。此布局多见于在东亚垂直排版从右往左的文本块上。

    tb-lr
    IE8 浏览器支持。 内容从上往下(top-bottom),从左往右(left-right)垂直流动。下一个垂直行在前一个的右边。

    bt-lr
    IE8 浏览器支持。 内容从下往上(bottom-top),从左往右(left-right)垂直流动。

    lr-bt
    IE8 浏览器支持。 内容从下往上(bottom-top),从左往右(left-right)水平流动。下一个水平行在前一行的上面。

    rl-bt
    IE8 浏览器支持。内容从下往上(bottom-top), 从右往左(right-left)水平流动。

    lr
    IE9 浏览器支持。在SVG和HTML元素上使用。等同于lr-tb.

    rl
    IE9 浏览器支持。在SVG和HTML元素上使用。等同于rl-tb.

    tb
    IE9 浏览器支持。在SVG和HTML元素上使用。等同于tb-rl.

    各个属性值的表现如下(form微软官网)

    新葡亰496net 10

    一些说明:

    • 相同的writing-mode属性值并不会累加,例如父子均设置了writing-mode:tb-rl,只会渲染一次,子元素并不会2次“旋转”。
    • IE浏览器下,一个自身具有布局的元素(不是纯文本之类元素)如果writing-mode属性值和父元素不同,当子元素的布局流变化的时候,其父元素坐标系统的可用空间会被充分利用。左边文字太过术语,大家可能不懂,我解释下就是,IE浏览器下,当布局元素从水平变成垂直的时候(举个例子),你就想象为元素在垂直方向是100%自适应父元素高度的。所以,IE浏览器下(不包括IE13 ),元素vertical流的时候会发现高度高的吓人,布局和其他现代浏览器不一样,就是这个原因。
    • Chrome浏览器下目前还需要-webkit-私有前缀,虽然Chrome和Opera认识tb-rl等老的IE属性值,但是,仅仅是认识而已,根本不鸟,没有任何效果,聋子的耳朵——摆设!

    需要关注的writing-mode属性值
    从着眼于直接开发的角度而言,虽然IE支持多达11个私有的属性值,但是,我们需要关注的,也就那么几个,那究竟是哪几个呢?

    如果你的项目需要兼容IE7,则只有关注这两个值就可以了:初始值lr-tbtb-rl,对应于CSS3规范中的horizontal-tbvertical-rl!其他9个属性值就让它们去过家家好了。

    如果你的项目只需要兼容IE8 ,恭喜你,你可以和CSS3规范属性完全对应上了,而且IE8下的writing-mode要比IE7强大的多。我们需要关注:初始值lr-tb, tb-rl以及tb-lr,分别对应于CSS3中的horizontal-tb, vertical-rl以及vertical-lr最常用的css垂直居中方法,CSS文本方向。。

    看上去复杂的属性是不是变得很简单了,重新整一个实战版:

    writing-mode: lr-tb | tb-rl | tb-lr (IE8 ); writing-mode: horizontal-tb | vertical-rl | vertical-lr;

    1
    2
    writing-mode: lr-tb | tb-rl | tb-lr (IE8 );
    writing-mode: horizontal-tb | vertical-rl | vertical-lr;

    对,大家只要记住上面几个就可以了,enough! 因为所谓的垂直排版,实际web开发是很少很少遇到的。

    有同学可能要疑问了,既然writing-mode实现文本垂直排版场景下,那还有什么学习的意义呢?

    前面也提到了,虽然writing-mode创造的本意是文本布局,但是,其带来的文档流向的改变,不仅改变了我们多年来正常的CSS认知,同时可以巧妙实现很多意想不到的需求和效果。

    Level 2:行高

      兼容性:

    Chrome Firefox (Gecko) Internet Explorer Opera Safari
    (Yes) (Yes) IE8 (Yes) (Yes)
    1 <div class="vertical">
    2     <div class="content">content</div>
    3 </div> 
    
     1 .vertical {
     2     position: relative;
     3     width: 200px;
     4     height: 200px;
     5     line-height: 200px;
     6     margin: 0 auto;
     7     margin-top: 10px;
     8     border: 1px solid blue;
     9     font-size: 0;
    10 }
    11 .content {
    12     display: inline-block;
    13     width: 50px;
    14     height: 50px;
    15     background-color: red;
    16     vertical-align: middle;
    17     font-size: 12px;
    18     line-height: 1.2em;
    19 }
    

      或者

    1 <div class="vertical">
    2     content
    3 </div> 
    
    1 .vertical {
    2     position: relative;
    3     width: 200px;
    4     height: 200px;
    5     line-height: 200px;
    6     margin: 0 auto;
    7     margin-top: 10px;
    8     border: 1px solid blue;
    9 }
    

      技术讲解:通过行高来实现垂直居中也是一个常常使用的方式,把行高 line-height 和 高度 height 设置为相同值,可实现子元素垂直居中。子元素只能是 inline 类型或者 inline-block 类型,需要注意的是,通过这种方式实现的垂直居中,一行文字的行高也就是整个父元素的高度(包括 inline 元素如 <span> ,inline-block 元素如 <img>),因此文本内容只能显示一行,其余的则会溢出。如果子元素是 inline-block 类型,那么需要设置 vertical-align: middle,不过这不是绝对的垂直居中。相信大家也看见前面画横线的部分,出现了奇怪的 font-size:0,这是因为 inline-block 类型对齐的只是文本的基线(baseline),而不是文本的中线(关于基线和中线,来源于 inline-box 的概念,详情可参见张鑫旭的文章:css行高line-height的一些深入理解及应用)。所以需要设置 font-size:0 ,来使 inline-box 模型的高度为0,这样其中线和基线就在一条线上了。同时还需要注意的是,由于line-height 和 font-size 的继承性,所以在子元素上需要对其进行修复。使用行高进行垂直居中是非常普遍的应用,由于其可以控制子元素垂直居中,所以常常用来制作导航栏的样式。(如下)

      新葡亰496net 11新葡亰496net 12新葡亰496net 13

      技术要点:将 line-height 和 height 设置为相同值实现垂直居中。inline 类型的子元素只能显示一行文字,inline-block 类型的子元素要注意其对齐的是基线,因此要通过设置 font-size:0 来实现绝对垂直居中。

      优点:兼容性强,实现简单,可对 inline-block 以及 inline 类型的元素垂直居中。

      缺点:需要对其父元素进行完全的控制,且 inline 类型子元素文本只能显示一行,灵活性不强。

     

    writing-mode

      writing-mode原先是IE的私有属性,原先的属性是lr-tb(左-右,上-下)和tb-rl(上-下,右-左)。其中writing-mode:tb-rl常用于触发haslayout。但W3C将writing-mode属性标准化后,其属性值也发生了变化

      writing-mode属性与其他改变文本方向的属性非常不一样。它不仅改变文本的显示方向,更直接改变了文本流的方向。如果其属性值改为vertical-rl,则文本流改成了垂直方向,则text-align变成了垂直对齐,vertical-align变成了水平对齐

      值: horizontal-tb | vertical-rl | vertical-lr

      初始值: horizontal-tb

      应用于: 除表格类元素之外的所有元素

      继承性: 有

      [注意]safari和移动端IOS和android需要添加-webkit-前缀;IE浏览器只支持自己的私有属性值

    注意:以下前缀兼容性写法注释
    -o-:Opera
    -ms://IE10
    -moz://火狐
    -webkit://Safari 4-5, Chrome 1-9

    三、writing-mode不经意改变了哪些规则?

    writing-mode将页面默认的水平流改成了垂直流,颠覆了很多我们以往的认知,基于原本水平方向才适用的规则全部都可以在垂直方向适用!

    1. 水平方向也能margin重叠
    W3C文档margin重叠之一:

    The bottom margin of an in-flow block-level element always collapses with the top margin of its next in-flow block-level sibling, unless that sibling has clearance.

    清清楚楚写的bottom margin和top margin会重叠;然而,这是CSS2文档中的描述,在CSS3的世界中,由于writing-mode的存在,这种说法就不严谨了,应该是对立流方向的margin值会发生重叠。换句话说,如果元素是默认的水平流,则垂直margin会重叠;如果元素是垂直流,则水平margin会重叠。

    您眼见为实,您可以狠狠地点击这里:CSS writing-mode与margin水平重叠demo

    结果:
    新葡亰496net 14

    2. 可以使用margin:auto实现垂直居中
    我们应该都是的,传统的web流中,margin设置auto值的时候,只有水平方向才会居中,因为默认width100%自适应的,auto才有计算值可依,而垂直方向,height没有任何设置的时候高度绝不会自动和父级高度一致,因此,auto没有计算空间,于是无法实现垂直居中。但是,在writing-mode的世界里,纵横规则已经改变,元素的行为表现发生了翻天覆地的变化。

    • 图片元素
      我们先来看下,图片元素margin:auto实现垂直居中,您可以狠狠地点击这里:CSS writing-mode与图片margin:auto垂直居中demo其中图片:
    img { display: block; margin-top: auto; margin-bottom: auto; }
    
    <table>
    <colgroup>
    <col style="width: 50%" />
    <col style="width: 50%" />
    </colgroup>
    <tbody>
    <tr class="odd">
    <td><div class="crayon-nums-content" style="font-size: 13px !important; line-height: 15px !important;">
    <div class="crayon-num" data-line="crayon-5b8f6d18e2039619152384-1">
    1
    </div>
    </div></td>
    <td><div class="crayon-pre" style="font-size: 13px !important; line-height: 15px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;">
    <div id="crayon-5b8f6d18e2039619152384-1" class="crayon-line">
    img { display: block; margin-top: auto; margin-bottom: auto; }
    </div>
    </div></td>
    </tr>
    </tbody>
    </table>
    
    FireFox浏览器下(P白省流量):  
    ![](http://jbcdn2.b0.upaiyun.com/2016/04/11c6066b35283344019022c0d0656255.png)
    
    但是,在IE浏览器下,却没有垂直居中~~![](http://jbcdn2.b0.upaiyun.com/2016/04/04a07b023cbd8f09dc35bd8b47655431.gif)
    
    ![](http://jbcdn2.b0.upaiyun.com/2016/04/20d358fc5d6f71ade8419d0df80c776e.png)
    
    纳尼?!难道IE不支持垂直流下的垂直居中?非也,根据鄙人的测试,也就是图片这类替换元素貌似不行,普通的block元素都是可以的。
    
    • 普通块状元素
      您可以狠狠地点击这里:CSS writing-mode与普通block元素margin:auto垂直居中demo此时,不仅IE11 edge,甚至IE8浏览器也都垂直居中了!新葡亰496net 15

    3. 可以使用text-align:center实现图片垂直居中
    前面提过,auto无法实现IE浏览器下的图片垂直居中,如果我们非要让图片垂直居中,可以使用text-align:center,您可以狠狠地点击这里:CSS writing-mode与图片text-align:center垂直居中demo

    结果,之前病恹恹的IE浏览器活了:
    新葡亰496net 16

    由于我们直接使用内联特性进行控制的,因此,IE7浏览器也是可以实现text-align:center下的图片垂直居中,但是,根据我在IE11↘IE7下的测试,writing-mode新葡亰496net,需要写在最后重置下(原生估计不会这样),因此,完整的writing-mode代码为:

    .verticle-mode { writing-mode: tb-rl; -webkit-writing-mode: vertical-rl; writing-mode: vertical-rl; *writing-mode: tb-rl; }

    1
    2
    3
    4
    5
    6
    .verticle-mode {
        writing-mode: tb-rl;
        -webkit-writing-mode: vertical-rl;      
        writing-mode: vertical-rl;
        *writing-mode: tb-rl;
    }

    4. 可以使用text-indent实现文字下沉效果
    这是真实项目例子,要增加一个按钮按下文字下沉的效果。如果你来实现,你会这么实现呢?行高控制?但默认文本就不居中(对于高度自适应的按钮,line-height下沉为了避免按钮高度变化,默认是不能完全居中的)。padding height精确控制,又略烦。然而,在writing-mode垂直流下,我们又有了新思路,例如,直接使用text-indent实现垂直方向的控制,没想到吧,无需关心height高度padding间距大小,任何按钮都可以通用,因为text-indent不会影响元素原本的盒布局。

    您可以狠狠地点击这里:CSS writing-mode与text-indent文字下沉效果demo

    新葡亰496net 17

    包括IE7在内的浏览器都是支持的(同上最后要*writing-mode覆盖下)都是支持下沉的。

    为什么有如此的实现呢?这要归功于中文,在垂直流排版的时候,中文是不会旋转的,还是直立的,也就是说,虽然我们肉眼看上去文字没什么变化,但是,布局流已经发生了变化,以前类似text-indent/letter-spacing等水平控制属性都作用在垂直方向了。

    当然,我们这个例子比较巧的是按钮文字只有一个,要是按钮文字有多个,怕是就没这么轻松和绝妙了。

    5. 可以实现全兼容的icon fonts图标的旋转效果
    在老的IE浏览器下,我们要实现小图标的旋转效果是不是很烦?要使用IE的旋转或翻转滤镜(filter)什么的,具体可参见我之前的“CSS垂直翻转/水平翻转提高web页面资源重用性”以及“IE矩阵滤镜Matrix旋转与缩放及结合transform的拓展”一文。

    现在我们有了writing-mode,我们就不要这么烦心了。

    前面可能也注意到了,当writing-mode把文档变成垂直流的时候,我们的英文和数字符号是会“躺着”显示,也就是天然90°旋转了。此时,我们不妨脑洞大开一下,假如我们使用icon fonts技术让这些字符直接映射某个小图标,那岂不是松松实现小图标旋转了,关键在于,就算是千年杀的IE6,IE7浏览器也是支持的啊,这要比滤镜什么的简单多了!

    眼见为实,您可以狠狠地点击这里:writing-mode实现icon fonts图标旋转效果demo

    就算是IE7浏览器,也是很给力的!

    新葡亰496net 18

    6. 充分利用高度的高度自适应布局
    卧槽,不行了,内容太多了,五一前也写不完了……

    往下的7,8,9,10一起都略了吧~~

    总之,放开自己的大脑,理论上讲,有了writing-mode,我们能够做的事情比以前多了50%,就怕你想不到,不怕做不到。

    Level 3:表格单元(table-cell)

       兼容性:

    Chrome Firefox (Gecko) Internet Explorer Opera Safari
    (Yes) (Yes) IE8 (Yes) (Yes)
    1 <div class="vertical">
    2     <div class="content"></div>
    3     this is test this is test this is test this is test 
    4 </div> 
    
     1 .vertical {
     2     display: table-cell;
     3     width: 200px;
     4     height: 200px;
     5     border: 1px solid blue;
     6     vertical-align: middle;
     7     text-align: center;
     8 }
     9 .content {
    10     display: block;
    11     width: 50px;
    12     height: 50px;
    13     margin: 0 auto;
    14     background-color: red;
    15 }
    

      技术讲解:父元素设置 display:table-cell,并将垂直对齐方式设置为 vertical-align:middle 可实现子元素垂直居中。使用 table-cell 进行垂直居中也是一个较常用的方法,该方法比用 line-height 更灵活,但是其父元素因为具有表格的属性稍微较难控制,因此最好的是在外面再加一层 wraper 。这种方法实现垂直居中,子元素为 inline、inline-block、block均可,且没有使用行高那样只能显示一行文本的限制,并且具有自适应性。(相关实例目前我还没有发现o( ̄▽ ̄)d )

      技术要点:设置父元素 displate:table-cell 以及 vertical-align:middle 实现垂直居中,必要时建议加上一个 wraper。

      优点:子元素可以为多种类型的元素,block、inline-block、inline 类型均可,使用范围广,且具有自适应性。

      缺点:父元素具有表格属性,因为较难控制,建议使用时加上一个 wraper。

     

    dir

      dir是HTML的全局属性,专门用来设置文本的方向

      值: ltr | rtl | auto

    //ltr: 1 23 456
    //rtl: 456 23 1
    

    23. 文字渐变效果

    .text-gradient{
        background-image: linear-gradient(135deg, deeppink, deepskyblue);
        -webkit-background-clip: text;
        color: transparent;
    }
    

    新葡亰496net 19

    文字渐变效果

    四、writing-mode和direction的关系

    上个月刚刚介绍了CSS direction属性,也是个好东西,具体参见“CSS direction属性简介与实际应用”,其可以改变文字的走向,那他和writing-mode是个什么关系呢?

    writing-mode, direction, unicode-bidi(MDN文档)是CSS世界中3大可以改变文本布局流向的属性。其中direction, unicode-bidi属于近亲,经常在一起使用,也是唯一两个不受CSS3 all属性影响的CSS属性,基本上就是和内联元素一起使用使用,且据说貌似为阿拉伯文字设计。

    乍一看,writing-mode最常用的css垂直居中方法,CSS文本方向。似乎包含了direction, unicode-bidi某些功能和行为,例如vertical-rlrldirectionrtl值有相似之处,都是从右往左。然而,实际上,两者是没有交集的。因为vertical-rl此时的文档流为垂直方向,rl表示水平方向,此时再设置direction:rtl,实际上值rtl改变的是垂直方向的内联元素的文本方向,一横一纵,没有交集。而且writing-mode可以对块状元素产生影响,直接改变了CSS世界的纵横规则,要比direction强大和鬼畜的多。且据说貌似为东亚文字设计。

    然而,CSS的奇妙就在于,某些特性当初可能就是问了某些图文排版设计,但是,我们可以利用其带来的特性,发挥自己的创造力,实现其他很多意想不到的效果。所以,上面出现的三剑客都是非常好的资源。

    Level 4: writing-mode

      兼容性:

    Chrome Firefox  Internet Explorer Opera Safari
    8 41 IE8 (partial) ? ?
    1 <div class="vertical">
    2     <div class="content">content</div>
    3 </div> 
    
     1 .vertical {
     2     display: block;
     3     width: 200px;
     4     height: 200px;
     5     border: 1px solid blue;
     6     writing-mode: vertical-lr;
     7     writing-mode: tb-lr;/* 兼容IE */
     8 }
     9 .content {
    10     display: block;
    11     width: 100px;
    12     height: 100px;
    13     margin: auto 0;
    14     background-image: url("img.jpg");
    15     writing-mode: horizontal-tb;
    16 }
    

      Chrome & FireFox

    新葡亰496net 20

      IE

    新葡亰496net 21

      技术讲解:通过 writing-mode 来实现垂直居中相信大多数人都没有听说过,不过该方法也几乎没有见过在实际中的运用,除了改变文本方向之外。相信我们所有人在最开始学习到块元素水平居中 margin:0 auto 的时候,都曾幻想加一个 auto 来实现垂直居中,but it doesn't work。但是现在我们要回来了,我们要使用 margin 来实现垂直居中,writing-mode 的作用是改变文档流的方向,因为浏览器的文档流方向默认是从上到下,从左向右,我们把前后顺序换一下,换成从左向右,从上到下,这样一来原来的 width 变成了 height,原来的 height 变成了width,从而使盒模型转换了90度。也就是说一切的排版规则不变,只是原本站立的人现在趟下了,之前的一切特性也会跟着一起躺下,比如外边距 margin 等等。如果说只是用于实现垂直居中的话,子元素要修复文档流方向,因为 writing-mode 具有继承性。不过在IE上就不那么乐观了,IE有其自身实现 writing-mode 的值,在这里就不一一列举了。在IE当中如果修复子元素的话,子元素本身也会被修复,也就是说子元素本身的排版会按照修复属性的样式,这里大家可以自行测试。这种方法还有一个需要注意的是,改变文档流的方向并不会改变其背景图片的排版方向。此方法实际运用意义不大,并且兼容性不好(只是单纯的针对IE而已。。。),拿它来炫技是个不错的选择。

      技术要点:设置父元素 writing-mode: vertical-lr 改变文档流方向,子元素设置 margin: auto 0 实现垂直居中,如有必要给子元素加上 writing-mode: horizontal-tb 修复文档流。

      优点:自适应性强,与绝对定位实现效果类似,且不会脱离文档流。

      缺点:实用性不大,兼容性差,只能对 block 类型元素实现垂直居中。

     

    direction

      direction是设置文本方向的CSS样式

      值: ltr | rtl | inherit

      初始值: ltr

      应用于: 所有元素

      继承性: 有

      [注意]想让direction样式在inline元素上起作用,需要unicode-bidi样式的相关设置

      [注意]设置direction样式时,HTML元素的全局属性dir无效

    ltr: 从左到右(left to right)
    rtl: 从右到左(right to left)
    
    //ltr: 1 23 456
    //rtl: 456 23 1
    

    22. IOS键盘字母输入,默认首字母大写,解决方案

    <input type="text" autocapitalize="off" />
    

    五、writing-mode和*-start属性的流机制

    CSS3中出现了诸多*-start/*-end属性(亦称为CSS逻辑属性),例如:margin-start/margin-end, border-start/border-end, padding-start/padding-end, 以及text-align:start/text-align:end声明。

    下面问题来了,为什么会蹦出这么多*-start/*-end鬼?

    那是因为现代浏览器加强了对流的支持,包括老江湖direction,以及最近年月跟进的writing-mode

    在很久以前,我们的认知里,网页布局就一种流向,就是从左往右,从上往下,因此,我们使用margin-left/margin-right没有任何问题。但是,如果我们流是可以变化的,例如,一张图片距离左边缘20像素,我们希望其文档流是从右往左,同时距离右侧是20像素,怎么办?

    此时,margin-left:20px在图片direction变化后,就无效了;但是,margin-start就不会有此问题,所谓start, 指的是文档流开始的方向,换句话说,如果页面是默认的文档流,则margin-start等同于margin-left,如果是水平从右往左文档流,则margin-start等同于margin-rightmargin-end也是类似的。

    新葡亰496net 22

    webkit内核的浏览器还支持*-before*-end,默认流下的margin-before近似于margin-topmargin-after近似于margin-bottom,然而,规范貌似没提及,FireFox也没支持,*-before*-after出场的机会并不多,为什么呢?因为实际上,配合writing-mode,*-start/*-end已经可以满足我们对逻辑位置的需求了,水平和垂直都可以控制,对立方向适用老的*-top/*-bottom.

    例如,我们设置writing-mode值为vertical-rl,此时margin-start等同于margin-top,如果此时margin-startmargin-top同时存在,会遵循权重和后来居上原则进行相互的覆盖。

    可以看到,场景不同,margin-start的作用也不能,能上能下,能左能右简直在世百变星君。

    关于*-start/*-end以后有机会会具体展开论述,这里就先点到为止,大家估计目前也不会在实际项目中使用。

    Level 5:flex布局

      兼容性:

    Chrome Firefox  Internet Explorer Opera Safari
    21 28 10 (partial) 12.1 6.1
    1 <div class="vertical">
    2     <div class="content"></div>
    3     <div class="content2"></div>
    4 </div> 
    
     1 .vertical {
     2     display: flex;
     3     flex-direction: row;
     4     width: 200px;
     5     height: 200px;
     6     border: 1px solid blue;
     7     justify-content: center;
     8     align-items: center;
     9 }
    10 .content {
    11     width: 50px;
    12     height: 50px;
    13     background-color: red;
    14 }
    15 .content2 {
    16     width: 50px;
    17     height: 80px;
    18     background-color: green;
    19 }
    

      技术讲解:随着CSS3的到来,我们终于有了官方标准的垂直居中方法,flex布局是w3c针对复杂的文档模式新提出来的一种布局方案,目前浏览器兼容性还算乐观,随着IE市场的衰减,flex布局将会成为未来布局的主流。这种布局方法灵活多变,可适应不同的文档流和各种场合。其中使其垂直居中生效的方法是 justify-content 和 align-items ,不过要注意主轴 flex-direction 的方向,默认值是 row(及水平的文档流),注意这里和传统的默认从上到下的文档流相反。justify-content 设置主轴上的对齐方式,也就是相对于主轴的水平对齐方式,aligh-items 设置交叉轴的对齐方式,也就是相对于主轴的垂直对齐方式。关于具体的 flex 布局教程,可以参加大漠的《图解CSS3:核心技术与案例实战》,或者阮一峰的文章Flex 布局教程:语法篇。虽说目前为止 Flex 布局对于IE的兼容性不完整,但是在移动端 Flex 可是已经大有作为了,并且今后随着IE用户逐渐转移到edge上,flex布局将会代替许多传统的方法。

      技术要点:父容器设置 display:flex 使用 flex 布局,通过 flex-direction 设置主轴方向再用 justify-content 和 aligh-items 设置水平或垂直方向的对齐方式,注意主轴方向与对齐方向的关系。

      优点:适用范围广,自适应性强,灵活性高,可对任意类型子元素实现垂直居中。

      缺点:目前兼容不完善(只是目前为止)。

    unicode-bidi

      unicode-bidi是一种更健壮的处理文本方向的方式

      值: normal | embed | bidi-override | isolate | isolate-override | plaintext | inherit

      初始值: normal

      应用于: 所有元素

      继承性: 无

      [注意]unicode-bidi属性应用于flex弹性盒模型上有问题,除非伸缩容器只包含一个匿名伸缩项目时有效,其余情况都无效

      [注意]isolate、isolate-override、plaintext是实验属性值,几乎没有浏览器支持

    //display:inline-block/block
    normal/embed: 456 23 1
    bidi-override: 654 32 1
    
    //display:inline
    normal:1 23 456
    embed: 456 23 1
    bidi-override: 654 32 1
    

      [注意]只有当dir为rtl或direction为rtl时,unicode-bidi属性才起作用

    21. select 下拉选择设置右对齐

    select option {
        direction: rtl;
    }
    

    六、结束语

    我突然想唱一首歌:“终于等到你,还好我没放弃……”

    这篇文章从上上周周末就开始写,一直到今天才结语,2周时间了。

    一是换了新环境,作息生物钟还不习惯;二是工作忙啊,加班比较多;三是周末要会丈母娘家抱小朋友;四是文章内容比较多,很难抽出大的时间片段。

    现在看来,赶在五一前完成应该不成问题了,算是了了个节前小心愿。

    OK,说点正经的。

    四月新番里面很多片子不错,比方说《RE从零开始的异世界》,剧情不错;《我的英雄学院》,据说是《一拳超人》前传,我就科科了,男主太废柴,还有《文豪野犬》,据说男主后期超吊的等……

    新葡亰496net 23

    感谢阅读,欢迎反馈文中表述不准确的地方,欢迎交流。

    1 赞 4 收藏 评论

    新葡亰496net 24

    总结

      垂直居中的方法五花八门,细数起来肯定不只这5种,但是归根到底其实现的思想和技术核心却是一样的。以上5种方法是对不同垂直居中方法的一个总结,排名顺序依照技术实现的难易度、可理解性的复杂度、以及大多数人的接触顺序的综合分析。目前浏览器的兼容性测试还不够完全,如有错误或者补充,欢迎在评论中指出。

      以上 DEMO 运行平台: Windows 10 & FireFox 54

      在线测试平台:jsfiddle

    20. 去除 iOS移动端 input,textarea输入框上方内阴影样式

    CSS代码:
    input, textarea, select{
       appearance: none;
       -moz-appearance: none; //Firefox 
       -webkit-appearance: none; //Safari 和 Chrome 
    }
    

    新葡亰496net 25

    input输入框上方有内阴影效果图

    新葡亰496net 26

    去除input输入框上方的内阴影效果图

    appearance属性,用来移除原生控件样式。亦可以用来去除 select 默认样式右侧的下拉小三角形。

    参考文献:

      大漠 —— 《图解CSS3:核心技术与案例实战》

      张鑫旭 —— 《改变CSS世界纵横规则的writing-mode属性》

      张鑫旭 —— 《css行高line-height的一些深入理解及应用》

      阮一峰 —— 《Flex 布局教程:语法篇》

    19. 自定义滚动条样式

    整体部分 ::-webkit-scrollbar
    两端按钮 ::-webkit-scrollbar-button
    外层轨道 ::-webkit-scrollbar-track
    内层轨道 ::-webkit-scrollbar-track-piece
    滚动滑块 ::-webkit-scrollbar-thumb
    边角 ::-webkit-scrollbar-corner
    边角拖动块的样式 ::-webkit-resizer

    横向滚动条
    CSS代码:
    .scroll-horizontal::-webkit-scrollbar{
        height: 10px;
    }
    .scroll-horizontal::-webkit-scrollbar-button{
        display: block;
        width: 5px;
        border: 5px solid transparent;
    }
    .scroll-horizontal::-webkit-scrollbar-button:start:decrement{
        border-right-color: red;
    }
    .scroll-horizontal::-webkit-scrollbar-button:end:increment{
        border-left-color: red;
    }
    .scroll-horizontal::-webkit-scrollbar-button:end:decrement{
        display: none;
    }
    .scroll-horizontal::-webkit-scrollbar-button:start:increment{
        display: none;
    }
    .scroll-horizontal::-webkit-scrollbar-thumb{
        background-color: green;
        border-radius: 30px;
    }
    .scroll-horizontal::-webkit-scrollbar-track-piece{
        /* background-color: #0898b2; */
        border-radius: 30px;
    }
    .scroll-horizontal::-webkit-scrollbar-track{
        border: 1px solid #721f1f;
        border-radius: 30px;
        margin: 0 5px;
    }
    

    新葡亰496net 27

    横向滚动条

    竖向滚动条
    CSS代码:
    .scroll-vertical::-webkit-scrollbar{
        width: 10px;
    }
    .scroll-vertical::-webkit-scrollbar-button{
        display: block;
        height: 10px;
        border: 5px solid transparent;
    }
    .scroll-vertical::-webkit-scrollbar-button:end:increment{
        border-top-color: #1166DF;
    }
    .scroll-vertical::-webkit-scrollbar-button:start:decrement {
        border-bottom-color: #1166DF;
    }
    .scroll-vertical::-webkit-scrollbar-button:end:decrement,
    .scroll-vertical::-webkit-scrollbar-button:start:increment{
        display: none;
    }
    .scroll-vertical::-webkit-scrollbar-track-piece{
        border-radius: 30px;
        background-color: #0b97b0;
        margin: 5px auto;
    }
    .scroll-vertical::-webkit-scrollbar-thumb{
        border-radius: 30px;
        background-color: green;
    }
    

    新葡亰496net 28

    竖向滚动条

    18. 实现文字竖向排版

    实现文字竖向排版,最简单的方法是设置较小的宽度,然后高度自适应。

    p{
        width: 25px;
        line-height: 18px;
        height: auto;
        font-size: 12px;
        padding: 8px 5px;
    }
    

    新葡亰496net 29

    设置较小的宽度,高度自适应

    但是当想要多列展示时,设置宽度就不能实现我们想要的效果了,此时可以使用
    writing-mode 属性。

    p{
        height: 210px;
        line-height: 30px;
        text-align: justify;
        writing-mode: vertical-lr;  //从左向右    
        writing-mode: tb-lr;        //IE从左向右
    
        //writing-mode: vertical-rl;  -- 从右向左
        //writing-mode: tb-rl;        -- 从右向左
    }
    

    新葡亰496net 30

    writing-mode 属性实现竖向排列

    17. 实现按比例计算浅红到深红的颜色值

    设置 rgb,固定 r 值为 ff, 让 g = b,从 ff 渐变到 0

    新葡亰496net 31

    #FF4040

    新葡亰496net 32

    #FF3030

    新葡亰496net 33

    #FF0000

    新葡亰496net 34

    效果图

    16. calc 可以使我们不用考虑元素的宽度值,直接交给浏览器去计算

    当我们遇到左侧宽度值固定,右侧宽度值不定的时候,使用 calc 去设置元素的宽度是最好的解决办法。
    在IE9 、FireFox4.0 、Chrome19 、Safari6 都有较好的支持

    支持 " " 、" - " 、 " * " 、" / " (运算符前后要加空格)
    支持 " px " 、 " % " 、 " em " 、 " rem " 等单位 (可混合使用)

    CSS代码:
    div .left{
        width: 200px;   //左侧宽度固定
    }
    div .right{
        width: calc(100% - 200px);   
        width: -moz-calc(100% - 200px);
        width: -webkit-calc(100% - 200px);
    }
    

    15. CSS实现图片自动按比例等比例缩小并垂直水平居中,图片不变形

    CSS代码:
    div{
        position: relative;
        width: 270px;
        height: 200px;
        border: 1px solid #e2e2e2;
    }
    div img{
        position: absolute;
        display: block;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        -moz-transform: translate(-50%, -50%);
        -ms-transform: translate(-50%, -50%);
        -o-transform: translate(-50%, -50%);
        -webkit-transform: translate(-50%, -50%);
        max-width: 270px;
        max-height: 200px;
        width:expression(this.width > 270? "270px" : this.width);  //当低版本IE浏览器 不支持max-width属性时执行该语句
        height:expression(this.height > 200? "200px" : this.height);
    }
    

    14. 多行文本溢出显示省略号

    CSS代码:
    .box{
        width: 100%;
        overflow: hidden;
        display: -webkit-box;   //将对象作为弹性伸缩盒子模型显示  *必须结合的属性*
        -webkit-box-orient: vertical;   //设置伸缩盒对象的子元素的排列方式  *必须结合的属性*
        -webkit-line-clamp: 3;   //用来限制在一个块元素中显示的文本的行数
        word-break: break-all;   //让浏览器实现在任意位置的换行 *break-all为允许在单词内换行*
    }
    

    新葡亰496net 35

    三行溢出点点点

    13. 单行文本溢出显示省略号

    CSS代码:
    a{
        overflow: hidden;   //超出隐藏
        display: block;
        max-width: 116px;
        text-overflow: ellipsis;   //当文本内容溢出时显示省略号
        white-space: nowrap;   //文本在同一行上不会换行,直到遇到 <br> 标签为止
        height: 40px;
        line-height: 40px;
        background-color: #f8f8f8;
        padding: 0 10px;
    }
    

    主要代码:
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;

    text-overflow: clip | ellipsis
    clip: 不显示省略号(...)
    ellipsis: 当文本内容溢出时显示省略号(...)

    新葡亰496net 36

    单行溢出点点点

    12. 左右两边 div 的高度自适应相等

    需要将 margin 和 padding 的数值设置的越大越好
    需要给父元素设置 overflow: hidden;

    html代码结构:
    <div class="w c pagecont">
        <div class="l pageleft"></div>
        <div class="l pageright"></div>
    </div>
    
    CSS代码:
    .c{
        overflow: hidden;
        zoom: 1;
    }
    .pageleft, 
    .pageright {
        padding: 30px;
        margin-bottom: -10000px;
        padding-bottom: 10030px;
    }
    

    新葡亰496net 37

    效果图

    11. CSS实现文本两端对齐

    CSS代码:
    div{
        text-align: justify;
        text-justify: distribute-all-lines;  //ie6-8
        text-align-last: justify;  //一个块或行的最后一行对齐方式
        -moz-text-align-last: justify;
        -webkit-text-align-last: justify;
    }
    

    10. IE6浏览器常见兼容问题

    // 横向双倍margin
    IE6中设置元素浮动后,会出现横向双倍margin值。--添加 _display: inline;
    // 3px bug
    浮动块元素处于同一行时,有默认的3px间距。--设置非浮动元素浮动。
    // 透明度
    opacity: 0.6; --filter: alpha(opacity = 60);
    

    9. PC端调用QQ实现在线聊天

    点击图标或者文字可以直接调用QQ实现在线聊天

    <a href="http://wpa.qq.com/msgrd?v=3&amp;uin=80080088&amp;site=qq&amp;menu=yes" target="_self"><img border="0" src="http://wpa.qq.com/pa?p=2:80080088:51" title="在线客服" /></a>
    //修改两处QQ号即可
    

    新葡亰496net 38

    图标效果图

    <a href="tencent://message/?uin=80080088&amp;Site=Sambow&amp;Menu=yes">80080088</a>
    //修改一处QQ号即可
    

    新葡亰496net 39

    文字效果图

    8. CSS3 Gradient 渐变

    CSS3 Gradient 分为线性渐变和径向渐变。

    html代码:
    <div class = "gradient" style = "width: 120px; height: 80px; "></div>
    
    CSS代码:
    background: #e6e6e6;   //当浏览器不支持背景渐变时该语句将会被执行
    background: -o-linear-gradient(top, #fdfdfd,  #e6e6e6); 
    background: -moz-linear-gradient(top, #fdfdfd, #e6e6e6); 
    background: -webkit-linear-gradient(top, #fdfdfd, #e6e6e6);   //最新发布语法
    background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#fdfdfd), #e6e6e6);   //老式语法
    
    示例:
    background: -webkit-linear-gradient(left top, #ccc, green, yellow, red);   //线性渐变
    background: -webkit-radial-gradient(center, red, blue, #f96, green);   //径向渐变
    //不设置位置,将会均匀分布
    

    新葡亰496net 40

    效果图

    新葡亰496net 41

    效果图

    background: -webkit-linear-gradient(top, #ccc 5%, #F95 30%, red);   //线性渐变
    background: -webkit-radial-gradient(center, red 5%, blue 10%, #f96 40%,  green 100%);   //径向渐变
    //设置位置
    

    新葡亰496net 42

    效果图

    新葡亰496net 43

    效果图

    background: -webkit-repeating-linear-gradient(-45deg, #f96, #f96 3px, green 3px, green 8px);   //线性重复渐变
    background: -webkit-repeating-radial-gradient(red, #f96 2px, green 2px, green 8px);   //径向重复渐变
    

    新葡亰496net 44

    效果图

    新葡亰496net 45

    效果图

    共有三个参数,第一个参数表示线性渐变的方向,top是从上到下,left是从左到右,如果定义成left top 或者角度(-45deg),那就是从左上角到右下角。第二个参数是起点颜色,第三个参数是终点颜色。可以在它们之间插入更多的参数,表示多种颜色的渐变。

    IE依靠滤镜实现渐变。
    startColorstr表示起点的颜色,endColorstr表示终点颜色。GradientType表示渐变类型,0表示垂直渐变,1表示水平渐变。

    filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr=#f96, endColorstr=#ccc);   //IE9
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient (GradientType=0, startColorstr=#f96, endColorstr=#ccc)";   //IE8 
    
    实例 (实现鼠标移上时出现黑心圆点效果)
    CSS代码:
    span{
        display: block;
        float: left;
        width: 13px;
        height: 13px;
        border-radius: 50%;
        border: 1px solid #ccc;
        font-size: 0;
        background: #fff;
        margin: 0 5px;
    }
    span:hover{
        background: #676767;  
        background: -o-radial-gradient(center, #676767 26%, #fff 44%, #fff 100%); 
        background: -moz-radial-gradient(center, #676767 26%, #fff 44%, #fff 100%); 
        background: -webkit-radial-gradient(center, #676767 26%, #fff 44%, #fff 100%); 
    }
    

    新葡亰496net 46

    实现黑心圆效果

    7. CSS3 columns多列布局

    div{
        //把div元素中的文本划分为4列
               -moz-columns: 4;
            -webkit-columns: 4;
                    columns: 4;
        //将div元素中的文本分为三列,并列间30px的间隔
            -moz-column-gap: 30px;
         -webkit-column-gap: 30px;
                 column-gap: 30px;
        //规定列之间的宽度、样式和颜色
           -moz-column-rule: 1px outset #fff;
        -webkit-column-rule: 1px outset #fff;
                column-rule: 1px outset #fff;
    }
    

    新葡亰496net 47

    多列布局效果图

    6. 设置表单file控件上传文件时可以选择多个文件

    <input type='file' multiple='true'>   //设置multiple属性值为true
    

    5. CSS实现一行水平居中,多行左对齐效果

    html代码:
    <p class='text'>一行水平居中,多行左对齐。</p>
    <p class='text'>一行水平居中,多行左对齐。一行水平居中,多行左对齐。一行水平居中,多行左对齐。</p>
    
    css代码:
    .text {text-align: center;}
    .text span {display: inline-block; text-align: left;}
    

    4. 空白会被保留

    css代码:
    white-space: pre;
    

    3. 修改input输入框中光标的颜色不改变字体的颜色

    input{
        color:  #fff;
        caret-color: red;
    }
    

    新葡亰496net 48

    字体白色 光标红色

    2. 修改input 输入框中 placeholder 默认字体样式

    //webkit内核的浏览器 
    input::-webkit-input-placeholder {
        color: #c2c6ce;
    }
    //Firefox版本4-18 
    input:-moz-placeholder {
        color: #c2c6ce;
    }
    //Firefox版本19 
    input::-moz-placeholder {
        color: #c2c6ce;
    }
    //IE浏览器
    input:-ms-input-placeholder {
        color: #c2c6ce;
    }
    

    1. 去除浏览器中 input button 等标签获得焦点时的带颜色边框

    CSS代码:
    input, textarea, button{
        outline:none;
    }
    

    新葡亰496net 49

    获得焦点时的效果图

    新葡亰496net 50

    去除样式后的效果图

    本文由新葡亰496net发布于新葡亰官网,转载请注明出处:最常用的css垂直居中方法,CSS文本方向

    关键词: