css direction属性的实际应用,direction的这些用法你知道吗?

原创 国哥笔记  2018-11-14 11:49  阅读 936 views 次

direction属性简介

direction属性相信很多人都很陌生吧,因为很多人都不知道它的存在,在实际项目中很少见。这个属性虽然不常见,但并不是它没用,在一些场景中,它能简单的解决一些复杂的问题;也不是它的兼容性不好,主流浏览器很早版本就支持了该属性。

direction属性简单好记、属性值少、兼容性也很好、很多场景中还能解决一些复杂的问题。但很多css手册对direction属性介绍的特少,埋没了人家的特殊技能,这可能就是被埋没的主要原因吧,接下来就介绍一下它到底有什么特殊技能吧,希望在项目中也有它的用武之地。

direction属性定义及用法

在css中,direction属性是用来实现右对齐效果并改变内联元素块(如:<img>、 <button>、 <input>、 <video>、 <object>、inline-block元素等;注意:<span>不属于内联元素块)的排列顺序,它的属性值可以设置为ltr(默认)、rtl、inherit。要记的就rtl属性,从右到左,它实现的效果就是:内联元素块右对齐,排列顺序右到左。

direction属性语法格式

css语法:direction:ltr/rtl/inherit;(例:direction: ltr;)
JavaScript语法:object.style.direction="rtl";

direction属性值说明

  • ltr:从左到右;
  • rtl:从右到左;
  • inherit:从父元素继承direction属性的值;

实例1(direction属性应用于文本元素):

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>css direction属性的实际应用,它的这些用法你知道吗?</title>
<style type="text/css">
body{background: #ddd;}div{width: 400px;height:80px;border:1px solid blueviolet;margin-top:10px;}
.rtl{direction: rtl;}
.ib{display:inline-block;}
</style>
</head>
<body>
<div class="rtl">direction: rtl;:文本右对齐,书写方向不变</div>
<div class="rtl"><span>第一个span</span><span>第二个span</span><br>加内联标签顺序任然不变</div>
<div class="rtl"><span class="ib">第一个span</span><span>第二个span</span><br>将span其中一个设置为display:inline-block,顺序发生改变</div>
</body>
</html>

运行结果:

css direction属性的用法笔记

总结

direction属性对于文字,文字会被当做一个整体,及一个内联元素块,所有文字的书写顺序是不变的,只有右对齐效果(如果要实现右对齐,并且改变文字的书写方向,可以配合unicode-bidi属性一起使用);就算用内联标签(<span>)分隔,也会被当作同一个内联元素块,其排列顺序也不会改变。如果将span其中一个设置为display:inline-block,顺序将发生改变;

实例二(direction属性应用于按钮位置交换):

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>css direction属性的用法笔记</title>
<style type="text/css">
.div{width:450px;height:200px;border:1px solid;margin-top:10px;}
.div-1{margin-top: 80px;text-align: center;}
button{width:60px;height:30px;margin: 10px;margin-top: 50px;;}
.direction{direction:rtl;}
</style>
</head>
<body>
<div class="div">
<div class="div-1">你是否保存对“direction属性的用法笔记.html”的更改?</div>
<div class="direction"><button>取消</button><button>确定</button></div>
</div>
</body>
</html>

运行结果:

direction属性

实例3(direction属性应用于图片,不影响布局交换图片位置):

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>css direction属性的用法笔记</title>
<style type="text/css">
.div{width:450px;height:200px;border:1px solid;margin-top:10px;text-align: center;}
.direction{direction:rtl;}
</style>
</head>
<body>
<div class="div direction">
<img src="https://www.ggbiji.com/wp-content/uploads/2018/11/4-1.png" width="100px"/>
<img src="https://www.ggbiji.com/wp-content/uploads/2018/11/5.png" width="100px"/>
</div>
</body>
</html>

运行结果:

direction属性

更多css属性请移步到——>css属性大全

本文地址:https://www.ggbiji.com/css-direction.html
版权声明:本文为 国哥笔记 原创/整理文章,欢迎分享,转载请注明出处!

发表评论


表情