Web前端基础(CSS position的正确用法)

position属性的relative以及absolute的区别是什么?

任何元素的默认position的属性值都为static(静态),但我们在布局的时候也会经常用到relative(相对)以及absolute(绝对)这两种属性。

再分别介绍两种属性之前,我们一定要记住一个重要结论:如果用position来进行布局,父级元素的position属性必须为relative,而定位于父级内部某个位置的元素,最好用absolute,因为它不受父级元素padding的属性影响,当然也可以用relative,不过到时候计算的时候不要忘记padding的值。

【absolute:绝对定位】
  默认参照浏览器左上角,配合TOP、RIGHT、BOTTOM、LEFT(以下简称TRBL)进行定位,具有以下属性:
  (1)无TRBL的情况下,参照父级左上角;无父级,参照浏览器左上角;无父级元素,但存在文本,参照最后最后一个文字的右上角为原点但是不断开文字,覆盖与上方。
  (2)如果设定TRBL,并且父级没有position属性(不论是absolute还是relative),都是默认以浏览器左上角开始定位,位置由TRBL决定。
  (3)如果设定TRBL,并且父级有position属性(不论是absolute还是relative),默认以父级左上角为原点开始定位,位置由TRBL决定。
 以上三点我们就可以总结出:若想使用absolute进行定位,那我们就要明确两点:
 第一:设定TRBL

第二:父级设定position属性

【relative:相对定位】
  默认参照父级原始点为原始点;如果无父级,以文本的上一个元素的底部为原始点,配合TRBL进行定位;当父级内有padding属性时,参照父级内容区的原始点进行定位。
  (1)不存在TRBL,参照父级左上角;没有腹肌,参照浏览器左上角;没有腹肌元素,但是存在文本,则以文本的底部为原始点进行定位并将文字断开。
  (2)设定TRBL,并且父级没有设定position属性,以父级左上角为原点进行定位
  (3)设定TRBL,并且父级设定position属性,以父级左上角为原点进行定位,但是如果父级有padding属性,那么以内容区域的左上角为原点进行定位。

综上所述,relative均以父级左上角进行定位,但是受padding的影响。

这样,我们就可以得知为什么要选用relative定位父级元素,absolute定位内部元素。因为我们布局时用relative后,就不只是用float布局页面了,还可以用TRBL进行布局。但是如果用absolute来布局页面,搜有的DIV都相对于浏览器的左上角定位,这样适配性会大大下降,用户体验度很低。所以只能用与将某个元素定位于属性为absolute的元素的内部的某个位置。学习web前端课程www.zhihaijiangku.com

时间: 2024-10-12 02:10:26

Web前端基础(CSS position的正确用法)的相关文章

Web 前端基础 - CSS

上一篇简单的过了一遍HTML的常用标签,这一篇继续CSS. 例1 CSS的标签选择器 <!DOCTYPE html> <html lang="en"> <head>     <meta charset="UTF-8">     <title></title>     <!--<link rel="stylesheet" href="common.css&

进击的Python【第十三章】:Web前端基础之HTML与CSS样式

进击的Python[第十四章]:Web前端基础之HTML与CSS样式 一.web框架的本质 众所周知,对于所有的Web应用,本质上其实就是一个socket服务端,用户的浏览器其实就是一个socket客户端. #!/usr/bin/env python #coding:utf-8 import socket def handle_request(client): buf = client.recv(1024) client.send("HTTP/1.1 200 OK\r\n\r\n")

《web 前端基础到实战系列课程》

<web 前端基础到实战系列课程> 摘要: mod_expires&mod_headers可以减少10%左右的重复请求,让重复的用户对指定的页面请求结果都CACHE在本地,根本不向服务器发出请求. 在使用之前,首先要确认一下"mod_expires"模组是否有启用.如果是自己安装Apache来架设网页主机的话,这里我们可以透过编辑Apache的"httpd.conf"设定档来处理 一.浏览器缓存原理 将该行前面的"#"字号删除

好程序员web前端分享css常用属性缩写

好程序员web前端分享css常用属性缩写,使用缩写可以帮助减少你CSS文件的大小,更加容易阅读.css缩写的主要规则如下: 颜色 16进制的色彩值,如果每两位的值相同,可以缩写一半,例如: #000000可以缩写为#000;#336699可以缩写为#369; 盒尺寸 通常有下面四种书写方法: property:value1; 表示所有边都是一个值value1; property:value1 value2; 表示top和bottom的值是value1,right和left的值是value2 pr

好程序员web前端分享CSS文件引用的最优方法

好程序员web前端分享CSS文件引用的最优方法,在html总引入css文件的方法: 1链接式: 2导入式: 区别: 使用链接式时,会在加载页面主体部分之前加载css文件,这样现实出来的页面一开始就是带有样式效果的,而使用导入式时,会在整个页面装载完成之后再装载css文件,对于有的浏览器来说,在一些情况下,如果页面文件的体积比较大,则会出现先现实无样式的页面,闪烁一下之后再出现设置样式的效果.从浏览者的感受来说,这是使用导入式的一个缺陷.** 链接式比导入式快. 当有多个文件链接到页面的时候会导致

1+x 证书 Web 前端开发 css 专项练习

官方QQ群 1+x 证书 Web 前端开发 css 专项练习 http://blog.zh66.club/index.php/archives/192/ 原文地址:https://www.cnblogs.com/zhsh666/p/11967944.html

web前端基础知识总结

上个寒假总结的web前端的一些知识点给大家分享一下 1.<html>和</html> 标签限定了文档的开始和结束点. 属性: (1)  dir: 文本的显示方向,默认是从左向右 (2) lang: 表示整个文档中所使用的语言,en--英文,zh--中文 (3) version:定义创作文档的HTML的标准版本 2.<head></head>用于封装位于文档头部的其他标签 属性: (1) dir:文本的显示方向 (2)  Lang:语言信息 (3)  Prof

web前端基础知识学习网站推介

内容:一.基础知识及学习资料1. HTML入门学习:http://www.w3school.com.cn/html/index.aspHTML5 入门学习:http://www.w3school.com.cn/html5/index.asp 2. CSS入门学习:http://www.w3school.com.cn/css/index.aspCSS3入门学习:http://www.w3schools.com/css3/default.asphttp://css3-tutorial.com/ 3.

web前端之css快速入门

css简介 css概述 CSS 指层叠样式表 (Cascading Style Sheets)样式定义如何显示 HTML 元素样式通常存储在样式表中把样式添加到 HTML 4.0 中,是为了解决内容与表现分离的问题外部样式表可以极大提高工作效率外部样式表通常存储在 CSS 文件中多个样式定义可层叠为一 css基础语法 css规则由两个主要部分构成:选择器,以及一条或多条声明selector选择器 declaration声明 selector {declaration1; declaration2