乐趣区

关于前端:06-CSS3布局下前端必须掌握

jiezi

摘要：在这篇文章，你将会看到 CSS 中的罕用布局以及一些你平时不留神的点。非常适合初学者！大鹏一日同风起，扶摇直上九万里！一起学习，一起提高！

1、浮动 float

代码如下：

<div class="float-div">Float</div>
<p>It's brave new world out there. Our children are belong put in increasing more competitive situations............</p>
.float-div{
    float: left;
    background: yellowgreen;
    width: 150px;
    height: 150px;
    margin-right: 30px;
}

成果如下：

  • float：有四个可能的值，left（左浮动）、right(右浮动)、none（默认不浮动）、inherit（继承父元素的浮动属性）。
  • 革除浮动（clear）：对于所在浮动上面的本身不浮动内容也将会围绕浮动元素进行包装，要想解决这个问题，能够用 clear 属性。有三个值，left(进行任何流动的左浮动)、right（进行右浮动）、none（进行左右浮动）。

2、定位 position

  • 动态定位：是默认行为。position:static;
  • 绝对定位：position:relative;联合 top/bottom/left/right 四个属性应用。
  • 相对定位：position:absolute;与其余的层独立开来，联合 top/bottom/left/right 四个属性应用。
  • 定位上下文：相对定位的元素的绝对地位元素，若要相对定位的元素的绝对地位元素，则这个元素肯定要蕴含相对定位元素。
  • z-index：正值示意将它们挪动到堆栈上方，负值示意将它们挪动到堆栈下方。默认状况下，定位的元素都具备 z -index 为 auto，实际上为 0。
  • 固定定位：绝对于浏览器视口自身。position: fixed;
  • 粘性定位：position: sticky;能够创立一个滚动索引页面，在此页面上，不同的题目会停留在页面底部。（上面的列表项能够设置多一些，能力看到成果哦！）

html 代码：

<h1>Sticky positioning</h1>

<dl>
    <dt>Brave new world</dt>
        <dd>Apple</dd>
        <dd>Ant</dd>
        <dd>Altimeter</dd>
    <dt>The best start in life</dt>
        <dd>Bird</dd>
        <dd>Buzzard</dd>
        <dd>Bee</dd>
        <dd>Banana</dd>
    <dt>Top course choices</dt>
        <dd>Calculator</dd>
        <dd>Cane</dd>
        <dd>Camera</dd>
     ......
</dl>

CSS 代码：

dt {
  position: sticky;
  background-color: black;
  color: white;
  padding: 10px;
  top: 0;
  left: 0;
  margin: 1em 0;
}

practice:
晓得了这么多，快为一所大学社区做一个漂亮的排版吧！
源码能够参考 https://github.com/unique008/…。

(end)

以上均是参考最权威的 MDN Web Docs，总结进去的比拟重要的知识点，与君共勉。不妥之处，评论区欢迎您！

退出移动版