浮动
什么是浮动?
标签的浮动是指设置了浮动属性的标签会脱离标准流的控制,移动到其父标签的指定位置
浮动属性
-
float
-
-
left
-
right
-
none 默认
-
浮动的作用
-
图文环绕:注意:图片和文字不会到浮动标签的下方
-
页面布局
浮动的宽度
-
浮动的宽度就是内容的宽度
浮动的问题
标签浮动以后,脱离的正常文档流,导致父标签无法被撑开,会影响后续正常布局
清浮动的几种方法
-
给浮动标签的父标签固定高度(不够灵活)
-
给父标签加overflow属性,overflow为visible以外的其他值时可以帮助实现
-
在浮动标签的最后加一个div(块标签),标签本身不符动,且添加样式 clear:both;(代码冗余)
-
推荐方法:给浮动标签的父标签添加 .clearfix
-
-
.clearfix {
-
*zoom:1; //这是针对于IE6/7的
-
}
-
.clearfix:after {
-
content:"";
-
clear:both;
-
display:block;
-
}
-
伪元素
/* 单冒号的兼容性比双冒号好 */
/* :before 在当前元素的第一个子元素的前面添加一个伪元素 */
.wrap:before {
content: '111';
display: block;
width: 100px;
height: 100px;
background-color: #009;
}
/* :after 在当前元素的最后一个子元素的后面添加一个伪元素 */
.wrap:after {
content: '';
display: block;
width: 100px;
height: 100px;
background-color: pink;
}
CSS滑动门技术
-
滑动门核心技术就是利用 CSS 精灵(主要是背景位置)和盒子 padding 撑开宽度 , 以便能适应不同字数的导 航栏。
-
先给一个 a 标签,用来装背景图的左边圆角,a 不给宽度,由文字撑开宽度,再在 a 里面加一个 span 盒子, span 盒子还是用之前的背景图的,但是是装背景图 的右边圆角,字写在 span 里面的,span 又是属于 a 的, 里面装上字就会把它的宽度撑开。
<style>
* {
margin: 0;
padding: 0;
text-decoration: none;
}
li {
list-style: none;
float: left;
margin-top: 20px;
margin-left: 10px;
}
.clearfix:after {
content: '';
display: block;
clear: both;
}
a {
display: block;
height: 33px;
background-image: url(../课堂案例/images/wx02.png);
line-height: 33px;
color: white;
padding-left: 15px;
}
span {
display: block;
height: 33px;
line-height: 33px;
background-image: url(../课堂案例/images/wx02.png);
background-position: right;
padding-right: 15px;
}
.wrap {
height: 500px;
background-image: url(../课堂案例/images/wx01.jpg);
}
li:hover a {
background-image: url(../课堂案例/images/wx03.png);
}
li:hover span {
background-image: url(../课堂案例/images/wx03.png);
}
</style>
</head>
<body>
<div class="wrap">
<ul class="clearfix">
<li><a href="#">
<span>首页</span>
</a></li>
<li><a href="#">
<span>帮助与反馈</span>
</a></li>
<li><a href="#">
<span>公众平台</span>
</a></li>
<li><a href="#">
<span>表情开放平台</span>
</a></li>
<li><a href="#">
<span>表情开放平台表情开放平台</span>
</a></li>
</ul>
</div>
CSS精灵
-
什么是 CSS 精灵
-
英文叫法 CSS sprites,通常被解释为“CSS 图像拼合”或“CSS 贴图定位“
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.box {
width: 50px;
height: 50px;
background-image: url(./images/jingling.jpg);
}
.box1 {
background-position: -150px 0;
}
.box2 {
background-position: -200px -50px;
}
</style>
</head>
<body>
</body>
</html>
-
CSS 精灵优缺点
-
优点:
-
-
减少网页的 http 请求,从而大大的提高页面的性能;
图片命名上的困扰;
更换风格方便。
-
-
缺点:
-
-
必须要限定容器大小符合背景图元素位置,需要计算
-