css浮动定位
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了css浮动定位相关的知识，希望对你有一定的参考价值。
###css浮动###
float:left 浮动 每一个里面都要设置就能实现排排坐
BFC 块级格式化上下文 与外界无任何关系
IFC 行内格式化上下文
overflow：hidden 触发 BFC
只要有浮动就有可能触发BFC
css clear 属性
clear属性定义了元素在哪边上步允许出现浮动元素。
clear：both 不让它左右浮动
:left 在左侧不允许浮动
：right 在右侧步允许浮动
：inherit 从父元素继承clear的值
IFC不是属性不是元素，而是一种环境，一种上下文。
1.line-height 行高（不能使用负值）
2.vertical-align：middle 垂直居中
inline-block
把所有的行内格式转化为块级格式触发BFC
###定位###
一切皆为框
display-none 整个块隐藏不占据位置
-block 块
-inline 变成框加文字
-inline-block
visibility：hiddien 隐藏还保留位置
overflow：hiddien 剪掉多余框外的东西
:visible 内容不会被剪掉，会呈现元素框之外
：scroll 内容会被剪掉，但是浏览会以滚动条的形式以便查看其他内容
：auto 如果内容被剪掉，还是以滚动条显示
z-index：-1 可以让上一层被下一层遮盖
（作用于被定位的元素才能起作用）
网页居中
margin：0 auto；
position 属性
static 默认
relative 相对定位 不脱离文档流 给父元素一个相对定位，子元素会跟着父元素定位
absolute 绝对定位 脱离文档流 类似于浮动
fixed 固定定位 小广告
新边框属性
border-radius：20px 50px 40px 40px 设置圆角边框
box-shadow 向框添加一个或多个阴影，该属性是由空格隔开
例如:
box-shadow: 20px 20px 15px gray / inset
------------ ------ ---------- ------------------
行内或竖向 模糊 阴影颜色，灰色 外部阴影变为内部阴影
超链接的时候 a：hover 点击之后可以发生变化
去掉ul小原点 li{ list-style:none }
**浮动**
浮动例子
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>div</title>
<style type="text/css">
.div1{
border: 1px solid red;
width: 500px;
height: 500px;
background-color: red;
float: left;
overflow: hidden;
}
.div2{
border: 1px solid green;
width: 500px;
height: 100px;
background-color: green;
float: left;
margin-left: -500px;
margin-top: 250px;
}
.div3{
border: 1px solid black;
width: 100px;
height: 100px;
background-color: black;
float: left;
margin-left: -500px;
margin-top: 300px;
}
</style>
</head>
<body>
<div class="">
<div class="div1"></div>
<div class="div2"></div>
<div class="div3"></div>
</div>
</body>
</html>
**导航**
导航例子
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>导航</title>
<style type="text/css">
.nav{
margin: 0 auto;
width: 520px;
height: 60px;
border: 1px solid darkkhaki;
border-radius: 10px;
background-color: darkkhaki;
box-shadow: 10px 10px 15px gray;
}
li{
list-style: none;
float: left;
margin-left: 30px;
margin-top: 5px;
}
a{
text-decoration: none;
}
a:hover{
color: blue;
}
</style>
</head>
<body>
<div class="nav">
<ul>
<li><a href="#">首页</a></li>
<li><a href="#">家电</a></li>
<li><a href="#">服装</a></li>
<li><a href="#">美食</a></li>
<li><a href="#">电脑</a></li>
<li><a href="#">办公用品</a></li>
</ul>
</div>
</body>
</html>
**小广告**
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>wangye</title>
<style type="text/css">
a{
text-decoration: none;
}
.maoDian{
margin-left: 1000px;
margin-top: 600px;
float: left;
width: 70px;
height: 20px;
}
</style>
</head>
<body>
<div>
<a href="" name="maodian"></a>
<div class="guanggao">
<input type="button" value="我是一个广告">
</div >
<div class="maoDian">
<span><a href="#maodian">回到顶点</a></span>
</div>
</div>
</body>
</html>
**css3过渡**
css3过渡是元素从一种样式逐渐改变为另一种的效果
1.规定你希望把效果添加到哪个css属性上
2.规定效果的时长
div{
transition：width 2s
-moz-transition: width 2s
-webkit-transition: width 2s
-o-transition: width 2s
}
前缀是浏览器支持的属性，兼容性
width是一个可以命名的名字，2s是规定的时间
div：hover{
width：300px ;
}
配合 hover 属性才能起作用
**css3 @keyframes规则**
和过渡一样都需要前缀，在@keyframes中创建动画时，把它绑定到某个选择器，
否则不会产生动画效果。通过以下两项css3动画属性，即可将动画绑定到选择器：
1.规定动画的名称
2.规定动画的时长
div{
animation：myfirst 5s
-moz-animation: myfirst 5s;
-webkit-animation: myfirst 5s;
-o-animation: myfirst 5s;
}
@keyframes myfirst
{
0% {background: red;}
25% {background: yellow;}
50% {background: blue;}
100% {background: green;}
}
@-moz-keyframes myfirst /* Firefox */
{
0% {background: red;}
25% {background: yellow;}
50% {background: blue;}
100% {background: green;}
}
@-webkit-keyframes myfirst /* Safari 和 Chrome */
{
0% {background: red;}
25% {background: yellow;}
50% {background: blue;}
100% {background: green;}
}
@-o-keyframes myfirst /* Opera */
{
0% {background: red;}
25% {background: yellow;}
50% {background: blue;}
100% {background: green;}
}
以上是关于css浮动定位的主要内容，如果未能解决你的问题，请参考以下文章