taiyang2014

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;         /* 方便看效果 */
    } 
 
 
 
 
 
 
 
 
 

posted on 2017-08-21 14:50  taiyang2014  阅读(207)  评论(0)  编辑  收藏  举报

导航