CSS笔记3-布局：居中、定位、浮动、展示

css笔记3

1.居中

可以使用

2.定位

position 表示定位

2.1绝对定位

position:absolute;
left:100px; //该元素所在的块的位置位于这个绝对定位显示的左上方
top:50px;
//绝对定位的元素不会干扰到其他元素的位置


position:absolute;
left:100px; //相对该元素所在块中的位置
top:50px;
z-index:1;//z-index越大 元素位置越靠外 会显示在上方。

2.2相对定位

p.a{
position:relative; //该元素占据块中的一个位置，其下一个元素会空一行出现。
left:100px; //相对原本元素所应该在的位置进行了调节
top:50px;
}相对定位的元素占据了原文本的一个位置 只不过是相对其原位置发生了移动

3.浮动 float

可以用来修饰div排列 使之不换行。多用于菜单栏中

p.a{
float:right;//元素在右边浮动 并且不占据块中的位置
float:left;//元素在左边浮动 并且不占据块中的位置。但由于左边通常是有元素的，所以把左边的元素挤占走了
}
q.b{
  clear:left;//不允许被该属性修饰的元素左边被浮动的元素挤占，保证该元素显示的某种优先级。
 }

4.展示display

            display:none;//不展示
            display:block;//一个块，前后自动加上换行效果。
            display:inline;//内联元素，表示大小由内容决定且不允许换行。
            display:inline-block; //不换行块级，可以设置宽度（有点像windowsphone）
            visibility:hidden://隐藏的元素