定位机制
元素放在哪,怎样排列
(一)文档流flow(默认方式)
从左到右、从上到下、有的元素单独占据一行
【display属性:用于转换元素类型】
1.block
独占一行、元素的height、width、margin、padding都可设置【常用元素:div、p、h1、ol、ul、table、form】
a{
display:block;
}
如上,将inline元素a转换为block元素,从而使a元素具有块状元素特点。
2.inline
不单独占用一行、width、height不可设置、width就是它包含的文字或图片的宽度,不可改变【常用元素:span、a、img】
使元素显示为inline元素display:inline;
*inline元素之间有一个间距问题
<style type="text/css">
a{
background:pink;
}
</style>
<body>
<a href="http://www.baidu.com">百度</a>
<a href="http://www.imooc.com">慕课网</a>
</body>
3.inline-block
就是同时具备inline元素、block元素的特点、不单独占用一行、元素的height、width、margin、padding都可设置【常用元素:input】
使元素显示为inline-block元素display:inline-block;
4.元素相互转换(display)
display: none (元素不会被显示
)
display:block(显示为block元素
)
display:inline (显示为inline元素
)
display:inline-block(显示为inline-block元素
)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="style.css">
<title>index</title>
</head>
<body>
<div id="box">
<a href="#">链接1</a>
<a href="#">链接2</a>
<a href="#">链接3</a>
</div>
</body>
</html>
* {
margin: 0;
padding: 0;
}
#box {
margin: 0 auto;
front-size:0;
width: 300px;
color: blue;
}
a {
display: inline-block;
/*盒子的样式*/
width: 80px;
height: 30px;
border-bottom: 1px solid white;
/*超链接文本*/
front-size: 14px;
}
a:hover {
color: white;
background-color: grey;
border: 1px solid;
border-top-color: orange;
border-right-color: orange;
border-left-color: orange;
}
(二)浮动定位float、clear
1.float属性
left—左浮动、right—右浮动、none—不浮动
可以实现div元素横向多列布局
<div id="box1"></div>
<div id="box2"></div>
div{
width:200px;
height:200px;
border:1px solid red;
float:left;
}
如上,盒子box1与box2脱离了文档流原来位置
*左浮动默认页面左上角对齐(右浮动同理)
如果所有三个盒子向左浮动,页面宽度足够,则排列在一行内;若不够,则box3下降。
2 clear属性
clear:left——摆脱左浮动影响
clear:right——摆脱右浮动影响
clear:both——摆脱两侧浮动影响
clear:none ——默认值,只在需要移除已指定的清除值时用到
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="style1.css">
<title>index</title>
</head>
<body>
<div id="container">
<div id="aside"> </div>
<div id="content"></div>
</div>
</body>
</html>
* {
margin: 0;
padding: 0;
}
#container {
margin: 0 auto;
border: 2px;
width: 900px;
}
#aside {
width: 200px;
height: 500px;
background-color: cornflowerblue;
float: left;
}
#content {
width: 695px;
height: 500px;
background-color: cyan;
float: right;
}
如下图所示:
(三)层定位layer(position属性)
像图层一样叠加在一起,有叠加的效果
1.position属性(相对于谁来定位)
static 默认值,没有定位,元素出现在正常的文档流中
fixed 固定定位,相对于浏览器窗口
relative 相对定位,相对于元素原来的位置
absolute 绝对定位,相对于static定位以外的第一个父元素
2.通过以下属性定位(位置在哪里)
以外层为参照物
(二维)用top、right、bottom、left确定位置
(三维)z-index:值大在上面
<style>
#fix-box{
width: ;
height: ;
border: 1px;
position: fixed;
}
</style>
3.做一个固定定位(fixed)的页面
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>index</title>
<style>
*{
margin: 0;
padding: 0;
}
#container{
margin: 0 auto;
height: 3600px;
width: 800px;
}
#fix-box{
position: fixed;
height: 500px;
width: 200px;
right: 8px;
top: 20px;
background-color: gray;
}
#main{
height: 3600px;
width: 800px;
background-color: lightskyblue;
}
</style>
</head>
<body>
<div id="fix-box"></div>
<div id="container">
<div id="main"></div>
</div>
</body>
</html>
如下图所示
4.相对定位(relative)
5.绝对定位(absolute)
脱离文档流,会影响后续元素。其父层并不一定为直接父元素,而必须为绝对或相对定位元素。如果父层都未曾定位relative或absolute,则其将会相对body进行定位。
6.relative+absolute “子绝父相”
父元素box1:relative;
子元素box2:absolute;
子元素box2的top、right、bottom、left将相对于父元素box1进行偏移
“子绝父相”代码如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>index</title>
<style>
*{
margin: 0;
padding: 0;
}
#container{
margin: 0 auto;
width: 300px;
height: 300px;
}
#box1{
margin-top: 100px;
position: relative;
height: 200px;
width: 200px;
background-color: mediumblue;
}
#box2{
width: 60px;
height: 60px;
position: absolute;
left: 70px;
top: -30px;
background-color: lightskyblue;
}
</style>
</head>
<body>
<div id="container">
<div id="box1">
<div id="box2"></div>
</div>
</div>
</body>
</html>
7.粘性定位(sticky)
相对于可以滚动的最近的父元素进行定位。
粘性导航条代码如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>index</title>
<style>
*{
margin: 0;
padding: 0;
}
#container{
margin: 0 auto;
width: 600px;
height: 3000px;
}
#header{
position: sticky;
height: 200px;
width: 600px;
top: 0;
background-color: lightyellow;
}
#main{
width: 600px;
height: 1600px;
background-color: lightskyblue;
}
#footer{
width: 600px;
height: 200px;
background-color: lightslategrey;
}
</style>
</head>
<body>
<div id="container">
<div id="header">页眉</div>
<div id="main">内容</div>
<div id="footer">页脚</div>
</div>
</body>
</html>