css之定位

来源：互联网发布：碎屏幕手机壁纸软件编辑：程序博客网时间：2024/06/07 08:55

css的定位机制

CSS 有三种基本的定位机制：普通流

浮动 float

绝对定位 position

普通流

除非专门指定，否则所有框都在普通流中定位。也就是说，普通流中的元素的位置由元素在 (X)HTML 中的位置决定。

即：块级框从上到下一个接一个地排列。

行内框在一行中水平布置。可以使用水平内边距、边框和外边距调整它们的间距。但是，垂直内边距、边框和外边距不影响行内框的高度。由一行形成的水平框称为行框（Line Box），行框的高度总是足以容纳它包含的所有行内框。不过，设置行高可以增加这个框的高度

浮动 float

float 属性定义元素在哪个方向浮动，在 CSS 中，任何元素都可以浮动。浮动元素会生成一个块级框，而不论它本身是何种元素。

如果浮动非替换元素，则要指定一个明确的宽度；否则，它们会尽可能地窄。

注释：假如在一行之上只有极少的空间可供浮动元素，那么这个元素会跳至下一行，这个过程会持续到某一行拥有足够的空间为止。

其属性值可以为：

属性值leftrightnoneinherit描述元素向左浮动元素向右浮动默认值元素不浮动从父元素继承其属性

定位 position属性

其属性可以为：relative 相对定位

absolute 绝对定位

fixed 固定定位

其值可取：top left z-index

相对定位 position：relative

1：相对于自己原来的位置进行定位

2：移动以后，自己原来的位置不会被其他元素占用 

<style>

#container{

width: 600px;

height: 300px;

border: 1px dashed black;

margin: 0 auto;

padding: 20px;

}

#left{

width: 150px;

height: 100px;

border: 1px dashed black;

background-color: #4C2E83;

margin-right: 40px;

float: left;

}

#center{

width: 150px;

height: 100px;

background-color: #F3AD0A;

border: 1px dashed black;

margin-right: 40px;

float: left;

position: relative;

top:20px;

left: 80px;

z-index: -1;

}

#right{

width: 150px;

height: 100px;

background-color: blue;

border: 1px dashed black;

float: left;

}

</style>

<title>相对定位</title>

</head>

<body>

<div id="container">

<div id="left"></div>

<div id="center"></div>

<div id="right"></div>

</div>

</body>

绝对定位position：absolute

1：相对于离它最近的，并且使用了定位的父元素 如果没有符合的，最后将以body为基准

2：元素原来的空间会被其它元素占用

<style>

*{

padding: 0;

margin: 0;

}

#div1{

width: 600px;

height: 250px;

background-color: #42668F;

margin: 20px 0 0 20px;

overflow: hidden;

}

#div2{

width: 550px;

height: 200px;

background-color: #F3AD0A;

margin: 20px 0 0 20px;

overflow: hidden;

position: relative;

}

#div3{

width: 500px;

height: 150px;

background-color: aqua;

margin: 20px 0 0 20px;

}

#left{

width: 150px;

height: 100px;

background-color: #4C2E83;

float: left;

}

#center{

width: 150px;

height: 100px;

background-color: red;

float: left;

position: absolute;

top: 10px;

left: 10px;

}

#right{

width: 150px;

height: 100px;

background-color: blue;

float: left;

}

</style>

<title>绝对定位</title>

</head>

<body>

<div id="div1">

<div id="div2">

<div id="div3">

<div id="left"></div>

<div id="center"></div>

<div id="right"></div>

</div>

</div>

</div>

固定定位 position：fixed

元素框的表现类似于将 position 设置为 absolute，不过其父元素是视窗本身

<style>

#div1{

height: 1200px;

background-color: #FF6600;

}

#backtop{

height: 50px;

width: 50px;

background-color: red;

position: fixed;

bottom: 20px;

right: 5px;

}

*{

padding: 0;

margin: 0;

}

<title>固定定位</title>

</head>

<body>

<a name="top"></a>

<div id="div1">

<p>会立刻就嘎数据库了嘎考虑</p>

</div>

<button id="backtop">

<a href="#top">返回顶部</a>

</button>

</body>

使用定位实现垂直居中

垂直居中：即使某一子元素始终居于父元素的正中部分而不论父元素如何改变宽高

1：给父容器加相对定位，但不加样式，使其知识为子元素提供一个定位

2：给子元素加绝对定位

3：top left：50%

4：margin—top margin-left：取子元素宽高一半的负值

<style>

*{

padding: 0;

margin: 0;

}

#container{

width: 300px;

height: 150px;

border: 1px dashed orange;

margin: 0 auto;

position: relative;

}

#div1{

width: 100px;

height: 100px;

background-color: orange;

position: absolute;

top:50%;

left: 50%;

margin-top: -50px;

margin-left: -50px;

}

</style>

<title>固定定位</title>

</head>

<body>

<div id="container">

<div id="div1"></div>

</div>

</body>

阅读全文

0 0