首页 > 代码库 > 蓝鸥零基础学习HTML5第八讲 样式布局二
蓝鸥零基础学习HTML5第八讲 样式布局二
蓝鸥零基础学习HTML5第八讲 样式布局二
1.定位的属性及特性
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
#box1 {
width:400px;
height:400px;
border:10px solid red;
margin:0 auto;
position: relative;
/*left:300px;*/
}
#box2{
width:100px;
height:100px;
background: yellow;
position: absolute;
left:10px;
top:30px;
}
</style>
</head>
<body>
<!--
定位： 把一个元素 按照一定的方式 定到页面的某一个位置
position
相对定位 relative
针对自己本身的位置进行定位
绝对定位 absolute
针对有定位的父级的原点进行定位，如果父级没有定位，会找父级的父级身上有没有定位，如果有，针对父级的父级的原点进行定位，以此类推，如果都没有定位，针对document进行定位
温馨小提示：
绝对定位即使没有初始值，也一定要设置值
left:0px;
top:0px;
固定定位 fixed
针对页面窗口进行定位
温馨提示：
IE6 不支持固定定位
偏移量
left
top
right
bottom
温馨提示
left top 比 right bottom 的优先级要高
-->
<div id="box1">
<div id="box2"></div>
</div>
</body>
</html>
2.三种的定位的特性
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
#box1 {
background: red;
position: absolute;
/*float:left;*/
}
#box2 {
width:200px;
height:200px;
background: yellow;
}
span {
width:100px;
height:100px;
background: red;
position: fixed;
left:0px;
}
.span1 {
z-index: 1;
}
.span2{
z-index: 2;
}
.span4{
z-index: 10;
}
</style>
</head>
<body>
<!--
定位的三种特性
相对定位 relative
1.不影响元素本身的特性
2.不使元素脱离文档流
3.提升层级
4.无法触发BFC
5.针对自己本身进行定位
绝对定位 absolute
1.会使元素完全脱离文档流
2.内容撑开宽度和高度
3.使元素支持所有的CSS样式
4.提升层级
z-index:数值; 定位层级设置
数值越大，层级越高
5.绝对定位要和相对定位配合使用
6.如果有定位父级，针对定位父级发生偏移，没有定位父级，针对document进行偏移
7.如果绝对定位的子级有浮动，可以省略清浮动的操作
固定定位 fixed
1.不兼容IE6
2.针对窗口进行定位
3.如果固定定位的子级有浮动，可以省略清浮动的操作
-->
<!-- <div id="box1">div1</div>
<div id="box2">div2</div> -->
<!-- <span>span1</span> -->
</body>
</html>
3.定位和BFC
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
div {
width:350px;
border:10px solid #000;
position: relative;
}
span {
width:100px;
height:100px;
background: red;
text-align: center;
line-height: 100px;
font-size:40px;
float:left;
}
</style>
</head>
<body>
<div>
<span>1</span>
<span>2</span>
<span>3</span>
<span>4</span>
</div>
</body>
</html>
4.定位的下例子
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
div {
width:400px;
height:400px;
border:4px solid #000;
background: yellow;
position: relative;
overflow: hidden;
}
span {
width:400px;
height:100px;
background: red;
position: absolute;
top:400px;
transition:0.01s;
}
div:hover span{
top:300px;
}
</style>
</head>
<body>
<div>
<span></span>
</div>
</body>
</html>
5.派生选择器
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
/*span {
border:1px solid red;
}*/
#box1 span {
border:1px solid red;
}
#box2 span {
display: inline-block;
width:100px;
height:100px;
background: yellow;
}
</style>
</head>
<body>
<!--
派生选择器
是由 id选择器 class选择器 标签名选择器组合而成
id选择器 10000
class选择器 100
标签名选择器 1
#box2 span 10000 + 1 10001
-->
<div id="box1">
<span>我是box1的span</span>
<span>我是box1的span</span>
<span>我是box1的span</span>
<span>我是box1的span</span>
</div>
<div id="box2">
<span>我是box2的span</span>
<span>我是box2的span</span>
<span>我是box2的span</span>
<span>我是box2的span</span>
</div>
</body>
</html>
6.派生选择器的小例子
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="http://www.mamicode.com/css/reset.css">
<style>
#box1 {
width:550px;
margin:0 auto;
border:1px solid #E4AD7F;
}
#box1 li {
width:100px;
height:50px;
background: #A5EEA2;
float:left;
margin-right: 10px;
text-align: center;
line-height: 50px;
font-size:24px;
}
#box1 li a {
color:#E99B1E;
}
#box1 .cla1{
background: red;
}
#box1 .cla1 a {
color:#fff;
}/**/
/*
id 10000
class 100
div 1
#box1 li 10000 + 1
#box1 li a 10000 + 1 + 1
#box1 .cla1 10000 + 100
#box1 .cla1 a 10000 + 100 + 1
*/
</style>
</head>
<body>
<div id="box1">
<ul>
<li>
<a href="http://www.mamicode.com/#">导航1</a>
</li>
<li>
<a href="http://www.mamicode.com/#">导航2</a>
</li>
<li>
<a href="http://www.mamicode.com/#">导航3</a>
</li>
<li>
<a href="http://www.mamicode.com/#">导航4</a>
</li>
<li>
<a href="http://www.mamicode.com/#">导航5</a>
</li>
</ul>
</div>
</body>
</html>
蓝鸥零基础学习HTML5第八讲 样式布局二