3
1- 在一个页面中给多个元素设置同样的 id，会导致什么问题？
id一个页面只可以使用一次,class可以多次引用,不能通过w3的校验;
id是一个标签，用于区分不同的结构和内容
在页面上多个id可以正常显示,但是需要js通过id控制这个元素是会出现错误;
2- 用伪类实现一个上三角（代码）:
<!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;
background-color: rosybrown;
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. 使用盒模型
浙公网安备 33010602011771号