CSS基础复习之定位

￡神魔★判官ぃ 2022-09-26 02:00 218阅读 0赞

如题

## 定位 ##

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

流定位  
浮动定位  
相对定位  
绝对定位  
固定定位

## 默认是流定位 ##

页面上的块元素从上到下一个接一个的排列。  
每一个块级元素都会出现在一个新行中  
元素框之间的垂直距离是由框的垂直外边距计算出来的。

行元素则是在一行中从左到右排列水平布置  
不需要从新行开始  
可以使用水平内边距，边框和外边框调整他们的间距。

## 浮动定位 ##

让元素脱离普通流定位  
将浮动元素防止在父元素的左边或者右边  
浮动元素依旧位于父元素之内

浮动的框可以向左或者右移动，知道它的外边缘碰到父元素或者另一个浮动框的边框为止

经常使用它来实现特殊的定位效果。

![这里写图片描述][20160915163749007]

浮动会脱离 div，然后浮动出去，一层一层的。浮动是让这个元素飘起来，在默认流布局上。

div会自动收缩

浮动就是：  
float:value

float:right 就是向右浮动。

![这里写图片描述][20160915163847273]

![这里写图片描述][20160915163915180]

如果对d2也进行右浮动

![这里写图片描述][20160915163955936]

再让d3也浮动

![这里写图片描述][20160915164025555]

因为设置的这3个div外面的大div的宽有限制，所以会这样，把外div宽设置大点就好了

![这里写图片描述][20160915164053837]

消除浮动影响（会影响父元素大小，段落等）

用clear属性  
默认是none，就是不消除  
left/right/both

![这里写图片描述][20160915164126540]

但是这种方式只能消除对p的影响，无法消除对外层div的影响。

## 消除对外层的影响 ##

在外层div中在加个div，这个姿势用于消除浮动影响，不是为了显示，因此将其设置为其内容为空，没有边框和颜色。

在这个空的div中写clear，就能达到消除对外层的影响。

## 左浮动 ##

把d1设置了左浮动后

![这里写图片描述][20160915164212228]

会浮上去。

在浮d2

![这里写图片描述][20160915164245253]

先浮了d1，然后在浮d2的话，d2左边没有地方了就靠着d1来了，红色d1下面的是绿色d3

![这里写图片描述][20160915164315587]

同时我还用在加一个div的方法消除了对外层div的影响。

浮动用处大大的~~~~

## 相对定位 ##

元素原本所占的空间不释放  
元素框会相对于它原来的位置偏移某个距离  
设置垂直或者水平位置，让元素相对于它的起点进行移动  
设置元素为相对定位  
首先需要设置position属性的值为relative  
然后使用left属性或者right属性设置水平方向的偏移量  
也可以使用top属性或者bottom属性设置垂直方向的偏移量。

还在原来的大致位置上，稍微偏离一点。 用相对定位做设置。没有脱离流布局

position:relative;（相对定位）  
left:50px;（以左为准，向右偏移50px；）  
top:50px;（以上为准，向下偏移50px；）

就是写相对定位时，就写position：relative，然后写以什么为准，直接就写就行。

写负数，就可以反方向偏移了。

## 去掉li前面的点 ##

list-style-type:none;

![这里写图片描述][20160915170713240]

开始还想再图片和段落加个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>

![这里写图片描述][20160915193029989]

## 总结 ##

相对定位是相对于自身产生偏移  
绝对定位时相对于父元素产生偏移  
绝对定位时特殊的相对定位

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等 问号

[20160915163749007]: /images/20220717/e0b97a3c638b4232b2d40e1761394b52.png
[20160915163847273]: /images/20220717/60e9cf57a72548869c30d75956e27fa7.png
[20160915163915180]: /images/20220717/eab4c67542d346febc5e1e4415f85023.png
[20160915163955936]: /images/20220717/8dbf0d1badef4ccdb15c2f9b7d061e7a.png
[20160915164025555]: /images/20220717/cc7d2d93d6a8413eb8d3115279e77f61.png
[20160915164053837]: /images/20220717/dee57a1757724081ac50c954bcca042b.png
[20160915164126540]: /images/20220717/a9116e06bec34ad191b05d6e4637017e.png
[20160915164212228]: /images/20220717/2b3e19a510574ad9980ef1b2f7c188ab.png
[20160915164245253]: /images/20220717/b42bf5b8794a49178d850bd75ac165ec.png
[20160915164315587]: /images/20220717/de5fc36aa2524874876b7c10f0ec2127.png
[20160915170713240]: /images/20220717/d0f424e064b24bf49653910e880b85c7.png
[20160915193029989]: /images/20220717/2f4c6d8fe5384cc282bf97d24a1c6c68.png