回顾

display 属性

display 属性是用于控制布局的最重要的 CSS 属性。
display 属性规定是否/如何显示元素。

每个 HTML 元素都有一个默认的 display 值，具体取决于它的元素类型。大多数元素的默认 display 值为 block 或 inline。

浮动和清除浮动

CSS 布局 - 浮动和清除
CSS float 属性规定元素如何浮动。
CSS clear 属性规定哪些元素可以在清除的元素旁边以及在哪一侧浮动。

定位

position 属性规定应用于元素的定位方法的类型
定位分为相对定位和绝对定位

示例

相对定位

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>qq会员官网头部栏</title><style>body,a,div{margin: 0;padding: 0;text-decoration: none;}body{background-image: url("images/bg.png");background-repeat: no-repeat;}ul{margin: 0;padding: 0;list-style: none;}#app{position: relative;width: 100%;height: 150px;background: #282424;overflow: hidden;}#logo{position: fixed;display: inline-block;float: left;}#login{position: relative;display: inline-block;right: -400px;top: 60px;border: 2px yellow solid;border-radius: 45px;}#login a{text-align: center;font: 20px bold;line-height: 40px;display: inline-block;width: 80px;height: 40px;color: yellow;}#login:hover{background: #939331;}#register{position: relative;display: inline-block;border: 2px yellow solid;border-radius: 45px;right: -450px;top: 60px;background: #939331;}#register a{text-align: center;font: 20px bold;line-height: 40px;display: inline-block;width: 200px;height: 40px;color: yellow;}#list{position: relative;display: inline-block;width: 600px;height: 50px;left: 400px;top: 60px;}#list a{text-align: center;font: 14px bold;line-height: 50px;display: inline-block;width: 90px;height: 50px;color: white;}#list a:hover{color: red;}</style>
</head>
<body><div id="app"><div id="logo"><img src="data:images/qqviplogo.png" alt="vip"></div><div id="list"><a href="">靓号站&emsp;</a><a href="">功能特权&emsp;</a><a href="">游戏特权&emsp;</a><a href="">成长体系&emsp;</a><a href="">年费专区&emsp;</a><a href="">免流量特权&emsp;</a></div><div id="login"><a href="#">登录</a></div><div id="register"><a href="">开通超级会员</a></div>
</div></body>
</html>

绝对定位

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>绝对定位</title><style>/*绝对定位1.父级元素没有定位，相对于浏览器定位,2.父级元素有定位属性，相对于父级元素定位，3.并且不处于标准文档流,原来的位置不会被保留。格式： position：absolute；top：长度；bottom：长度；right：长度；left：长度；*/div{font-size: 14px;line-height: 30px;padding: 5px;margin: 10px;}#father{border: 2px red solid;/*给父级元素施加定位属性，不进行偏移*/position: relative;}#child1{background: deeppink;}#child2{background: blue;position: absolute;right: 50px;top: 150px;}#child3{background: green;}</style>
</head>
<body><div id="father"><div id="child1">第一个盒子</div><div id="child2">第二个盒子</div><div id="child3">第三个盒子</div></div></body>
</html>

测试

相对定位

绝对定位

练习

可以自己动手试试这个小练习！

作者有话说

博客创作不易，希望看到这里的读者动动你的小手点个赞，如果喜欢的小伙伴可以一键三连，作者大大在这里给大家谢谢了。

CSS学习15之定位相关推荐

CSS学习笔记七---定位精灵图
一:知识点 1:定位属性用法总结 2:绝对定位---参照物是浏览器的第一屏 a:没有父盒子,或者父盒子没有定位相对于浏览器左上角位置来定位 b:父盒子有定位相对于父盒子来定位,子绝父相以下为注: ...
CSS学习笔记--定位
CSS 定位机制 CSS 有三种基本的定位机制:普通流.浮动和绝对定位. 除非专门指定,否则所有框都在普通流中定位.也就是说,普通流中的元素的位置由元素在 (X)HTML 中的位置决定. 块级框从上到 ...
CSS学习总结3：CSS定位
CSS 定位机制 CSS 有三种基本的定位机制:普通流.浮动和绝对定位. 一.普通流除非专门指定,否则所有框都在普通流中定位.普通流中元素框的位置由元素在(X)HTML中的位置决定.块级元素从上到下 ...
HTML CSS 学习整理
HTML CSS 学习整理码字不易,转载请务必注明原文出处.常用单位整理,不断学习,后期的新增笔记会继续加到文章上方点击链接后退页面: 回到上一个网页这是一个简单的跳转页面操作 --修改plac ...
HTML与CSS学习总结
HTML与CSS学习总结一.HTML总结 1 概念 HTML是HyperText Markup Language的简称,中文名称:超文本标记语言,它是一种用于创建网页的标准标记语言. 标记语言是由 ...
CSS 学习笔记 - 网格布局（栅格系统）
CSS 学习笔记 - 网格布局(栅格系统) 开启网格模式基本概念属性说明容器属性内容属性效果展示 grid-template-rows.grid-template-columns 基本用法 ...
前端篇--------1.css学习笔记
1.css 单行文本换行溢出解决方案(css三件套) white-space:nowrap overflow:hidden text-overflow:ellipsis 2.css m ...
js锚点定位_overflow属性详解，利用CSS实现锚点定位
1.overflow的裁剪界线--border-box overflow属性用于指定块容器元素的内容溢出时的表现方式--滚动,裁剪,自适应."BFC的最佳结界"只是其衍生出来的特性 ...
CSS学习笔记 display属性
CSS学习笔记05 display属性 HTML标记一般分为块标记和行内标记两种类型,它们也称块元素和行内元素. 块元素每个块元素通常都会独自占据一整行或多整行,可以对其设置宽度.高度.对齐等属性, ...

CSS学习15之定位

回顾

定位

示例

测试

练习

作者有话说

CSS学习15之定位相关推荐

最新文章

热门文章