浮动特性.前端

最新推荐文章于 2023-04-03 23:09:07 发布

李冬雨.

最新推荐文章于 2023-04-03 23:09:07 发布

阅读量67

点赞数

文章标签：前端

本文链接：https://blog.csdn.net/weixin_73304720/article/details/127041314

版权

浮动特性应用实例

应用实例—图文绕排

总结：浮动脱离文档流不脱离文本流

最初只用于在成块的文本内浮动图像为图片和文字之间的对齐方式是基线对齐要想图文环绕需要给图片设置浮动

<!DOCTYPE html>

<head>

<title>Document</title>

<style>

.box{

width: 500px;

height: 500px;

border:1px solid #333

}

img{

float: left;

}

</style>

</head>

<body>

< img src="./images/pic_4.jpg" alt="">

我是图片的介绍我是图片的介绍我是图片的介绍我是图片的介绍我是图片的介绍我是图片的介绍我是图片的介绍我是图片的介绍我是图片的介绍我是图介

</div>

</body>

</html>应用实例—两列自适应

实现要点：单列定宽，单列自适应

浮动实现

左边的盒子固定宽度，添加float:left

右边盒子宽度自适应, 添加margin-left:左盒子宽度。

<!DOCTYPE html>

<head>

<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="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/

实现要点

滑动门核心

李冬雨.

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
浮动特性.前端

浮动特性应用实例应用实例—图文绕排总结：浮动脱离文档流不脱离文本流最初只用于在成块的文本内浮动图像为图片和文字之间的对齐方式是基线对齐要想图文环绕需要给图片设置浮动<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge">
复制链接

扫一扫