您的位置：首页 > Web前端 > JavaScript

javaScript--02 CSS基础下相对定位,绝对定位,顺序流,z-index,float

2016-07-04 18:12 666 查看

02 CSS基础
下相对定位,绝对定位,顺序流,z-index,float

16-定位属性

<!DOCTYPE html>

<html lang="zh">

<head>

<title>顺序流</title>

<meta charset="utf-8">

<meta name="keywords" content=",,">

<meta name="description" content="">



<style>

*{

margin: 0px;

padding: 0px;

}

body{

border-style: dotted;

border-width: 5px;

border-color: red;

margin:50px;

}

div{

border-style: dotted;

border-width: 5px;

border-color: blue;

width:300px;

height: 150px;

/*定位：绝对定位：原点在父容器的左上角，相对于原点的位置*/

/*绝对定位

position:absolute;

left: 10px;

top:20px;

*/

/*相对定位，相对与自己原来的位置

position: relative;

left: 50px;*/

/*顺序流：所有的标签初始排列的顺序就称为顺序流，有两种情况使控件脱离顺序流（脱离顺序流的视图会显示在更高层，遮挡住顺序流中的视图），1:当我们把控件的位置设置为绝对定位。2:当我们设置控件的float属性的时候*/

background-color: bisque;



/*float: left;*//*和display: inline-block;对比*/

/*clear: both;清除float效果*/

overflow:scroll;/*指div的内容超过content显示范围时如何显示。*/

}

p{

width: 500px;

height: 100px;

background-color: green;

}

</style>

</head>



<script type="text/javascript">

</script>



<body>

<div>

div1;div1;div1;div1;div1;div1;div1;div1;div1;div1;div1;div1;div1;div1;div1;div1;div1;div1;div1;div1;div1;div1;div1;

</div>

<div>div2;</div>

<div>

div3;

</div>

<div>

div4;

</div>

<p>

z-index设置元素显示的层级大小，z-index越大，显示越靠前。

</p>

</body>

</html>

<!DOCTYPE html>

<html lang="zh">

<head>

<title>CSS样式表的冲突解决</title>

<meta charset="utf-8">

<meta name="keywords" content=",,">

<meta name="description" content="">



<style>

ul{

margin-left: auto;

margin-right: auto;

height: 30px;

width: 550px;

background-color: darkgrey;

padding-left: 0px;

padding-top: 10px;

}

li{

/*float: left;*/

display: inline-block;/*让其横向显示*/

margin-left: 20px;

background-color: red;

}

a{

text-decoration: none;

color: white;

}

</style>

</head>



<script type="text/javascript">

</script>



<body>

<ul>

<li><a href="#">首页</a></li>

<li><a href="#">学习论坛</a></li>

<li><a href="#">学员问答</a></li>

<li><a href="#">IT圈子</a></li>

<li><a href="#">实时课堂</a></li>

<li><a href="#">客户端下载</a></li>

<li><a href="#">帮助</a></li>

</ul>

<img src="dragon.png" style="filter:xray()">

<img src="dragon.png" style="filter:gray()">

</body>

</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航

javaScript--02 CSS基础 下 相对定位,绝对定位,顺序流,z-index,float

javaScript--02 CSS基础下相对定位,绝对定位,顺序流,z-index,float