- 前言
这个 CSS 是围绕流来构建的.在 CSS2的时代,CSS 的定位都是基于方向的,而不是基于流的.基于方向虽然符合现实世界的认知,这会导致很多 CSS 的概念模糊而且难懂.通过下面的例子来讲解下 CSS3 和 CSS2 在定位方向上的不同
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
p {
direction: rtl;
}
/* button {
margin-right: 10px;
} */
/* 取消按钮的右侧有空白,需要消除空格 */
button {
margin-inline-end: 10px;
/*
这个属性需要与 p 标签的direction想结合
1. 现在direction的方向是 rtl, 则代表现在的方向是从右到左
2. margin-inline-end 表示:从 buttom 的结束位置开始绘制 10px 像素的空格
3. 这时候的 margin-inline-end和 margin-left 是一样的
*/
}
</style>
</head>
<body>
<p>
<button>确定</button>
<button>取消</button>
</p>
</body>
</html>
CSS 逻辑属性有限的使用情景
CSS 逻辑属性需要配合 writing-mode direction text-orientation使用才有意思.CSS 中还有其他一些属性也可以改变 DOM 的呈现方式,但是需要注意的是,这些属性值和 CSS 逻辑属性之间没有任何的关系
使用逻辑位置direction 模拟一个聊天
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
p {
margin: 0;
padding: 0;
}
.item {
display: flex;
flex-direction: row;
}
.ava {
width: 50px;
height: 50px;
border: solid currentcolor 1px;
background: deeppink;
border-radius: 50%;
}
.item[data-self] {
direction: rtl;
}
</style>
</head>
<body>
<div class="list">
<section class="item">
<div class="ava"></div>
<div class="content">
<p>滴滴</p>
<p>都开完看看看得开去端口情况我的开启我看到情况我</p>
</div>
</section>
<section class="item">
<div class="ava"></div>
<div class="content">
<p>滴滴</p>
<p>都开完看看看得开去端口情况我的开启我看到情况我</p>
</div>
</section>
<section class="item">
<div class="ava"></div>
<div class="content">
<p>滴滴</p>
<p>都开完看看看得开去端口情况我的开启我看到情况我</p>
</div>
</section>
<section class="item">
<div class="ava"></div>
<div class="content">
<p>滴滴</p>
<p>都开完看看看得开去端口情况我的开启我看到情况我</p>
</div>
</section>
<section class="item" data-self>
<div class="ava"></div>
<div class="content">
<p>滴滴</p>
<p>都开完看看看得开去端口情况我的开启我看到情况我</p>
</div>
</section>
</div>
</body>
</html>
inline-block与 start/end 元素
CSS 逻辑属性都是围绕inline-block与 start/end来展开的.下面以 margin 的属性为例子来说,margin的方位和 margin 属性存在着相互映射的关系
margin-left ->margin-inline-start
margin-right->margin-line-end
margin-top->margin-block-start
margin-bottom->margin-block-end
其中 inline/block表示方向 start/end 表示起始与结束位置,起始和结束位置受到 direction 的影响
width/height 属性与 inline-size/block-size
默认情况下,width 属性对应的是 inline-size.CSS2和 CSS 的 width 属性也存在着相互映射的关系
min-inline-size ->min-width
min-block-size->min-height
max-inline-size->max-width
max-block-size->max-height
对于 margin/padding/border都存在这种相互映射的关系
test-align 属性
对 text-align属性而言,演变的不是属性而是属性值.在绝对定位中使用的 left,top,bottom.right在 CSS2 中都是对应的 inset 开头
inset-inline-start->left
inset-inline-end->right
inset-block-start->top
inset-block-end->bottom
也可以单独设置 inset 缩写属性,inset 缩写属性是 left,right,top,bottom的缩写.
网友评论