浮动特性应用实例
应用实例—图文绕排
总结:浮动脱离文档流不脱离文本流
最初只用于在成块的文本内浮动图像为图片和文字之间的对齐方式是基线对齐 要想图文环绕 需要给图片设置浮动
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box{
width: 500px;
height: 500px;
border:1px solid #333
}
img{
float: left;
}
</style>
</head>
<body>
<div class="box">
< img src="./images/pic_4.jpg" alt="">
我是图片的介绍我是图片的介绍我是图片的介绍我是图片的介绍我是图片的介绍我是图片的介绍我是图片的介绍我是图片的介绍我是图片的介绍我是图介
</div>
</body>
</html>应用实例—两列自适应
实现要点:单列定宽,单列自适应
浮动实现
左边的盒子固定宽度,添加float:left
右边盒子宽度自适应, 添加margin-left:左盒子宽度。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box{
border: 1px solid #333;
}
.left{
width: 300px;
height: 300px;
background: red;
float: left;
}
.right{
height:350px ;
background: yellow;
margin-left: 300px;
}
</style>
</head>
<body>
<div class="box">
<div class="left"></div>
<div class="right"> 我是文本内容</div>
</div>
</body>
</html>二、CSS 精灵(雪碧图、精灵图)
学习目标
能够说出什么是CSS精灵
掌握CSS精灵在实际示案例中的应用
概述
css精灵英文叫法 css sprites,通常被解释为“CSS 图像拼合”或“CSS 贴图定位”;其实就 是把网页中一些背景图片整合到一张图片文件中,再利用 CSS “background-image”, “background- repeat”,“background-position”的组合进行背景定位,background-position 精确的定位出背景图片的位置
精灵图的原理
将页面中的背景图合并成一张图片
利用背景属性,使不同元素显示图片的不同部分
实现步骤:
(1)通常要限定容器大小
(2)图片拼合
(3)背景定位
2、css sprites的优缺点
优点:
1.减少网页的http请求,提高页面的性能
2.减少在图片上的命名困扰
3.更换网页风格方便
缺点:
1.必须要限定容器的大小
2.背景图位置需要计算
3、适用场景
适用于一般小图片(如小图标,小背景),不适合大背景大布局背景。
三、滑动门
概述:
为了使特殊形状的背景使能够自由拉伸滑动,以适应元素内部的文本内容,出现了CSS滑动门技术。 最常见于各种导航栏的滑动门
实例预览
https://weixin.qq.com/
实现要点
滑动门核心