css定位属性和背景属性

最新推荐文章于 2023-06-04 14:02:00 发布

ch206265

最新推荐文章于 2023-06-04 14:02:00 发布

阅读量709

点赞数

分类专栏： # CSS 文章标签：定位属性背景属性

本文链接：https://blog.csdn.net/ch206265/article/details/88387710

版权

CSS 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

一、定位属性

定位属性position的属性值有：static/relative/absolute/fixed，其默认值为static。我感觉，关于这些定位，需要考虑两个问题：第一个，定位是否破坏了常规文档流；第二个，定位的参考系是谁。下面从这两个角度分析一下静态、相对、绝对和固定定位。

1. 静态定位

静态定位static是position属性的默认值，正常情况下采用的都是静态定位。因此常规的文档流正是在static下形成的，所以静态定位更不会破坏常规文档流；
静态定位下，就是标准文档流布局，块级元素就是从上而下堆叠起来的，即使对块级元素设置了边偏移如top:50px; left:100px;的设置也不起作用。也就是说，边偏移只有在非静态定位的情况下才会起作用。

2. 相对定位

<p>First Paragraph</p>
<p>Second Paragraph</p>
<p id="specialpara">Third Paragraph (with ID)</p>
<p>Fourth Paragraph</p>

p#specialpara {position:relative; top:25px; left:30px;}

相对定位relative不破坏标准文档流，使用相对定位的元素，原位置仍然保留，空置，其他元素不能占用
偏移是参照自已原来的位置进行的

3. 绝对定位

<p>First Paragraph</p>
<p>Second Paragraph</p>
<p id="specialpara">Third Paragraph (with ID)</p>
<p>Fourth Paragraph</p>

p#specialpara {position:absolute; top:25px; left:30px;}

绝对定位absolute破坏标准文档流，使用绝对定位的元素脱离标准文档流，即原来的空间不再保留，脱离后下一个盒子自动补位
偏移是参照距自己最近的已定位的父级元素进行的；如果使用绝对定位的子元素的所有父元素都没有进行定位，那么偏移是参照<body>进行的，也就是参照浏览器左上角
子绝父相规则：当子级元素是绝对定位时，其父级元素应该是相对定位；其实，当子级元素是绝对定位时，父级元素只要是定过位，无论是relative、absolute还是fixed都OK；但是，在网页布局中我们多使用“子绝父相”定位；这是因为，子元素绝对定位是为了不占位置实现块的完全重叠；父元素相对定位是为了占位置，不影响其他盒子的分布

4. 固定定位

<p>First Paragraph</p>
<p>Second Paragraph</p>
<p id="specialpara">Third Paragraph (with ID)</p>
<p>Fourth Paragraph</p>

p#specialpara {position:fixed; top:30px; left:20px;}

固定定位fixed破坏标准文档流结构，使用固定定位的元素脱离标准文档流，脱离后下一个盒子自动补位，这一点和绝对定位absolute相同
和绝对定位不同的是，固定定位fixed和绝对定位absolute定位参照不一样。固定定位的参照是浏览器视窗的左上顶点，也就是说，当滑动浏览器右边的侧滑轮时，固定定位的元素会保持相对于视窗左上顶点的位置不发生变化
固定定位并不常用，最常见的情况是用它创建不随页面滚动而移动的导航元素

二、背景

盒模型背景的前景层和背景层

在这里插入图片描述

1. 背景颜色

前景色color，背景色background-color；前景色即影响文本也影响边框，当然是在没有对border-color进行单独设置的情况下

2. 背景图片

background-image，默认情况下背景图片会以元素左上角为起点，沿水平和垂直方向重复出现，最终填满整个背景区域

p {
	font-size:28px;
	font-family:helvetica, arial, sans-serif;
	width:345px;
	height:110px;
	margin:20px auto;
	padding:10px;
	color:#000;
	border:4px solid #aaa;
	background-color:#fff;
	background-image:url(图片路径/图片文件名);}

需要注意的是指定背景图片来源的方式：background-image:url(图片路径/图片文件名)

3. 背景重复

background-repeat有四个属性值，分别是repeat、repeat-x、repeat-x和no-repeat，它们的效果如下：
在这里插入图片描述

4. 背景位置

background-position有5个属性值，分别是top、left、bottom、right和center

5. 背景尺寸

background-size，这是css3提供的一个新属性

6. 背景粘附

background-attachment该属性控制滚动元素内的背景图片是否随元素滚动而移动，默认值时 scroll即背景图片随元素移动，而fixed则相反。

7. 多背景图片

8. 背景渐变

Reference：

《css设计指南(第三版)》

ch206265

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
css定位属性和背景属性

一、定位属性定位属性position的属性值有：static/relative/absolute/fixed，其默认值为static。我感觉，关于这些定位，需要考虑两个问题：第一个，定位是否破坏了常规文档流；第二个，定位的参考系是谁。下面从这两个角度分析一下静态、相对、绝对和固定定位。1. 静态定位静态定位static是position属性的默认值，正常情况下采用的都是静态定位。因此常规...
复制链接

扫一扫