前端杂乱知识

居中对齐

盒子内容(单指文本内容)水平居中对齐：text-algin: center;

盒子内容垂直居中对齐：内容行高等于盒子高度；line-height == width

----------------------------------------------------------------------------------------------

盒子水平居中对齐：margin: 0 auto;      margin:auto;     margin-left:auto;margin-right:auto;

图片与文字垂直对齐方式：vertical-align : baseline |top |middle |bottom 

inline-bloak:行内块，默认和文字基线对齐，要想调节与文字居中对齐，vatical-algin:middle; 再调margin即可。

 

定位

定位的子盒子的父盒子必须有宽高

 

行内块和行内块之间有缝隙，父盒子宽度确定的情况下，子盒子宽度之和+缝隙之和>父盒子宽度，后面的子盒子会被挤到下一行中去

子盒子高度大于父盒子高度，父盒子之后的盒子跟着父盒子排列，不会跟着子盒子排列，子盒子被压住或者压住后面的盒子

 

文字溢出隐藏

单行文字溢出隐藏

white-space

white-space设置或检索对象内文本显示方式。通常我们使用于强制一行显示内容

normal : 　默认处理方式 nowrap : 　强制在同一行内显示所有文本，直到文本结束或者遭遇br标签对象才换行。

可以处理中文

text-overflow 文字溢出

text-overflow : clip | ellipsis

设置或检索是否使用一个省略标记（...）标示对象内文本的溢出

clip : 　不显示省略标记（...），而是简单的裁切

ellipsis : 　当对象内文本溢出时显示省略标记（...）

注意一定要首先强制一行内显示，再次和overflow属性 搭配使用

选择器{
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}

　多行文字溢出隐藏

-webkit-line-clamp 是一个 不规范的属性（unsupported WebKit property），它没有出现在 CSS 规范草案中。

限制在一个块元素显示的文本的行数。 为了实现该效果，它需要组合其他外来的WebKit属性。常见结合属性：

• display: -webkit-box; 必须结合的属性 ，将对象作为弹性伸缩盒子模型显示 。
• -webkit-box-orient 必须结合的属性 ，设置或检索伸缩盒对象的子元素的排列方式 。
• text-overflow，可以用来多行文本的情况下，用省略号“...”隐藏超出范围的文本 。

选择器{
  overflow : hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;   /*数字代表第几行隐藏*/
  -webkit-box-orient: vertical;  
}

　

转载于:https://www.cnblogs.com/liu1275271818/p/10668795.html