热门标签 | 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


推荐阅读
  • 实用正则表达式有哪些
    小编给大家分享一下实用正则表达式有哪些,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下 ... [详细]
  • 深入解析CSS中的基线、行高、行内框及行框概念
    本文详细介绍了CSS布局中的关键概念,包括基线、行高、行内框和行框等,以及它们之间的关系。通过具体示例,帮助开发者更好地理解和应用这些概念,提升网页布局的精确性和美观度。 ... [详细]
  • 2023年1月28日网络安全热点
    涵盖最新的网络安全动态,包括OpenSSH和WordPress的安全更新、VirtualBox提权漏洞、以及谷歌推出的新证书验证机制等内容。 ... [详细]
  • 汇总了2023年7月7日最新的网络安全新闻和技术更新,包括最新的漏洞披露、工具发布及安全事件。 ... [详细]
  • 2018-2019学年第六周《Java数据结构与算法》学习总结
    本文总结了2018-2019学年第六周在《Java数据结构与算法》课程中的学习内容,重点介绍了非线性数据结构——树的相关知识及其应用。 ... [详细]
  • Coursera ML 机器学习
    2019独角兽企业重金招聘Python工程师标准线性回归算法计算过程CostFunction梯度下降算法多变量回归![选择特征](https:static.oschina.n ... [详细]
  • 本题来自WC2014,题目编号为BZOJ3435、洛谷P3920和UOJ55。该问题描述了一棵不断生长的带权树及其节点上小精灵之间的友谊关系,要求实时计算每次新增节点后树上所有可能的朋友对数。 ... [详细]
  • 简化报表生成:EasyReport工具的全面解析
    本文详细介绍了EasyReport,一个易于使用的开源Web报表工具。该工具支持Hadoop、HBase及多种关系型数据库,能够将SQL查询结果转换为HTML表格,并提供Excel导出、图表显示和表头冻结等功能。 ... [详细]
  • 深入解析Java虚拟机(JVM)架构与原理
    本文旨在为读者提供对Java虚拟机(JVM)的全面理解,涵盖其主要组成部分、工作原理及其在不同平台上的实现。通过详细探讨JVM的结构和内部机制,帮助开发者更好地掌握Java编程的核心技术。 ... [详细]
  • 本文探讨了为何相同的HTTP请求在两台不同操作系统(Windows与Ubuntu)的机器上会分别返回200 OK和429 Too Many Requests的状态码。我们将分析代码、环境差异及可能的影响因素。 ... [详细]
  • 随着阿里云万网推出的一系列免费主机活动,越来越多的用户开始尝试构建自己的个人网站。然而,对于新接触这项服务的朋友来说,找到正确的申请入口和了解详细的建站步骤可能并不容易。本文将详细介绍如何在阿里云万网平台上成功申请免费主机,并利用WordPress快速搭建个人网站。 ... [详细]
  • 日期:2013年3月19日 来源:GBin1.com 对于希望启动并运行首个网站的新手而言,选择一个合适的CMS或免费平台是至关重要的第一步。本文将为您介绍一系列关于WordPress的设计开发资源和手册,帮助您迅速掌握网站构建技巧。 ... [详细]
  • 华为云openEuler环境下的Web应用部署实践
    本文详细记录了在华为云openEuler系统上进行Web应用部署的具体步骤,包括配置yum源、安装Apache、MariaDB、PHP及其相关组件,并完成WordPress的安装与配置过程。 ... [详细]
  • 本文提供了处理WordPress网站中出现过多重定向问题的方法,包括检查DNS配置、安装SSL证书以及解决数据库连接错误等步骤。 ... [详细]
  • 搭建个人博客:WordPress安装详解
    计划建立个人博客来分享生活与工作的见解和经验,选择WordPress是因为它专为博客设计,功能强大且易于使用。 ... [详细]
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社区 版权所有