博客说明
文章内容输出来源：拉勾教育Java就业急训营
CSS默认定位
- 块级元素(block)：h1~h6，p, div 等，自上而下，垂直排列（自动换行）；可以改变宽高
- 行内元素(inline)：a,b,span,等，从左向右，水平排列（不会换行）；不能改变宽高
- 行内块元素(inline-block)：input,img等，从左向右，水平排列（自动换行）；可以改变宽高
如果要使上三种元素互相转换，使用：display
<style>
a {
width: 100px;
height: 50px;
border: 1px solid red;
display: inline-block;/* 转换 */
}
</style>
<body>
<a href="http://baidu.com"> 点击进入百度</a>
<a href="http://baidu.com"> 点击进入百度</a>
<a href="http://baidu.com"> 点击进入百度</a>
</body>
CSS浮动定位
<style>
.d{
width: 500px;
height: 500px;
border: 2px solid black;
}
#a,#b{
width: 100px;
height: 100px;
}
#a{
background-color: blue;
float: left;/* 向左浮动 */
margin: 10px;
}
#b{
background-color: chartreuse;
float: right;/* 向右浮动 */
margin: 10px;
}
</style>
<body>
<div class="d">
<div id="a"></div>
<div id="b"></div>
</div>
</body>
CSS相对定位
例子：
<style>
.d{
width: 500px;
height: 500px;
border: 2px solid black;
}
#a,#b,#c{
width: 100px;
height: 100px;
}
#a{
background-color: blue;
}
#b{
background-color: orange;
position: relative;/* 相对定位：相对与自己原来的位置进行移动 */
top: 30px;/* 上偏移30px */
left: 50px;/* 左偏移50px */
}
#c{
background-color:darkgreen;
}
</style>
<body>
<div class="d">
<div id="a"></div>
<div id="b"></div>
<div id="c"></div>
</div>
</body>
CSS绝对定位
<style>
.d{
width: 500px;
height: 500px;
background-color: black;
padding: 30px;
}
#a{
width: 300px;
height: 300px;
position: relative;/* 使用定位，让a做为c的参照物进定位行 */
}
#b,#c{
width: 100px;
height: 100px;
}
#a{
background-color: blue;
}
#b{
background-color: aqua;
}
#c{
background-color: orange;
position: absolute;/* 绝对定位 */
top: 30px;
left: 30px;
}
</style>
<body>
<div class="d">
<div id="a">
<div id="b"></div>
<div id="c"></div>
</div>
</div>
</body>
CSS固定定位
将元素的内容固定在页面的某个位置，当用户向下滚动页面时元素框并不随着移动
<style>
.gg{
width: 200px;
height: 200px;
background-color: chartreuse;
position: fixed;
left: 100px;
}
</style>
<body>
<div class="gg"></div>
<h1>内容</h1>
<h1>内容</h1>
<h1>内容</h1>
<h1>内容</h1>
<h1>内容</h1>
<h1>内容</h1>
<h1>内容</h1>
<h1>内容</h1>
<h1>内容</h1>
<h1>内容</h1>
<h1>内容</h1>
<h1>内容</h1>
<h1>内容</h1>
<h1>内容</h1>
<h1>内容</h1>
<h1>内容</h1>
<h1>内容</h1>
<h1>内容</h1>
<h1>内容</h1>
<h1>内容</h1>
<h1>内容</h1>
<h1>内容</h1>
<h1>内容</h1>
<h1>内容</h1>
<h1>内容</h1>
<h1>内容</h1>
</body>
CSS Z轴属性
<style>
div{
width: 100px;
height: 100px;
}
.a{
background-color: blue;
position: relative;
z-index: 3;/* Z轴数值，大者在上面 */
}
.b{
background-color: orange;
position: relative;
top: -50px;
left: 50px;
z-index: 2;/* Z轴数值，大者在上面 */
}
</style>
<body>
<div class="a"></div>
<div class="b"></div>
</body>