CSS深入理解学习笔记之relative

1、relative和absolute的相煎关系


限制作用：1限制left/top/right/bottom定位；2限制z-index层级；3限制在overflow下的嚣张气焰

relative和fixed限制作用：限制z-index层级

2、relative和定位

特性：1相对自行进行定位；2无侵入，不影响其他元素布局

top/bottom和left/right对立属性同时存在时的表现：top>bottom left>right

3、relative和层级

提高元素的层叠上下文

新建层叠上下文与层级控制：relative元素的z-index是auto的时候，不会限制子元素的层叠

4、relative的最小化影响原则

定义：尽量降低relative属性对其他元素或者布局的潜在影响

原则：1尽量避免使用relative，2relative最小化，将需要absolute定位的元素放到一个空的relative元素中

时间： 2024-10-31 15:37:15

CSS深入理解学习笔记之relative的相关文章

CSS深入理解学习笔记之padding

1.padding与容器尺寸之间的关系 对于block水平元素:①padding值暴走,一定会影响尺寸:②width非auto,padding影响尺寸:③width为auto或box-sizing为border-box,同时padding值没有暴走,不影响尺寸. 对于inline水平元素:水平padding影响尺寸,垂直padding不影响尺寸,但是影响背景色.当垂直padding大到超出父容器,会影响scrollHeight. 2.padding负值和百分比值 关于padding负值:padd

CSS深入理解学习笔记之line-height

1.line-height的定义 定义:两行文字基线之间的距离. 注:不同字体之间的基线是不同的. 2.line-height与行内框盒子模型 行内框盒子模型: ①内容区域(content area),是一种围绕文字看不见的盒子,大小与font-size有关: ②内联盒子(inline boxes),不会让内容成块显示,而是排成一行.如果外部含inline水平标签,则属于内联盒子:如果是个光秃秃的文字,则属于"匿名内联盒子": ③行框盒子(line boxes),每一行就是一个行框盒子

CSS权威指南学习笔记系列(1)CSS和文档

题外话:HTML是一种结构化语言,而CSS是它的补充:这是一种样式语言.CSS是前端三板斧之一,因此学习CSS很重要.而我还是菜鸟,所以需要加强学习CSS.这个是我学习CSS权威指南的笔记,如有不对,请谅解和指出.谢谢大家.正文: 第一章 CSS和文档---------- 1.CSS,称为层叠样式表.使用CSS的理由有:a.易于使用,样式表能大大减少Web创作人员的工作量:b.在多个页面上使用样式,可以创建一个样式表,然后把这个样式表应用到多个页面:c.层叠,CSS还规定了冲突规则:这些规则统称

〖前端开发〗HTML/CSS基础知识学习笔记

经过一天的学习,把慕课网的HTML/CSS基础知识学完了,笔记整理: 1. 文件结构: HTML文件的固定结构: <html> <head>...</head> <body>...</body> </html> html是根标签 head定义文档头部,包含: title, script, style, link, meta body是网页主要内容,包含:h1,h2-h6, p, a, img 2. 认识head标签: <head

python之 前端HTML/CSS基础知识学习笔记

1. 文件结构: HTML文件的固定结构: <html> <head>...</head> <body>...</body> </html> html是根标签 head定义文档头部,包含: title, script, style, link, meta body是网页主要内容,包含:h1,h2-h6, p, a, img 2. 认识head标签: <head> <title>...</title>

css权威指南学习笔记--第七章

由于之前一直没有系统的看过css相关的书籍,导致自己css方面一直都是处于零散状态.知其然,不知其所以然.所以买了<css权威指南>.虽然比较老了,但是应该也会收获很大. 1 水平方向上 margin-left +border-left+padding-left+width+padding-right+border-right+margin-right 其中红色的是可以设置为auto,当设置为auto时,浏览器会自动计算该值.基于的原则就是 外层包裹容器的width=被包裹元素的width+p

html+css菜鸡学习笔记（to be continued）

学习web前端开发基础技术需要掌握:HTML.CSS.JavaScript 1. HTML是网页内容的载体. 内容就是网页制作者放在页面上想要让用户浏览的信息,可以包含文字.图片.视频等. 2. CSS样式是表现. 就像网页的外衣.比如,标题字体.颜色变化,或为标题加入背景图片.边框等.所有这些用来改变内容外观的东西称之为表现. 3. JavaScript是用来实现网页上的特效效果. 如:鼠标滑过弹出下拉菜单.或鼠标滑过表格的背景颜色改变.还有焦点新闻(新闻图片)的轮换.可以这么理解,有动画的,

[css]《css揭秘》学习笔记（一）

一.background-clip属性 1 <html> 2 <head> 3 <meta charset="utf-8"> 4 <title>背景与边框1</title> 5 <style type="text/css"> 6 body{ 7 background: url('http://csssecrets.io/images/stone-art.jpg'); 8 } 9 div{ 10

CSS权威指南学习笔记 —— HTML元素分类

HTML文档由各种元素组成.比如,p.table.span等等.每个元素都会对文档的表现有所影响.CSS中,每个元素都会生成一个框(传说中的盒子),其中包含元素内容. 元素可以根据它的创建方式分为两种:替换元素和非替换元素.创建方式会对盒模型的表现有所影响,后续的笔记中会看到. 替换元素:这种元素的内容部分并非由文档直接显示,而是用其他内容来替换.最常见的替换元素img,它是由文档本身之外的一个图片文件来替换的.input也是替换元素,是根据类型的值来决定内容是什么,有时内容被替换成单选钮,有时