绝对定位 | 易学教程

（day44）css样式、css布局

阅读更多关于（day44）css样式、css布局

目录一、css样式（一）文字样式（1）文字字体font-family （2）字体大小font-size （3）字体粗细font-weight （4）字体颜色color （二）文本样式（1）文字对齐text-align （2）文字装饰text-decoration （3）首行缩进text-indent （三）背景样式（1）背景颜色color （2）背景图片image （3）背景重复repeat （4）背景位置position （四）显示样式（1）边框border （2）宽高（3）display属性二、css布局（一）盒子模型（1）外边距magin （2）边框border （3）内边距padding （4）内容content （二）浮动float （1）三种取值（2）clear （3）overflow溢出属性（4）清楚浮动（三）定位position （四）是否脱离文档流（五）z-index （六）opacity 一、css样式（一）文字样式（1）文字字体font-family font-family可以放置多个字体，如果浏览器不支持第一个字体，则会尝试下一个 body { font-family:"Microsoft Yahei", "微软雅黑", "Arial", sans-serif; } （2）字体大小font-size

html和css(7)

阅读更多关于 html和css(7)

第七天笔记学习目标定位 PS切图学成网定位定位的使用包含两个部分：定位的方式偏移值 left,right,top,bottom 偏移值准确的理解是“距离什么位置有多大” 如 top:100px; 距离顶部为100像素（向下走）静态定位所有的标准流都是静态定位 position:static; 一般用于将某些已经定位的元素还原成标准流，用的很少偏移值对于静态定位来说不起作用，我们以后说的元素定位不包括静态定位相对定位相对定位是相对自己的标准流的位置进行定位移动 position:relative; 特性： 1. 移动的出发点是自身标准流的位置 2. 相对定位移动的元素不会对别的元素产生干扰，“没有脱标”，真正占得位置还是标准流的位置（肉体不在灵魂永驻） 3. 可以盖在标准流的上方 4. 一般用于微调元素和配合绝对定位来实现效果绝对定位 position:absolute; 特性： 1.移动的出发点：从绝对元素开始一直往上级找（直到找到最大的html标签），在这个过程中，只要有一个元素（A元素）是定位（相对，绝对，固定）的任何一个，这个绝对定位的元素就会参照这个A元素进行定位，并且不会在往上找了，如果一个都没有，最终会以html元素定位 2.脱标 1.1. 脱标的元素不占标准流的位置 1.2. 不会继承父级的的宽度，内容有多个就撑多大（不论块级还是行内

CSS定位

阅读更多关于 CSS定位

定位将盒子定在某一个位置，所以定位也是在摆放盒子，按照定位的方式移动盒子定位=定位模式+边偏移定位模式用于指定一个元素在文档中的定位方式。边偏移则决定了该元素的最终位置定位模式定位模式决定了元素的定位方式，它通过css的position属性来设置，其值可以分为四个：值语义 static 静态定位 relative 相对定位 absolute 绝对定位 fixed 固定定位边偏移边偏移就是定位的盒子移动到最终位置。有top、bottom/left、right四个属性边偏移属性示例描述 top top：80px；顶端偏移量，定义元素相对于其父元素上边线的距离 bottom bottom：80px；底部偏移量，定义元素相对于其父元素下边线的距离 left left：80px；左侧偏移量，定义元素相对于其父元素左边线的距离 right right：80px 右侧偏移量，定义元素相对于其父元素右边线的距离静态定位static 元素默认的定位方式，无定位的意思选择器{ position：static； } 静态定位按照标准流特性摆放位置，他没有边偏移静态定位在布局中很少使用相对定位reative 元素在移动位置的时候，是相对于它原来的位置来说的选择器{ position：relative； } 特点：他是相对于自己原来的位置来移动的

前端之css（二）

阅读更多关于前端之css（二）

目录 CSS属性相关宽和高字体属性文本颜色文本字体字体大小字体粗细文字属性文字对齐文字装饰首行缩进背景属性补充边框 border-radius display属性 CSS盒子模型 margin外边距 padding内边距 float浮动浮动造成的影响： clear overflow溢出定位相对定位 relative 绝对定位 absolute 固定定位 fixed 脱离文档流 x-index 透明度 CSS属性相关宽和高 width属性可以为元素设置宽度 height属性可以为元素设置高度只有块级标签才可以设置长度，行内标签设置了也没有任何作用，只取决于文本内容大小字体属性文本颜色直接写颜色英文 color: red #FF0000 直接利用pycharm提供的取色器 rgb(125,125,125) 获取三基色 rgba(128,128,128,0.3) 最后一个数字只是用来调节颜色的透明度文本字体用font-family 控制字体种类 body { font-family: "Microsoft Yahei", "微软雅黑", "Arial", sans-serif } 字体大小用font-size p { font-size: 36px; } 字体粗细值描述 normal 默认值，标准粗细 bold 粗体 bolder

css标签样式边框盒子模型定位溢出 z-index 透明度

阅读更多关于 css标签样式边框盒子模型定位溢出 z-index 透明度

目录一、CSS设置标签样式 1. 给标签设置长和宽 2.字体的颜色（3种表示方法） 3.文本样式 4. 语义 5. 背景样式 6. 边框 6.1 边框变圆 7.display 标签转换二、盒子模型三、浮动（ ************ ）三、溢出四、定位五、z-index 控制z轴六、位置的变化是否脱离文档流 1.不脱离文档流 2.脱离文档流七、透明度一、CSS设置标签样式 1. 给标签设置长和宽只有块级标签才可以设置长宽行内标签设置了没有任何作用（行内仅仅只取决于内部的文本大小） 2.字体的颜色（3种表示方法）颜色的英文 6aode 直接使用pycharm提供的取色器即可 rgb(1，2，3) 可利用截图软件获取三基色数字 rgba(0,128,128,0.5) 最后一个数字，只能用来调节颜色的透明度 <style> p { font-family: "Microsoft Yahei", "微软雅黑", "Arial", sans-serif; font-size: 24px; font-weight: lighter; /*color: 'red';*/ /*color: #06a0de;*/ /*color: rgb(0,128,128); !* 数字范围只能是0~255*!*/ color: rgba(0,128,128,0.9); } </style

css浮动现象及清除浮动的方法

阅读更多关于 css浮动现象及清除浮动的方法

css浮动现象及清除浮动的方法首先先明确浮动最初的定义及使用场景：实现文本环绕图片的效果。除了用浮动外，目前暂无其他方法实现文本环绕再来看看浮动的具体定义：浮动的框可以左右移动，直至它的外边缘遇到包含框或者另一个浮动框的边缘。浮动框不属于文档中的普通流，属于浮动布局。 (CSS三种基本的定位机制：普通流、浮动和绝对定位) 当一个元素浮动之后，不会影响到块级框的布局而只会影响内联框（通常是文本）的排列，文档中的普通流就会表现得和浮动框不存在一样，当浮动框高度超出包含框的时候，也就会出现包含框不会自动伸高来闭合浮动元素（“高度塌陷”现象）。顾名思义，就是漂浮于普通流之上，像浮云一样，但是只能左右浮动。正是因为浮动的这种特性，导致本属于普通流中的元素浮动之后，包含框内部由于不存在其他普通流元素了，也就表现出高度为0（高度塌陷）。在实际布局中，往往这并不是我们所希望的，所以需要闭合浮动元素，使其包含框表现出正常的高度。浮动未清除，会造成页面混乱（如下）：浮动元素没有设置宽度值，元素的宽度随内容的宽度的变化而变化会对相邻的元素产生影响，相邻元素特指紧邻后面的元素。如果相邻元素是块级元素会无视这个浮动的块框，也就是我们平时看到的效果——使到自身尽可能与这个浮动元素处于同一行，导致被浮动元素覆盖。除非这些 div 设置了宽度，并且父元素的宽度不足以包含它们

HTML与CSS中的定位个人分享

阅读更多关于 HTML与CSS中的定位个人分享

定位 static - 默认值 (几乎不用,了解就可以) absolute - 绝对定位,不为元素预留空间,脱离文档流: 如果当前元素的父级元素是<body>元素的话 -> 是相对于当前页面的定位如果当前元素的父级不是<body>元素的话,父级元素没有开启定位 -> 则是相对于页面的定位如果当前元素的父级不是<body>元素的话,父级元素开启定位 -> 则是相对于父级元素定位 <style> body { margin: 0;/* 去掉浏览器默认的外边距8px */ } div { width: 200px; height: 200px; background-color: cyan; /* 开启绝对定位 1.当前元素脱离文档流 2.如果不设置位置的偏移量的话，位置不会有任何变化的 */ position: absolute; /* 设置定位的偏移量: * 水平方向正值 - 向右移动 * 水平方向负值 - 向左移动 * 垂直方向正值 - 向下移动 * 垂直方向负值 - 向上移动 */ top: 100px; left: 100px; } </style> </head> <body> <div></div> </body> fixed - 固定定位,不为元素预留空间: 是相对于窗口来定位元素位置,脱离文档流 <style> body { margin: 0; height:

css的定位类型

阅读更多关于 css的定位类型

static 定位 HTML 元素的默认值，即没有定位，遵循正常的文档流对象。静态定位的元素不会受到 top, bottom, left, right影响。 fixed 定位元素的位置相对于浏览器窗口是固定位置。即使窗口是滚动的它也不会移动： relative 定位相对定位元素的定位是相对其正常位置。 absolute 定位绝对定位的元素的位置相对于最近的已定位父元素，如果元素没有已定位的父元素，那么它的位置相对于<html>: absolute 定位使元素的位置与文档流无关，因此不占据空间。 absolute 定位的元素和其他元素重叠。 sticky 定位 sticky 英文字面意思是粘，粘贴，所以可以把它称之为粘性定位。 position: sticky; 基于用户的滚动位置来定位。粘性定位的元素是依赖于用户的滚动，在 position:relative 与 position:fixed 定位之间切换。它的行为就像 position:relative; 而当页面滚动超出目标区域时，它的表现就像 position:fixed;，它会固定在目标位置。元素定位表现为在跨越特定阈值前为相对定位，之后为固定定位。这个特定阈值指的是 top, right, bottom 或 left 之一，换言之，指定 top, right, bottom 或 left 四个阈值其中之一

CSS中的父相子绝布局

阅读更多关于 CSS中的父相子绝布局

主要应用场景，就是我想要块的布局根据父级来定位，而不是根据页面。例如，下面的例子中，我用两个半圆拼成一个正圆，思路是用一个父级标签把两个子标签包起来，父标签是一个正圆，然后子标签各占一半，先化成两个矩形，然后就是位置的选择。这里用到的就是父相子绝，即父标签用到相对位置，子标签用到绝对位置，这样子标签的两个半圆就能贴到父标签，形成一个圆。注意： 1.这里面父标签需要用相对定位，使用绝对定位的话会脱离文档流，见下面例子。 2.标签写position（relative或者absolute）的话，就会以它的父级标签作为参考，如果父级没写css样式，那就会以body样式作为参考，如果也没写，就会以整个html页面作为参考。例如这里，如果父级不设置position的话，那么那两个子标签就会以整个html页面为参考点，而把矩形飘到页面的两端脱离文档流，其实就是不是按照页面中文本的顺序，一行一行的排班下来，而是按照自己的意愿，可能存在一些重叠，常用的办法就是定位和浮动。具体见以下几篇补充什么是脱离文档流正常文档流和脱离文档流 HTML元素脱离文档流的三种方法下面这个例子，如果把父标签的相对定位改成绝对定位，那么和父标签相邻的test标签就会和该父标签重叠，也就是脱离文档流 <!DOCTYPE html> <html lang="en"> <head> <meta charset=

[css]可视化格式模型

阅读更多关于 [css]可视化格式模型

为了qt中的qss 浮动定位盒模型定位普通流:就是html的位置相对定位: 相对于html中的元素位置.使用时,无论是否移动,元素仍然占据原来的空间,因此会覆盖其他元素框 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>home</title> <link rel="stylesheet" type="text/css" href="css\layout.css"> </head> <body> <div id="app"> </div> <div id="test"> </div> <div id="sd"> </div> </body> </html> *{ margin: 0; padding: 0; } #app{ width: 100px; height: 50px; background-color: aqua; margin-bottom: 20px; } #test{ position: relative; width:

订阅绝对定位