html+css学习笔记 4[定位]

如何让图1中的div2移动到如图2上的位置;

思路:哪些css命令能够影响盒子显示的位置呢?

relative相对定位/定位偏移量

position:relative;  相对定位
        a、不影响元素本身的特性;
b、不使元素脱离文档流;
c、如果没有定位偏移量,对元素本身没有任何影响;

定位元素位置控制
        top/right/bottom/left  定位元素偏移量。
absolute绝对定位/定位层级

osition:absolute;  绝对定位
a、使元素完全脱离文档流;
b、使内嵌支持宽高;
c、块属性标签内容撑开宽度;
d、如果有定位父级相对于定位父级发生偏移,没有定位父级相对于整个文档发生偏移;
e、相对定位一般都是配合绝对定位元素使用;

z-index:[number];  定位层级
        a、定位元素默认后者层级高于前者;

 

待解决:脱离文本流貌似  margin0 auto失效  原因是什么  闭合浮动等等问题

遮罩滤镜/固定定位

遮罩弹窗(优酷弹窗)
标准 不透明度:  opacity:0~1;
IE 滤镜:           filter:alpha(opacity=0~100);

position:fixed; 固定定位
    与绝对定位的特性基本一致,的差别是始终相对整个文档进行定位;
    问题:IE6不支持固定定位;

定位其他值:
    position:static ; 默认值
    position:inherit ;  从父元素继承定位属性的值

position:relative | absolute | fixed | static | inherit;

定位的兼容问题、清浮动方法

 

position:relative;
    在 IE6 下父级的 overflow:hidden; 包不住子级的relative;

position:absolute;
    在 IE6 下定位元素的父级宽高都为奇数那么在 IE6 下定位元素的 right 和 bottom 都有1像素的偏差。

position:absolute; 绝对定位元素子级的浮动可以不用写清浮动方法;

position:fixed;  固定定位元素子级的浮动可以不用写清浮动方法;(IE6不兼容)

html+css学习笔记 4[定位]

时间: 2024-10-27 08:03:35

html+css学习笔记 4[定位]的相关文章

CSS学习笔记之定位

position 有4中不同类型的定位,分别为static.relative.absolute.fixed 1.static 元素框正常生成.块级元素生成一个矩形框,作为文档流的一部分,行内元素则会创建一个或多个行框,置于其父元素中. 2.relative(相对定位) 元素框偏移某个距离.元素仍保持其未定位前的形状,它原本所占的空间仍保留. 默认情况下,它是以父级元素的原始点(左上角)作为原始点,如果没有父级元素,则以文本流(页面的文本区)的顺序在上一个元素的底部作为原始点,配合TRBL(top

CSS学习笔记09 简单理解BFC

1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>BFC</title> 6 <style type="text/css"> 7 .div1 {background-color: #FCE38A; width: 200px; height: 100px;}

css 学习笔记 一

 css学习笔记1 1.选择特定元素的选择符: 上下文选择符 标签1 标签2 {声明}      其中标签2是要选择的目标,而只有在标签1是其祖先元素(不一定是父元素)的情况下才会被选中.     css代码: body代码: 理解:section标签 article标签就属于上下文的关系,即article为section的后代,只有应用了section的样式,才能应用article的样式.注意:继承关系中的空格问题,有空格的表示祖先与后代的关系,css写法,body的代码为,说明页面样式表文件

CSS学习笔记总结和技巧

跟叶老师说项目,他叫我写一个静态首页,看起来挺简单的,但是下手才发现在真的不会怎么下手啊,什么模型啊模块啊都不懂,写毛线啊!! 如图:页面下拉还有侧栏,中间内容等. 可是答应跟老师做了,不能怂啊,于是硬着头皮,花两三天看在慕课网上学习Bootstrap(讲得挺好的,建议大白去看一下),其实我刚看完不久,里面很多东西其实作者都总结得很不错,还有演示. 收获很多,打算再看一下HTML的div+css布局,花一两天时间就可以写完那个界面.就是这么自信,哈哈哈~ 不逼自己一把,你永远不知道自己有多优秀.

css学习笔记四

广州天气变冷了,css学习笔记还是要总结. 总结: 1:几米页面静态页面主要是一列结构头部banner图,mainbody部分放文字内容和图书图片,底部是页面的版权信息 2:腾讯软件中心静态页面制作(二列浮动布局) 3:w3cschool静态页面制作 4:垂直菜单,水平菜单(li设置float),圆角菜单(利用背景图片), 鼠标移上去菜单高度变化(margin-top以及line-height), 鼠标移上去菜单宽度变化 (用jq写是利用hover和hide,用原生js写是文档加载完,遍历li里

html+css学习笔记 3[浮动]

inline-block/float(浮动) 回顾:inline-block 特性:      1.块在一排显示 2.内联支持宽高 3.默认内容撑开宽度 4.标签之间的换行间隙被解析(问题) 5.ie6 ie7不支持块属性标签的inline-block(问题) float浮动: 1.块在一排显示     2.内联支持宽高     3.默认内容撑开宽度      4.脱离文档流     5.提升层级半层 文本流 float:left | right | none | inherit; 文档流是文档

html+css学习笔记 2[标签]

img标签/a标签 <img src="图片地址" alt="图片名"/>  图片(单标签)alt属性 是图片名字,是给百度搜索引擎抓取使用:     a标签: 链接/下载/锚点 href地址等于标签id     target 链接打开方式     blank  新窗口     self     当前窗口     <base target="_blank"/> 定义页面链接默认打开方式   常见标签 div        

CSS学习笔记:溢出文本省略(text-overflow)

原文:CSS学习笔记:溢出文本省略(text-overflow) 在CSS3中,text-overflow属性的基本语法如下: clip:表示不显示省略文本,简单的裁切. ellipsis:表示对象文本溢出时显示省略标记,省略标记插入的位置是最后一个字符. ellipsis-word:表示当对象文本溢出时显示省略标记,省略标记插入的位置是最后一个词(word). 实际上,text-overflow属性仅用于决定当文本溢出时是否显示省略标记,并不具备样式定义的功能,要实现溢出时产生省略号的效果,应

html+css学习笔记 5[表格、表单]

表格 -- 默认样式重置 表格标签:     table 表格     thead 表格头     tbody 表格主体     tfoot 表格尾     tr 表格行     th 元素定义表头     td 元素定义表格单元 表格样式重置 table{border-collapse:collapse;} 单元格间隙合并 th,td{padding:0;}重置单元格默认填充   单元格合并 rowspan  属性规定单元格可横跨的行数.     <td rowspan="2"