css 笔记整理

# ~选择器：查找某一个元素后面的所有兄弟元素
1
例如     .test~.name{background:red}
+选择器：查找某一个元素后面紧邻的兄弟元素
1
例如     .test+.name{background:red}
用 font-size ：0 来清除边距
1
不要忘记给子元素设置字号
用overflow清除浮动
1
2
3
4
5
6
.clearfix{
    overflow：hidden
    display:block
    clear:both;
    content:''; 
}
用border 来绘制三角形
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
.border{
    width:50px;
    height:50px;
    border:40px solie;
    border-left-color:red;
    border-right-color:yellow;
    border-top-color:blue;
    border-bottom-color:green;
}
.border{
    width:0;
    height:0;
    border-width:40px;
    border-color:transparent transparent yellow trasparent;
}
梯形
1
2
3
4
5
6
.border{
    width:20px;
    height:0;
    border-width:40px;
    border-color:transparent transparent yellow trasparent;
}
利用padding实现等比例缩放的盒子
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
最外层容器{
    display:flex;
    display:-webkit-box;
    display:flex-box;
    -ms-flex-wrap:wrap;
    flex-wrap:warp;
}
最外层容器 > 子元素{
    flex-basis:25%;
}
最外层容器 > 子元素 > 父元素{
    width:100%;
    padding-top:75%;
    position:relative;
}
最外层容器 > 子元素 > 父元素 > 子元素{
    width:100%;
    height:100%;
    position:absolute;
    top:0;
    left:0;
}
利用pointer-events禁用事件 光标变成default 阻止 hover和hover 以及 JavaScript 点击事件的触发
1
pointer-events:none;
利用 max-width 防止图片撑破容器
1
2
3
4
img{
    max-width：100%；
    display：inline-block;
}
利用伪类在打印时候显示a标签的链接
1
2
3
.a[href]:after{
    content:"(" attr(href) ")"
}
未知高度容器的多种垂直居中方法
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
54
55
56
57
58
59
60
61
62
// 第一种   flex  + margin:auto
父元素{
    display：flex;
}
子元素{
    margin：auto；
}

// 第二种 元素占位方案 利用display：inline-block  和伪元素
父元素{
    text-align:center;
    font-size:0;
}
父元素::before , 子元素{
    display:inline-block;
    vertical-align:middle
}
父元素::before{
    content:'';
    height:100%;
}

// 第三种 absolute + transform
父元素{
    position：relative；
    text-align:center
}
子元素{
    position:absolute;
    left:50%;
    top:50%;
    transfrom:translate(-50%,-50%);
}

// 第四种 table-cell  缺点  需要在子元素上额外套一层div
父元素{
    display:table;
}
父元素 > 二层元素{
    display:table-cell;
    vertical-align:middle;
    text-align:center
}
父元素 > 二层元素 > 子元素{
    display:inline-block;
}

// 第四种 flex  flex盒模型是最佳事项方案  有两种方案
第一种方案
父元素{
    display:flex;
    align-items:center;
    justify-content:center;
}
第二种方案
父元素{
    display：flex;
    margin:0;
}
父元素 > 子元素{
    margin:auto;
}
用counter 来模拟/装饰 有序清单
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
父元素{
    counter-reset:decimal;
    list-style-type:none;
}
父元素 > 子元素{
    counter-increment：decimal;
    content:counters(decimal,".") " ";
}

用table-layout 来控制table td/th 的宽度
table{
    table-layout：fixed;

    用caret-color 自定义输入框  光标颜色
    textarea,input,[contenteditable]{
    creat-color:red;
}

用user-select 禁止选中文本
文本{
    user-select：none;
}
伪类和伪元素的区别
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
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
伪类是用： 来表示，伪元素是用：：来表示
常见的伪类有：
:hover
:active
:focus
:visited
:link
:lang
:first-child
:last-child
:not
:nth-child

伪元素 就是不存在DOM文档树中的虚拟元素，它们和HTML元素一样，但是你又无法使用javascript去获取
常见伪元素
::before
::after
::first-letter
::first-line 


用 ：valid  和 ：invalid 来做表单验证
html5 提供了类似required Email tel 等表单属性
：required 指定具有required属性的表单元素
：valid 指定一个通过匹配正确的所要求的表单元素
：invalid 指定一个不匹配指定要求的表单元素
<input type="text" required />   
input:vaild{    如果输入文字则变成绿色
    border:1px solid green;
    box-shadow:inset 10px 0 0 green;
}
input:invaild{   如果没有输入则是红色
    border:1px solid red;
    box-shadow:inset 10px 0 0 red;
}


用：target来实现折叠面板


用：not来排除其他选择器
：not([readonly]):not([.disabled]):not([text])  等

用：nth-child 来实现各行变色
：nth-child(2n+1){background:red;}
: nth-child(2n){backgorund:blue;}


用 ::selection 来美化选中文本
p::selection{
    background:red;
    color:green;
}


用 ::placeholder 美化输入框占位符样式
::placeholder{
    color:Red;
}

用 ::first-letter 来实现段落首字下沉
p::first-letter{
    font-size:30px;
    color:Red;
    padding:20px;
}

用 ::first-line 来标记段落的第一行
p::first-line{
    color:red;
}