css布局属性与合成属性_如何使用CSS逻辑属性控制布局
css布局属性与合成属性
CSS逻辑属性定义了一种处理布局的新方法。 他们的主要目标是帮助开发人员支持不同的书写系统,例如从右到左(RTL)和垂直显示的脚本。 这些新功能可以通过逻辑属性而不是物理属性来控制布局。 例如,具有逻辑性,你可以描述的start
和end
的元素,而不是它的left
和right
边界。 看到不同?
即使您不使用非LTR语言和多方向网站,也值得熟悉新规范。 逻辑属性将有助于建立一种新的哲学,即使用CSS创建更灵活的布局。
浏览器支持
由于浏览器支持仍有很大的改进空间,因此逻辑属性尚未投入生产。 但是,较新版本的Firefox,Chrome和Safari已经支持它们,因此您当然可以开始进行测试。
较早版本的Firefox,Chrome和Safari也提供了-moz-
和-webkit-
前缀的部分支持。 当前,Internet Explorer和Edge根本不支持该功能。
CSS中的内容方向
英文使用从左到右(LTR)和从上到下(tb)的水平脚本(拉丁文字)书写。 但是,并非每种语言都是这样。 有许多使用从右到左(RTL)脚本的语言示例,例如阿拉伯语和希伯来语,其他可以垂直显示的语言,例如日语,中文和蒙古语。
语言没有方向。 脚本具有书写方向,因此用特定脚本书写的语言将按照该脚本的方向进行书写。” – W3C
在CSS中,您可以使用direction
和writing-mode
属性在页面上设置内容方向。
1.写作方式
writing-mode
属性定义了块内容(如段落)在屏幕上的流动方式。 它可以采用三个值:
horizontal-tb
(默认):水平内容,从上到下;vertical-lr
:垂直内容,从左到右;vertical-rl
:垂直内容,从右到左。
2.方向
direction
属性定义内联内容(例如段落中的字符)在屏幕上的流动方式。 它可以采用两个值:
ltr
(默认):从左到右rtl
:从右到左
CSS逻辑属性会自动将布局映射到使用direction
和writing-mode
属性设置的内容方向。
一种新的布局方法
1. Flexbox
逻辑布局的新方法始于flexbox规范。 Flexbox并未考虑左侧,右侧,顶部和底部等物理尺寸。 它使用诸如flex-start
和flex-end
类的值,这些值依赖于主轴和交叉轴的方向。
flex项目是水平还是垂直流动还取决于您可以使用flex-direction
属性定义的两个轴的位置。 总而言之,“开始”和“结束”之类的概念在flexbox中完全是相对的,可以轻松翻转。
2. CSS网格
CSS Grid遵循相同的逻辑。 CSS网格也不知道左,右,上和下。 它沿着两个非层次结构轴按行和列排列项目。
您可以使用grid-template-areas
属性使用诸如grid-row-start
属性或使用命名网格区域来定义网格项的位置。 与flexbox相似,CSS Grid也具有逻辑属性,而不是物理属性。
3.逻辑属性
CSS逻辑属性将这种新方法带入了新的高度。 它们改变了我们定义常用属性(例如margin
, padding
, width
和height
。
物理尺寸与逻辑尺寸
顶部,底部,左侧和右侧是屏幕的物理尺寸。 当前,CSS将属性映射到这些物理方向。 但是,当您拥有RTL网站时,您不想从左侧开始书写。 例如,如果要在文本之前添加页边距,则需要使用margin-right
属性而不是LTR页面上要使用的margin-left
属性。
而且,这只是设置一个内容框的边距。 如果要向整个站点添加RTL支持,则必须重写整个CSS或使用Sass或其他CSS预处理器执行转换。
逻辑属性会更改此操作方式。 代替垂直和水平尺寸的,他们使用块和内联尺寸:
- 块尺寸是页面上段落等块项目的布局方式(从上到下用英语)。
- 内联维度是段落中的内联项目(例如,字符)在页面上的布局方式(英语,从左到右)。
以下是逻辑尺寸映射到英语和其他LTR /水平TB语言的物理尺寸的方式:
逻辑尺寸 | 物理尺寸(英语) |
---|---|
块开始 | 最佳 |
块端 | 底部 |
内联启动 | 剩下 |
内联端 | 对 |
在阿拉伯语的RTL / horizontal-tb脚本中,逻辑到物理的映射如下所示:
逻辑尺寸 | 物理尺寸(阿拉伯文字) |
---|---|
块开始 | 最佳 |
块端 | 底部 |
内联启动 | 对 |
内联端 | 剩下 |
而且,当以tategaki(縦书き)样式编写时,这就是逻辑尺寸如何与诸如日语的vertical-rl脚本一起工作的方式:
逻辑尺寸 | 物理尺寸(日语) |
---|---|
块开始 | 对 |
块端 | 剩下 |
内联启动 | 最佳 |
内联端 | 底部 |
如您所见,CSS逻辑属性将使开发人员可以随意改变布局。
CSS逻辑属性
CSS逻辑属性当前由1级规范 (编辑者的草案;公开讨论提供)定义。
在下面,您可以找到最重要的逻辑属性的示例。 它们是常用物理属性(如margin
和float
的逻辑等效项。 如果您对逻辑属性的完整列表感兴趣,请参阅 MDN的参考指南 。
1.文字对齐
在支持CSS逻辑属性的浏览器中,可以将text-align
属性与start
和end
值一起使用。 在英语和其他显示为LTR的语言中, start
等于left
; end
等于right
。
在阿拉伯语这样的RTL示例中,它的工作方式相反: start
等于right
, end
等于left
。
.align-start {
/* Physical property | English */
text-align: left;
/* Logical property */
text-align: start;
}
.align-end {
/* Physical property | English */
text-align: right;
/* Logical property */
text-align: end;
}
在下面的演示中,如果更改页面的direction
或writing-mode
,则可以测试text-align
如何与逻辑属性一起工作:
2.保证金,填充,边框
您还可以使用逻辑属性定义margin
, padding
和border
。 您需要使用-inline-start
后缀来指示内联尺寸的开始 ,该尺寸以英语和其他LTR / tb语言left
。 同样, -inline-end
后缀用于内联维的结尾 ,这在英语网站上是right
。
-block-start
后缀用于块尺寸的开始 (英语: top
,而-block-end
用于块尺寸的结尾 (英语): bottom
。
.add-border {
/* Physical properties | English */
border-left: 0.625rem red solid;
border-top: 0.625rem blue solid;
border-right: 0.625rem purple solid;
border-bottom: 0.625rem green solid;
/* Logical properties */
border-inline-start: 0.5rem red solid;
border-block-start: 0.5rem blue solid;
border-inline-end: 0.5rem purple solid;
border-block-end: 0.5rem green solid;
}
.add-margin {
/* Physical properties | English */
margin-left: 0.25rem;
margin-top: 0.5rem;
margin-right: 0.75rem;
margin-bottom: 1rem;
/* Logical properties */
margin-inline-start: 0.25rem;
margin-block-start: 0.5rem;
margin-inline-end: 0.75rem;
margin-block-end: 1rem;
}
.add-padding {
/* Physical properties | English */
padding-left: 1.25rem;
padding-top: 1.5rem;
padding-right: 1.75rem;
padding-bottom: 2rem;
/* Logical properties */
padding-inline-start: 1.25rem;
padding-block-start: 1.5rem;
padding-inline-end: 1.75rem;
padding-block-end: 2rem;
}
在下面,您可以测试属于border
属性的逻辑属性。
请注意,您还可以使用逻辑上等价的长边框属性。 例如, border-inline-start-color
(而不是border-left-color
)也是有效的逻辑属性。
您可能已经注意到,这里缺少一些东西。 最有可能的是,您经常使用margin
, padding
和border
速记方式,而不是padding-top
这类的速记方式。 逻辑属性如何处理这些速记? 目前,他们根本不处理它们。
在积极讨论中,这些简写的逻辑等效仍然是一个悬而未决的问题。 将来会有一个解决方案,但是,现在,您需要使用逻辑边距,填充和边框的长期属性。 有关更多信息,请参见CSS Working Group的GitHub存储库中的Issue 1282 。
3.浮动
您还可以使用逻辑属性定义浮点数。 在LTR脚本中, inline-start
等于left
, inline-end
等于right
。 在RTL语言中,它是相反发生的,因为内联尺寸在屏幕右侧开始。
.float-inline-start {
/* Physical property | English */
float: left;
/* Logical property */
float: inline-start;
}
.float-inline-end {
/* Physical property | English */
float: right;
/* Logical property */
float: inline-end;
}
您可以在下面的演示中测试逻辑浮点数:
4.宽度和高度
大小设置属性(即width
和height
)也具有它们的逻辑等效项。 在自上而下的编写脚本中, inline-size
等于width
,因为这是内联元素(例如,段落中的字符)在屏幕上流动的尺寸。 并且, block-size
等于height
,因为这是块元素(例如,段落)在其中流动的尺寸。
在垂直书写脚本中, height
是内联尺寸( inline-size
),因为字符是垂直流动的; width
是块尺寸( block-size
),因为段落是水平流动的。
如下所示, max-width
, max-height
, min-width
和min-height
也具有自己的逻辑属性。
.add-dimensions {
/* Physical property | English */
width: 600px;
height: 200px;
/* Logical property */
inline-size: 600px;
block-size: 200px;
}
.max-dimensions {
/* Physical property | English */
max-width: 100%;
max-height: 300px;
/* Logical property */
max-inline-size: 100%;
max-block-size: 300px;
}
.min-dimensions {
/* Physical property | English */
min-width: 50%;
min-height: 200px;
/* Logical property */
min-inline-size: 50%;
min-block-size: 200px;
}
在下面的演示中,您可以尝试inline-size
和block-size
属性如何在不同的方向和写入模式下工作:
5.位置
您也可以使用逻辑属性在屏幕上放置元素。 逻辑位置替换物理的top
, left
, bottom
和right
属性。
块尺寸的起点(英语为top
)由inset-block-start
逻辑属性定义。 同样,内联尺寸的起点(英文left
)由inset-inline-start
属性定义。
逻辑位置也有一个很酷的速记属性: inset
,它紧跟在
inset-block-start
inset-inline-start
,inset-block-end
inset-inline-end
订购。
.add-position {
/* Physical properties | English */
top: 0;
left: 100px;
bottom: 200px;
right: 300px;
/* Logical properties | Longhand */
inset-block-start: 0;
inset-inline-start: 100px;
inset-block-end: 200px;
inset-inline-end: 300px
/* Logical properties | Shorthand */
inset: 0 100px 200px 300px;
}
下面的演示使用inset-block-start
和inset-inline-start
属性(分别用英语top
和left
)将div粘贴到块轴和内联轴inset-block-start
:
结论
逻辑属性显然是逻辑上和方便的,但是要适应它们并不容易,因为它们需要完全不同的思维方式。 无疑,对于需要支持RTL和/或垂直语言脚本的开发人员来说,它们将是一个巨大的胜利。
用内联和块尺寸而不是物理方向来思考也将改变我们对布局的思考方式。 我们希望这种新方法将来也会带来一些有趣的布局和多方向的网站。
翻译自: https://webdesign.tutsplus.com/tutorials/how-to-use-css-logical-properties--cms-33024
css布局属性与合成属性
css布局属性与合成属性_如何使用CSS逻辑属性控制布局相关推荐
- css 设置表格右边有图片_我写CSS常用的方法
在这里想与你分享一个由各大CSS网站总结推荐的20个有用的规则和实践经验集合.有一些是面向CSS初学者的,有一些知识点是进阶型的.希望每个人通过这篇文章都能学到对自己有用的知识. 1.注意外边距折叠 ...
- css使两个盒子并列_前端学习CSS
一 CSS CSS是Cascading Style Sheets的缩写,层叠样式表,用来控制网页数据的显示,可以使网页的显示与数据内容分离. 二 引入方式 (1)行内式:在标记的style属性中设置C ...
- css animation动画完成后隐藏_如何使用CSS实现旋转地球动画效果
旋转地球功能实现主要借助于CSS动画效果完成,通过移动地图背景图层,云彩图层等,在视觉上呈现出旋转地球效果.旋转地球最终实现效果如下图所示: 旋转地球效果展示 设计思路与核心技术 旋转地球效果实现主要 ...
- css div撑满窗口高度_如何使用CSS将div的高度设置为窗口的100%?
css div撑满窗口高度 Introduction: 介绍: Hello there developers! Well, certainly if you are reading this arti ...
- JAVA布局管理器导包_在 Java 中,要使用布局管理器,必须导入下列( )包。_计算机网络基础答案_学小易找答案...
[单选题]详图索引符号中的分子编号4代表( ). [单选题]MCS - 51 单片机的 CPU 主要的组成部分为( ) [判断题]路由器工作在物理层,其实现路径选择和寻址的功能.( ); [单选题]禅 ...
- 属性值动态调整_【第1603期】CSS 自定义属性:使用篇
前言 好的文章值得多看两眼.今日早读文章由@kmokidd翻译分享. 正文从这开始-- 可读性更高的 CSS 代码 在读过 [第1596期]CSS 自定义属性:基础篇后,我们可以开始着手优化代码了,通 ...
- css左右布局代码_如何使用CSS位置来布局网站(带有示例代码)
css左右布局代码 Using CSS position to layout elements on your website can be hard to figure out. What's th ...
- css grid布局_如何使用CSS Grid重新创建Medium的文章布局
css grid布局 When people think of CSS Grid they normally envision image grid layouts and full web page ...
- CSS浏览器兼容性的4个解决方案:浏览器CSS样式初始化、浏览器私有属性,CSS hack语法和自动化插件...
前端是一个苦逼的职业,不仅因为技术更新快,而且要会的东西实在太多了(如果全写出来,那真是一箩筐),更让人头疼的是,还要面临各种适配.兼容性问题. 一直以来都是头痛医头脚痛医脚,没有进行系统的梳理,整个 ...
最新文章
- 行业盛会!2018中国人体微生物组大会
- LeetCode Scramble String
- v-for中为什么要有key属性
- PHP JSON 操作总结
- 网络爬虫--25.【selenium实战】实现拉勾网爬虫之--selenium获取数据
- 基于机器学习的网络安全态势感知
- 融于心而表于行 之 程序的执行问题
- spring源码分析第四天------springmvc核心原理及源码分析
- cxf开发基于web的webservice项目(转载)
- bcp大容量复制实用工具_运行中的BCP(大容量复制程序)命令
- bzoj_3529 数表
- 使用stress进行压力测试
- html如何将图片截成圆形图片,CSS如何显示圆形图片?如何将图片变为圆形
- java接入支付宝支付api
- CAPM资产定价模型
- Upload手动上传文件
- Nativefier把网页打包成exe
- 用原生JS实现网页调用系统自带的分享功能
- JavaScript Array方法
- 市场疲软谁能跨越周期,复苏之后谁将胜者为王?