每日一题：css

w世说心语
229 阅读2分钟

1. css实现三栏布局：左右固定为300px，中间自适应，有多少种实现方法，如何实现?

  1. 浮动

<style>
  .idea1 div {
    height: 100px;
  }
  .idea1 .left {
    background: red;
    width: 300px;
    float: left;
  }
  .idea1 .right {
    background: pink;
    width: 300px;
    float: right;
  }
  .idea1 .center {
    background: orange;
  }
</style>
<body>
  <div class="idea1">
    <div class="left">left</div>
    <div class="right">right</div>
    <div class="center">center</div>
  </div>
</body>

  1. 绝对定位

<style>
  .idea2 div {
    height: 100px;
  }
  .idea2 .left {
    position: absolute;
    left: 0;
    background: red;
    width: 300px;
  }
  .idea2 .right {
    background: pink;
    width: 300px;
    position: absolute;
    right: 0;
  }
  .idea2 .center {
    position: absolute;
    left: 300px;
    right: 300px;
    background: orange;
  }
</style>
<body>
  <div class="idea2">
    <div class="left">left</div>
    <div class="right">right</div>
    <div class="center">center</div>
  </div>
</body>

  1. flexBox

<style>
  .idea3 div {
    height: 100px;
  }
  .idea3 {
    display: flex;
  }
  .idea3 .left {
    background: red;
    width: 300px;
  }
  .idea3 .right {
    background: pink;
    width: 300px;
  }
  .idea3 .center {
    flex: 1;
    background: orange;
  }
</style>
<body>
  <div class="idea3">
    <div class="left">left</div>
    <div class="center">center</div>
    <div class="right">right</div>
  </div>
</body>

  1. 表格布局

<style>
  .idea4 div {
    height: 100px;
    display: table-cell;
  }
  .idea4 {
    display: table;
    width: 100%;
  }
  .idea4 .left {
    background: red;
    width: 300px;
  }
  .idea4 .right {
    background: pink;
    width: 300px;
  }
  .idea4 .center {
    background: orange;
  }
</style>
<body>
  <div class="idea4">
    <div class="left">left</div>
    <div class="center">center</div>
    <div class="right">right</div>
  </div>
</body>

  1. 网格布局

<style>
  .idea5 {
    display: grid;
    grid-template-columns: 300px auto 300px;
    grid-template-rows: 100px;
    width: 100%;
  }
  .idea5 .left {
    background: red;
  }
  .idea5 .right {
    background: pink;
  }
  .idea5 .center {
    background: orange;
  }
</style>
<body>
  <div class="idea5">
    <div class="left">left</div>
    <div class="center">center</div>
    <div class="right">right</div>
  </div>
</body>

2. position的值有哪些，都是基于谁进行定位的

  1. relative

    相对定位：相对于正常位置进行定位

  2. absolute

    绝对定位：相对于外层第一个非static定位的元素进行定位

  3. fixed

    固定定位：相对于浏览器进行定位

  4. static

    默认值：没有定位，元素出现在正常的文本流中

  5. inherit

    规定继承父元素的position属性的值

  6. sticky

    粘性定位：基于用户滚动的位置，它的行为就像 position:relative; 而当页面滚动超出目标区域时，它的表现就像 position:fixed; 固定在目标位置。

  7. initial

    设置该属性为默认值

* 如果你发现了问题欢迎留言指正，或者还有更好的解决办法，更加诡异的出题思路，欢迎留言探讨，让我们一起在学习的路上越走越远吧 *

avatar
文章
阅读
粉丝