CSS3资料员
解决移动端边框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
<dl>
<dt>标题</dt>
<dd>标题下面的内容</dd>
<dd>标题下面的内容</dd>
<dd>标题下面的内容</dd>
</dl>
效果图：
让上下左右都与手机屏幕贴紧：
.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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>index</title>
<style>
html,
body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
.content {
width: 300px;
height: 300px;
background: orange;
margin: 0 auto;
/*水平居中*/
position: relative;
/*脱离文档流*/
top: 50%;
/*偏移*/
margin-top: -150px;
}
</style>
</head>
<body>
<div class="content"></div>
</body>
</html>```
<abbr title="hhhhhhhh">zzzzz<abbr>
可以让鼠标移到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;
}
网友评论