javaScript--02 CSS基础 下 相对定位,绝对定位,顺序流,z-index,float
来源:互联网 发布:php平台是干什么用呢? 编辑:程序博客网 时间:2024/06/05 16:57
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
- css中的float和相对定位,绝对定位,z-index
- 08-CSS 相对定位 绝对定位 固定定位 z-index
- 07 CSS-相对定位、绝对定位、固定定位、z-index
- 2.8 CSS相对定位&&绝对定位&&固定定位&&z-index
- 07 CSS-相对定位、绝对定位、固定定位、z-index
- CSS相对定位|绝对定位(五)之z-index篇
- CSS相对定位|绝对定位(五)之z-index篇
- CSS相对定位|绝对定位(五)之z-index篇
- 相对定位、绝对定位、z-index
- 定位(相对、绝对)、z-index
- css浮动float、相对定位绝对定位辨析
- CSS相对定位绝对定位
- css绝对定位&相对定位
- CSS绝对定位相对定位
- 绝对定位 与 z-index
- css相对定位,绝对定位,static定位
- css 固定定位 相对定位 绝对定位
- SparkSQL------初涉
- 将JSON转换成MAP的工具类
- Post请求传递参数时,最好在请求头加上item.ContentType = "application/x-www-form-urlencoded";
- 20160704
- Crossfilter总结
- javaScript--02 CSS基础 下 相对定位,绝对定位,顺序流,z-index,float
- 一些常用的Intent_ACTION以及属性
- Unity调用android
- 建造者模式的简写方式分析
- github上传时出现error: src refspec master does not match any解决办法
- C++中public,protected,private访问
- 使用Abator自动生成ibatis的DAO.Model.mapper.xml方法使用说明
- android下NDK开发环境搭建及TestJNI入门实例完整过程
- TCP netstat -az含义