绝对定位 | 易学教程

CSS中position属性( absolute | relative | static | fixed )详解

阅读更多关于 CSS中position属性( absolute | relative | static | fixed )详解

我们先来看看CSS3 Api中对position属性的相关定义： static：无特殊定位，对象遵循正常文档流。top，right，bottom，left等属性不会被应用。 relative：对象遵循正常文档流，但将依据top，right，bottom，left等属性在正常文档流中偏移位置。而其层叠通过z-index属性定义。 absolute：对象脱离正常文档流，使用top，right，bottom，left等属性进行绝对定位。而其层叠通过z-index属性定义。 fixed：对象脱离正常文档流，使用top，right，bottom，left等属性以窗口为参考点进行定位，当出现滚动条时，对象不会随着滚动。而其层叠通过z-index属性定义。怎么样，是不是还是很迷糊~~ 没关系，下面就从几个基础概念一一给大家详述：什么是文档流？将窗体自上而下分成一行行, 并在每行中按从左至右的顺序排放元素,即为文档流。只有三种情况会使得元素脱离文档流，分别是：浮动、绝对定位和相对定位。静态定位(static) ： static，无特殊定位，它是html元素默认的定位方式，即我们不设定元素的position属性时默认的position值就是static，它遵循正常的文档流对象，对象占用文档空间，该定位方式下，top、right、bottom、left、z

css的position属性

阅读更多关于 css的position属性

Html css position属性 position属性把元素放置在一个静态的,相对的,绝对的,或则固定的位置中. 1,第一个属性absolute,绝对定位生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>定位</title> </head> <style> /*绝对定位*/ div.pos_abs{ position:absolute; left:100px; top:150px; width:200px; height:200px; background-color:black; color:white; text-align:center; } div{ border:2px solid black; } </style> <body> <div class="pos_abs"> 这是一个绝对定位的盒子 </div> <div> 通过绝对定位,元素可以放置在页面上的任何位置,下面的黑色盒子距离页面左侧100px,距离页面顶部150px. </div> </body> </html> 我们

css 3D小结

阅读更多关于 css 3D小结

CSS 3D—-来自小菜鸟的总结首先你要学习一些基础知识我们是用 transform 来实现各种炫酷吊炸天的效果 transform的几个属性我们要记住： rotate() 顺时针旋转 scale() 缩放 skew() 倾斜 transform()移动动手实践一下 <style media="screen"> .box{ width: 20px; height: 20px; background-color: red; transform: rotate(45deg) scale(2) skew(29deg,30deg) translate(20px,20px); } </style> <div class="box"> </div> 以上这些是2D知识一定要记住！！！接下来我们来学习3D基础知识 perspective (视距,景深) ：眼睛距离物体的距离 perspective-origin (视点) ：眼睛所在位置，默认为中心 (1)transform-origin:center（默认值，等价于：center center/ 50% 50%） (2)transform-origin:top（等价于：top center/center top） (3)transform-origin:bottom（等价于：bottom center/center bottom） (4

doraemon的python 浮动、定位和background

阅读更多关于 doraemon的python 浮动、定位和background

### 11.5 浮动浮动：是为了解决网页的文字环绕问题浮动 float: - none 表示不浮动 - left 左浮动 - right 右浮动 - inherit 继承父元素的浮动属性浮动现象： - 浮动的元素脱离了标准文档刘，即脱标 - 浮动元素相互贴靠 - 浮动的元素会产生字围效果 - 浮动元素有收缩效果清除浮动的方式： - 原因:浮动带来的问题(衬不起父和子的高度) - 方法一：给父元素添加固定高度(不灵活，后期不易维护) - 方法二：内墙法 - ```css 内墙法：给最后一个浮动元素的后面添加一个空的块级标签，并且设置该标签的属性为clear:both; 问题：冗余 ``` - 方法三伪元素清除法推荐使用 - ```css 添加一个块，一般设置的名字叫clearfix .clearfix::after{ content:''; display:block; clear:both; } ``` - 方法四 overflow - ```css overflow:hidden; 常用，直接在块的属性里加因为overflow:hidden;会形成BFC区域，形成BFC区域之后，颞部有它自己的布局规则计算BFC的高度，浮动元素也参与计算但是小心overflow:hidden它自己的本意 overflow:scroll;出现滚动条 ``` ### 11.6 定位

绝对定位和相对定位

阅读更多关于绝对定位和相对定位

定位布局：视觉格式化模型：css的一种机制，规定了页面找那个多个盒子的布局。视口：指浏览器的可视区域定位体系：常规流（normal flow）浮动（float）绝对定位（absolute positioned）绝对定位 absolute：元素会脱离文档流，如果设置偏移量，会影响其他元素的位置定位在父元素没有设置相对定位或绝对定位的情况下，元素相对于根元素定位即html元素。父元素设置了相对定位或绝对定位，元素会相对于离自己最近的设置了相对或绝对定位的父元素进行定位（或者说离自己最近的不是static的父元素进行定位，因为元素默认是static）。父元素设置了相对定位或绝对定位，元素会相对于离自己最近的设置了相对或绝对定位的父元素进行定位绝对定位使元素的位置与文档流无关，因此不占据空间。这一点与相对定位不同，相对定位实际上被看作普通流定位模型的一部分，因为元素的位置相对于它在普通流中的位置。绝对定位的元素的位置相对于最近的已定位祖先元素，如果元素没有已定位的祖先元素，那么它的位置相对于最初的包含块相对定位 relative：相对于原来位置移动，元素设置此属性之后仍然处在文档流中，不影响其他元素的布局是相对于自身位置定位（设置偏移量的时候，会相对于自身所在的位置偏移）。设置了relative的元素仍然处在文档流中，元素的宽高不变

网页中的定位

阅读更多关于网页中的定位

1.1.1 网页中的定位类型： a) 静态定位（static）是默认定位 b) 相对定位（relative） c) 绝对定位（absolute） d) 固定定位（fixed 浏览器对该定位存在兼容性问题） e) 参照物 1.1.2 相对定位 position:relative; top:20px; 参照顶部发生位置偏移20px left:10px; 参照左边发生位置偏移 10px right和bottom不常用。注意：相对定位是参照当前元素最近上一次的位置所发生的偏移发生相对定位的元素不会影响其他元素发生了相对定位的元素还是处于普通文档流例如：相对定位前：　　相对定位后： 1.1.1 绝对定位 position:absolute; top:20px; 参照顶部发生位置偏移20px left:10px; 参照左边发生位置偏移 10px 注意：发生绝对定位的元素参照最近发生定位的父元素，如果所有逐层找的父元素都不存在定位则直接参照body元素。最近发生定位的父元素作为参照物，它所发生的定位只能是相对（relative ）或绝对（定位），单纯是位置移动不能作为参照物。发生定位的父元素只是发生定位，但不见得要发生偏移量（只定位不发生位置偏移）; 发生绝对定位的元素会脱离文档流，对其他元素有影响。例如：绝对定位前绝对定位后：黄色框发生定位，所以作为参照物 1.1.1

CSS经典面试题

阅读更多关于 CSS经典面试题

CSS面试题整理在IE6下无法定义小高度的容器，是因为有一个默认的行高。 IE6 下默认的字体尺寸大致在 12 - 14px 之间，当你试图定义一个高度小于这个默认值的 DIV 的时候， IE6 会固执的认为这个层的高度不应该小于字体的行高。所以即使你用 height:5px; 来定义了一个 DIV 的高度，实际在 IE6 下显示的仍然是一个 12px 左右高度的层。此时，我们可以用overflow:hidden或line-height为0来解决　img底部的空白－　将img定义为display:block －　定义父容器为font-size:0 －　vertical-align的方式，它的值可以是text-top|text-bottom|middle等－　display:inline DIV CSS设计中如何让层在falsh上显示？最好的办法是当需要的时候让flash暂时display:none掉如何使得文字不换行？定义包含文字的容器为：width:xxx;white-space:nowrap; ie中如何让超出宽度的文字显示为省略号？定义容器为：overflow:hidden;width:xxx;white-space:nowrap;text-overflow:ellipsis;(火狐中无效！) DIV CSS设计中如何在点文字时也选中checkbox?

☆前端☆---css样式

阅读更多关于 ☆前端☆---css样式

css属性相关宽和高 width 属性可以为元素设置宽度 height 属性可以为元素设置高度块级标签才能设置宽度，内联标签的宽度由内容来决定字体属性文字字体 font-family 可以把多个字体名称作为一个“回退”系统来保存。如果浏览器不支持第一个字体，则会尝试下一个。浏览器会使用它可识别的第一个值。简单的实例 body { font-family: "Microsoft Yahei", "微软雅黑", "Arial", sans-serif } 字体大小 p { font-size: 14px; } 字重(粗细) font-weight 用来设置字体的字重文本颜色颜色属性被用来设置文字的颜色有三种方式颜色是通过CSS最经常的指定：十六进制值 - 如: ＃ FF0000 一个RGB值 - 如: RGB(255,0,0) 颜色的名称 - 如: red 还有 rgba (255,0,0,0.3)，第四个值为alpha, 指定了色彩的透明度/不透明度，它的范围为0.0到1.0之间。文字属性文字对齐 text-align 属性规定元素中的文本的水平对齐方式文字装饰 text-decoration 属性用来给文字添加特殊效果。首行缩进将段落的第一行缩进 32像素 p { text-indent: 32px; } 背景属性 /*背景颜色*/

前端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>标签对中。格式如下：按 Ctrl+C 复制代码按 Ctrl+C 复制代码外部样式外部样式就是将css写在一个单独的文件中，然后在页面进行引入即可。推荐使用此方式。 <link href="mystyle.css" rel="stylesheet" type="text/css"/> CSS选择器基本选择器元素选择器 p {color: "red";} ID选择器 #i1 { background-color: red; } 类选择器按 Ctrl+C 复制代码按 Ctrl+C 复制代码注意：样式类名不要用数字开头

day45-前端CSS

阅读更多关于 day45-前端CSS

1 . 0 CSS介绍 CSS（ C ascading S tyle S heet，层叠样式表)定义如何显示 HTML元素。当浏览器读到一个样式表，它就会按照这个样式表来对文档进行格式化（渲染）。 2.0 CSS语法 2.1 CSS实例每个CSS样式由两个组成部分：选择器和声明。声明又包括属性和属性值。每个声明之后用分号结束。 2 . 2 CSS注释 /*这是注释*/ 注释是代码之母。 3.0 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 . 0 CSS选择器

订阅绝对定位