css企业级开发小知识点（一）

1 css权重

！important Infinity

行间样式 1000

id 100

class|属性|伪类 10

标签|伪元素 1

通配符 0

2 css画三角形

div{

width:0px;

height:0px;

border:100px solid black;

/*border-left-color:red;

border-right-color:blue;

border-top-color:black;*/

border-left-color: transparent;

border-right-color: transparent;

border-top-color: transparent;

border-bottom-color: royalblue;

}

3 行级元素和块级元素

行级元素(内联元素inline)：内容决定元素所占位置，不可以通过css改变宽高

span strong em a del

块级元素(block)：独占一行，可以通过css改变宽高

div p ul i ol form address

行级块元素(inline-block)：内容决定大小，可以改宽高 img

4 首行缩进

text-indent: 2em;/*首行缩进2个字符*/

5 文本垂直居中单行文本垂直居中 文本高度等于行高

div{

width: 200px;

border:10px solid black;

text-align: center;

height:200px;

line-height: 200px;

}

垂直居中

6del和line-through

span{

text-decoration: line-through;

cursor: pointer;/*光标样式*/

}

/*伪类*/

span:hover{

background-color: orange;

border-radius: 10px;

}

原价50

原价50

7 多图片间隙处理

img{

width: 100px;

height:200px;

/*margin-left:-6px; 这种方式处理上线时会出错*/

}

不采取四排排列

8绝对定位脱离原来的层面 相对于有定位的父级进行定位 如果没有相对于文档 定位

绝对定位

div{

position: absolute;

top:100px;

left:200px;

bottom:200px;

right:200px;/*四个属性 一般左上或者右下组合使用*/

height:100px;

width:100px;

background-color: red;

}

相对定位保留原来的位置 相对于自己原来的位置进行定位

相对定位

.box1{

position: relative;

height:100px;

width:100px;

left:100px;

top:100px;

background-color: red;

}

.box2{

height:150px;

width:150px;

background-color:black;

}

fixed定位（一般右下角签到等等使用）

div{

position:fixed;/*or absolute定位*/

left:50%;

top:50%;

width:100px;

height:100px;

margin-left: -50px;

margin-top: -50px;/*位置位居正中*/

background-color: red;

}

推荐一个前端开发软件atom

Atom 是github专门为程序员推出的一个跨平台文本编辑器

时间有点晚了，今天暂时就先总结到这里,慢慢积累，晚安。