css中的定位---lesson12

来源：互联网发布：新买的mac电池循环次数编辑：程序博客网时间：2024/06/06 15:39

css中的定位涉及到的属性：

position

display

float

top、right、bottom、left

具体说明：

1、position：relative

相对布局：是相对于自己偏移前的元素进行的相对布局；使用top、left来设置偏移量；虽然偏移了，但是会保留自己未偏移时的空间，其他元素不能占用它。

图中可以看到“相对布局2”的位置偏移了，但是“相对布局3”的并没有紧紧贴着“相对布局1”之后进行放置；

代码：

<!DOCTYPE html><html><head><meta charset="UTF-8"><title>Insert title here</title><style type="text/css">body {margin: 0px;padding: 0px;border-width: 0px;}.area1{position: static;background-color: red;}.area2{position: relative;background-color: red;left: 20px;top: 60px;}</style></head><body><h4>position: relative;</h4><div><p>相对布局1 </p><p class="area2">相对布局2 </p><p>相对布局3 </p></div></body></html>

2、position: absolute;

绝对布局：是基于设置了position为relative、absolute、fixed的父节点进行的绝对布局，使用top、left进行偏移；

偏移的元素不会保留未偏移时的空间大小，其他元素会占用该空间；

图中“绝对布局b”因为没有合乎规则的父节点，所以最终是以body为父节点来进行的绝对定位；

“绝对布局d”有合乎规则的父节点（设置了position: relative;），所以就以该父节点来进行绝对定位；

代码：

<!DOCTYPE html><html><head><meta charset="UTF-8"><title>Insert title here</title><style type="text/css">body {margin: 0px;padding: 0px;border-width: 0px;}.area1{position: static;background-color: red;}.area2{position: relative;background-color: red;left: 20px;top: 60px;}.area3{position: absolute;background-color: red;left: 20px;top: 60px;}</style></head><body><div><p>相对布局1 </p><p class="area2">相对布局2 </p><p>相对布局3 </p></div><div>--------------------------------------------------------------</div><div><p>绝对布局a </p><p class="area3">绝对布局b </p><p>绝对布局c </p><div style="position: relative;background-color: yellow;">ddddddd<p class="area3">绝对布局d</p></div></div></body></html>

3、position: fixed;

固定布局：元素是相对于浏览器窗口进行的固定布局，设置了偏移量top、left之后，元素的位置不会随着滚动条的滚动而移动；而且元素不会保留未偏移时的空间大小，其他元素可以占用该空间；

图中可以看到“固定布局II”,是直接基于浏览器的窗口进行的固定布局，而且“固定布局III”占用了“固定布局II”未偏移时的空间；

代码：

<!DOCTYPE html><html><head><meta charset="UTF-8"><title>Insert title here</title><style type="text/css">body {margin: 0px;padding: 0px;border-width: 0px;}.area1{position: static;background-color: red;}.area2{position: relative;background-color: red;left: 20px;top: 60px;}.area3{position: absolute;background-color: red;left: 20px;top: 60px;}.area4{position: fixed;background-color: red;left: 50%;top: 10px;}</style></head><body><div><p>相对布局1 </p><p class="area2">相对布局2 </p><p>相对布局3 </p></div><div>--------------------------------------------------------------</div><div><p>绝对布局a </p><p class="area3">绝对布局b </p><p>绝对布局c </p><div style="position: relative;background-color: yellow;">ddddddd<p class="area3">绝对布局d</p></div></div><div>--------------------------------------------------------------</div><div style="margin-top: 80px;"><p>固定布局I </p><p class="area4">固定布局II </p><p>固定布局III</p><div style="position: relative;background-color: yellow;">IVIVIVIVIVIV</div></div></body></html>

4、display可取值：

display: none;设置元素不可见，不占用空间位置；

display: inline;将一个元素设置为行内元素，行内元素设置width和height是无效的；大小是包裹内容

display: block;将一个元素设置为块级元素，块级元素可以设置width和height；如果不设置宽，默认是与父元素宽度一样，如果不设置高度，默认是包裹高度；

display:inline-block;将一个元素设置为行块元素，具有行内元素的特性，同时可以设置宽高；

代码：

<!DOCTYPE html><html><head><meta charset="UTF-8"><title>Insert title here</title><style type="text/css">body {margin: 0px;padding: 0px;border-width: 0px;}.area1 {position: static;background-color: red;}.area2 {position: relative;background-color: red;left: 20px;top: 60px;}.area3 {position: absolute;background-color: red;left: 20px;top: 60px;}.area4 {position: fixed;background-color: red;left: 50%;top: 10px;}</style></head><body><div>-------------------------相对布局-------------------------------------</div><div><p>相对布局1</p><p class="area2">相对布局2</p><p>相对布局3</p></div><div>-------------------------绝对布局-------------------------------------</div><div><p>绝对布局a</p><p class="area3">绝对布局b</p><p>绝对布局c</p><div style="position: relative; background-color: yellow;">ddddddd<p class="area3">绝对布局d</p></div></div><div>--------------------固定布局------------------------------------------</div><div style="margin-top: 80px;"><p>固定布局I</p><p class="area4">固定布局II</p><p>固定布局III</p><div style="position: relative; background-color: yellow;">IVIVIVIVIVIV</div></div><div>---------------------display-----------------------------------------</div><div style="margin-top: 10px;"><p style="display: inline; height: 60px; background-color: red">pA</p><p style="display: inline; height: 60px; background-color: red">pB</p><p style="display: none; height: 60px; background-color: red">pC</p><div style="width: 80px;height: 80px;background-color: yellow;"><p style="background-color: red">pD</p><p style="background-color: red;width: 40px;">pD2</p></div><a style="display: block; height: 60px; width: 60px; background-color: red">aE</a><a style="display: inline-block; height: 60px;width:80px;background-color: red">aF</a></div></body></html>

5、float可取值left,right

一般用于水平菜单

阅读全文

0 0