CSS2基础笔记（8）---- CSS定位、CSS布局

最新推荐文章于 2024-07-08 11:32:20 发布

sangyu421

最新推荐文章于 2024-07-08 11:32:20 发布

阅读量215

点赞数 1

分类专栏：前端文章标签： css 前端 html vscode javascript

本文链接：https://blog.csdn.net/m0_61332945/article/details/130463177

版权

前端专栏收录该内容

14 篇文章 1 订阅

订阅专栏

一、定位

1.相对定位

1.1如何设置相对定位？

给元素设置position:relative即可实现相对定位。
可以使用left、right、top、bottom四个属性调整位置。

1.2相对定位的参考点在哪里？

相对自己原来的位置

1.3相对定位的特点

1.不会脱离文档流，元素位置的变化，只是视觉效果上的变化，不会对其他元素产生任何影响。
2.定位元素的显示层级比普通元素高，无论什么定位，显示层级都是一样的。默认规则是：

定位的元素会盖在普通元素之上。
都发生定位的两个元素，后写的元素会盖在先写的元素之上。

3.left 不能和right一起设置，top和bottom不能一起设置。
4.相对定位的元素，也能继续浮动，但不推荐这样做。
5.相对行为的元素，也能通过 margin 调整位置，但不推荐这样做。

2.绝对定位

2.1如何设置绝对定位？

给元素设置position: absolute即可实现绝对定位。
可以使用left 、right、top、bottom四个属性调整位置。

2.2绝对定位的参考点在哪里？

参考它的包含块。
什么是包含块？
1. 对于没有脱离文档流的元素：包含块就是父元素；
2. 对于脱离文档流的元素：包含块是第一个拥有定位属性的祖先元素（如果所有祖先都没定位，那包含块就是整个页面）。

2.3绝对定位元素的特点：

脱离文档流，会对后面的兄弟元素、父元素有影响。
left 不能和right一起设置，top和bottom不能一起设置。
绝对定位、浮动不能同时设置，如果同时设置，浮动失效，以定位为主。
绝对定位的元素，也能通过margin调整位置，但不推荐这样做。
无论是什么元素（行内、行内块、块级）设置为绝对定位之后，都变成了定位元素。

3.固定定位

3.1如何设置固定定位？

给元素设置position: fixed即可实现固定定位。
可以使用left、right、top、bottom四个属性调整位置。

3.2固定定位的参考点在哪里？

参考它的视口

什么是视口？—— 对于PC浏览器来说，视口就是我们看网页的那扇“窗户”。

3.3固定定位元素的特点：

脱离文档流，会对后面的兄弟元素、父元素有影响。
left不能和right一起设置，top和bottom不能一起设置。
固定定位和浮动不能同时设置，如果同时设置，浮动失效，以固定定位为主。
固定定位的元素，也能通过margin调整位置，但不推荐这样做。
无论是什么元素（行内、行内块、块级）设置为固定定位之后，都变成了定位元素。

4.粘性定位

4.1如何设置粘性定位？

给元素设置position:sticky即可实现粘性定位。
可以使用left 、right、top、bottom四个属性调整位置，不过最常用的是top值。

4.2粘性定位的参考点在哪里？

离它最近的一个拥有“滚动机制”的祖先元素，即便这个祖先不是最近的真实可滚动祖先。

4.3粘性定位元素的特点：

不会脱离文档流，它是一种专门用于窗口滚动时的新的定位方式。
最常用的值是top值。
粘性定位和浮动可以同时设置，但不推荐这样做。
粘性定位的元素，也能通过margin调整位置，但不推荐这样做。

5.定位层级

定位元素的显示层级比普通元素高，无论什么定位，显示层级都是一样的。
如果位置发生重叠，默认情况是：后面的元素，会显示在前面元素之上。
可以通过css属性z-index调整元素的显示层级。
z-index的属性值是数字，没有单位，值越大显示层级越高。
只有定位的元素设置z-index才有效。
如果z-index值大的元素，依然没有覆盖掉z-index值小的元素，那么请检查其包含块的层级。

6.定位的特殊应用

注意：

 1. 发生固定定位、绝对定位后，元素都变成了定位元素，默认宽高被内容撑开，且依然可以设
 置宽高。
 2. 发生相对定位后，元素依然是之前的显示模式。
 3. 以下所说的特殊应用，只针对**绝对定位**和**固定定位**的元素，不包括**相对定位**的元素。

1.让定位元素的宽充满包含块

块宽想与包含块一致，可以给定位元素同时设置left和right为0。
高度想与包含块一致，top和bottom设置为 0 。

2.让定位元素在包含块中居中

方案1：

left:0;
right:0;
top:0;
bottom:0;
margin:auto;

方案2：

left: 50%;
top: 50%;
margin-left: 负的宽度一半;
margin-top: 负的高度一半;

二、布局

1.版心

在PC端网页中，一般都会有一个固定宽度且水平居中的盒子，来显示网页的主要内容，这是网页的版心。
版心的宽度一般是960~1200像素之间。
版心可以是一个，也可以是多个。

2.常用布局名词

位置
顶部导航条	topbar
页头	header、page-header
导航	nav、navigator、navbar
搜索框	search、search-box
横幅、广告、宣传图	banner
主要内容	content、main
侧边栏	aside、sidebar
页脚	footer、page-footer

3.重置默认样式

很多元素都有默认样式，比如：
1. p元素有默认的上下margin。
2. h1~h6标题也有上下margin，且字体加粗。
3. body元素有默认的8px外边距。
4. 超链接有默认的文字颜色和下划线。
5. ul 元素有默认的左pading。
方案1：使用全局选择器

		* {
			margin: 0;
			padding: 0;
		......
		}

方案2：reset.css

选择到具有默认样式的元素，清空其默认的样式。

方案3：Normalize.css

Normalize.css 是一种最新方案，它在清除默认样式的基础上，保留了一些有价值的默认样式。
相对于 reset.css ， Normalize.css 有如下优点：

  1. 保护了有价值的默认样式，而不是完全去掉它们。
  2. 为大部分HTML元素提供一般化的样式。
  3. 新增对 HTML5 元素的设置。
  4. 对并集选择器的使用比较谨慎，有效避免调试工具杂乱。