十几个CSS高级常见技巧汇总（虚线框、三角形(1)，华为前端面试真题解析

}

p {

background-color: rgba(189, 227, 255, 0.28);

padding: 2px 5px;

}

/单行/

.single {

width: 300px;

overflow: hidden;

text-overflow: ellipsis;

white-space: nowrap;

word-break: break-all;

}

/多行/

.mutiple {

display: -webkit-box; /重点，不能用block等其他，将对象作为弹性伸缩盒子模型显示/

-webkit-box-orient: vertical; /从上到下垂直排列子元素（设置伸缩盒子的子元素排列方式）/

-webkit-line-clamp: 3; /行数，超出三行隐藏且多余的用省略号表示…/

line-clamp: 3;

word-break: break-all;

overflow: hidden;

max-width: 100%;

}

复制代码

1-3. 负边距使用技巧

规律: 左为负时，是左移，右为负时，是左拉。上下与左右类似

*{

margin:0;

padding:0;

}

.wrap{

/* 利用负值技巧进行整体移动 */

margin-left:-6px;

}

.item{

float:left;

width: 20%;

height: 300px;

border-left:6px solid #fff;

box-sizing: border-box;

}

复制代码

 

1-4. 定位同时设置方位情况

规律: 绝对定位和固定定位时，同时设置 left 和 right 等同于隐式地设置宽度

span{

border:1px solid red;

position: absolute;

left:0;

right:0;

/* 等同于设置 width:100%;display:block */

}

1