CSS知识

CSS3资料员

http://tympanus.net/codrops/css_reference

解决移动端边框2像素问题####

A{
border：1px solid #eee；
-webkit-transform：scale(0.5)
}```

####用CSS3制作聊天窗口的小角####
```css
A{
border-width：8px；
border-style：solid；
border-color：transparent transparent transparent #0094ff
}

类似分类的左边右边滚动条####

首先要在父容器写下如下样式：

A{
position：absolute；
top：0；
left：0；
right：0；
bottom：0；
width；100%；
height：100%；
}```
######然后左边的子元素写下如下样式：
```css
aleft{
width:100%；
overflow-y：auto；
}```
######右边的子元素写下如下样式：
```css
aright{
width:100%；
overflow-y：auto；
}```
em跟根元素的fontsize是没有关系的，只跟相邻有关，rem才是根据根元素的fontsize
***

####CSS:
如果a标签下面有img，要让a标签占据整个盒子，设置display:block就可以了
overflow:hidden/*不显示超过宽度的内容*/
text-ovflow:ellipsia/*当文本溢出的时候就省略号显示*/
white-space:nowrap/*限制在一行内显示所有文本*/
***
####A标签####
a:link/*未访问的连接*/
a:visited/*已访问的连接*/
a:hover/*鼠标悬停*/
a:active/*被选择的连接*/
a{ -webkit-tap-highlight-color:rgba(255,0,0,0);}　　　清除所有a标签在点击时出现的特效
***
####弹性盒子####
webkit-box-flex:弹性盒子,在父盒子里设置display:webkit-box,和设置好宽度,子盒子就可以设置eg:如果两个盒子都设置了webkit-box-flex:1.0....意思是,在父盒子设置的宽度内,如果有子盒子设置了webkit-box-flex:1.0,表示各占父盒子的一份,也就是说两个盒子把父亲分了
***
letter-spacing:2px;设置字与字之间的距离
***
####transition属性:####
```css
{
 1:transition-property;过度效果的CSS的属性名称
 2:transition-duration;完成过度需要的时间
 3:transition-timing-function;过度的速度
 4:transition-delay;设置过度什么时候开始
}

transform属性(旋转)####

{
 1:none不进行任何旋转
 2:scale放大
 3:skew斜切
 4:rotate旋转
}

ie9以上版本不支持该属性####

anmation{
1:animation-name规定需要绑定到keyframe的名称
2:animation-duration完成动画所花费的时间
3:animation-timing-function规定动画的速度曲线
4:animation-delay规定动画开始之前的延迟
5:animation-iteration-count动画应该播放的次数
6:animation-direction规定是否应该轮流反向播放动（来回动画，一般设置animation-direction: alternate;就可以来回走了 ）}

---

eg;animation:mymove(名称) 5s(动画的时间) inflinite(播放的次数);
@keyframes mymove{
from{left:0px}
to{left:200px}
}

---

word-wrap:break-word;允许文本强制进行换行(意味着会对单词进行拆分)

---

background-image:url(‘i/i.jpg’),url(‘i/i.jpg') 允许多个背景图像
background-position:left定义图片的位置在左边
background-origin:content-box/padding-box/border-box图片的定位区域(按盒子模型定位)

---

border-image-source用在边框的图片路径url(i/i.jpg)
border-image-slice图片边框向内偏移
border-image-width图片边框的宽度
border-image-outset边框图像区域超出边框的量
border-image-repeat图片边框是否平铺,铺满或拉伸

---

用法:#p{border-image:url(‘i/i.jpg’) 30 30 p;}

---

column-count列数
column-fill如何填充列
column-gap规定列之间的间隔
column-设置所以的column-rule属性的简写属性
column-rule-color列之间的颜色
column-rule-style列之间的样式
column—rule-width列之间的宽度
column-span元素该跨行的列数
column-width列的宽度
column设置列的宽度和被分隔的列数

---

background:rgba(0,0,0,0.3)表示背景黑色，透明度为0.3

---

标题
标题下面的内容
标题下面的内容
标题下面的内容

效果图：

让上下左右都与手机屏幕贴紧：

.game {

    position: absolute;

    top: 0;

    bottom: 0;

    left: 0;

    right: 0;

    overflow: hidden;

    }```

####让内容居中显示：
```css
.welcome {

    position: absolute;

    top: 50%;

    left: 50%;

    margin: -100px 0 0 -111px;

    background-image: url("img/wel.png");

    width: 222px;

    height: 200px;

    }```

####让内容居中的方法
1水平居中：
a:text-align:center;
b:margin 0 auto;
c:通过inline-block实现    eg:.parent{text-align:center;}  .child{display:inline-block;text-align:left;}
d:通过flexbox实现  eg{display:flex;justify-content:center;}
***
####垂直居中####
**a:.center{padding-top:30px;padding-bottom:30px}**
**b:.center{height:100px;line-height:100px;white-space:nowrap'}**
***

####垂直居中对齐代码####
```html



    
        
        
        
    

    
        

    

```

zzzzz
可以让鼠标移到zzzzz那里去的时候显示hhhhhhhh
***
display : 隐藏对应的元素但不挤占该元素原来的空间。
visibility: 隐藏对应的元素并且挤占该元素原来的空间。
***
//一种常见利用伪类清除浮动的代码 :
.clearfix:after
 {   
 content:".";       //这里利用到了content属性  
  display:block;  
  height:0;    
visibility:hidden;  
  clear:both; 
}
.clearfix
 {    
*zoom:1;
 }
***
####权重的算法####
**内联样式：1000**
**ID选择器100**
**class（包括伪类：hover）选择器10**
**元素选择器(好有伪类选择符eg:firstchild)1**
****
####超链接####
**LVHA(顺序应该是link,visited,hover,active)防止被点击访问过的超链接样式不在具有hover和active了**
***
####display：####
display:none不占据原来空间
visibility:hidden占据原来空间
***
**IE盒模型的margin比其他浏览器大2px：**
div{margin:30px !important;margin:28px}
***
**单行文本溢出：**
overflow:hidden;
white-space:nowrap;
text-overflow；ellipsis;
***
**多行文本溢出：**
display:-webkit-box !important;
overflow:hidden;
text-overflow:ellipsis;
bork-break:break-all;
-webkit-box-orient:vertical;/*方向*/
-webkit-line-clamp:4;/*显示多少行文本*/
***
**CSS实现垂直水平居中：**
**1**
```css
            .parent {
                width: 800px;
                height: 500px;
                border: 2px solid #000;
                position: relative;
            }
            .child {
                width: 200px;
                height: 200px;
                margin: auto;
                position: absolute;
                top: 0;
                left: 0;
                bottom: 0;
                right: 0;
                background-color: red;
            }

2：

           .parent {
                width: 800px;
                height: 500px;
                border: 2px solid #000;
                display: table-cell;
                vertical-align: middle;
                text-align: center;
            }
            
            .child {
                width: 200px;
                height: 200px;
                display: inline-block;
                background-color: red;
            }

3：

            .parent {
                width: 800px;
                height: 500px;
                border: 2px solid #000;
                display: flex;
                justify-content: center;
                align-items: center;
            }
            
            .child {
                width: 200px;
                height: 200px;
                background-color: red;
            }

4：

           .parent {
                width: 800px;
                height: 500px;
                border: 2px solid #000;
                position: relative;
            }
            
            .child {
                width: 300px;
                height: 200px;
                margin: auto;
                position: absolute;
                /*设定水平和垂直偏移父元素的50%，再根据实际长度将子元素上左挪回一半大小*/
                left: 50%;
                top: 50%;
                margin-left: -150px;
                margin-top: -100px;
                background-color: red;
            }