day03

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

　不能通过W3的校验，当你需要用JavaScript通过id来控制这个

2-用伪类实现一个上三角（代码）

<!DOCTYPE html>

<html>
   <head>
       <meta charset="UTF-8">
       <title></title>
       <style type="text/css">
       
           .tri_top:before{
               content: "";
               width: 0px;
               height: 0px;
               border-left: 10px solid transparent;
               border-right: 10px solid transparent;
               border-bottom: 10px solid #CCCCCC;
           }
          
       </style>
   </head>
   <body>
       <div class="tri_top"></div>

   </body>
</html>

　　

 

 

3-怎么让一个不定宽度的 div 实现垂直和水平居中（三种方法 代码）？

　　(1)使用Flex

　　　　display:flex;

　　　　content:center;

　　　　align-item:center;

　　(2)使用css3 transform

　　设置父盒子：display:relative;

　　设置要居中的DIV：

       transform: translate( -50%, -50%);
　　　　position:absolute;
　　　　top:50%;
　　　　left:50%;

　　(3)使用display:table-cell方法

　　设置父盒子：

　　　　display:table-cell;
　　　　text-align:center;
　　　　vertical-align:middle;

　　设置要居中的DIV：

　　　　display:inline-block;
　　　　vertical-align:middle;

 

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

　　(1).父级div定义伪类:（推荐）
　　　　after和zoom

　　　　div:after{
　　　　　　content:"";
　　　　　　clear:both;
　　　　}

　　　　.clearfix{
　　　　　　zoom:1; /*为了兼容IE*/
　　　　}

　　(2).父级div定义
　　　　overflow:hidden

　　(3). 结尾处加空div标签并对其应用
　　　　clear:both

　　　　//对添加的元素使用 clear:both
　　　　.clear{clear:both;}
　　　　<div class="box">
　　　　<div style="float:left;">1</div>
　　　　<div style="float:left;">2</div>
　　　　<div style="float:left;">3</div>
　　　　//添加一个新元素
　　　　<div class="clear"></div>
　　　　</div>

　　(4).父级div定义height
　　(5).父级div定义
　　　　overflow:auto

 

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

　　(1)设置display属性

　　　　display:inline-block；

　　(2)给div添加浮动

　　(3)给div添加定位

posted @ 2021-01-30 17:08  fenye  阅读(45)  评论(0)    收藏  举报