【css技巧(一)】省略號，清浮動，三角符等~

就想到這麼多，歡迎補充哈，css編寫中常用封裝樣式~

 

一、文本溢出省略號

1. 容器寬度：width：value；
2. 強制文本在一行內顯示:white-space：nowrap;
3. 溢出內容爲隱藏：overflow：hidden；
4. 溢出文本顯示省略號：text-overflow：ellipsis;

 

 

二、寬高自適應百分比

1. html,body{height:100%;}
2. 內容板塊寬度統統父集百分比，高度撐開；
3. line-height：是字體百分比。margin,padding:佔容器寬度百分比

 

三、banner圖自適應居中

1. banner img
2. {position:absolute;top:50%;left:50%;margin-top:-高一半；margin-left：-寬一半;}
3. {position:absolute;top:50%;left:50%;transform:translate(寬高一半)}
4. {position:absolute;top:0;bottom:0;ringht:0;left:0;margin: auto;}
5. {父元素；display:flex;justify-content:center;align-items:center;}

 

 

四、高度塌陷

1. 給父元素添加聲明overflow:hidden;
2. 在浮動元素下方添加空div：clear:both;height:0;overflow:hidden;
3. 萬能清除:after{content:“”; display:block;clear:both;overflow:hidden; }

五、css三角符

1、普通三角符號

span{disply:block;width:0;height:0;border-width:1px;border-style:solid;border-color:#000 transparent transparent ransparent}

2、直角三角符號

span{ width: 0; height: 0; border-bottom: 100px solid red;border-left: 100px solid transparent;}