5.22 格式与布局知识点整理
一、position:fixed 锁定位置(相对于浏览器的位置),例如有些网站的右下角的弹出窗口。 页面位置不随滚动条,滚动,位置固定不变 二、position:absolute 1.不被外层包含; 那么div相对于浏览器定位 2.被外层包含; 那么div相对于外层边框定位 !!!!!!!<内外两层需同时注明:position:absolute>!!!!!!! 三、position:relative 相对位置。 1. 如果外层没有包含它的,那就相对于上一层(字符、或图形)的左下角位置进行定位。 2. 外层有包含它的,则相对于,包含它的图形的,左上角位置进行定位。 四、 分层(z-index) 1. 在z轴方向分层,可以理解为分成一摞纸,层数越高(z-index标注的数字越大))越靠上。( 未标注时系统默认,越靠后输入的字符层数越高) 五.float:left、right(刘氏布局) 1. Left、right时不用给他规定位置(left、top),直接相对于浏览器。若外部被包裹,相对于外部div的除去一行的位置的左上或右上显示 2. overflow:hidden; //超出部分隐藏;scroll,显示出滚动条; 刘氏布局图解 一.1 3 5 7 8 6 4 2 二.1 3 5*6 4 2 (7) 空间不足下移 三.1 3 5(7)6 4 2 单独排列不换行 四. 135(7)642 (8) 出现对数时,按空间排列,不组队 135(7)642 (8) 出现对数时,按空间排列,不组队 五.半透明效果 <div class="box">透明区域<div> 在样式表中的代码为: .box { 透明度: opacity:0.5; 填充度: -moz-opacity:0.5 ; filter:alpha(opacity=50) } 1. 透明度0.5,填充度0.5,总效果变为4分之一 2. 字体包含在DIV时,字体变半透明导致模糊不清。 解决方法:字体放在DIV外。用position:absolute(不被包含) 直接根据BODY固定位置.