css經常使用技巧

1 文本縮進: <text>設置沒有效果..<view>設置有效果

text-indent:50px;

2  配置整個頁面的背景色css關鍵代碼

.body {

  width: 100%;

  height: 100%;

  position: fixed;

  top: 0;

  left: 0;

  background-color: #EFEFEF;

}

3 關於right屬性無效的緣由：right屬性只有在position是absolute的狀況下才有效，而默認的position值是static，right屬性是無效的。建議能不使用right就不要使用right屬性。

4 設置位置在距離右側多遠距離:注: position:要設置成absolute

.choseView image {

    position: absolute;

    top: 46rpx;

    right: 30rpx;

    display: inline-block;

    width: 17rpx;

    height: 30rpx;

}

5 強制不換行

white-space:nowrap;

自動換行

div{ 

word-wrap: break-word; 

word-break: normal; 

}

強制英文單詞斷行

 

div{

word-break:break-all;

}

 

6: margin-bottom  失效

 

margin-bottom是下方的外邊距，並不能讓元素向下方移動，margin-top做爲上邊距，把元素「推」了下去。

但願圖標距離下方30px，那麼能夠在ul上設置position: absolute，bottom: 30px ，(這一句我沒有加一樣實現了效果)另外父元素position:relative

 

7 overflow: hidden;

當強制不換行的時候,使用overflow:hidden隱藏超過界面的部分

8: text-overflow 當屬性規定當文本溢出包含元素時發生的事情

clip: 修剪文本

ellipsis : 用省略號來表明被修剪的文字

string: 使用給定的字符串來表明被修剪的文字

重點是三個同時使用：text-overflow:ellipsis; white-space:nowrap; overflow:hidden;  

 

9 : 設置最高高度..超事後能夠滑動

 max-height: 550rpx;

 overflow-y: scroll;

10 : 用純CSS建立一個三角形的原理

把上、左、右三條邊隱藏掉（顏色設爲 transparent）

 

1. #demo {
2. width: 0;
3. height: 0;
4. border-width: 20px;
5. border-style: solid;
6. border-color: transparent transparent red transparent;
7. }

11 : active下邊添加橫線使用active:after      //內容以後插入新內

.active:after{

  content: "";

  display: block;

  position: absolute;

  bottom: 0;

  left: 0;

  right: 0;

  height: 4rpx;

  background: #31c27c;

}

12:建立小三角 倒三角

         

倒三角

    border-bottom: 4px solid #61beff;

    border-top:0;

13: z-index

 z-index: 99; 越在上邊值越大

有時會失效:嘗試一下設置: position: relative;

z-index致使下滑的控件a致使緊鄰的控件b下移解決方法:

.b {

     position:fixed;

     top : 0;

     z-index:x;

}

14: 文本保持短的時候居中，長的時候則據左

<view class="box-container">

  <view class="box-content">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsam quasi pariatur excepturi nemo autem illum neque soluta, voluptate debitis nobis, officiis iure eligendi dignissimos magnam commodi hic delectus at accusantium.</view>

</view>

 

<view class="box-container">

  <view class="box-content">Lorem ipsum dolor sit amet.</view>

</view>

.box-container {

  font-size: 14px;

  width: 300px;

  margin: 25px auto;

  color: #fff;

  

  border-radius: 5px;

  text-align: center;

}

.box-content {

  display: inline-block;

  text-align: left;

  vertical-align: middle;

}

15:CSS中overflow:scroll怎麼設置只上下滾動而不左右滾動

 

若是左右沒有超出內容時,用overflow:auto;

若是左右有超出內容,用overflow-x:hidden;

.page{

overflow: auto;

overflow-x: hidden;

}

16 圖片水平居中

position 屬性規定元素的定位類型。這個屬性定義創建元素佈局所用的定位機制。任何元素均可以定位，不過絕對或固定元素會生成一個塊級框，而不論該元素自己是什麼類型。相對定位元素會相對於它在正常流中的默認位置偏移。

 

上下左右 居中

 

div{

  position:fixed;

  margin:auto;

  left:0;

  right:0;

  top:0;

  bottom:0;

  width:200px;

  height:150px;

}

若是隻須要左右居中，那麼把 bottom:0; 或者 top:0; 刪掉便可

 

若是隻須要上下居中，那麼把 left:0; 或者 right:0; 便可

 

下面附一個DIV 元素在瀏覽器窗口居中

 

其實，實現這個效果並不複雜，利用 CSS 中的 position 定位就能夠輕鬆搞定了。來看看代碼吧：

 

<style type="text/css">

.dialog{

position: fixed;

_position:absolute;

z-index:1;

top: 50%;

left: 50%;

margin: -141px 0 0 -201px;

width: 400px;

height:280px;

border:1px solid #CCC;

line-height: 280px;

text-align:center;

font-size: 14px;

 

overflow:hidden;

}

</style>

<div class="dialog">我是在窗口正中央的，呵呵！</div>

設置的技巧所有在這裏：

 

.dialog{

position: fixed;

_position:absolute; /* hack for IE6 */

z-index:1;

top: 50%;

left: 50%;

margin: -141px 0 0 -201px;

width: 400px;

height:280px;

border:1px solid #CCC;

line-height: 280px;

text-align:center;

font-size: 14px;

 

overflow:hidden;

}

設置 position: fixed; _position:absolute;

設置 left:50% 和 top:50%;

設置 margin: -(DIV的offsetWidth/2) 0 0 -（DIV的offsetHeight/2）

16  如何居中div？

 

• 水平居中：給div設置一個寬度，而後添加margin:0 auto屬性
  div{
          width:200px;
          margin:0 auto;
    }
• 讓絕對定位的div居中
  div {
          position: absolute;
          width: 300px;
          height: 300px;
          margin: auto;
          top: 0;
          left: 0;
          bottom: 0;
          right: 0;
          background-color: pink; /* 方便看效果 */
  }
• 水平垂直居中一
  肯定容器的寬高 寬500 高 300 的層
  設置層的外邊距
  div {
          position: relative;             /* 相對定位或絕對定位都可 */
          width:500px;
          height:300px;
          top: 50%;
          left: 50%;
          margin: -150px 0 0 -250px;      /* 外邊距爲自身寬高的一半 */
          background-color: pink;         /* 方便看效果 */
    }
• 水平垂直居中二
  未知容器的寬高，利用 `transform` 屬性
  div {
          position: absolute;             /* 相對定位或絕對定位都可 */
          width:500px;
          height:300px;
          top: 50%;
          left: 50%;
          transform: translate(-50%, -50%);
          background-color: pink;         /* 方便看效果 */
  }
• 水平垂直居中三利用 flex 佈局實際使用時應考慮兼容性.container {        display: flex;        align-items: center;            /* 垂直居中 */        justify-content: center;        /* 水平居中 */}.container div {        width: 100px;        height: 100px;        background-color: pink;         /* 方便看效果 */}