display属性
display属性可设置值有：block,inline,inline-block,none.
- block:让行内标签变成块级标签。块级标签默认值。
- inline:让块级标签变成行内标签。
- inline-block:可以将任意标签变为行内块级标签。
- none:不设置。
position 定位属性
- relative：相对定位
- 不影响元素本身特性（无论区块元素还是内联元素会保留其原本特性）
- 不会使元素脱离文档流（元素原本位置会被保留，即改变位置也不会占用新位置）
- 没有定位偏移量时对元素无影响（相对于自身原本位置进行偏移）
- 相对定位一般配合绝对定位使用（将父元素设置相对定位，使其相对于父元素偏移）
- absolute;绝对定位
生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。注意：原来的位置不会保留下来
- fixed;固定定位
元素的位置通过 "left", "top", "right" 以及 - "bottom" 属性进行规定。
- static——默认值。没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）
- inherit——规定应该从父元素继承 position 属性的值。
float属性
用于设置控件浮动于界面，浮动元素会生成一个块级框，而不论它本身是何种元素。
注：loat 在绝对定位中不起作用
- left 元素向左浮动
- right 元素向右浮动。
- none 默认值。元素不浮动，并会显示在其在文本中出现的位置。
- inherit 规定应该从父元素继承 float 属性的值。
justify-conten（在父元素设置）
设置弹性盒子元素在主轴（横轴）的对齐方式。
- flex-start: 弹性盒子元素将向行起始位置对齐。第一个元素与左起始边界对齐，后面的元素接着第一个元素进行排列。
- flex-end: 弹性盒子元素将向行结束位置对齐。整体靠着行结束的位置排列。
- center：整体居中显示。
- space-between: 弹性盒子元素均匀分布。第一个元素的边界与行的主起始位置的边界对齐，同时最后一个元素的边界与行的主结束位置的边距对齐，而剩余的伸缩盒项目则平均分布，并确保两两之间的空白空间相等。
- space-around: 弹性盒子元素均匀分布。两端保留子元素与子元素之间间距大小的一半。
align-items, align-self
设置弹性盒子元素在垂直方向上（纵轴）的对齐方式。其中align-items属性用于弹性容器，而align-self用于弹性项目。
- align-items: flex-start | flex-end | center | baseline | stretch;
- align-self: auto | flex-start | flex-end | center | baseline | stretch;
clear：该属性指出不允许有浮动对象的边
- none:允许两边可以浮动。
- left：不允许左边有浮动对象。
- right：不允许右边有浮动对像。
- both：两边都不允许浮动。
Overflow 处理溢出内容的方式
- visible：对溢出内容不做处理，内容可能会超出容器。
- hidden：隐藏溢出容器的内容且不会出现滚动条。
- scroll：隐藏溢出容器的内容，溢出的内容将以卷动滚动条的方式呈现。
- auto：当内容没有溢出容器的时候不出现滚动条，当内容溢出容器的时候出现滚动条。按需出现。
overflow-x：横向处理溢出内容的方式(取值：visible，hidden，scroll，auto。)
overflow-y：纵向处理溢出内容的方式(取值：visible，hidden，scroll，auto。)
visibility：是否显示对象
- visible：设置可见。
- hidden：设置隐藏（隐藏了也占位置）。
- collapse：隐藏表格的行或者列。
设置控件水平居中
行内标签和行内块级标签：在父控件中设置text-align:center.
<view class="item-container">
<text class="item-text">布局</text>
</view>
.item-container {
width: 300rpx;
height: 200rpx;
text-align: center;
background-color: darkgoldenrod;
}
块级标签 在子控件自身设置margin：0 auto。
<view class="item-container">
<view class="item-child-container"></view>
</view>
.item-container {
width: 300rpx;
height: 200rpx;
background-color: darkgoldenrod;
}
.item-child-container {
width: 50rpx;
height: 50rpx;
margin: 0 auto;
background-color: darkgreen;
}
设置控件垂直居中
行内标签和行内块级标签：只需将line-height 的值设置为父控件的高度。
.item-container {
width: 300rpx;
height: 200rpx;
background-color: darkgoldenrod;
}
.item-text {
line-height: 200rpx;
}
块级标签：
- 第一种：可将块级标签转为行内块级，然后同上
- 第二种：用position，然后left=50%，top=50%，然后设置平移属性transform: translate(-50%, -50%) 向左、向上平移自身的50%；
.item-child-container {
width: 50rpx;
height: 50rpx;
background-color: darkgreen;
position: relative;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
- 第三种：通过align-items: center; justify-content: center;设置子块在父块和主轴（横轴）居中
.item-container {
width: 300rpx;
height: 200rpx;
background-color: darkgoldenrod;
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
}
文本两行显示，超出省略号表示
.item-text {
text-overflow: -o-ellipsis-lastline;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
文本一行显示，超出省略号表示
.item-text-line {
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
word-break: break-all;
}
网友评论