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固定位置.




          
        
原文地址:https://www.cnblogs.com/suiyuejinghao123/p/5518532.html