recherche
Maisoninterface Webtutoriel HTMLCSS direction属性简介与实际应用_html/css_WEB-ITnose

一、用的少并不代表没有用

至少,在我接触的这么多项目里,没有见到使用过CSS direction属性做实际开发的。

为什么呢?是因为 direction 长得丑吗?

虽然说 direction 确实其貌不扬,但是CSS并不是一个看脸卖萌的世界。

那是因为兼容性吗?

那更不是了,在那个“美女”确实是美女的年代,包括IE6在内的浏览器,CSS direction 就已经被支持。

Chrome Safari Firefox Opera IE Android iOS
2.0+ 1.3+ Any 9.2+ 5.5+ Any 3.1+

那究竟是什么原因呢?

原因就在于我这篇文章写得太晚了!

CSS direction 属性简单好记,属性值少,兼容性好,关键时候省心省力,是时候给大家宣传宣传,不要埋没了人家的特殊技能。

二、CSS direction简介

基本上,大家只要关心下面这两个属性值就好了:

direction: ltr;   // 默认值direction: rtl;

其中, ltr 是初始值,表示left-to-right,就是从左往右的意思,再具体描述下,就是内联内容是从左往右依次排布的,我们平时网页的处理都是这样的,比方说前后两个图片,默认情况下,DOM在前的就显示在左边。

rtl 则是另外一个值,right-to-left缩写,就是从右往左的意思,再具体描述下,就是内联内容是从右往左依次排布的,加入应用了这个CSS声明,则前后两个图片,默认情况下,DOM在前的就显示在右侧;而且是在容器的右端。

例如mm1是张含韵,DOM结构如下:

<p class="rtl"><img  src="/static/imghwm/default1.png"  data-src="mm1.jpg"  class="lazy" alt="CSS direction属性简介与实际应用_html/css_WEB-ITnose" > <img  src="/static/imghwm/default1.png"  data-src="mm2.jpg"  class="lazy" alt="CSS direction属性简介与实际应用_html/css_WEB-ITnose" ></p>

结果,张妹子跑到了最右边,而不是左边,同时,貌似右对齐容器了,如下截图:

改变的只是内联元素块的左右顺序

需要注意的是,当 direction 属性的值是 rtl 的时候,我们的文字的前后顺序是不变了,例如:

<p class="rtl"><span>span1</span> <span>span2</span></p>

结果,还是span1在左边,span2在右边:

因为改变的只是 内联元素块 的左右顺序,所有的文字,即使使用内联标签分隔,实际上,还是一个同质内联盒子,是当作一个整体处理的,因此,只有近似右对齐效果,而具体每个文字都没有左右顺序的变化。

那什么是“内联元素块”呢?包括替换元素(replaced element),如 CSS direction属性简介与实际应用_html/css_WEB-ITnose ,

您可以狠狠地点击这里: CSS direction属性与左右顺序测试demo

在IE浏览器下(至少IE11),设置 direction:rtl 会改变容器默认的 text-align 值,因为IE11在内的浏览器(IE11以上版本我尚未测试)都不支持 text-align:start/end 等CSS3属性值,而Chrome和FireFox浏览器均不会修改 text-align 值,因为这些浏览器的 text-align 初始值是 start ,这里大家也应该或多或少感受到了 text-align:start/end 这个新声明的作用和意义了——当 direction 值为 ltr 的时候, start 就表示 left ,当 direction 值为 rtl 的时候, start 就表示 right 。

三、CSS direction实际应用

CSS direction 可以让我们不改变DOM前后顺序的情况下,调换元素的前后顺序,在有些场景下非常有用。

下面是我真实遇到的例子:

基本上,做PC页面项目里都有一个Panel或者Dialog组件,就是弹框什么的。其中,下面会有“确定”,“取消”按钮,如下截图:

然后,具体很奇怪的,有几个Dialog,设计希望这两个按钮顺序是相反的。

如果只是上图的需求,想要改变按钮前后顺序变换其实只要使用浮动就可以了,所有按钮都 float:right :

.button { float: right; }

这个不难。但是,假如说我们的弹框按钮是居中显示的,例如,科科:

别说浮动了,飞动都满足不了需求,是不是又要求助万能的JS了,去改变DOM顺序?

别傻了,一行CSS direction:rtl 十几个字母,包你省心到家。我敢打包票,这一定是性价比最高的方法!

您可以狠狠地点击这里: CSS direction控制居中按钮顺序改变demo

当然,我们还有其他解决思路,不过兼容性嘛,咳咳~

.container, .button { transform: scaleX(-1); }

就是父级容器和按钮同时水平翻转,IE7,IE8倒是可以使用IE的翻转滤镜试试,好像是

flipX ,我以前有写过文章:“ CSS垂直翻转/水平翻转提高web页面资源重用性 ”,还好看了下,原来是 flipH

,完整写法:

filter: FlipH;

不过,滤镜内再滤镜是否支持,我就不确定了,而且我也没兴趣对这些占着茅坑不拉屎的浏览器做测试,大家有兴趣可以自己试试看。

四、结束语

实际上 direction 属性关心的少,是因为……我想了想,还是因为大家没今早看到想本文这样分析介绍 direction 的文章,会让很多小伙伴,即使眼睛瞟到了,也认为是那个嘎吱角落的上世纪淘汰的CSS属性,实际上,人才被埋没了。

CSS direction 还有一个近亲 writing-mode ,可比 direction 复杂的多,也有意思的多,争取月底前也给大家介绍下。

以上,欢迎交流!

本文为原创文章,会经常更新知识点以及修正一些错误,因此转载请保留原出处,方便溯源,避免陈旧错误知识的误导,同时有更好的阅读体验。

本文地址: http://www.zhangxinxu.com/wordpress/?p=5302

(本篇完)

  • 没有相关文章
Déclaration
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Du texte aux sites Web: la puissance de HTMLDu texte aux sites Web: la puissance de HTMLApr 13, 2025 am 12:07 AM

HTML est un langage utilisé pour créer des pages Web, définissant la structure des pages Web et le contenu via des balises et des attributs. 1) HTML organise la structure des documents via des balises, telles que. 2) Le navigateur analyse HTML pour construire le DOM et rend la page Web. 3) De nouvelles caractéristiques de HTML5, telles que, améliorez les fonctions multimédias. 4) Les erreurs courantes incluent des étiquettes non clôturées et des valeurs d'attribut non attribuées. 5) Les suggestions d'optimisation incluent l'utilisation de balises sémantiques et la réduction de la taille du fichier.

Comprendre HTML, CSS et JavaScript: un guide pour débutantComprendre HTML, CSS et JavaScript: un guide pour débutantApr 12, 2025 am 12:02 AM

WebDevelopmentReliesOnHTML, CSS, etjavascript: 1) HTMLSTRUCTURESCONTENT, 2) CSSSTYLESIT, et3) JavascriptAdddsInterActivity, Forming TheasisofmodernweBEBExperiences.

Le rôle de HTML: Structurer le contenu WebLe rôle de HTML: Structurer le contenu WebApr 11, 2025 am 12:12 AM

Le rôle de HTML est de définir la structure et le contenu d'une page Web via des balises et des attributs. 1. HTML organise le contenu via des balises telles que, ce qui le rend facile à lire et à comprendre. 2. Utilisez des balises sémantiques telles que, etc. pour améliorer l'accessibilité et le référencement. 3. Optimisation du code HTML peut améliorer la vitesse de chargement des pages Web et l'expérience utilisateur.

HTML et code: un examen plus approfondi de la terminologieHTML et code: un examen plus approfondi de la terminologieApr 10, 2025 am 09:28 AM

Htmlisaspecificypeofcodefocusedonconstructringwebcontent, tandis que "code" en général incluse les langues liés à lajavaScriptandpythonforfonctionnality.1) htmldefineswebpagestructureusingtags.2) "Code" enclueSawidererRangeFlanguageForgicandInteract "

HTML, CSS et JavaScript: outils essentiels pour les développeurs WebHTML, CSS et JavaScript: outils essentiels pour les développeurs WebApr 09, 2025 am 12:12 AM

HTML, CSS et JavaScript sont les trois piliers du développement Web. 1. HTML définit la structure de la page Web et utilise des balises telles que, etc. 2. CSS contrôle le style de page Web, en utilisant des sélecteurs et des attributs tels que la couleur, la taille de la police, etc. 3. JavaScript réalise les effets dynamiques et l'interaction, par la surveillance des événements et les opérations DOM.

Les rôles de HTML, CSS et JavaScript: responsabilités de baseLes rôles de HTML, CSS et JavaScript: responsabilités de baseApr 08, 2025 pm 07:05 PM

HTML définit la structure Web, CSS est responsable du style et de la mise en page, et JavaScript donne une interaction dynamique. Les trois exercent leurs fonctions dans le développement Web et construisent conjointement un site Web coloré.

HTML est-il facile à apprendre pour les débutants?HTML est-il facile à apprendre pour les débutants?Apr 07, 2025 am 12:11 AM

HTML convient aux débutants car il est simple et facile à apprendre et peut rapidement voir les résultats. 1) La courbe d'apprentissage de HTML est fluide et facile à démarrer. 2) Il suffit de maîtriser les balises de base pour commencer à créer des pages Web. 3) Flexibilité élevée et peut être utilisée en combinaison avec CSS et JavaScript. 4) Les ressources d'apprentissage riches et les outils modernes soutiennent le processus d'apprentissage.

Quel est un exemple d'une balise de départ dans HTML?Quel est un exemple d'une balise de départ dans HTML?Apr 06, 2025 am 12:04 AM

Anexampleofastartingtaginhtmlis, qui abinginsaparagraph.startingtagsaressentialtinhtmlastheyinitiateelements, définit les éventualités, et la faculté de réduction des pages et de la construction de la création.

See all articles

Outils d'IA chauds

Undresser.AI Undress

Undresser.AI Undress

Application basée sur l'IA pour créer des photos de nu réalistes

AI Clothes Remover

AI Clothes Remover

Outil d'IA en ligne pour supprimer les vêtements des photos.

Undress AI Tool

Undress AI Tool

Images de déshabillage gratuites

Clothoff.io

Clothoff.io

Dissolvant de vêtements AI

AI Hentai Generator

AI Hentai Generator

Générez AI Hentai gratuitement.

Article chaud

R.E.P.O. Crystals d'énergie expliqués et ce qu'ils font (cristal jaune)
3 Il y a quelques semainesBy尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Meilleurs paramètres graphiques
3 Il y a quelques semainesBy尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Comment réparer l'audio si vous n'entendez personne
3 Il y a quelques semainesBy尊渡假赌尊渡假赌尊渡假赌
WWE 2K25: Comment déverrouiller tout dans Myrise
4 Il y a quelques semainesBy尊渡假赌尊渡假赌尊渡假赌

Outils chauds

Envoyer Studio 13.0.1

Envoyer Studio 13.0.1

Puissant environnement de développement intégré PHP

Dreamweaver Mac

Dreamweaver Mac

Outils de développement Web visuel

Version Mac de WebStorm

Version Mac de WebStorm

Outils de développement JavaScript utiles

SublimeText3 version Mac

SublimeText3 version Mac

Logiciel d'édition de code au niveau de Dieu (SublimeText3)

mPDF

mPDF

mPDF est une bibliothèque PHP qui peut générer des fichiers PDF à partir de HTML encodé en UTF-8. L'auteur original, Ian Back, a écrit mPDF pour générer des fichiers PDF « à la volée » depuis son site Web et gérer différentes langues. Il est plus lent et produit des fichiers plus volumineux lors de l'utilisation de polices Unicode que les scripts originaux comme HTML2FPDF, mais prend en charge les styles CSS, etc. et présente de nombreuses améliorations. Prend en charge presque toutes les langues, y compris RTL (arabe et hébreu) ​​et CJK (chinois, japonais et coréen). Prend en charge les éléments imbriqués au niveau du bloc (tels que P, DIV),