一、清浮动的方法

清除浮动的方法1.给浮动元素的父级盒子设置一个固定的高度优缺点：不够灵活，适用于高度固定的布局中
2.为浮动元素的父级盒子设置浮动优缺点：会产生新的浮动问题
3.为浮动元素的父盒子添加overflow属性；overflow的属性值可以为hidden,scroll,auto优缺点：可能会隐藏内容或触发不需要的滚动条；代码简洁
4.在浮动元素之后，与浮动元素呈并列关系的位置，加一个不浮动块元素（空的div标签（div本身不浮动，没有尺寸）），在空的div标签上加上属性：clear：both;优缺点：代码冗余，通俗易懂，书写方便
clear: left; 清除左侧浮动带来的影响clear: right;清除右侧浮动带来的影响clear: both;清除两侧浮动带来的影响
5.推荐方式：用伪元素清除浮动，给浮动元素的父级盒加类名.clearfix，并在.clearfix中添加样式：.clearfix::after{content:'';display:block;clear:both;}优缺点：不会再结构上产生冗余代码，可以重复使用，结构语义化正确

1）什么是伪元素

用css语言创造出来的标签

伪元素创造的标签是行级标签

2）如何创建伪元素

element::before{ content:"伪元素的文本内容"; 属性名: 属性值; } element元素内部，内容之前，添加“伪元素的文本内容”
element::after{ content:"伪元素的文本内容"; 属性名: 属性值; } element元素内部，内容之后，添加“伪元素

浮动特性应用实例

应用实例—图文绕排

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

<!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.通过引入背景图片，用背景定位实现

2、css sprites的优缺点

优点：

1.减少网页的http请求，提高页面的性能

2.减少在图片上的命名困扰

3.更换网页风格方便

缺点：

1.必须要限定容器的大小

2.背景图位置需要计算

3、适用场景

适用于一般小图片（如小图标，小背景），不适合大背景大布局背景。

三、滑动门

概述：

css精灵图可以实现特殊形状的背景自由拉伸滑动，能适应不同字数的内容

实例预览

微信，是一个生活方式

实现要点

滑动门核心技术就是利用背景属性（主要是背景位置）和盒子padding撑开宽度, 以便能适应不同字数的导航栏。

滑动门实现：a  spana用来撑开左边的小括号span用来撑开右边的小括号给a设置padding-left: 让文字距离左边有点距离，美观给span设置padding-right 让文字距离右边有点距离，美观
实际文字写在span里面，span的宽度由文字和内边距撑开a的宽度是由span撑开了

<!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>* {margin: 0;padding: 0;list-style: none;}
a {text-decoration: none;color: #fff;}
.wrap {height: 74px;background: url(../img/css滑动.jpg) repeat-x;}
.wrap ul {height: 74px;line-height: 74px;
padding-left: 200px;box-sizing: border-box;}
.wrap ul li {float: left;margin-right: 20px;}
/* a用来撑开左边的小括号 */.wrap ul li a {height: 33px;line-height: 33px;display: inline-block;
background: url(../img/hua.png) no-repeat 0% 0%;
padding-left: 15px;}
/* span用来撑开右边的小括号 */
.wrap ul li span {height: 33px;line-height: 33px;display: inline-block;
background: url(../img/hua.png) no-repeat 100% 100%;padding-right: 15px;}
.wrap ul li:hover a {/* background: url(../img/hua.png) no-repeat 0% 0%; */}
.wrap ul li:hover span {/* background: url(../img/hua.png) no-repeat 100% 100%; */}</style>
</head>

<body><div class="wrap"><ul><!-- 实际文字写在span里面，span的宽度由文字和内边距撑开a的宽度是由span撑开了 --><li><!-- a用来撑开左边的小括号 --><a href="#"><!--    span用来撑开右边的小括号 --><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>

</body>

</html>

四、CSS 定位

定位的作用

普通文档流中块元素垂直排列，行内元素水平排列。定位能够让我们把一个元素从它原本在正常布局流中应该在的位置移动到另一个位置（自由的在某个盒子内移动位置或者固定在屏幕中的某个位置）

定位的实现

使用定位需要指定一个元素在文档中的定位模式，配合设置【边偏移量】决定元素最终的显示及位置

定位模式通过position属性来设置，以下为常用四种定位模式静态定位，相对定位，绝对定位，固定定位

边偏移定位元素的位置，使用“top”、“right”、“bottom”和“left”来描述。通常水平位置通过left或right控制，垂直位置通过ttop或bottom控制

位置属性

left：设置元素距离参照元素的左侧位移，正值往右，负值往左 right：设置元素距离参照元素的右侧位移，正值往左，负值往右 top：设置元素距离参照元素的顶部的位移，正值往下，负值往上 bottom：设置元素距离参照元素的底部位移，正值往上，负值往下

    top: 50px;/* 元素距离参照元素的顶部的位移，正值往下，负值往上 */left: 100px;/* 元素距离参照元素的左侧位移，正值往右，负值往左 *//* bottom: 50px; *//* 元素距离参照元素的底部位移，正值往上，负值往下 *//* right: 50px; *//* 元素距离参照元素的右侧位移，正值往左，负值往右 */

取值
- 长度值：px
- 百分比：是以父元素为参考
- 允许使用负值

定位模式详解

1、position:relative相对对定位

相对定位相对于元素本身的位置进行一个位置调整，占位依然在原来的位置，也就是说，元素设置相对定位后，其原来的位置还占位

特性

    特性：1.不影响元素本身的特性2.不会使元素脱离正常文档流，也就是还占位3.如果没有定位偏移属性，对元素本身没有任何影响；如果有定位偏移属性，则相对于元素原来的位置发生偏移4.提高层级
应用场景 ：1.微调自己的位置2. 作为绝对定位的参照物

2、position:absolute绝对定位

没有定位父级时相对于html进行定位，有定位父级时相对于最近的定位父级进行定位

特性

特性：1.元素脱离正常文档流，不占位(也脱离文本流，全脱)2.有定位父级相对于定位父级发生定位偏移3.如果没有定位父级相对于浏览器窗口发生定位偏移（如果其父亲没有相对定位，会一直往上找，直到相对于html）4.能使不能设置宽高的行级元素设置宽高5.提升层级6.如果没有定位偏移属性，对元素本身有影响；如果有定位偏移属性，则相对于父元素发生偏移

应用场景：

通常配合绝对定位使用（子绝父相）结合实际案例，如焦点图中的分页，翻页，视频网站中的 vip标签等

浮动精灵图 css定位相关推荐

html背景图不显示_批量显示多张有序排列的图标，使用精灵图CSS Sprites这种办法...
让你显示一个天气图标你会怎么显示呢?让你做一个简单的动图你会怎么采用什么方式呢?让你输出一个长期固定的图标列表你会怎么编写代码呢? 如果不管性能,不用css,不用js,可能你会这么写html: < ...
如何在基于vue-cli的项目中，使用精灵图 css sprite
新钛云服已为您服务1236天 CSS Sprites通常被称为css精灵图,在国内也被意译为css图片整合和css贴图定位,也有人称他为雪碧图. 就是将多张比较小的图片有规则的合并成一张背景图,然后再 ...
点击箭头切图 html,项目切图规范 css精灵图 css小箭头代码 BFC (Block Formatting Context) 块级格式化上下文...
项目切图规范 PS常用工具移动工具移动工具主要负责图层.选区.等的移动.复制操作. 快捷键:v 抓手工具快捷键:h 空格 + 鼠标左键拖动,空格键可临时转换为抓手工具. 放大镜工具放大镜工具可 ...
移动端二倍精灵图，定位不准的处理做法
1在firework里面把精灵图等比例缩放为原来的一半 2之后再根据大小测量坐标 3css里面background-size写成精灵图大小的一半,宽度一半高度auto 注意,缩放后不要保存!
html css背景图片精灵技术,HTML入门学习笔记--CSS背景和精灵图(5)
33-背景色彩 1.如何设置标签的背景色彩? 在CSS中有1个background-color:属性, 就是专门用来设置标签的背景色彩的取值: 具体单词 rgb rgba 106进制快捷键: bc ...
精灵图、favicon图标
精灵图 CSS Sprites 也称之为精灵图或雪碧图,是一种背景图片的应用处理方式,将很多小图片合并到到一张大图中去.把整个大图作为背景图,然后通过 background-position 属性将合 ...
什么是精灵图,精灵图的优点
1 什么是精灵图 CSS Sprites,翻译为精灵图或者雪碧图. 所谓精灵图就是把好多小的图片合并一张大图, 以该大图为背景图片的元素尺寸比较小,可以通过控制背景图片的位置,让元素上显示合适的图像. ...
认真学习前端第二周学习笔记（浮动，定位，精灵图，布局）
文章目录前言一.关于浮动二.关于定位三.关于精灵图四.关于布局总结前言提示:这是我在专业培训机构学习的第二周,感觉学习进度好像有一点点慢,不过也还好,能让我们更好的消化消化,今天也是先 ...
css sprites精灵图、css图片整合、css贴图定位案例教程
一. 什么是css sprites CSS Sprites通常被称为css精灵图,在国内也被意译为css图片整合和css贴图定位,也有人称他为雪碧图.就是将导航的背景图,按钮的背景图等有规则的合并成一 ...

浮动精灵图 css定位

一、清浮动的方法

浮动特性应用实例

应用实例—图文绕排

应用实例—两列自适应

二、CSS 精灵（雪碧图、精灵图）

概述

精灵图的原理

实现步骤：

2、css sprites的优缺点

3、适用场景

三、滑动门

概述：

实例预览

实现要点

四、CSS 定位

定位的作用

定位的实现

定位模式详解

1、position:relative相对对定位

2、position:absolute绝对定位

浮动精灵图 css定位相关推荐

最新文章

热门文章

浮动 精灵图 css定位

一、清浮动的方法

浮动特性应用实例

应用实例—图文绕排

应用实例—两列自适应

二、CSS 精灵（雪碧图、精灵图）

概述

精灵图的原理

实现步骤：

2、css sprites的优缺点

3、适用场景

三、滑动门

概述：

实例预览

实现要点

四、CSS 定位

定位的作用

定位的实现

定位模式详解

1、position:relative相对对定位

2、position:absolute绝对定位

浮动 精灵图 css定位相关推荐

最新文章

热门文章

浮动精灵图 css定位

浮动精灵图 css定位相关推荐