CSS

发表于

CSS 常见问题（以下内容包含LESS语法）

span 标签插入图片

background需要加入 display: inline-block;

  • 否则图片无法显示出来
  • PS: less语法
1
2
3
4
5
6
7
8
9
10
11
homework-height:42px;
homework-width:58px;
homework-position-horizontal: -58px;
homework-position-vertical: -42px;
homework-icon: url(../images/student/icons.png);
.homework-chinese{
	display: inline-block;     //important
	height: @homework-height;
    width: @homework-width;
    background: @homework-icon no-repeat @homework-position-horizontal*0 @homework-position-vertical*0;
}

分栏布局

需要加入 box-sizing: border-box;

  • 否则导致div被挤到下一行
1
2
3
4
5
6
7
.content-col-6 {
    width: 50%;
    padding: @content-col-padding;
    position: relative;
    float: left;
    box-sizing: border-box;
}

2个 img中间 出现空格

需要添加 font-size: 0px;

  • 否则中间的空隙无法去除
1
2
3
4
<div  style=" display:inline; font-size: 0px;">
     <img  src="../static/images/student/logo_1.png">
     <img  style="vertical-align: top;" src="../static/images/student/logo_2.png">
</div>

遮罩

需要添加 透明度

0.9; ```
1
2
3
4
5
6
7
8
9
10
11
12
13
14
```javascript
 #mask {
        bottom: 0;
        left: 0;
        opacity: 0.9;    /* important*/
        position: fixed;
        right: 0;
        top: 0;
        background: grey;
        filter:alpha(opacity=50);    /*IE6*/
        -moz-opacity:0.5;          /*Mozilla old version*/
        -khtml-opacity: 0.5;     /*Safari old version*/
    }

要获取div的display值

需要在div里添加

none;"```
1
2
3
4
5
6
7
8
9
10
11
12
13
   - 不能在css里写，js无法读取
```javascript
    <div class="mask" style="display: none;" onclick="showMask(3);">
    </div>
    function showMask(n) {
        var mask = document.getElementsByClassName("mask");
        if(mask[n].style.display =='none'){
            mask[n].style.display = 'block';
        }else{
            mask[n].style.display = 'none';
        }
    }

background

image 居中

1
background:url(logo.png) center center no-repeat;

image 全屏

1
background-size:100% 100%;

image 拉伸

  • 顺序不能翻转 
1
2
background:url('../../static/images/login/bg0.png') no-repeat  0 0 / 100% 100% rgba(0, 0, 0, 0);
  background-size:100% 100%;

image底下有白边

首先 img 元素默认对齐方式为 vertical-align: baseline;，这就导致了，baseline 以下的部分被空了出来，显示了背景的白色。

问题找到了，对症下药可得出下面的解决方案：

  • 根本上消除 img 的对齐方式 —— 块状化：
1
2
3
img {
display: block;
}
  • 更改 img 对齐方式，以下三种均可
1
2
3
4
5
img {
vertical-align: top;
vertical-align: middle;
vertical-align: bottom;
}
  • 更改行高，行高是两条 baseline 之间的距离，因此可以暴力的让行高消失
1
2
3
4
{
line-height: 0;
/* font-size: 0; 当 line-height 使用数值、百分比或者 rem 定义时也可用这种方式，因为 line-height 参照的是 font-size 的值*/
}

input 点击有蓝边

1
2
3
input,textarea{
  outline:none;
}

CSS Tricks

居中

水平居中

1
2
display: flex;
justify-content: center;    /* 水平居中 */

垂直居中

1
2
display: flex;
align-items: center;

绝对居中

1
2
3
4
5
6
7
8
9
10
11
div {
    width: 300px;
    height: 300px;
    margin: auto;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    position: absolute;
    background-color: pink; /* 方便看效果 */
}
  • 利用 flex 布局
    • 实际使用时应考虑兼容性
1
2
3
4
5
6
7
8
9
10
11
.container {
    display: flex;
    align-items: center;        /* 垂直居中 */
    justify-content: center;    /* 水平居中 */
}
.container div {
    width: 100px;
    height: 100px;
    background-color: pink;     /* 方便看效果 */
}
  • 未知容器的宽高，利用 transform 属性 
1
2
3
4
5
6
7
8
9
10
div {
    width:500px;
    height:300px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    position: absolute;     /* 相对定位或绝对定位均可 */
    background-color: pink;     /* 方便看效果 */
}

动画&特效

旋转

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
.profile-circle-img {
    width: 130px;
    height: 130px;
    border-radius: 50%;
    left: 65px;
    top: 35px;
    transition: all 0.5s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;
    -webkit-transition: all 0.5s ease-in-out;
    -o-transition: all 0.5s ease-in-out;
}
.profile-circle-img:hover {
    transform: rotate(360deg);
    -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    -o-transform: rotate(360deg);
}

三角形

利用 border 属性实现三角形
1
2
3
4
5
6
7
.arrow-up {
  width: 0;
  height: 0;
  border-left:20px solid transparent;
  border-right:20px solid transparent;
  border-bottom:20px solid black;
}
1
2
3
4
5
6
7
#demo {
  width: 0;
  height: 0;
  border-width: 20px;
  border-style: solid;
  border-color: transparent transparent red transparent;
}
利用 CSS3 transfrom 旋转 45 度实现三角形

  • HTML
1
2
3
4
<div class="message-box">
  <span>我是利用 css transfrom 属性字符实现的</span>
  <div class="triangle-css3 transform ie-transform-filter"></div>
</div>
  • CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
.message-box {
    position:relative;
    width:240px;
    height:60px;
    line-height:60px;
    background:#E9FBE4;
    box-shadow:1px 2px 3px #E9FBE4;
    border:1px solid #C9E9C0;
    border-radius:4px;
    text-align:center;
    color:#0C7823;
}
.triangle-css3 {
    position:absolute;
    bottom:-8px;
    bottom:-6px;
    left:30px;
    overflow:hidden;
    width:13px;
    height:13px;
    background:#E9FBE4;
    border-bottom:1px solid #C9E9C0;
    border-right:1px solid #C9E9C0;
}
.transform {
    -webkit-transform:rotate(45deg);
    -moz-transform:rotate(45deg);
    -o-transform:rotate(45deg);
    transform:rotate(45deg);
}
/*ie7-9*/
.ie-transform-filter {
    -ms-filter: "progid:DXImageTransform.Microsoft.Matrix(
        M11=0.7071067811865475,
        M12=-0.7071067811865477,
        M21=0.7071067811865477,
        M22=0.7071067811865475,
    SizingMethod='auto expand')";
    filter: progid:DXImageTransform.Microsoft.Matrix(
        M11=0.7071067811865475,
        M12=-0.7071067811865477,
        M21=0.7071067811865477,
        M22=0.7071067811865475,
    SizingMethod='auto expand');
}

鼠标、光标

手指

1
cursor:pointer;

文本

可编辑文本

1
<p contenteditable="true">这是一段可编辑的段落。请试着编辑该文本。</p>

文字超长省略

1
2
3
4
5
6
{
 max-width:150px;
 white-space:nowrap;  /*强制文本在一行内显示*/
 text-overflow:ellipsis;   /*文字超出省略*/
 overflow:hidden;
 }

选择器 Selectors

1
<p class="key" id="principal">

class

1
2
3
.key {
  color: green;
}

id

1
2
3
#principal {
  font-weight: bolder;
}

伪类选择器（Pseudo-classes selectors）

伪类列表

1
2
3
4
5
body { background-color: #ffffc9 }
a:link { color: blue } /* 未访问链接 */
a:visited { color: purple } /* 已访问链接 */
a:hover { font-weight: bold } /* 用户鼠标悬停 */
a:active { color: lime } /* 激活链接 */