css常用笔记

做前端也是有一段时间了，备份一下前端常用的笔记，并做一些说明

目录

1.css中的bottom原理

2.透明

3.div背景图片平铺

4.边框圆角

5.背景渐变

6.奇数偶数选择

7.滚动条样式设置

8、flex实现垂直居中

9.div阴影

10.遮罩层不影响底部内容的事件

11.input相关

12.单行文本超出省略号

13.双击文字，文字不会被选中（变蓝）

---

 

• 1.css中的bottom原理

        bottom属性自动获取可视窗口的的底部来测算距离，而不是页面本身的底部。

       换句话说当你定义了一个div的bottom为0时，它会显示在浏览器的底部，但是这时候你调整页面全屏时，它会上移一小段，因为全屏以后可视窗口变大了！

 

• 2.透明

（1）border透明度设置

      border: 0.05rem solid rgba(255,255,255,0.2);

 

（2）div 透明度设置

div {  

      filter:alpha(opacity=50);  

      -moz-opacity:0.5;  

      -khtml-opacity: 0.5;  

      opacity: 0.5;  

}  

 

• 3.div背景图片平铺

添加了背景图片background-img后添加下面css可以实现div背景平铺div

background-repeat: no-repeat;

background-position: left top;

-moz-background-size:100% 100%;

background-size:100% 100%;

 

• 4.边框圆角

使用下面代码可以控制边框的四个圆角显示

border-radius:0.1rem;

border-top-left-radius:2em;

border-top-right-radius:2em;

border-bottom-right-radius:2em;

border-bottom-left-radius:2em;

box-shadow: 10px 10px 5px #888888;

 

• 5.背景渐变

       css中允许使用渐变色

        background:linear-gradient(rgba(0,0,0,1),rgba(255,255,255,0)),url(img/2.jpg) no-repeat;

 

• 6.奇数偶数选择

tr:nth-child(even){  }

tr:nth-child(odd){  }

 

• 7.滚动条样式设置

#scroll-1 {

        width:200px;

        height:200px;

        overflow:auto;

    }

    #scroll-1 div {

        width:400px;

        height:400px;

    }    #scroll-1::-webkit-scrollbar {

        width:10px;

        height:10px;

    }

    #scroll-1::-webkit-scrollbar-button    {

        background-color:#FF7677;

    }

    #scroll-1::-webkit-scrollbar-track     {

        background:#FF66D5;

    }

    #scroll-1::-webkit-scrollbar-track-piece {

        background:url(http://www.lyblog.net/wp/wp-content/themes/mine/img/stripes_tiny_08.png);

    }

    #scroll-1::-webkit-scrollbar-thumb{

        background:#FFA711;

        border-radius:4px;

    }

    #scroll-1::-webkit-scrollbar-corner {

        background:#82AFFF;

    }

    #scroll-1::-webkit-scrollbar-resizer  {

        background:#FF0BEE;

    }

8、flex实现垂直居中

display: flex;

display: -webkit-flex;

align-items:center;

justify-content:center;

 

flex布局基本设置

（1）flex-direction属性

决定主轴的方向（即项目的排列方向）。

flex-direction: row | row-reverse | column | column-reverse;

行排列，反向行排列，列排列，反向列排列

 

 （2）flex-wrap属性

默认情况下，项目都排在一条线（又称”轴线”）上。flex-wrap属性定义，如果一条轴线排不下，如何换行。

flex-wrap: nowrap | wrap | wrap-reverse;

不换行，换行且第二行在第一行下方，换行且第二行在第一行上方。

 

 

 

（3）flex-flow

flex-flow属性是flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap。

 

flex-flow: <flex-direction> || <flex-wrap>;

 

（4）justify-content属性

justify-content属性定义了项目在主轴上的对齐方式。

justify-content: flex-start | flex-end | center | space-between | space-around;

 

（5） align-items属性

align-items属性定义项目在交叉轴上如何对齐

align-items: flex-start | flex-end | center | baseline | stretch;

 

（6）align-content属性

align-content属性定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用。

align-content: flex-start | flex-end | center | space-between | space-around | stretch;

 

• 9.div阴影

box-shadow：color  h-shadow  v-shadow blur spread  inset；

color：阴影颜色 ------------ 可选

h-shadow ：水平偏移量 ----必选          

v-shadow：垂直偏移量-----必选

blur：模糊距离 -------------可选

spread：阴影尺寸---------- 可选

inset：内阴影 --------------可选

box-shadow: #000 3px 3px 8px 2px ;

 

• 10.遮罩层不影响底部内容的事件

          pointer-events: none;

 

• 11.input相关

取消有焦点时的边框

outline:none;

 

• 12.单行文本超出省略号

overflow:hidden;
           text-overflow:ellipsis;
           white-space:nowrap

 

 

恢复单行文本超出自动换行

text-overflow:initial;
           overflow: initial;
           white-space:inherit;

 

• 13.双击文字，文字不会被选中（变蓝）

-webkit-user-select:none;
          -moz-user-select:none;
         -ms-user-select:none;
          user-select:none;