html 修改样式 定位,HTML基础之CSS样式定位

什么是定位？

定义元素框相对于其正常位置应该出现的位置，或者相对于父元素、另一个元素甚至浏览器窗口本身的位置。

定位机制：

CSS分成三种定位机制：

普通定位(默认)

绝对定位

相对定位

普通定位：

普通定位也是默认定位。即浏览器自动将所有元素按正常出现顺序显示。

绝对定位：

以网页坐标系为基准定位

#box_abs {

position: absolute;

left: 30px;

top: 20px;

}

相对定位：

相对本来正常的位置定位

#box_re {

position: relative;

left: 30px;

top: 20px;

}

z-index属性：只有使用了定位的元素才能使用此属性，z-index的值越小，越靠近底部，并且可以是负数，默认是0。

什么是层？

层在网页中是一种容器,用或者

层的样式属性：

绝对定位：position:absolute;

背景色：background-color:#a5a5a5;

宽度：width:200px;

高度：height:200px;

在网页中的横坐标:left：100px;

在网页中的纵坐标：top:50px;

隐藏或显示：display:none或者display:block;

边框：border: 1px solid #ff0000;

显示/隐藏属性：

display属性设定元素块的显示和隐藏

用法：display:block | none ;

visibility属性设定元素在网页中是否可见

用法：visibility:visible | hidden ;

区别：

visibility隐藏了元素，但元素还占据原来的位置；

display隐藏了元素，但不占据原来的位置；

鼠标滑入和滑出事件：

鼠标滑入事件：onmouseover

鼠标滑出：onmouseout