css三种定位方式：普通定位如：框与框之间普通排列，浮动定位和绝对定位
1.普通定位中的框排列display属性。实现块元素与行内元素互相转换如：
默认：
h1{background-color:orange;}
span{background-color:red;}
默认h1
默认h1
span|行内标签默认|span
span|行内标签默认|span
display属性后：
h1{background-color:orange;display:inline;/*改为行内*/}
span{background-color:red;display:block;/*改为块*/}
默认h1
默认h1
span|行内标签默认|span
span|行内标签默认|span
还有：display:none属性表示隐藏，让某一个框隐藏。display:block;以块的形式展示
display:inline;以行的形式展示
2.相对定位：position:relative;
默认如下：
#father{
width:900px;
height: 600px;
background-color: antiquewhite;
}
#a{
width:300px;
height: 200px;
background-color: red;
display:inline-block;
}
#b{
width:300px;
height: 200px;
background-color: blue;
display:inline-block;
}
#c{
width:200px;
height: 200px;
background-color: yellow;
display:inline-block;
}
b相对于之前的位置向下想右移动50如下：
代码:修改b的样式
#b{
width:300px;
height: 200px;
background-color: blue;
display:inline-block;
position:relative;/*相对于现在的位置进行配置*/
top:50px;
left:50px;
}
3.绝对定位相对于father标签进行配置【position:absolute;】
#b{
width:300px;
height: 200px;
background-color: blue;
display:inline-block;
position:absolute;/*绝对定位根据father进行的定位进行配置*/
top:50px;
left:50px;
}
4.窗口锁定 position:fixed
无论滑框怎么滑动,按钮始终不动,类似于excel固定菜单一样。position:fixed;
back to top
span{
position:fixed;
/*相对于页面窗口固定不变,类似于右边京东天猫工具栏*/
background-color:green;
right:20px;
bottom:20px;
}
5.设置窗口上下滑动按钮;overflow:auto;
p{margin-top:100px;
width:350px;
height:100px;
overflow:auto;
啦啦啦啦啦啦啦奥罗拉啊拉拉拉拉案例啊啦啊啦啦啦啦拉拉阿拉蕾阿拉拉拉拉案例啊啊啦啊啦啊阿拉拉啊啊啦啊阿拉阿拉拉阿拉拉拉拉案例啊啊啦啊啦啊阿拉阿拉拉拉拉案例啊啊啦啊啦啊阿拉阿拉拉拉拉案例啊啊啦啊啦啊阿拉阿拉拉拉拉案例啊啊啦啊啦啊阿拉
6.将窗口至于底层或顶层
至于底层
#b{
width:800px;
height: 200px;
background-color: blue;
display:inline-block;
position:absolute;
top:50px;
left:50px;
z-index:-1;
/*z-index:1;设置将此标签至于底层或顶层*/
}
8.主要定义所用标签
9.css浮动
浮动就是让元素跳出正常的布局流,浮动在上层的一个框内,可向右或向左，至到碰到外层框才会改变浮动方向
定义浮动用：float:left向左 right向右 none不浮动 inherit 继承父元素float属性值。利用无须列表+浮动制作导航栏
---------------------
html02ul{float:left;
width:100%;
padding:0;
margin:0;
list-style-type:none;/*设置列表样式图标为wu*/
}
a{float:left;
width:7em;
text-decoration:none;/*连接去掉下划线*/
color:white;
background-color:purple;
padding:0.2em 0.6em;
border-right:1px solid white;}
a:hover{background-color:#ff3300;}
li{display:inline;}
--------------------
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
