[散修弟子]CSS-8725|2020年04月10日的日报-技能树.IT修真院

发表于： 2020-04-10 20:56:53

2 1400

今日完成的事情

1.了解元素之间外边距合并的问题，确定浮动元素之间不会发生外边距合并
2.学会了消除浮动的方法：父元素加overflow:hidden;多加一个子元素，配上样式：clear:both;用伪元素消除
3.元素居中显示，如果父元素没有固定宽度，可以让父元素向左移动50%,子元素向右移动50%
4.按照任务要求尝试完成任务
<!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;
   }
  body {
      overflow-y: auto;
      overflow-x: hidden;
  }
   .fa{
       width: 99%;
       position: relative;
       margin: 0 auto;
       left: 50%;
   }
   .child{
       position: relative;
       float: left;
       width: 31%;
       height: 0;
       margin: 1%;
       padding: 31% 0 0;
       right: 50%;
       border-radius: 10px;
       background-color:#ffa600;
   }
</style>
<body>

        <div class="fa">
            <div class="child"></div>
            <div class="child"></div>
            <div class="child"></div>
            <div class="child"></div>
            <div class="child"></div>
            <div class="child"></div>
            <div class="child"></div>
            <div class="child"></div>
            <div class="child"></div>
            <div style="clear: both;"></div>
        </div>



</body>
</html>
5.完成nginx配置 ,并在手机上运行任务