CSS基础复习之定位
如题
定位
定义元素框相对于其正常位置应该出现的位置，或者相对于父元素，另一个元素甚至浏览器窗口本身的位置。
流定位
浮动定位
相对定位
绝对定位
固定定位
默认是流定位
页面上的块元素从上到下一个接一个的排列。
每一个块级元素都会出现在一个新行中
元素框之间的垂直距离是由框的垂直外边距计算出来的。
行元素则是在一行中从左到右排列水平布置
不需要从新行开始
可以使用水平内边距，边框和外边框调整他们的间距。
浮动定位
让元素脱离普通流定位
将浮动元素防止在父元素的左边或者右边
浮动元素依旧位于父元素之内
浮动的框可以向左或者右移动，知道它的外边缘碰到父元素或者另一个浮动框的边框为止
经常使用它来实现特殊的定位效果。
浮动会脱离 div，然后浮动出去，一层一层的。浮动是让这个元素飘起来，在默认流布局上。
div会自动收缩
浮动就是：
float:value
float:right 就是向右浮动。
如果对d2也进行右浮动
再让d3也浮动
因为设置的这3个div外面的大div的宽有限制，所以会这样，把外div宽设置大点就好了
消除浮动影响（会影响父元素大小，段落等）
用clear属性
默认是none，就是不消除
left/right/both
但是这种方式只能消除对p的影响，无法消除对外层div的影响。
消除对外层的影响
在外层div中在加个div，这个姿势用于消除浮动影响，不是为了显示，因此将其设置为其内容为空，没有边框和颜色。
在这个空的div中写clear，就能达到消除对外层的影响。
左浮动
把d1设置了左浮动后
会浮上去。
在浮d2
先浮了d1，然后在浮d2的话，d2左边没有地方了就靠着d1来了，红色d1下面的是绿色d3
同时我还用在加一个div的方法消除了对外层div的影响。
浮动用处大大的~~~~
相对定位
元素原本所占的空间不释放
元素框会相对于它原来的位置偏移某个距离
设置垂直或者水平位置，让元素相对于它的起点进行移动
设置元素为相对定位
首先需要设置position属性的值为relative
然后使用left属性或者right属性设置水平方向的偏移量
也可以使用top属性或者bottom属性设置垂直方向的偏移量。
还在原来的大致位置上，稍微偏离一点。 用相对定位做设置。没有脱离流布局
position:relative;（相对定位）
left:50px;（以左为准，向右偏移50px；）
top:50px;（以上为准，向下偏移50px；）
就是写相对定位时，就写position：relative，然后写以什么为准，直接就写就行。
写负数，就可以反方向偏移了。
去掉li前面的点
list-style-type:none;
<style type="text/css"> body { background-color: #333; } div { width: 900px; border: 1px solid #000; } ul li { float: right; // 向左浮动 margin: 20px; //外边距：20px border: 1px solid #000; list-style-type: none; //设置li的序号点为none background-color: #CCC; } ul li:hover { //当鼠标放在li上时 position: relative; //相对定位 right: 10px; //向左偏移10px top: 10px; //像下偏移10px } ul li p { color: #FFF; text-align: center; } </style></head><body><div><ul><li> <img src="1.png"/><p>1111</p></li><li> <img src="1.png"/><p>2222</p></li><li> <img src="1.png"/><p>3333</p></li><li> <img src="1.png"/><p>4444</p></li></ul></div></body>
开始还想再图片和段落加个div，后来想到就直接hover伪类对li设置就可以了。
绝对定位
将元素的内容从当前定位中移除，释放空间
并使用偏移属性来固定该元素的位置
相对于最近的已定位祖先元素
如果元素没有已定位的祖先元素，那么它的位置相对于最初的包含块，比如body元素
设置元素为绝对定位
首先需要设置position属性的值为absolute
然后使用left属性或者right属性设置元素的水平位置
也可以使用top属性或者bottom属性设置元素的垂直位置。
绝对定位会使他脱离流布局
在父元素内直接指定在什么位置。
设置父元素为相对定位 position:relative;以它为基准。
然后子元素对相对定位的父元素绝对定位。
#outter{ position:relative; }#d1{ position:absolute; right:0; bottom:0; }
就是先设置父元素为相对定位，然后在子元素设置绝对定位，然后设置相对于父元素如何偏移。如上，就是以父元素右为准，向左偏移0；以父元素
z-index 设置堆叠顺序
z-index:序号越大越在上层。
一旦修改了元素的定位方式，则元素可能会发生堆叠。
可以使用z-index属性来控制元素框出现的重叠顺序。
值为数值：数值越大表示堆叠顺序更高，即离用户更近。
拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面，即元素的显示会接近页面表面。
可以设置为负值：表示离用户更远
固定定位
将原始的内容固定在页面的某个位置
元素从普通流中完全溢出，不占用页面空间
当用户向下滚动页面时，元素框并不随着移动
设置固定定位
首先需要设置position 属性的值为fixed
通过left、top、right、以及bottom这些偏移属性来定义元素的位置
就是像TOP回到顶部和顶部导航栏无论怎么滚动页面都不动的。
posiyion:fixed;
然后
bottom:10px;
right:5px;
固定到页面的位置。如那个回到顶部，给他固定定位到哪，不会随着页面动而动。
#top {position: fixed;bottom: 10px;right: 5px;}</style><div id="top"><a href="#">TOP</a></div>
总结
相对定位是相对于自身产生偏移
绝对定位时相对于父元素产生偏移
绝对定位时特殊的相对定位
position ： 规定元素的定位类型，可取值：static/relative/absolute/fixed
偏移属性： top、bottom、left、right属性，用于定义元素框的偏移位置
z-index： 设置元素的堆叠顺序
float/cler: 浮动定位属性
补充：
列表
list-style-type
用于控制列表中列表项标志的样式
无序列表：出现在各列表项旁边的圆点
有序列表：可能是字母、数字或者另外某种技术体系中的一个符号。
无序列表取值
none： 无标记
disc： 实心圆
circle： 空心圆
square：： 实心方块
有序列表取值
none： 无标记
decimal：数字（如1,2,3,4,5），为默认值
lower-roman: 小写罗马数字（如：i,ii,iii,iv,v）
upper-roman:大写罗马数字（如 I,II,III,IV,V）
等
list-style-image
属性使用图像来替换列表项的标记
取值为：url（），指定图像作为有序或无序列表项的标志。
就是可以把那个默认的图标换成自己的的图片
显示方式
元素都有自己默认的显示方式
块元素
从上到下，可以设置宽高，如<h1>,<p>,<div>等
行内元素
从左到右，不能设置宽高，如<span>,<a>等
行内块
从左至右，可以设置宽高，如<input>,<img>等
除了默认的显示效果之外，可以使用display属性修改元素框的显示方式，即改变生成框的类型。
可以用display把块元素改为行内元素。~~~~
改变元素的显示方式
，其取值有：
none,block,inline、inline-block
none： 不显示该元素，释放其占用位置
block： 将元素显示方式设置为块，如可以将行内元素转换为块元素
inline: 将元素显示方式设置为行内，如可以将块元素
装换为行内元素
inline-block: 将元素显示方式设置为行内块，如可以将行内元素转换为行内块元素
鼠标形状
默认情况下，光标会根据用户的操作发送改变
当鼠标悬停在一个链接上时，光标从指针形状变为手状形状
当鼠标悬停在文本区域时，会显示 I 形状
而当鼠标悬停在一个按钮上时，光标会会显示为箭头
可以使用cursor 属性指定显示给用户的鼠标光标类型（形状）
可以为用户提供一种可视化的暗示，提示可以进行的操作。
可取值：
default
pointer 手
crosshair 叉
text I
wait 圆圈不断的转
help等 问号
￡神魔★判官ぃ
旧城等待，
不念不忘少年蓝@
亦凉
柔情只为你懂
还没有评论，来说两句吧...