day3
1- 在一个页面中给多个元素设置同样的 id，会导致什么问题？
id一个页面只可以使用一次,class可以多次引用,不能通过w3的校验;
id是一个标签，用于区分不同的结构和内容
在页面上多个id可以正常显示,但是需要js通过id控制这个元素是会出现错误;
2- 用伪类实现一个上三角（代码）:
|
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
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
|
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title></head><style> * { margin: 0; padding: 0; } .top, .left, .bottom, .right { width: 200px; height: 100px; float: left; margin: 40px 0 0 40px; border-radius: 5px; position: relative; } .top::before { content: ""; width: 0px; height: 0px; border-left: 20px solid transparent; border-right: 20px solid transparent; border-bottom: 20px solid #cccccc; position: absolute; top: -20px; left: 50px; } .right::before { content: ""; width: 0px; height: 0px; border-top: 20px solid transparent; border-bottom: 20px solid transparent; border-left: 20px solid #cccccc; position: absolute; top: 20px; left: 200px; } .bottom::before { content: ""; width: 0px; height: 0px; border-left: 20px solid transparent; border-right: 20px solid transparent; border-top: 20px solid #ccc; position: absolute; top: 100px; left: 40px; } .left::after { content: ""; width: 0px; height: 0px; border-top: 20px solid transparent; border-bottom: 20px solid transparent; border-right: 20px solid #ccc; position: absolute; top: 10px; left: -20px; }</style><body> <!-- 伪元素实现上三角 --> <div class="top">上</div> <!-- 右三角 --> <div class="right">右</div> <!-- 下三角 --> <div class="bottom">下</div> <!-- 左三角 --> <div class="left">左</div></body></html> |
3- 怎么让一个不定宽度的 div 实现垂直和水平居中（三种方法 代码）？
3-1 使用flex:
设置父盒子:
display:flex;
content:center;
align-item:center;
3-2:使用css3 transform
设置父盒子:display:relative;
设置要居中的div
transform: translate( -50%, -50%);
position:absolute;
top:50%;
left:50%;
3-3
display:table-cell;
text-align:center;
vertical-align:middle;
设置要居中的div
display:inline-block;
vertical-align:middle;
4- 清浮动的方式有哪些？
1. 额外标签法： 给谁清除浮动，就在其后额外添加一个空白标签 。
优点： 通俗易懂，书写方便。（不推荐使用）
缺点： 添加许多无意义的标签，结构化比较差。
给元素small清除浮动（在small后添加一个空白标签clear(类名可以随意），设置clear:both;即可）
2. 父级添加overflow方法： 可以通过触发BFC的方式，实现清楚浮动效果。必须定义width或zoom:1，同时不能定义height，使用overflow:hidden时，浏览器会自动检查浮动区域的高度
优点： 简单、代码少、浏览器支持好
缺点： 内容增多时候容易造成不会自动换行导致内容被隐藏掉，无法显示需要溢出的元素。不能和position配合使用，因为超出的尺寸的会被隐藏。
注意： 别加错位置，是给父亲加（并不是所有的浮动都需要清除，谁影响布局，才清除谁。）
3. 使用after伪元素清除浮动： :after方式为空元素的升级版，好处是不用单独加标签了。IE8以上和非IE浏览器才支持:after，，zoom(IE专有属性)可解决ie6,ie7浮动问题（较常用推荐）
优点： 符合闭合浮动思想，结构语义化正确，不容易出现怪问题（目前：大型网站都有使用，如：腾迅，网易，新浪等等）
缺点： 由于IE6-7不支持：after，使用zoom：1，触发hasLayout。
4. 使用before和after双伪元素清除浮动
5- 如何让两个块级元素显示在同一行
1. display:inline，将其变成行内元素.
2. 使用float
3. 使用盒模型
