HTML中的三种布局方式:
标准流;顺序布局
浮动;
定位;
HTML两大元素:
1,块级元素;独占一行!
div h1~6 列表(ol,ul,li ) table p 等等;
2,内联元素;一般不会独占一行!
a超链接 span文字 img图片 input空键
position中的可选参数:
static:默认值,正常排列
relative:相对定位,利用left top right bottom来改变元素的位置。
absolute:绝对定位,利用left top right bottom,后写的内容覆盖之前的。
fixed:固定定位,不受制于父元素,即使父元素有了position属性。
inherit:继承 继承fixed的父元素时,
会出现emmmmm不一样的地方!!!!
记得弄清楚这个啊!!!!!
【position:inherit;//继承了父元素的fixed;此时就会相对于浏览器定位;不会相对于父元素定位,】
absolute:绝对定位。将对象从文档流中拖出,使用left,right,top,bottom等属性相对于其最接近的一个最有定位设置的父对象进行绝对定位。如果不存在这样的父对象,则依据body对象。而其层叠通过z-index属性定义
。当对象定位在浏览器窗口以外,浏览器因此显示滚动条。
fixed:固定定位。对象定位遵从绝对(absolute)方式。但是要遵守一些规范。当对象定位在浏览器窗口以外,浏览器不会因此显示滚动条,而当滚动条滚动时,对象始终固定在原来位置。
relative:相对定位。对象不可层叠,但将依据left,right,top,bottom等属性在正常文档流中偏移位置。当对象定位在浏览器窗口以外,浏览器因此显示滚动条。
static:元素框正常生成。块级元素生成一个矩形框,作为文档流的一部分,行内元素则会创建一个或多个行框,置于其父元素中。
inherit:继承值,对象将继承其父对象相应的值。
relative:
left top
right bottom
absolute:相对窗口定位。
left top 左下角为原点
right bottom 右下角为原点
z-index
案例:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>弹出层案例</title> <style type="text/css"> *{ padding: 0; margin: 0; } html, body{ width: 100%; height: 100%; } .content{ width: 100%; height: 4043px; background: url("mooc.png") center top no-repeat; } .login{ width: 360px; height: 362px; background: url("login.png") no-repeat; z-index: 2; position: fixed; left: 50%; top: 50%; margin-top: -181px; margin-left: -180px; } .opacity_{ width: 100%; height: 100%; background: url("img/opacity.png") no-repeat; position: fixed; left: 0; top: 0; z-index: 0; } </style> </head> <body> <div class="content"></div> <div class="login"></div> <div class="opacity_"></div> </body> </html>