CSS——4种定位
若是没有指定定位方式,默认为静态定位。
1、静态定位(static)
静态定位会将所有元素正常流入页面。
2、绝对定位(absolute)
绝对定位将元素完全从页面流中取出,允许你为他制定一个绝对的位置。这是相对于离他最近的父元素来指定的(这一般是<html>,除非你自行指定了另外的父元素)。如果一个绝对定位元素嵌套在另一个定位元素中,这个元素就会相对于外包含元素定位。
3、固定定位(fixed)
固定定位是相对于浏览器窗口,把元素放在一个特定的固定位置。页面滚动时,固定定位的元素不会移动。
4、相对定位(relative)
相对定位会相对于其外围包含元素来定位,元素仍在正常的页面流中,然后按你指定的量偏移元素。
总结
- 流
浏览器使用流在页面中放置元素。
- 块元素
块元素在流中会自动有一个换行,块元素从上往下流,各元素之间有一个换行。默认每个快元素会占浏览器窗口的整个宽度。可以通过设置width属性,设置内容区的宽度。
正常页面流中两个块元素的外边距会折叠未最大的外边距大小,例如块元素1的外边距为10px,块元素2的外边距为5px,那么块元素1和块元素2的间距为10px。
- 内联元素
内联元素从块元素内部从左上方流向左下方。如果需要多行,浏览器会换行。在垂直方向上扩展外围块元素,来包含内联元素。
- 浮动元素
浮动元素会从正常流中取出,浮动到左边或者右边。float属性。浮动元素放在块元素之上,不会影响正常的页面流。不过,内联内容会考虑浮动元素的边界,围绕着这个浮动元素。
浮动元素必须有特定的宽度,不能设置为auto。
- clear属性
clear属性用来指定一个块元素左边或者右边不能有浮动元素。设置了clear属性的块元素会下移直到它旁边没有块元素。
- 流体布局
流体布局是指,扩展浏览器窗口时,页面中的内容会扩展以适应页面。
- 冻结布局
冻结布局是指,其中的内容宽度是固定的,不会随着浏览器窗口扩展或收缩。
- 凝胶布局
凝胶布局是介于流体布局和冻结布局之间,其中内容的宽度是固定的。但是外边距会随着浏览器窗口扩展或收缩。通常会把内容放在中央。
- position属性
static/absolute/fixed/relative。使用绝对、固定和相对定位时,属性top、right、bottom、left可以用来指定元素位置。
- CSS表格
CSS表格显示允许按一种表格布局来摆放元素。
CSS——4种定位的更多相关文章
- CSS四种定位及应用
定位(position) 如果,说浮动, 关键在一个 “浮” 字上面, 那么 我们的定位,关键在于一个 “位” 上. PS: 定位是我们CSS算是数一数二难点的了,但是,你务必要学好它,我们CSS离不 ...
- Css五种定位之间的区别
##CSS 定位机制## CSS 有三种基本的定位机制:普通流.浮动流和定位流. 除非专门指定,否则所有框都在普通流中定位.也就是说,普通流中的元素的位置由元素在 (X)HTML 中的位置决定. 块级 ...
- CSS三种定位机制
标准文档流 块级元素撑满整个页面div,ul,li,dl,dt,p 行级元素可以一行显示多个span,strong,img,input大部分 一般不设置盒子的高度,另其自动调整 margin属性的au ...
- css五种定位方式介绍
1.static定位(普通流定位) -------------- 默认定位 2.float定位(浮动定位) 例:float:left; 有两个取值:left(左浮动)和right(右浮动).浮动元素会 ...
- css四种定位
概述:元素定位属性主要包括的模式和边偏移两部分,也就是说以后定位要和边偏移量搭配使用.边偏移加定位定位模式才能构成一个完整的定义方式. 偏移量说明: 边偏移属性 描述 top: 顶端偏移,定义元素相对 ...
- 【css笔记】css中的盒模型和三种定位机制(固定定位,绝对定位,浮动)
html页面上的元素都可以看成是框组成的,框通过三种定位机制排列在一起就过程了我们看到的页面.而框就是盒模型. 盒模型 1.页面上的每个元素可以看成一个矩形框,每个框由元素的内容,内边距,边框和外边距 ...
- CSS的4种定位方式比较
CSS有四种定位(Positioning)方法:Static,Relative, Absolute和Fixed 元素flow, overlap 相对参照物: 能否用offset( top, left, ...
- CSS的五种定位方式
CSS中一共有五种定位: position:static:默认值 position:absolute:绝对定位 position:relative:相对对定位 position:fixed:固定定位 ...
- CSS浮动、定位
这几天有空,整理了关于CSS浮动和定位的一些知识点,有什么欠缺的地方,欢迎大家批评指正. 一.文档流的概念指什么?有哪种方式可以让元素脱离文档流? 文档流,指的是元素排版布局过程中,元素会自动从左往右 ...
随机推荐
- 创建Cookie,简单模拟登录,记录登录名,购物车记录先前添加内容,session控制登录
工作任务:模拟淘宝登录和购物车功能:使用cookie记录登录名,下次登录时能够记得上次的登录名,使用cookie模拟购物车功能,使用session记住登录信息并验证是否登录,防止利用url打开网站, ...
- 一次意外的X锁不阻塞问题
最近有一个朋友问我一个关于给查询操作强制上X锁却不阻塞的问题.该查询写在一个存储过程中,代码如代码1所示: 1: create PROC [dbo].[GetCityOrders] 2: @c ...
- JavaScript禁用页面刷新
JavaScript禁用页面刷新代码如下: //禁用F5刷新 document.onkeydown = function () { if (event.keyCode == 116) { event. ...
- php常见的面试题目
一. 基本知识点1.1 HTTP协议中几个状态码的含义:503 500 401 403 404 200 301 302...200 : 请求成功,请求的数据随之返回.301 : 永久性重定向.302 ...
- 第一篇博文:PHP函数原型中的可选参数写法为什么这么写?
第一篇,算是开始吧.简单写点儿东西. 刚开始学PHP,在看PHP Manual时遇到一个问题:含可选参数的函数原型中,可选参数的写法看不懂. 例如explode函数 array explode ( s ...
- CSS3魔法堂:认识@font-face和Font Icon
一.前言 过去我们总通过图片来美化站点的LOGO.标题.图标等,而现在我们可以通过@font-face获取另一种更灵活的美化方式. 二.看看例子 /* 定义 */ @font-face { font- ...
- 《ASP.NET SignalR系列》第二课 SignalR的使用说明
从现在开始相关文章请到: http://lko2o.com/moon 接续上一篇:<ASP.NET SignalR系列>第一课 认识SignalR (还没有看的话,建议您先看看) 一.指定 ...
- .NET Core中使用Razor模板引擎
一.简介 在MVC以外的场景中,我们往往需要完成一些模板引擎生成代码或页面的工作:在以前我们一般常用的有Razor.NVeocity.VTemplate.虽然所有的模板系统都具有一些共同特征,但 Ra ...
- 【Swift学习】Swift编程之旅---闭包(十一)
闭包是可以在代码中被传递和使用的自包含功能模块,它很像c和oc中的block,和.net中的lambdasbas表达式. 闭包可以捕获和存储其所在上下文中任意常量和变量的引用. 包裹着这些常量和变量的 ...
- ES6笔记(7)-- Promise异步编程
系列文章 -- ES6笔记系列 很久很久以前,在做Node.js聊天室,使用MongoDB数据服务的时候就遇到了多重回调嵌套导致代码混乱的问题. JS异步编程有利有弊,Promise的出现,改善了这一 ...