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

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

效果如下:
image.png

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

黄沙百战穿金甲,不破楼兰终不还。

1 声望
0 粉丝
0 条评论
推荐阅读
12 用HTML/CSS做一个【百度首页】
源码可以参考Github([链接])

unique_007阅读 1.6k

在前端使用 JS 进行分类汇总
最近遇到一些同学在问 JS 中进行数据统计的问题。虽然数据统计一般会在数据库中进行,但是后端遇到需要使用程序来进行统计的情况也非常多。.NET 就为了对内存数据和数据库数据进行统一地数据处理,发明了 LINQ (L...

边城17阅读 1.8k

封面图
涨姿势了,有意思的气泡 Loading 效果
今日,群友提问,如何实现这么一个 Loading 效果:这个确实有点意思,但是这是 CSS 能够完成的?没错,这个效果中的核心气泡效果,其实借助 CSS 中的滤镜,能够比较轻松的实现,就是所需的元素可能多点。参考我们...

chokcoco18阅读 2k评论 2

你可能不需要JS!CSS实现一个计时器
CSS现在可不仅仅只是改一个颜色这么简单,还可以做很多交互,比如做一个功能齐全的计时器?样式上并不复杂,主要是几个交互的地方数字时钟的变化开始、暂停操作重置操作如何仅使用 CSS 来实现这样的功能呢?一起...

XboxYan20阅读 1.5k评论 1

封面图
「彻底弄懂」this全面解析
当一个函数被调用时,会创建一个活动记录(有时候也称为执行上下文)。这个记录会包含函数在 哪里被调用(调用栈)、函数的调用方法、传入的参数等信息。this就是记录的其中一个属性,会在 函数执行的过程中用到...

wuwhs17阅读 2.3k

封面图
用了那么久的 SVG,你还没有入门吗?
其实在大部分的项目中都有 直接 或 间接 使用到 SVG 和 Canvas,但是在大多数时候我们只是选择 简单了解 或 直接跳过,这有问题吗?没有问题,毕竟砖还是要搬的!

熊的猫16阅读 1.5k评论 2

封面图
css常用技巧梳理
1、图片文字环绕shape-outside 是一个允许设置形状的 CSS 属性。它还有助于定义文本流动的区域 {代码...} 2、:where() 简化代码 {代码...} 3、实现平滑滚动 {代码...} 4、背景混合模式 {代码...} 5、图像填充文字...

墨城20阅读 1.1k评论 2

黄沙百战穿金甲,不破楼兰终不还。

1 声望
0 粉丝
宣传栏