css定位

最新推荐文章于 2024-11-14 09:54:48 发布

agdjdbucbdins

最新推荐文章于 2024-11-14 09:54:48 发布

阅读量40

点赞数

文章标签： css 前端 html

本文链接：https://blog.csdn.net/agdjdbucbdins/article/details/130604149

版权

CSS 定位和浮动

CSS 为定位和浮动提供了一些属性，利用这些属性，可以建立列式布局，将布局的一部分与另一部分重叠，还可以完成多年来通常需要使用多个表格才能完成的任务。

定位的基本思想很简单，它允许你定义元素框相对于其正常位置应该出现的位置，或者相对于父元素、另一个元素甚至浏览器窗口本身的位置。显然，这个功能非常强大，也很让人吃惊。要知道，用户代理对 CSS2 中定位的支持远胜于对其它方面的支持，对此不应感到奇怪。

一切皆为框

div、h1 或 p 元素常常被称为块级元素。这意味着这些元素显示为一块内容，即“块框”。与之相反，span 和 strong 等元素称为“行内元素”，这是因为它们的内容显示在行中，即“行内框”。

您可以使用 display 属性改变生成的框的类型。这意味着，通过将 display 属性设置为 block，可以让行内元素（比如 <a> 元素）表现得像块级元素一样。还可以通过把 display 设置为 none，让生成的元素根本没有框。这样的话，该框及其所有内容就不再显示，不占用文档中的空间。

CSS 定位机制

CSS 有三种基本的定位机制：普通流、浮动和绝对定位。

CSS position 属性

通过使用 position 属性，我们可以选择 4 种不同类型的定位，这会影响元素框生成的方式。

static 默认值

relative:

相对定位:对于自身进行定位
               加上定位后,位置不会发生变化
               需要用特定的属性进行移动*/
                 相对定位:

                1.相对于自身定位
               2.原来的位置会保留
               3.不会脱离标准文档流

<head>
       <meta charset="utf-8">
       <title></title>
       <style>
           div{
               height:300px;
               width:300px;
               border-color:powderblue;
           }
           .a{
               background-color: red;
               position:relative;
               top:20px;
               left:-100px
           }
       </style>
   </head>
   <body>
       <div class="a"></div>
       <div class="b"></div>
   </body>

absolute

绝对定位会脱离标准文档流
               原来的位置不再保留相对于有定位的父元素进行移动
               如果父元素没有定位,会继续向上找,直到根元素.
               绝对定位,一般和相对定位一起使用

fixed
固定定位:
               脱离标准文档流,
               不保留原来位置
               相对于浏览器进行移动
               :吸顶导航,侧边栏的广告

<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			.a{
				height: 100px;
				width:100px;
				background-color: blue;
				position: fixed;
				top:500px;
				left:20px;
			}
			.b{
				height:10000px;
				background-color: aqua;
			}
		</style>
	</head>
	<body>
		<div class="a"></div>
		<div class="b"></div>
	</body>

css浮动

浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。

由于浮动框不在文档的普通流中，所以文档的普通流中的块框表现得就像浮动框不存在一样。

<!DOCTYPE html>
<html>
   <head>
       <meta charset="utf-8">
       <title>浮动</title>
       <style>
           .a{
               height:400px;
               width:600px;
               border: 1px solid red;
           }
           .a div{
               height:100px;
               width:100px;
               background-color: aqua;
               border:1px solid black ;
           }

           .c{
               float:right;
           }
       </style>
   </head>
   <body>
       <div class="a">
           <div class="b">b</div>
           <div class="c">c</div>
           <div class="d">d</div>
       </div>
   </body>
</html>

css "display"

display:block变成块

display:none隐藏

display:inline ,内联式,按照内联模式显示,它会和周围的元素在一行

<head>
		<meta charset="utf-8">
		<title>display</title>
		<style>
			div{
				height:200px;
				width:200px;
				background-color: aqua;
				/* 变成行内元素后没有高度和宽度,
				 高宽取决于内容 */
				display:inline;
			}
			a{
				/* 变成块状元素后高和宽会生效 */
				/* display:block; */
				height:200px;
				width:200px;
				background-color: bisque;
				/* none元素会隐藏 */
				display: none;
			}
		</style>
	</head>
	<body>
		<div>冻干粉</div>
		<a href="#">thd</a>
	</body>