热门标签 | HotTags
当前位置:  开发笔记 > 编程语言 > 正文

深入解读张鑫旭文章,探索全新CSS属性

近日,我仔细研读了张鑫旭关于知乎上十个热门问题的文章(http://www.zhangxinxu.com/wordpress/2017/06/ten-questions-about-css/)。这篇文章不仅详细解答了这些常见问题,还深入探讨了一些全新的CSS属性,为前端开发者提供了宝贵的见解和实用技巧。通过张鑫旭的专业解析,读者可以更好地理解和应用这些新特性,提升网页设计和开发的效率与质量。

昨天有幸拜读到张鑫旭写的就关于知乎10个问题的一篇文章(http://www.zhangxinxu.com/wordpress/2017/06/ten-question-about-frontend-zhihu/),感受颇深,也深深感受到自己的无知,

张大神主要致力于研究css和html,现在就总结2个张大神在文章中提到的两点:

1、unicode-bidi;

当看到这个属性的时候,真的是一脸懵,自己之前完全没有看到过,所以现在就了解一下,查unicode-bidi时就看到了关于direction属性,

direction:

direction属性有三个值

  1. inherit 使用父元素的设置
  2. ltr 默认值,left to right,从左到右
  3. rtl right to left 从右到左
    如上图所示,direction:rtl 和 text-align: right;的区别

    关于unicode-bidi的属性:

 

 

 2、vertical-align;

 

 

baseline默认。元素放置在父元素的基线上。
sub垂直对齐文本的下标。
super垂直对齐文本的上标
top把元素的顶端与行中最高元素的顶端对齐
text-top把元素的顶端与父元素字体的顶端对齐
middle把此元素放置在父元素的中部。
bottom把元素的顶端与行中最低的元素的顶端对齐。
text-bottom把元素的底端与父元素字体的底端对齐。
length 
%使用 "line-height" 属性的百分比值来排列此元素。允许使用负值。

使用百分比,改变的是字与图片的距离,图片的位置不动,负值代表字向上,正值代表向下移动


转载于:https://www.cnblogs.com/xumqfaith/p/7053729.html


推荐阅读
  • 本文详细介绍了 jQuery 的入门知识与实战应用,首先讲解了如何引入 jQuery 库及入口函数的使用方法,为初学者提供了清晰的操作指南。此外,还深入探讨了 jQuery 在实际项目中的多种应用场景,包括 DOM 操作、事件处理和 AJAX 请求等,帮助读者全面掌握 jQuery 的核心功能与技巧。 ... [详细]
  • 开发笔记:深入解析Android自定义控件——Button的72种变形技巧
    开发笔记:深入解析Android自定义控件——Button的72种变形技巧 ... [详细]
  • 一、echo设置字体颜色表示方法echo–e“\033[3#;4#;#语句\033[0m”3#,代表控制前景色4#,代表控制背景色#,代表字符格式(加粗、下划线、闪烁等)3#中的# ... [详细]
  • 在 Angular Google Maps 中实现图片嵌入信息窗口的功能,可以通过使用 `@agm/core` 库来实现。该库提供了丰富的 API 和组件,使得开发者可以轻松地在地图上的信息窗口中嵌入图片。本文将详细介绍如何配置和使用这些组件,以实现动态加载和显示图片的功能。此外,还将探讨一些常见的问题和解决方案,帮助开发者更好地集成这一功能。 ... [详细]
  • 本文深入探讨了CGLIB BeanCopier在Bean对象复制中的应用及其优化技巧。相较于Spring的BeanUtils和Apache的BeanUtils,CGLIB BeanCopier在性能上具有显著优势。通过详细分析其内部机制和使用场景,本文提供了多种优化方法,帮助开发者在实际项目中更高效地利用这一工具。此外,文章还讨论了CGLIB BeanCopier在复杂对象结构和大规模数据处理中的表现,为读者提供了实用的参考和建议。 ... [详细]
  • 在处理遗留数据库的映射时,反向工程是一个重要的初始步骤。由于实体模式已经在数据库系统中存在,Hibernate 提供了自动化工具来简化这一过程,帮助开发人员快速生成持久化类和映射文件。通过反向工程,可以显著提高开发效率并减少手动配置的错误。此外,该工具还支持对现有数据库结构进行分析,自动生成符合 Hibernate 规范的配置文件,从而加速项目的启动和开发周期。 ... [详细]
  • 利用Python与Android进行高效移动应用开发
    通过结合Python和Android,可以实现高效的移动应用开发。首先,需要安装Scripting Layer for Android (SL4A),这是一个开源项目,旨在为Android系统提供脚本语言支持。SL4A不仅简化了开发流程,还允许开发者使用Python等高级语言编写脚本,从而提高开发效率和代码可维护性。此外,SL4A还支持多种其他脚本语言,进一步扩展了其应用范围。通过这种方式,开发者可以快速构建功能丰富的移动应用,同时保持较高的灵活性和可扩展性。 ... [详细]
  • 在处理大图片时,PHP 常常会遇到内存溢出的问题。为了避免这种情况,建议避免使用 `setImageBitmap`、`setImageResource` 或 `BitmapFactory.decodeResource` 等方法直接加载大图。这些函数在处理大图片时会消耗大量内存,导致应用崩溃。推荐采用分块处理、图像压缩和缓存机制等策略,以优化内存使用并提高处理效率。此外,可以考虑使用第三方库如 ImageMagick 或 GD 库来处理大图片,这些库提供了更高效的内存管理和图像处理功能。 ... [详细]
  • 在今天的实践中,我深入学习了网页图像抓取技术,通过编写爬虫程序批量获取网站上的图片资源。具体来说,我选择了一个包含大量高质量图片的网站作为练习对象,并成功实现了将这些图片批量下载到本地存储。这一过程不仅提升了我对爬虫技术的理解,还增强了我的编程能力。 ... [详细]
  • 本文提供了 RabbitMQ 3.7 的快速上手指南,详细介绍了环境搭建、生产者和消费者的配置与使用。通过官方教程的指引,读者可以轻松完成初步测试和实践,快速掌握 RabbitMQ 的核心功能和基本操作。 ... [详细]
  • 如何在Linux中配置环境变量:命令与脚本详解
    请关注本头条号,每天坚持更新原创干货技术文章。当您在Linux命令行上键入命令时,您实际是在告诉shell运行指定名称的可执行文件。在Linux中,这些可执行程序通常位于系统上的几 ... [详细]
  • iOS开发进阶指南:第十五篇深入解析
    iOS开发进阶指南:第十五篇深入解析 ... [详细]
  • 在使用Block时,正确的声明方法和确保线程安全是至关重要的。为了保证Block在堆中分配,应使用`copy`修饰符进行声明,因为栈中的Block与栈的生命周期绑定,容易导致内存问题。此外,还需注意Block捕获外部变量的行为,以避免潜在的循环引用和数据不一致问题。建议深入研究相关文档,以掌握更多高级技巧和最佳实践。 ... [详细]
  • 技术分享:深入解析GestureDetector手势识别机制
    技术分享:深入解析GestureDetector手势识别机制 ... [详细]
  • 深入浅出解读奇异值分解,助你轻松掌握核心概念 ... [详细]
author-avatar
热血洒在青春中
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有