[CSS+HTML]CSS和HTML常见题目-1 #13

cookiepool · 2019-10-08T10:05:16Z

一、常见的布局

圣杯布局+双飞翼布局

作用：圣杯布局和双飞翼布局解决的问题是一样的，就是两边定宽，中间自适应的三栏布局，中间栏要在放在文档流前面以优先渲染。
区别：圣杯布局，为了中间div内容不被遮挡，将中间div设置了左右padding-left和padding-right后，将左右两个div用相对布局position: relative并分别配合right和left属性，以便左右两栏div移动后不遮挡中间div。双飞翼布局，为了中间div内容不被遮挡，直接在中间div内部创建子div用于放置内容，在该子div里用margin-left和margin-right为左右两栏div留出位置。

1、圣杯布局

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>圣杯布局</title>
  <style>
    .header, .footer {
      width: 100%;
      height: 100px;
      color: #fff;
      text-align: center;
      background-color: burlywood;
    }

    .main {
      padding: 0 200px 0 160px;
      height: 500px;
    }
    .left {
      float: left;
      position: relative;
      width: 160px;
      right: 160px;
      height: 400px;
      background-color: aqua;
      margin-left: -100%;
    }
    .right {
      float: left;
      width: 200px;
      height: 400px;
      margin-right: -200px;
      background-color: cornsilk;
    }
    .middle {
      float: left;
      width: 100%;
      height: 400px;
      background-color: blueviolet;
    }
  </style>
</head>
<body>
  <div class="header">header</div>

  <div class="main">
    <div class="middle">middle</div>
    <div class="left">left</div>
    <div class="right">right</div>
  </div>

  <div class="footer">footer</div>
</body>
</html>

2、双飞翼布局

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>双飞翼布局</title>
  <style>
    .header, .footer {
      width: 100%;
      height: 100px;
      color: #fff;
      text-align: center;
      background-color: burlywood;
    }

    .main {
      height: 500px;
    }
    .container {
      float: left;
      width: 100%;
    }
    .left {
      float: left;
      width: 160px;
      height: 400px;
      background-color: aqua;
      margin-left: -100%;
    }
    .right {
      float: left;
      width: 200px;
      height: 400px;
      margin-left: -200px;
      background-color: cornsilk;
    }
    .middle {
      height: 400px;
      background-color: blueviolet;
      margin: 0 200px 0 160px;
    }
  </style>
</head>
<body>
  <div class="header">header</div>

  <div class="main">
    <div class="container">
      <div class="middle">middle</div>
    </div>
    <div class="left">left</div>
    <div class="right">right</div>
  </div>

  <div class="footer">footer</div>

</body>
</html>

3、圣杯布局flex版

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>圣杯布局</title>
  <style>
    .header, .footer {
      width: 100%;
      height: 100px;
      color: #fff;
      text-align: center;
      background-color: burlywood;
    }

    .main {
      display: flex;
      height: 500px;
    }
    .left {
      flex-shrink: 0;
      flex-grow: 0;
      flex-basis: 160px;
      height: 400px;
      background-color: aqua;
    }
    .right {
      flex-shrink: 0;
      flex-grow: 0;
      flex-basis: 200px;
      height: 400px;
      background-color: cornsilk;
    }
    .middle {
      flex-grow: 1;
      height: 400px;
      background-color: blueviolet;
    }
  </style>
</head>
<body>
  <div class="header">header</div>

  <div class="main">
    <div class="left">left</div>
    <div class="middle">middle</div>
    <div class="right">right</div>
  </div>

  <div class="footer">footer</div>
</body>
</html>

关于flex的使用这里贴一下阮一峰大佬的博客：Flex 布局教程：语法篇

4、粘连布局

布局要求：

有一块内容<main>，当<main>的高康足够长的时候，紧跟在<main>后面的元素<footer>会跟在<main>元素的后面。
当<main>元素比较短的时候(比如小于屏幕的高度),我们期望这个<footer>元素能够“粘连”在屏幕的底部

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <style>
    * {
      padding: 0;
      margin: 0;
    }
    body, html {
      height: 100%;
    }
    #wraper {
      min-height: 100%;
      background-color: pink;
      text-align: center;
      overflow: hidden;
    }
    #wraper .main {
      padding-bottom: 50px;
    }
    #footer {
      height: 50px;
      background-color: greenyellow;
      text-align: center;
      margin-top: -50px;
    }
  </style>
</head>
<body>
  
  <div id="wraper">
    <div class="main">
      Lorem ipsum, dolor sit amet consectetur adipisicing elit. Tempora tempore, id placeat cupiditate doloribus temporibus consectetur mollitia magnam ipsa quae ut nisi, eos voluptates repudiandae, eius sint nobis. Molestiae, ipsa!
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptas asperiores facilis corrupti iure. Praesentium ab, eius dolorem quibusdam ex adipisci optio reprehenderit beatae, natus consequatur, nam in incidunt aliquam architecto?
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Qui, eligendi. Nulla, in! Dignissimos culpa aliquid eaque cumque ea doloribus quaerat recusandae iure, vero maxime nobis harum deserunt architecto? Aliquam, ipsa?
      Lorem, ipsum dolor sit amet consectetur adipisicing elit. Quia enim explicabo optio eveniet inventore eos laudantium quas, at quo recusandae! Perferendis tempora, porro ipsa corporis laboriosam accusantium placeat ad itaque.
      Lorem ipsum, dolor sit amet consectetur adipisicing elit. Alias ipsum et numquam praesentium rerum beatae repellat, exercitationem veniam in. Ducimus molestiae cumque fugiat repudiandae possimus natus quos laudantium pariatur minus?
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Magnam reiciendis iste nulla porro quidem ducimus illum blanditiis aspernatur, officiis minima error, tenetur id reprehenderit ad possimus voluptate odio veritatis ipsam.
      Lorem ipsum dolor sit amet consectetur, adipisicing elit. Ut veritatis aperiam dolores, ipsam suscipit molestias eaque doloribus voluptates modi, labore sapiente vel dolorem iure esse doloremque error voluptatum itaque praesentium.
      Lorem ipsum, dolor sit amet consectetur adipisicing elit. Quidem officiis ipsam non odio pariatur libero necessitatibus aut fugiat inventore, beatae dolore mollitia porro saepe nesciunt incidunt earum voluptatibus et adipisci.
    </div>
  </div>
  <div id="footer"></div>
</body>
</html>

5、两列自适应布局

两列自适应布局是指一列由内容撑开，另一列撑满剩余宽度的布局方式

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>两列自适应布局</title>
  <style>
    /* 浮动版 */
    /* .parent {
      overflow: hidden;
      zoom: 1;
    }
    .left {
      float: left;
      margin-right: 20px;
    }
    .right {
      overflow: hidden;
      zoom: 1;
    } */

    /* flex版 */
    .parent {
      display: flex;
    }
    .left {
      flex: 0;
    }
    .right {
      flex: 1;
    }
  </style>
</head>
<body>
  <div class="parent" style="background-color: lightgrey;">
    <div class="left" style="background-color: lightblue;">
      <p>left</p>
    </div>
    <div class="right"  style="background-color: lightgreen;">
      <p>right</p>
      <p>right</p>
    </div>        
  </div>
</body>
</html>

参考资料
几种常见的 CSS 布局
 圣杯布局和双飞翼布局的理解和区别，并用代码实现

二、页面导入样式时，使用link和@import有什么区别？

三、html的元素有哪些（包含H5）？

四、CSS3有哪些新增的特性？

五、HTML全局属性(global attribute)有哪些（包含H5）？

六、在页面上隐藏元素的方法有哪些？

The text was updated successfully, but these errors were encountered:

cookiepool changed the title ~~[CSS]圣杯布局、双飞翼布局、粘连布局~~ [CSS]圣杯布局、双飞翼布局、粘连布局、两列自适应布局 Oct 9, 2019

cookiepool changed the title ~~[CSS]圣杯布局、双飞翼布局、粘连布局、两列自适应布局~~ [CSS+HTML]CSS和HTML常见题目-1 Oct 12, 2019

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[CSS+HTML]CSS和HTML常见题目-1 #13

[CSS+HTML]CSS和HTML常见题目-1 #13

cookiepool commented Oct 8, 2019 •

edited

Loading

[CSS+HTML]CSS和HTML常见题目-1 #13

[CSS+HTML]CSS和HTML常见题目-1 #13

Comments

cookiepool commented Oct 8, 2019 • edited Loading

一、常见的布局

1、 圣杯布局

2、 双飞翼布局

3、 圣杯布局flex版

4、粘连布局

5、两列自适应布局

二、页面导入样式时，使用link和@import有什么区别？

三、html的元素有哪些（包含H5）？

四、CSS3有哪些新增的特性？

五、HTML全局属性(global attribute)有哪些（包含H5）？

六、在页面上隐藏元素的方法有哪些？

cookiepool commented Oct 8, 2019 •

edited

Loading

1、圣杯布局

2、双飞翼布局

3、圣杯布局flex版