首页 > 代码库 > 蓝鸥零基础学习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第八讲 样式布局二