Skip to content

自适应布局.md

Latest commit

 

History

History
460 lines (460 loc) · 9.97 KB

自适应布局.md

File metadata and controls

460 lines (460 loc) · 9.97 KB

CSS布局

脱离文档流

脱离文档流，即将元素从普通的布局排版中拿走，其他盒子在定位的时候，会当没看到它，两者位置重叠都是可以的

浮动脱离文档流

使用float脱离文档流时，其他盒子会无视这个元素，但其他盒子内的文本依然会为这个元素让出位置，环绕在周围。
  • 浮动后接行内元素
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    body{
      margin: 0px;
      height: 100%;
    }
    html{
      height: 100%;
    }
    .left{
      width: 100px;
      float: left;
      background-color: red;
    }
    .test{
      background-color: beige;
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="left">
      left left left left left left
      left left left left left left
      left left left left left left
      left left left left left left
      left left left left left left
      left left left left left left
    </div>
    <div class="test">divdvidivdiv</div>
  </div>
</body>
</html>
  • 浮动后接行内元素 行内元素宽度较小 此时行内元素会被挤下来 但是高度是整个高度，特别大
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    body{
      margin: 0px;
      height: 100%;
    }
    html{
      height: 100%;
    }
    .left{
      width: 100px;
      float: left;
      background-color: red;
    }
    .test{
      width: 191px;
      background-color: beige;
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="left">
      left left left left left left
      left left left left left left
      left left left left left left
      left left left left left left
      left left left left left left
      left left left left left left
    </div>
    <div class="test">divdvidivdiv</div>
  </div>
</body>
</html>
  • 浮动后接内联元素 真正的脱离文档流
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    body{
      margin: 0px;
      height: 100%;
    }
    html{
      height: 100%;
    }
    .left{
      width: 100px;
      float: left;
      background-color: red;
    }
    .test{
      background-color: beige;
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="left">
      left left left left left left
      left left left left left left
      left left left left left left
      left left left left left left
      left left left left left left
      left left left left left left
    </div>
    <span class="test">spanspan</span>
  </div>
</body>
</html>

绝对定位脱离文档流

设置了绝对定位后，不仅是旁边的其他盒子无视red div的存在，连盒子里的文本也无视了red div的存在，顶着左上边框定位！

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    body{
      margin: 0px;
      height: 100%;
    }
    html{
      height: 100%;
    }
    .left{
      width: 100px;
      position: absolute;
      background-color: red;
    }
    .test{
      background-color: yellow;
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="left">
      left left left left left left
      left left left left left left
      left left left left left left
      left left left left left left
      left left left left left left
      left left left left left left
    </div>
    <div class="test">div div div div div div div div div</div>
  </div>
</body>
</html>

圣杯布局

  • 圣杯布局的核心是左、中、右三栏都通过float进行浮动，然后通过负值margin进行调整
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    body{
      margin: 0px;
      height: 100%;
    }
    html{
      height: 100%;
    }
    .main{
      width: 100%;
      float: left;
      background-color: green;
    }
    .left{
      width: 100px;
      float: left;
      background-color: red;
      margin-left: -100%;
      position: relative;
      left: -100px;
    }
    .right{
      width: 100px;
      float: left;
      background-color: yellow;
      margin-left: -100px;
      position: relative;
      right: -100px;
    }
    .container{
      padding-left: 100px;
      padding-right: 100px;
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="main">
      main main main main main main
      main main main main main main
      main main main main main main
      main main main main main main
      main main main main main main
      main main main main main main
      main main main main main main
      main main main main main main
      main main main main main main
      main main main main main main
      main main main main main main
      main main main main main main
      main main main main main main
      main main main main main main
      main main main main main main
      main main main main main main
      main main main main main main
      main main main main main main
    </div>
    <div class="left">
      left left left left left left
      left left left left left left
      left left left left left left
      left left left left left left
      left left left left left left
      left left left left left left
    </div>
    <div class="right">
      right right right right right
      right right right right right
      right right right right right
      right right right right right
      right right right right right
      right right right right right
    </div> 
  </div>
</body>
</html>

双飞翼布局

双飞翼布局的前两步和圣杯布局一样，只是处理中间栏部分内容被遮挡问题的解决方案有所不同：
既然main部分的内容会被遮挡，那么就在main内部再加一个content，通过设置其margin来避开遮挡，问题也就可以解决了：
唯一需要注意的是，需要在main后面加一个元素来清除浮动

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    body{
      margin: 0px;
      height: 100%;
    }
    html{
      height: 100%;
    }
    .main{
      float: left;
      width: 100%;
    }
    .content{
      background-color: green;
      margin: 0px 100px;
    }
    .left{
      background-color: red;
      width: 100px;
      float: left;
      margin-left: -100%;
    }
    .right{
      background-color: yellow;
      width: 100px;
      float: left;
      margin-left: -100px;
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="main">
      <div class="content">
          main main main main main main
          main main main main main main
          main main main main main main
          main main main main main main
          main main main main main main
          main main main main main main
          main main main main main main
          main main main main main main
          main main main main main main
          main main main main main main
          main main main main main main
          main main main main main main
          main main main main main main
          main main main main main main
          main main main main main main
          main main main main main main
          main main main main main main
          main main main main main main
      </div> 
    </div>
    <div class="left">
          left left left left left left
          left left left left left left
          left left left left left left
          left left left left left left
          left left left left left left
          left left left left left left
    </div>
    <div class="right">
      right right right right right
      right right right right right
      right right right right right
      right right right right right
      right right right right right
      right right right right right
    </div>
    <div style="clear: both;"></div>
  </div>
</body>
</html>

浮动

子div设置为浮动后，脱离文档流，父div高度为零，影响之后的布局，要清除浮动

  • 给父级元素单独定义高度
  • 在子标签结尾处加空div标签 clear:both
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    body{
      margin: 0px;
      height: 100%;
    }
    html{
      height: 100%;
    }
    .in{
      float: left;
      height: 100px;
      width: 100px;
      background-color: aqua;
    }
  </style>
</head>
<body>
  <div class="out">
    <div class="in"></div>
    <div style="clear: both;"></div>
  </div>
</body>
</html>
  • 父级元素定义伪类 相当于父级元素的子元素
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    body{
      margin: 0px;
      height: 100%;
    }
    html{
      height: 100%;
    }
    .in{
      float: left;
      height: 100px;
      width: 100px;
      background-color: aqua;
    }
    .out::after{
      display: block;
      content: '';
      clear: both;
      font-size: 0px;
      height: 0px;
    }
  </style>
</head>
<body>
  <div class="out">
    <div class="in"></div>
  </div>
</body>
</html>
  • 父级div定义 overflow:hidden 开启BFC
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    body{
      margin: 0px;
      height: 100%;
    }
    html{
      height: 100%;
    }
    .in{
      float: left;
      height: 100px;
      width: 100px;
      background-color: aqua;
    }
    .out{
      overflow: hidden;
    }
  </style>
</head>
<body>
  <div class="out">
    <div class="in"></div>
  </div>
</body>
</html>