初学者进——前端女友帮助整理前端常用css样式(极其有用)

html页面的元素有好多,分块儿级元素,行内元素,行内块儿级元素

块儿级元素 :像div,p,h这种的,不管宽是多少都占一整行

行内元素:像span,a,label啊,i这种的,如果写好几个就挨着排队,而且width、margin-top,margin-bottom、padding-top对行内元素都没有用,

padding-left,right,bottom和margin-left、margin-right是好用的,也就是margin的竖直方向上数值无效,padding只有padding-top数值无效

1.子债父偿:
一个父元素margin:0;子元素给定margin-top:10px;margin-top会出现在父元素上
eg:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<style>
.father{
width:300px;
height:300px;
margin:0;
}
.son{
width:200px;
height:200px;
margin-top:10px;
}
</style>
<div class="father">
<div class="son"></div>
</div>
解决:    1.给父级添加一个border;
        2.给父级添加一个新的属性overflow:hidden;
        3. 不适用margin,在父级中使用padding-top。
      

2.display:inline-block
bug1:inline-block元素之间存在空白间隙(原因行内标签回车、换行、或者制表位的空白产生的) 1、font-size:0; 2、两个标签之间的换行注释掉
bug2:inline-block元素错位 vertical-align:middle;//必须是行内元素之间才能居中,浮动的元素不能对齐

3.select清除默认样式

1
2
3
4
5
6
7
8
9
select{
-webkit-appearance:none;
-moz-appearance:none;
appearance:none;
padding-right:15px;
}
select::-ms-expand { //清除ie的默认下拉框样式 隐藏下拉箭头
display: none;
}

4.table增加列,表格自动延伸,防止表格拥挤,并且超出显示滚动条

1
2
3
4
5
thead th{    					//通过防止文字换行来实现表格自动延伸
white-space:nowrap;
overflow:visible;
}

5.让div的滚动条始终贴在屏幕底部

1
2
3
4
5
让div相对于body绝对定位{
position:absolute;或fixed
bottom:0;
top,left,right根据具体情况赋值
}

6.table内的标签始终贴在td上边,给td vertical-align:top; 靠下同理 bottom

7.带滚动条的div里面的元素滚动到可视区域 document.getElementById(id).scrollIntoView(); //只能用dom获取,不能用jq获取元素

8.offset()获取距离时,该元素必须是可见元素

9.IE11下 table tr visibility:hidden 时,td内容隐藏,边框不会隐藏,需要另外隐藏border:none;

10、触发fixed定位弹窗的a标签不能用href=“#”,否则会跳回页面顶部,用javascript:void(0)[推荐,没有href的话,多次点击a会出现文字选中效果]或者去除href

11、word-break:break-all 文字换行,允许在单词内换行,单词可能会被截断
keep-all 只能在半角空格或连字符处换行。

word-wrap:break-word 文字换行,英文单词过长时,整体换到下一行


white-space:处理空白 nowrap  不换行,直到遇见br(默认多个空格按一个空格处理的)
                      pre     不换行,正常显示空格
                      pre-wrap 保留空格,正常换行
                      pre-line 合并空格变成一个空格,保留编辑器写的换行符(即写代码时的回车换行)
                      normal  多个空格按一个空格处理
                      
                      
overflow-wrap:break-word;

12、多行超出省略

1
2
3
4
5
overflow : hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;

13、ios单选按钮太丑

1
2
3
4
5
6
7
8
9
10
11
12
13
14
input[type=radio]{
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
background: url("../web-images/radio1.png") no-repeat center;
padding: 0;
-webkit-background-size: 100%;
background-size: 100%;
}
input[type=radio]:checked{
background: url("../web-images/radio2.png") no-repeat center;
-webkit-background-size: 100%;
background-size: 100%;
}

14、滚动条样式

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
/*滚动条样式*/

::-webkit-scrollbar{
width:8px;
height:8px;
}
::-webkit-scrollbar-track{
background: #f6f6f6;
border-radius:4px;
}
::-webkit-scrollbar-thumb{
background: #aaa;
border-radius:4px;
}
::-webkit-scrollbar-thumb:hover{
background: #747474;
}
::-webkit-scrollbar-corner {
background: #f6f6f6;
}

15、高德地图android获取地理位置失败 (没试验过)

1
<meta name="referrer" content="never">

16、未知宽高图片在div内左右居中

1
2
3
4
5
6
7
8
9
10
11
.banner{
width: 100%;
min-width: 1200px;
margin: 0 auto;
text-align: center;/*划重点*/
overflow: hidden;/*划重点*/
}
.banner img{
width: 1920px;
margin:0 -100%;/*划重点*/
}

17、左右始终居中对齐

1
2
3
4
5
6
父级标签样式:
display: flex;
-webkit-align-items: center;
align-items: center;
子级标签正常display:block;就可以

18、placeholder 字体颜色

1
2
3
4
5
6
7
8
9
10
11
12
13
::-webkit-input-placeholder { /* WebKit browsers */
color: #999;
font-size: 16px;
}
::-moz-placeholder { /* Mozilla Firefox 19+ */
color: #999;
font-size: 16px;
}

:-ms-input-placeholder { /* Internet Explorer 10+ */
color: #999;
font-size: 16px;
}

19、单边阴影

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
.left{
box-shadow:-5px 0 10px -5px #00ff00;
}
.bottom{
box-shadow:0 5px 10px -5px #00ff00;
}
.right{
box-shadow:5px 0 10px -5px #00ff00;
}
.top{
box-shadow:0px -5px 10px -5px #00ff00;
}
.left-top{
box-shadow:-5px -5px 10px -4px #00ff00;
}
.right-top{
box-shadow:5px -5px 10px -4px #00ff00;
}
.left-bottom{
box-shadow:-5px 5px 10px -4px #00ff00;
}
.right-bottom{
box-shadow:5px 5px 10px -4px #00ff00;
}
.no-left{
/* .right-bottom,.right-top组合 */
box-shadow:5px 5px 10px -4px #00ff00,5px -5px 10px -4px #00ff00;
}
.no-bottom{
/* .left-top,.right-top组合 */
box-shadow:-5px -5px 10px -4px #00ff00,5px -5px 10px -4px #00ff00;
}
.no-right{
/* .left-top,.left-bottom组合 */
box-shadow:-5px -5px 10px -4px #00ff00,-5px 5px 10px -4px #00ff00;
}
.no-top{
/* .left-bottom,,right-bottom组合 */
box-shadow:-5px 5px 10px -4px #00ff00,5px 5px 10px -4px #00ff00;
}

20、按钮hover从左到右颜色过渡

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
.lx_fpMore a {
font-size: 16px;
display: inline-block;
background-color: #ededed;
width: 169px;
height: 41px;
line-height: 41px;
text-align: center;
border-radius: 20.5px;
/*重点*/
position: relative;
transition: all 0.3s ease;
z-index: 1;
overflow: hidden;
}
/*重点*/
.lx_fpMore a:after{
position: absolute;
content: '';
width: 0;
height:100%;
top:0;
right:0;
background: #d6d6d6;
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
-ms-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
transition: all 0.3s ease;
z-index: -1;
border-radius: 20.5px;
}
/*重点*/
.lx_fpMore a:hover:after{
width:100%;
left:0;
}

21、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
46
47
48
49
50
51
52
53
#triangle-up {
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 100px solid red;
}
#triangle-down {
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-top: 100px solid red;
}
#triangle-left {
width: 0;
height: 0;
border-top: 50px solid transparent;
border-right: 100px solid red;
border-bottom: 50px solid transparent;
}
#triangle-right {
width: 0;
height: 0;
border-top: 50px solid transparent;
border-left: 100px solid red;
border-bottom: 50px solid transparent;
}
#triangle-topleft {
width: 0;
height: 0;
border-top: 100px solid red;
border-right: 100px solid transparent;
}
#triangle-topright {
width: 0;
height: 0;
border-top: 100px solid red;
border-left: 100px solid transparent;

}
#triangle-bottomleft {
width: 0;
height: 0;
border-bottom: 100px solid red;
border-right: 100px solid transparent;
}
#triangle-bottomright {
width: 0;
height: 0;
border-bottom: 100px solid red;
border-left: 100px solid transparent;
}