CSS布局的三种机制

普通流（标准流）

浮动

让盒子从普通流中浮起来—让多个盒子(div)水平排列成一行

定位

让盒子自由的定在其他盒子上面—CSS（js 特效）离不开定位

定位模式

语法

选择器 { position: 属性值; }

静态定位(static)

静态定位是元素的默认定位方式，无定位的意思
静态定位按照标准流特性摆放位置，它没有边偏移

相对定位(relative)

相对定位是元素相对于它原来在标准流中的位置来说的
原来在标准流的区域继续占有，后面的盒子仍然以标准流的方式对待它

绝对定位(absolute)

绝对定位是元素以带有定位的父级元素来移动位置
如果父级都没有定位，则以浏览器文档为准移动位置
不保留原来的位置，完全是脱标的

居中
1.left:50%;：让盒子的左侧移动到父级元素的水平中心位置
2. margin-left:-100px;：让盒子向左移动自身宽度的一半

固定定位(fixed)

固定定位是绝对定位的一种特殊形式
完全脱标——完全不占位置，单独使用的不随滚动条滚动
只认浏览器的可视窗口，跟父元素没有任何关系

边偏移

top
顶端偏移量，定义元素相对于其父元素上边线的距离

定位案例

新浪首页案例分析

顶部图片固定在浏览器可视窗口顶部，不会随窗口一起滚动
两侧图片固定在浏览器可视窗口左右两侧，不随窗口一起滚动

顶部和底部

.top {
/* 注意：使用固定定位时，如果盒子中没有内容，需要     指定宽度 */
width: 100%;
height: 44px;
background: url(images/top.png) no-repeat top center;
position: fixed;
left: 0px;
top: 0px;
}
.box {
width: 1002px;
/* 顶部的 44px 的 margin 可以让 box 显示在顶部图片下方 */
margin: 44px auto;
}

在使用固定定位时，如果盒子中没有内容，需要指定宽度

左右两侧

.ad-left,
.ad-right {
position: fixed;
top: 100px;
}
.ad-left {
left: 0px;
}
.ad-right {
right: 0px;
}

注意
不要同时使用 left 和 right 和边偏移属性

CSS基础知识（定位）相关推荐

CSS基础知识——定位
1.静态定位(static) position: static; 按照标准流摆放,没有边偏移. 2.相对定位(relative) position: relative; ①参照自己原来位置移动: ②不 ...
〖前端开发〗HTML/CSS基础知识学习笔记
经过一天的学习,把慕课网的HTML/CSS基础知识学完了,笔记整理: 1. 文件结构:HTML文件的固定结构:<html><head>...</head><b ...
html css基础知识
1 这是自己学习html时候做的一些记录,供大家参考 <!-- 2 块和内联3 块元素:独占一行的元素4 div p h ul5 div没有任何语义,就是一个纯粹的快元素6 就是为了方便布局7 ...
CSS基础知识（高级技术）
CSS基础知识元素的显示与隐藏 display 显示 visibility 可见性 overflow 溢出 CSS用户界面样式鼠标样式cursor 轮廓线 outline 防止拖拽文本域resiz ...
css点击a标签显示下划线_好程序员HTML5培训教程-html和css基础知识
好程序员HTML5培训教程-html和css基础知识,Html是超文本标记语言(英语全称:HyperText Markup Language,简称:HTML)是一种用于创建网页的标准标记语言. Css ...
HTML/CSS基础知识（四）
WEB标准和W3C的理解与认识 Web标准是一系列标准的集合. 网页主要由三部分组成:结构(Structure).表现(Presentation)和行为(Behavior). 对应的标准也分三方面:结 ...
HTML+CSS基础知识简单版
HTML+CSS基础知识简单版一.HTML概述 HTML:超文本标记语言,其实就是用来开发网页的一门语言: CSS:层叠样式表,可以用于渲染网页.美化网页.做网页. 1.HTML介绍 HTML:超文 ...
CSS基础知识（一）：选择器
文章目录前言一.CSS基础知识二.选择器 1.选择器 2.基础选择器 2.1 标签选择器 2.2 类选择器 2.3 id选择器 2.4 通配符选择器 2.5 基础选择器总结 3.复合选择器 3. ...
CSS基础知识---三种选择器
CSS基础知识---三种选择器选择器标签选择器 id选择器 class选择器全部代码选择器标签选择器 id选择器 class选择器标签选择器选择器优先级:id>class>标 ...

CSS基础知识（定位）

CSS基础知识