• 如果您觉得本站非常有看点,那么赶紧使用Ctrl+D 收藏吧

06 CSS3布局-下(前端必须掌握)

互联网 diligentman 2周前 (10-14) 13次浏览

摘要:在这篇文章,你将会看到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;
}

效果如下:
06 CSS3布局-下(前端必须掌握)

  • 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,总结出来的比较重要的知识点,与君共勉。不妥之处,评论区欢迎您!


喜欢 (0)