03

1-     在一个页面中给多个元素设置同样的 id，会导致什么问题？

id一个页面只可以使用一次，class可以多次引用。

第一影响就是不能通过W3的校验

在页面显示上，目前的浏览器还都允许你犯这个错误，用多个相同ID“一般情况下”也能正常显示。但是当你需要用JavaScript通过id来控制这个div，那就会出现错误。

2-     用伪类实现一个上三角

 1 <!DOCTYPE html>
 2 <html>
 3    <head>
 4        <meta charset="UTF-8">
 5        <title></title>
 6        <style type="text/css">
 7            .tri_top, .tri_right, .tri_bottom, .tri_left{
 8                width: 150px;
 9                height: 100px;
10                background: #CCCCCC;
11                border-radius: 8px;
12                margin: 50px 50px;
13                position: relative;
14                float: left;
15            }
16            .tri_top:before{
17                content: "";
18                width: 0px;
19                height: 0px;
20                border-left: 10px solid transparent;
21                border-right: 10px solid transparent;
22                border-bottom: 10px solid #CCCCCC;
23                position: absolute;
24                top: -10px;
25                left: 65px;
26            }
27            .tri_right:before{
28                content: "";
29                width: 0px;
30                height: 0px;
31                border-top: 10px solid transparent;
32                border-bottom: 10px solid transparent;
33                border-left: 10px solid #CCCCCC;
34                position: absolute;
35                top: 40px;
36                left: 150px;
37            }
38            .tri_bottom:before{
39                content: "";
40                width: 0px;
41                height: 0px;
42                border-top: 10px solid #CCCCCC;
43                border-left: 10px solid transparent;
44                border-right: 10px solid transparent;
45                position: absolute;
46                top: 100px;
47                left: 70px;
48            }
49            .tri_left:before{
50                content: "";
51                width: 0px;
52                height: 0px;
53                border-top: 10px solid transparent;
54                border-bottom: 10px solid transparent;
55                border-right: 10px solid #CCCCCC;
56                position: absolute;
57                top: 40px;
58                left: -10px;
59            }
60        </style>
61    </head>
62    <body>
63        <div class="tri_top"></div>         <!--三角形在上边-->
64        <div class="tri_right"></div>       <!--三角形在右边-->
65        <div class="tri_bottom"></div>      <!--三角形在底边-->
66        <div class="tri_left"></div>        <!--三角形在左边-->
67    </body>
68 </html>

 

3-     怎么让一个不定宽度的 div 实现垂直和水平居中？

方式一: 使用css方法:

父盒子设置: display: table-cell; text-align: center; vertical: middle;
div设置: display: inline-block; vertical-align: middle;
方式二: 使用css3 transform:

父盒子设置: position: relative;
div设置: left: 50%; top: 50%; transform: translate(-50% -50%);

方式三：使用CSS3 flex

父盒子设置：display:flex;justify-content:center;align-items:center;

4-     清浮动的方式有哪些？

一、 额外标签法： 给谁清除浮动，就在其后额外添加一个空白标签 。

优点： 通俗易懂，书写方便。（不推荐使用）

缺点： 添加许多无意义的标签，结构化比较差。

给元素small清除浮动（在small后添加一个空白标签clear(类名可以随意），设置clear:both;即可）

二、 父级添加overflow方法： 可以通过触发BFC的方式，实现清楚浮动效果。必须定义width或zoom:1，同时不能定义height，使用overflow:hidden时，浏览器会自动检查浮动区域的高度

 优点： 简单、代码少、浏览器支持好

 缺点： 内容增多时候容易造成不会自动换行导致内容被隐藏掉，无法显示需要溢出的元素。不能和position配合使用，因为超出的尺寸的会被隐藏。

 注意： 别加错位置，是给父亲加（并不是所有的浮动都需要清除，谁影响布局，才清除谁。）

 三、使用after伪元素清除浮动： :after方式为空元素的升级版，好处是不用单独加标签了。IE8以上和非IE浏览器才支持:after，，zoom(IE专有属性)可解决ie6,ie7浮动问题（较常用推荐）

 优点： 符合闭合浮动思想，结构语义化正确，不容易出现怪问题（目前：大型网站都有使用，如：腾迅，网易，新浪等等）

 缺点： 由于IE6-7不支持：after，使用zoom：1，触发hasLayout。

 四、使用before和after双伪元素清除浮动：（较常用推荐）

 优点： 代码更简洁

 缺点： 用zoom:1触发 hasLayout.

5-     如何让两个块级元素显示在同一行

使用float

display:inline-block;

采用flex布局：把父容器设置成弹性盒子

posted @ 2021-02-20 18:09  路~  阅读(149)  评论(0)    收藏  举报