绝对定位 | 易学教程

Web全栈-绝对定位-水平居中

阅读更多关于 Web全栈-绝对定位-水平居中

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>绝对定位-水平居中</title> <style> *{ margin: 0; padding: 0; } div{ width: 300px; /*width: 50%;*/ height: 50px; background-color: red; /*margin: 0 auto;*/ position: absolute; left: 50%; margin-left: -150px; } </style> </head> <body>  <div></div> </body> </html> 来源： https://www.cnblogs.com/yindanny/p/11685793.html

前端之CSS

阅读更多关于前端之CSS

前端之CSS CSS介绍 CSS( C ascading S tyle S heet，层叠样式表)定义如何显示HTML元素. 当浏览器读到一个样式表,他就会按照这个样式来对文档进行格式化(渲染) CSS语法每一个CSS都是由两部分组成: 选择器和声明, 声明又包括属性和属性值,每个声明之后用分号结束. 大概就是这样: 属性:属性值属性: 属性值 h1 {color:red; font-size: 14px;} 选择器声明声明 CSS注释 /*这是注释*/ 就是这个用法 CSS的几种引入方式行内样式行内样式是在标记的style属性中设定CSS样式, 不推荐大规模使用 <p style="color: red">Hello.</p> 内部样式嵌入式是将CSS样式集中在网页的标签对的标签对中, 格式如下: <head> <meta charset="UTF-8"> <title>我的网页</title> <style> p{backgrount-color:red;} </style> </head> 外部样式外部样式就是将CSS写在一个单独的文件中, 然后在页面进行引入即可, 推荐使用: <link href="mystyle.css" rel="styleshrrt" type="text/css"/> CSS选择器元素选择器 p {color:"red";}

Web全栈-绝对定位-参考点

阅读更多关于 Web全栈-绝对定位-参考点

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>绝对定位-参考点</title> <style> *{ margin: 0; padding: 0; } .box1{ width: 300px; height: 300px; background-color: red; position: relative; } .box2{ width: 200px; height: 200px; background-color: green; position: relative; } .box3{ width: 100px; height: 100px; background-color: blue; position: absolute; left: 0; bottom: 0; } </style> </head> <body> <!-- 1.规律 1.默认情况下所有的绝对定位的元素, 无论有没有祖先元素, 都会以body作为参考点 2.如果一个绝对定位的元素有祖先元素, 并且祖先元素也是定位流, 那么这个绝对定位的元素就会以定位流的那个祖先元素作为参考点 2.1只要是这个绝对定位元素的祖先元素都可以 2.2指的定位流是指绝对定位/相对定位/固定定位 2.3定位流中只有静态定位不行 3

Web全栈-定位流-绝对定位

阅读更多关于 Web全栈-定位流-绝对定位

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>定位流-绝对定位</title> <style> *{ margin: 0; padding: 0; } div{ width: 100px; height: 100px; } .box1{ background-color: red; } .box2{ background-color: green; position: absolute; /*float: left;*/ left: 0; /*right: 0;*/ /*top: 0;*/ bottom: 0; } .box3{ background-color: blue; } span{ position: absolute; width: 100px; height: 100px; background-color: yellow; } </style> </head> <body>  <div class="box1"></div> <div class="box2"></div> <div

前端——css（下）

阅读更多关于前端——css（下）

CSS属性相关宽和高 width 属性可以为元素设置宽度。 height 属性可以为元素设置高度。 ==块级标签才能设置宽度，内联标签的宽度由内容来决定== 字体属性文字字体 font-family 可以把多个字体名称作为一个“回退”系统来保存。如果浏览器不支持第一个字体，则会尝试下一个。浏览器会使用它可识别的第一个值。 body { font-family: "Microsoft Yahei", "微软雅黑", "Arial", sans-serif } 字体大小 p { font-size: 14px; } 如果设置成inherit表示继承父元素的字体大小值。字重（粗细） font-weight 用来设置字体的字重（粗细）。值描述 normal 默认值，标准粗细 bold 粗体 bolder 更粗 lighter 更细 100~900 设置具体粗细，400等同于normal，而700等同于bold inherit 继承父元素字体的粗细值文本颜色颜色属性被用来设置文字的颜色。颜色是通过CSS最经常的指定：十六进制值 - 如: ＃ FF0000 一个RGB值 - 如: RGB(255,0,0) 颜色的名称 - 如: red 还有rgba(255,0,0,0.3)，第四个值为alpha, 指定了色彩的透明度/不透明度，它的范围为0.0到1.0之间。文字对齐

前端之CSS

阅读更多关于前端之CSS

二、CSS 1、CSS介绍 CSS（ C ascading S tyle S heet，层叠样式表)定义如何显示 HTML元素。当浏览器读到一个样式表，它就会按照这个样式表来对文档进行格式化（渲染）。 2、CSS语法 2.1 CSS实例每个CSS样式由两个组成部分：选择器和声明。声明又包括属性和属性值。每个声明之后用分号结束。 2.2 CSS注释注释是代码之母。 /*这是注释*/ 3、CSS的集中引入方式 3.1 行内样式（不推荐）行内式是在标记的style属性中设定CSS样式。 <p style="color: red">Hello world.</p> 3.2 内部样式嵌入式是将CSS样式集中写在网页的<head></head>标签对的<style></style>标签对中。 <head> 　　<meta charset="UTF-8"> 　　<title>Title</title> 　　 <style> 　　　　 p{ background-color: #2b99ff; } 　　 </style> </head> 3.3 外部样式（推荐））外部样式就是将css写在一个单独的文件中，然后在页面进行引入即可。 <link href="mystyle.css" rel="stylesheet" type="text/css"/> 4、CSS选择器 4.1基本选择器

CSS四种定位及应用

阅读更多关于 CSS四种定位及应用

定位(position) 如果，说浮动，关键在一个 “浮” 字上面，那么我们的定位，关键在于一个 “位” 上。 PS: 定位是我们CSS算是数一数二难点的了，但是，你务必要学好它，我们CSS离不开定位，特别是后面的js特效，天天和定位打交道。不要抵触它，反而要爱上它，它可以让我们工作更加轻松哦！为什么要用定位？那么定位，最长运用的场景再那里呢？来看几幅图片，你一定会有感悟！第一幅图，小黄色块可以再图片上移动：第二幅图，左右箭头压住图片：第三幅图, hot 再盒子外面多出一块，更加突出：以上三个小地方，如果用标准流或者浮动，实现会比较复杂或者难以实现，此时我们用定位来做，just soso！元素的定位属性元素的定位属性主要包括定位模式和边偏移两部分。 1、边偏移也就说，以后定位要和这边偏移搭配使用了，比如 top: 100px; left: 30px; 等等 2、定位模式(定位的分类) 在CSS中，position属性用于定义元素的定位模式，其基本语法格式如下：选择器{position:属性值;} position属性的常用值静态定位(static) 静态定位是所有元素的默认定位方式，当position属性的取值为static时，可以将元素定位于静态位置。所谓静态位置就是各个元素在HTML文档流中默认的位置。上面的话翻译成白话：

前端之CSS

阅读更多关于前端之CSS

目录 CSS 介绍 CSS语法引用方法基本选择器 4 | 2组合选择器后代选择器儿子选择器毗邻选择器弟弟选择器属性选择器分组和嵌套伪类选择器伪元素选择器选择器的优先级 CSS属性相关宽和高字体属性文字属性文字之间的距离背景属性边框 border-radius display属性 CSS盒子模型 margin外边距 padding内填充 float clear overflow溢出属性定位（position）是否脱离文档流 z-index opacity CSS 介绍 CSS(Cascading Style Sheet，层叠样式表)定义如何显示HTML元素。当浏览器读到一张样式表，它就会按照这个样式表来对文档进行格式化（渲染）。 CSS语法引用方法行内样式行内样式是在标记的style属性中设定CSS样式。（不推荐大规模使用） <p style="color=red">hello world</p> 内部样式内部样式是将CSS样式集中写在网页的 <head></head> 标签中的 <style></style> 标签中。 <head> <meta charset="utf-8"> <title>Title</title> <style> p{ background-color:red; } </style> </head> 外部样式

前端CSS

阅读更多关于前端CSS

前端CSS CSS介绍 CSS（ C ascading S tyle S heet，层叠样式表)定义如何显示 HTML元素。当浏览器读到一个样式表，它就会按照这个样式表来对文档进行格式化（渲染）。 CSS语法 CSS实例每个CSS样式由两个组成部分：选择器和声明。声明又包括属性和属性值。每个声明之后用分号结束。 CSS注释 /*这是注释*/ 注释是代码之母。 CSS的几种引入方式行内样式行内式是在标记的style属性中设定CSS样式。不推荐大规模使用。 <p style="color: red">Hello world.</p> 内部样式嵌入式是将CSS样式集中写在网页的<head></head>标签对的<style></style>标签对中。格式如下： <head> <meta charset="UTF-8"> <title>Title</title> <style> p{ background-color: #2b99ff; } </style> </head> 外部样式外部样式就是将css写在一个单独的文件中，然后在页面进行引入即可。推荐使用此方式。 <link href="mystyle.css" rel="stylesheet" type="text/css"/> CSS选择器基本选择器元素选择器 p {color: "red";} ID选择器 #i1

002 前端基础之CSS

阅读更多关于 002 前端基础之CSS

目录一、CSS介绍二、CSS语法 2.1 CSS实例 2.2 CSS注释三、CSS的几种引入方式 3.1 行内样式(内联样式) 3.2 内部样式 3.3 外部样式四、CSS选择器 4.1 基本选择器元素选择器 ID选择器类选择器通用选择器 4.2 组合选择器后代选择器儿子选择器毗邻选择器兄弟选择器 4.3 属性选择器 4.4 分组和嵌套分组嵌套 4.5 伪类选择器 4.6 伪元素选择器 first-letter before after 4.7 选择器的优先级 CSS继承选择器的优先级五、CSS属性相关 5.1 宽和高 5.2 字体属性文字字体字体大小字重（粗细）文本颜色 5.3 文字属性文字对齐文字装饰首行缩进文字之间的距离 5.4 背景属性 5.5 边框 5.6 border-radius 5.7 display属性 5.8 CSS盒子模型 5.9 margin外边距 5.10 padding内填充 4.11 float浮动三种取值 5.12 clear清除浮动清除浮动 5.13 overflow溢出属性 5.14 定位（position） static relative（相对定位） absolute（绝对定位） fixed（固定）脱离文档流：不脱离文档流： 5.15 z-index 5.16 opacity 六、综合案例

订阅绝对定位