CSS3/BFC/IFC
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了CSS3/BFC/IFC相关的知识，希望对你有一定的参考价值。
SCC3边框
1.给边框添加圆角：
<!DOCTYPE html>
<html>
<head>
<style>
div{
text-align:center;【文本为水平方向对其，居中】
border:2px solid #a1a1a1;
padding:10px 40px; 【内边距间距为上下和左右】
background:#dddddd;
width:350px;【宽度】
border-radius:25px;【一个值表示XY和XY都旋转25px为圆角】
}
</style>
</head>
<body>
<div>添加圆角</div>
</body>
</html>
2.给边框添加阴影：
<!DOCTYPE html>
<html>
<head>
<style>
div
{
width:300px;
height:100px;
background-color:#ff9900;
box-shadow: 10px 10px 5px #888888;【盒子阴影，前两个值是X和Y的阴影厚度，后面是模糊度，最后为阴影颜色】
}
</style>
</head>
<body>
<div></div>
</body>
</html>
3.边框用图片装饰：
<!DOCTYPE html>
<html>
<head>
<style>
div
{
border:15px solid transparent;
width:300px;
padding:10px 20px;
}
#round{
border-image:url(图片地址)round;【图片围绕周围】
}
#stretch{
border-image:url(图片地址)stretch;【图片拉伸】
}
</style>
</head>
<body>
<div id="round">被图片边框包围的文字</div>
<br>
<div id="stretch">被图片边框包围的文字</div>
Internet Explorer 不支持 border-image 属性
</body>
</html>
4.文本字体阴影效果：
<!DOCTYPE html>
<html>
<head>
<style>
h1{
text-shadow: 5px 5px 5px #FF0000;【文本，阴影】
}
</style>
</head>
<body>
<h1>文本阴影效果</h1>
</body>
</html>
5.文本自动换行：
<!DOCTYPE html>
<html>
<head>
<style>
.test{
width:11em; 【1em=16px】
border:1px solid #000000;
word-wrap:break-word;【自动换行，所包含所有文本】
}
</style>
</head>
<body>
<p class="test">文本多余的字自动换行文本多余的字自动换行文本多余的字自动换行文本多余的字自动换行文本多余的字自动换行文本多余的字自动换行文本多余的字自动换行</p>
</body>
</html>
6.文本文字溢出：
<!DOCTYPE html>
<html>
<head>
<style>
.test{
white-space:nowrap; 【空白，禁止换行】
width:12em;
overflow:hidden; 【溢出的，被隐藏】
border:1px solid #000000;
}
</style>
</head>
<body>
<div class="test" style="text-overflow:ellipsis;">【文本溢出后，用省略符表示】</div>
<div class="test" style="text-overflow:clip;">【文本溢出后，后面多余的被剪掉不显示】</div>
</body>
</html>
7.2D旋转：
transform改变所需要的四中型：
translate(X和Y进行移动)
rotate(顺时针旋转给定的角度。允许负值，元素将逆时针旋转。)
scale(元素的尺寸会增大或减小，根据给定的X和Y的参数)
skew(元素围绕X和Y轴进行旋转)
matrix()
8.3D旋转：
transform改变所需要的两中型：
rotateX(元素围绕X轴以给定的度数进行旋转)
rotateY(元素围绕y轴以给定的度数进行旋转)
9.浏览器兼容前缀：
-webkit- 谷歌和苹果
-o- 欧鹏
-moz- 火狐
-ms- IE9
10.过度
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>旋转过渡</title>
<style type="text/css">
div{
width:100px;
height:100px;
background:red;
transition-delay:2s;【过渡延误时间】
transition:width 2s, height 2s,transform 1s;【过渡的长度时间，高度时间，改变形状的时间】
}
div:hover{
width:200px;【鼠标放上去时，变化的长度】
height:200px;【鼠标放上去时，变化的高度】
transform:rotate(360deg);【鼠标放上去时，旋转360度】
}
</style>
</head>
<body>
<div>鼠标移入时,我有变大且旋转360度的过渡效果。</div>
</body>
</html>
11.动画效果：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>动画</title>
<style type="text/css">
div{
width: 50px;
height: 50px;
background: blueviolet;
border: 1px solid black;
/*position: relative;*/
animation: myfirst 5s;
animation-iteration-count:infinite;
/*animation-fill-mode: forwards;*/
/*animation-fill-mode: backwards;*/
/*animation-fill-mode: both;*/
/*animation-iteration-count:infinite;*/
/*animation-direction: alternate;
}
百分数的进度条效果
@keyframes myfirst{
0%{
background-color: #ff0000;
width: 20px;
}
25%{
background-color: yellow;
width: 200px;
}
50%{
background-color: blue;
width: 400px;
}
75%{
background-color: greenyellow;
width: 600px;
}
100%{
background-color: gold;
width: 800px;
}
from to 的背景颜色改变效果
@keyframes myfirst
{
from {background: red;}
to {background: yellow;}
to {background: green;}
to {background: blue;}
}
百分数的背景颜色及位置改变效果
@keyframes myfirst 【
{
0% {background: red; left:0px; top:0px;}
25% {background: yellow; left:200px; top:0px;}
50% {background: blue; left:200px; top:200px;}
75% {background: green; left:0px; top:200px;}
100% {background: red; left:0px; top:0px;}
}
</style>
</head>
<body>
<div></div>
</body>
</html>
**导航**
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>导航</title>
<style type="text/css">
li{
list-style: none; 【设置列表样式为，无样式】
border: 0px solid red;
float: left;
line-height: 60px;【设置行高】
padding: 0 55px;
}
div{
width: 1136px;
height: 60px;
background-color: dimgrey;
margin: 0 auto;
}
ul{
margin: 0;
padding: 0;
}
a:hover{
color: red;
}
a{
color: white;
text-decoration: none;【设置文本装饰为，无样式】
}
</style>
</head>
<body>
<div>
<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>
<li><a href="">联系我们</a></li>
</ul>
</div>
</body>
</html>
BFC
块级格式化上下文，独立盒模型
1.独立渲染区域
2.不会影响这个区域外部，内部也不会受影响外部
3.需要出发声明，建议用voerflow：hidden【溢出，隐藏】
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
.main{
background-color: #696969;
width: 200px;
overflow: hidden;【溢出，隐藏】
}
.first{
width: 50px;
height: 50px;
background-color: #ff0000;
float: left;
}
.second{
width: 50px;
height: 50px;
background-color: #0000ff;
float: left;
}
</style>
</head>
<body>
<div class="main">
<div class="first"></div>
<div class="second"></div>
</div>
IFC
行内格式化上下文，垂直居中
inline【内联】，需要和宽高配合使用
不需要触发条件
PS：若处理不了，就直接换做BFC处理
以上是关于CSS3/BFC/IFC的主要内容，如果未能解决你的问题，请参考以下文章