隐藏数据，但仍占有原本位置

1	visibility:hidden

将隐藏的数据显示出来

1	visibility:visible

隐藏数据，且不占用页面位置

1	display:none

子绝父相(父)：相对定位

1	position: relative

子绝父相(子)：绝对定位

1	position: absolute

文字不会被选中，使其无法被复制

1	user-select: none

框内的文字纵横居中

1	text-align: center

纵横方向同时移动

padding

正常字体

1	font-weight: normal

字体变细

1	font-weight: lighter

字体加粗

1	font-weight: bold

字体特粗

1	font-weight: bolder

自动换行，需要限定宽度

1	word-wrap: break-word;

单行文字省略，需要限定宽度

1
2
3

overflow:hidden; /* 超出隐藏 */
text-overflow:ellipsis; /* 加省略号 */
white-space:nowrap; /* 强制不换行 */

多行文字省略，需要限定宽度

display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3; /* 超出第几行后开始省略 */
overflow: hidden; /* 超出隐藏 */
word-wrap: break-word; /* 换行 */

滑动条，当宽度超出它原有大小，就会在最下面出来滑动条

1	overflow:scroll;

为图片设置圆角的水平半径和垂直半径为50%，也可以使用px进行设置

1	border-radius: 50%;

消除横向移动

1	margin-left：calc(100vw - 100%);

去除边框

1	border:none; /* border:边框 */

文章作者: 123

文章链接: https://gao5805123.github.io/123/2020/06/22/style%E5%B1%9E%E6%80%A7%E4%B8%AD%E7%9A%84%E5%B1%9E%E6%80%A7%E6%96%B9%E6%B3%95/

Web

打赏

微信
支付宝