小白博客 - CSS
type: channel
link: https://boke.liuxiaobai.top/index.php/category/CSS/
items: CSS（四） 精灵图和字体图标
items: CSS（三）定位 显示和隐藏
items: CSS（二）三大特性 盒模型和浮动
items: CSS（一）css选择器 和css样式

CSS（四） 精灵图和字体图标
type: item
date: 2021-09-04T21:24:00+08:00
description: 1. 精灵图（重点）1.1 为什么需要精灵图一个网页中往往会应用很多小的背景图像作为修饰，当网页中的图像过多时，服务器就会频繁地接收和发送请求图片，造成服务器请求压力过大，这将大大降低页面的加载速度。为什么使用精灵图（目的）：​ 为了有效地减少服务器接收和发送请求的次数，提高页面的加载速度，出现了 CSS 精灵技术（也称 CSS Sprites、CSS 雪碧）。核心原理：​ 将网页中的一些小背景图像整合到一张大图中 ，这样服务器只需要一次请求就可以了。精灵图举例:1.2 精灵图（sprites）的使用使用精灵图核心：精灵技术主要针对于背景图片使用。就是把多个小背景图片整合到一张大图片中。这个大图片也称为 sprites 精灵图 或者 雪碧图移动背景图片位置， 此时可以使用 background-position 。移动的距离就是这个目标图片的 x 和 y 坐标。注意网页中的坐标有所不同因为一般情况下都是往上往左移动，所以数值是负值。使用精灵图的时候需要精确测量，每个小背景图片的大小和位置。使用精灵图核心总结：精灵图主要针对于小的背景图片使用。主要借助于背景位置来实现---background-position 。一般情况下精灵图都是负值。（千万注意网页中的坐标： x轴右边走是正值，左边走是负值， y轴同理。）1.3 案例：拼出自己名字1.3.1 案例效果1.3.2 代码参考结构p i n k样式span { display: inline-block; background: url(images/abcd.jpg) no-repeat; } .p { width: 100px; height: 112px; /* background-color: pink; */ background-position: -493px -276px; } .i { width: 60px; height: 108px; /* background-color: pink; */ background-position: -327px -142px; } .n { width: 108px; height: 109px; /* background-color: pink; */ background-position: -215px -141px; } .k { width: 105px; height: 114px; /* background-color: pink; */ background-position: -495px -142px; }2. 字体图标2.1 字体图标的产生字体图标使用场景： 主要用于显示网页中通用、常用的一些小图标。精灵图是有诸多优点的，但是缺点很明显。1.图片文件还是比较大的。2.图片本身放大和缩小会失真。3.一旦图片制作完毕想要更换非常复杂。此时，有一种技术的出现很好的解决了以上问题，就是字体图标 iconfont。字体图标可以为前端工程师提供一种方便高效的图标使用方式，展示的是图标，本质属于字体。2.2 字体图标的优点轻量级：一个图标字体要比一系列的图像要小。一旦字体加载了，图标就会马上渲染出来，减少了服务器请求灵活性：本质其实是文字，可以很随意的改变颜色、产生阴影、透明效果、旋转等兼容性：几乎支持所有的浏览器，请放心使用注意： 字体图标不能替代精灵技术，只是对工作中图标部分技术的提升和优化。总结：1.如果遇到一些结构和样式比较简单的小图标，就用字体图标。2.如果遇到一些结构和样式复杂一点的小图片，就用精灵图。使用步骤字体图标是一些网页常见的小图标，我们直接网上下载即可。 因此使用可以分为：1.字体图标的下载 2.字体图标的引入 （引入到我们html页面中）3.字体图标的追加 （以后添加新的小图标）2.3 字体图标的下载推荐下载网站：icomoon 字库 http://icomoon.io 推荐指数 ★★★★★IcoMoon 成立于 2011 年，推出了第一个自定义图标字体生成器，它允许用户选择所需要的图标，使它们成一字型。该字库内容种类繁多，非常全面，唯一的遗憾是国外服务器，打开网速较慢。阿里 iconfont 字库 http://www.iconfont.cn/ 推荐指数 ★★★★★这个是阿里妈妈 M2UX 的一个 iconfont 字体图标字库，包含了淘宝图标库和阿里妈妈图标库。可以使用 AI制作图标上传生成。 重点是，免费！2.4 字体图标的引入下载完毕之后，注意原先的文件不要删，后面会用。把下载包里面的 fonts 文件夹放入页面根目录下字体文件格式不同浏览器所支持的字体格式是不一样的，字体图标之所以兼容，就是因为包含了主流浏览器支持的字体文件。1).TureType( .ttf )格式.t…

CSS（三）定位 显示和隐藏
type: item
date: 2021-09-04T20:50:00+08:00
description: 1. 定位(position) 介绍1.1 为什么使用定位我们先来看一个效果，同时思考一下用标准流或浮动能否实现类似的效果？场景1： 某个元素可以自由的在一个盒子内移动位置，并且压住其他盒子.场景2：当我们滚动窗口的时候，盒子是固定屏幕某个位置的。结论：要实现以上效果，标准流 或 浮动都无法快速实现所以：1.浮动可以让多个块级盒子一行没有缝隙排列显示， 经常用于横向排列盒子。2.定位则是可以让盒子自由的在某个盒子内移动位置或者固定屏幕中某个位置，并且可以压住其他盒子。1.2 定位组成定位：将盒子定在某一个位置，所以定位也是在摆放盒子， 按照定位的方式移动盒子定位也是用来布局的，它有两部分组成：定位 = 定位模式 + 边偏移定位模式 用于指定一个元素在文档中的定位方式。边偏移则决定了该元素的最终位置。1.2.1 边偏移（方位名词）边偏移 就是定位的盒子移动到最终位置。有 top、bottom、left 和 right 4 个属性。边偏移属性示例描述toptop: 80px顶端偏移量，定义元素相对于其父元素上边线的距离。bottombottom: 80px底部偏移量，定义元素相对于其父元素下边线的距离。leftleft: 80px左侧偏移量，定义元素相对于其父元素左边线的距离。rightright: 80px右侧偏移量，定义元素相对于其父元素右边线的距离定位的盒子有了边偏移才有价值。 一般情况下，凡是有定位地方必定有边偏移。1.2.2 定位模式 (position)在 CSS 中，通过 position 属性定义元素的定位模式，语法如下：选择器 { position: 属性值; }定位模式是有不同分类的，在不同情况下，我们用到不同的定位模式。定位模式决定元素的定位方式 ，它通过 CSS 的 position 属性来设置，其值可以分为四个：值语义static静态定位relative相对定位absolute绝对定位fixed固定定位1.3 定位模式介绍1.3.1. 静态定位(static) - 了解静态定位是元素的默认定位方式，无定位的意思。它相当于 border 里面的none，静态定位static，不要定位的时候用。语法：选择器 { position: static; }静态定位 按照标准流特性摆放位置，它没有边偏移。静态定位在布局时我们几乎不用的1.3.2. 相对定位(relative) - 重要相对定位是元素在移动位置的时候，是相对于它自己原来的位置来说的（自恋型）。语法：选择器 { position: relative; }相对定位的特点：（务必记住）1.它是相对于自己原来的位置来移动的（移动位置的时候参照点是自己原来的位置）。2.原来在标准流的位置继续占有，后面的盒子仍然以标准流的方式对待它。因此，相对定位并没有脱标。它最典型的应用是给绝对定位当爹的。。。效果图：1.3.3. 绝对定位(absolute) - 重要1.3.3.1 绝对定位的介绍绝对定位是元素在移动位置的时候，是相对于它祖先元素来说的（拼爹型）。语法： 选择器 { position: absolute; }完全脱标 —— 完全不占位置；父元素没有定位，则以浏览器为准定位（Document 文档）。父元素要有定位元素将依据最近的已经定位（绝对、固定或相对定位）的父元素（祖先）进行定位。绝对定位的特点总结：（务必记住）1.如果没有祖先元素或者祖先元素没有定位，则以浏览器为基准定位（Document 文档）。2.如果祖先元素有定位（相对、绝对、固定定位），则以最近一级的有定位祖先元素为参考点移动位置。3.绝对定位不再占有原先的位置。所以绝对定位是脱离标准流的。（脱标）1.3.3.2 定位口诀 —— 子绝父相弄清楚这个口诀，就明白了绝对定位和相对定位的使用场景。这个“子绝父相”太重要了，是我们学习定位的口诀，是定位中最常用的一种方式这句话的意思是：子级是绝对定位的话，父级要用相对定位。因为绝对定位的盒子是拼爹的，所以要和父级搭配一起来使用。①子级绝对定位，不会占有位置，可以放到父盒子里面的任何一个地方，不会影响其他的兄弟盒子。②父盒子需要加定位限制子盒子在父盒子内显示。③父盒子布局时，需要占有位置，因此父亲只能是相对定位。这就是子绝父相的由来，所以相对定位经常用来作为绝对定位的父级。总结： 因为父级需要占有位置，因此是相对定位， 子盒子不需要占有位置，则是绝对定位当然，子绝父相不是永远不变的，如果父元素不需要占有位置，子绝父绝也会遇到。疑问：为什么在布局时，子级元素使用绝对定位时，父级元素就要用相对定位呢？观察下图，思考一下在布局时，左右两个方向的箭头图片以及父级盒子的定位方式。分析：方向箭头叠加在其他图片上方，应该使用绝对定位，因为绝对定位完全脱标，完全不占位置。…

CSS（二）三大特性 盒模型和浮动
type: item
date: 2021-09-03T22:36:00+08:00
description: 一、css三大特性1、层叠性​ 相同选择器给设置相同的样式，此时一个样式就会覆盖（层叠）另一个冲突的样式。层叠性主要解决样式冲突的问题​ 层叠性原则:样式冲突，遵循的原则是就近原则，哪个样式离结构近，就执行哪个样式样式不冲突，不会层叠2、继承性​ CSS中的继承: 子标签会继承父标签的某些样式，如文本颜色和字号。恰当地使用继承可以简化代码，降低 CSS 样式的复杂性。子元素可以继承父元素的样式：​ （text-，font-，line-这些元素开头的可以继承，以及color属性）继承性口诀：龙生龙，凤生凤，老鼠生的孩子会打洞行高的继承性： body { font:12px/1.5 Microsoft YaHei； }行高可以跟单位也可以不跟单位如果子元素没有设置行高，则会继承父元素的行高为 1.5此时子元素的行高是：当前子元素的文字大小 * 1.5body 行高 1.5 这样写法最大的优势就是里面子元素可以根据自己文字大小自动调整行高3、优先级当同一个元素指定多个选择器，就会有优先级的产生。选择器相同，则执行层叠性选择器不同，则根据选择器权重执行选择器优先级计算表格：优先级注意点:权重是有4组数字组成,但是不会有进位。可以理解为类选择器永远大于元素选择器, id选择器永远大于类选择器,以此类推..等级判断从左向右，如果某一位数值相同，则判断下一位数值。可以简单记忆法: 通配符和继承权重为0, 标签选择器为1,类(伪类)选择器为 10, id选择器 100, 行内样式表为 1000, !important 无穷大.继承的权重是0， 如果该元素没有直接选中，不管父元素权重多高，子元素得到的权重都是 0。权重叠加：如果是复合选择器，则会有权重叠加，需要计算权重。div ul li ------> 0,0,0,3.nav ul li ------> 0,0,1,2a:hover -----—> 0,0,1,1.nav a ------> 0,0,1,1二、盒子模型1、网页布局的本质网页布局的核心本质： 就是利用 CSS 摆盒子。网页布局过程：先准备好相关的网页元素，网页元素基本都是盒子 Box 。利用 CSS 设置好盒子样式，然后摆放到相应位置。往盒子里面装内容2、盒子模型（Box Model）组成​ 盒子模型：把 HTML 页面中的布局元素看作是一个矩形的盒子，也就是一个盛装内容的容器。​ CSS 盒子模型本质上是一个盒子，封装周围的 HTML 元素，它包括：边框、外边距、内边距、和 实际内容3、边框（border）3.1、边框的使用1、border可以设置元素的边框。边框有三部分组成：边框宽度(粗细) 边框样式 边框颜色；2、语法： border : border-width || border-style || border-color; 边框样式 border-style 可以设置如下值：none：没有边框即忽略所有边框的宽度（默认值）solid：边框为单实线(最为常用的)dashed：边框为虚线dotted：边框为点线3、边框的合写分写边框简写： border: 1px solid red; 边框分开写法： border-top: 1px solid red; /* 只设定上边框， 其余同理 */ 3.2、表格的细线边框1、border-collapse 属性控制浏览器绘制表格边框的方式。它控制相邻单元格的边框。2、语法： border-collapse:collapse; collapse 单词是合并的意思border-collapse: collapse; 表示相邻边框合并在一起3.3、边框会影响盒子实际大小边框会额外增加盒子的实际大小。因此我们有两种方案解决：测量盒子大小的时候,不量边框。如果测量的时候包含了边框,则需要 width/height 减去边框宽度4、内边距（padding）4.1、内边距的使用方式1、padding 属性用于设置内边距，即边框与内容之间的距离。2、语法：合写属性：分写属性：4.2、内边距会影响盒子实际大小1、当我们给盒子指定 padding 值之后，发生了 2 件事情：内容和边框有了距离，添加了内边距。padding影响了盒子实际大小。2、内边距对盒子大小的影响：如果盒子已经有了宽度和高度，此时再指定内边框，会撑大盒子。如何盒子本身没有指定width/height属性, 则此时padding不会撑开盒子大小。3、解决方案：​ 如果保证盒子跟效果图大小保持一致，则让 width/height 减去多出来的内边距大小即可。5、外边距（margin）5.1、外边距的使用方式margin 属性用于设置外边距，即控制盒子和盒子之间的距离。5.2、外边距典型应用外边距可以让块级盒子水平居中的两个条件：盒…

CSS（一）css选择器 和css样式
type: item
date: 2021-09-02T22:02:00+08:00
description: css简介CSS 是层叠样式表 ( Cascading Style Sheets ) 的简称. 有时我们也会称之为 CSS 样式表或级联样式表。 CSS 是也是一种标记语言 CSS 主要用于设置 HTML 页面中的文本内容（字体、大小、对齐方式等）、图片的外形（宽高、边框样式、边距等）以及版面的布局和外观显示样式。 CSS 让我们的网页更加丰富多彩，布局更加灵活自如。简单理解：CSS 可以美化 HTML , 让 HTML 更漂亮， 让页面布局更简单。 CSS 最大价值: 由 HTML 专注去做结构呈现，样式交给 CSS，即 结构 ( HTML ) 与样式( CSS ) 相分离css语法规范1.使用 HTML 时，需要遵从一定的规范，CSS 也是如此。要想熟练地使用 CSS 对网页进行修饰，首先需要了解CSS 样式规则。2.CSS 规则由两个主要的部分构成：选择器以及一条或多条声明。1.选择器是用于指定 CSS 样式的 HTML 标签，花括号内是对该对象设置的具体样式 2.属性和属性值以“键值对”的形式出现 3.属性是对指定的对象设置的样式属性，例如字体大小、文本颜色等 4.属性和属性值之间用英文“:”分开 5.多个“键值对”之间用英文“;”进行区分 例如： 所有的样式，都包含在 css代码风格： 1. 样式格式书写 1.紧凑格式 h3 { color: deeppink;font-size: 20px;} 2.展开格式 h3 { color: pink; font-size: 20px; } 强烈推荐第二种格式， 因为更直观。 2. 样式大小写风格 1.小写格式 h3 { color: pink; } 2.大写格式 H3 { COLOR: PINK; } 强烈推荐样式选择器，属性名，属性值关键字全部使用小写字母，特殊情况除外。 3. 样式空格风格 1. h3 { color: pink; }属性值前面，冒号后面，保留一个空格 选择器（标签）和大括号中间保留空格css选择器的作用答：选择器(选择符)就是根据不同需求把不同的标签选出来这就是选择器的作用。 简单来说，就是选择标签用的。找到所有的 h1 标签。 选择器（选对人）设置这些标签的样式，比如颜色为红色（做对事）。css基础选择器基础选择器又包括：标签选择器、类选择器、id 选择器和通配符选择器标签选择器：标签选择器（元素选择器）是指用 HTML 标签名称作为选择器，按标签名称分类，为页面中某一类标签指定统一的 CSS 样式。语法：标签选择器{ 属性：属性值 ... }作用： 标签选择器（元素选择器）是指用 HTML 标签名称作为选择器，按标签名称分类，为页面中某一类标签指定统一的 CSS 样式。类选择器如果想要差异化选择不同的标签，单独选一个或者某几个标签，可以使用类选择器.语法：.类名 { 属性1: 属性值1; ... } 结构需要用class属性来调用 class 类的意思 变红色 1.如果想要差异化选择不同的标签，单独选一个或者某几个标签，可以使用类选择器。2.类选择器在 HTML 中以 class 属性表示，在 CSS 中，类选择器以一个点“.”号显示。3.类选择器使用“.”（英文点号）进行标识，后面紧跟类名（自定义，我们自己命名的）。4.可以理解为给这个标签起了一个名字，来表示。5.长名称或词组可以使用中横线来为选择器命名。6.不要使用纯数字、中文等命名，尽量使用英文字母来表示。7.命名要有意义，尽量使别人一眼就知道这个类名的目的。8.命名规范：见附件（ Web 前端开发规范手册.doc）多类名选择器我们可以给一个标签指定多个类名，从而达到更多的选择目的。 这些类名都可以选出这个标签.简单理解就是一个标签有多个名字. 多类名的具体使用：亚瑟注意： 1.在标签class 属性中写 多个类名 2.多个类名中间必须用空格分开 3.这个标签就可以分别具有这些类名的样式id选择器：id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式。HTML 元素以 id 属性来设置 id 选择器，CSS 中 id 选择器以“#" 来定义。 语法： #id名 { 属性1: 属性值1; ... } 注意：id 属性只能在每个 HTML 文档中出现一次id选择器和类选择器的区别：1.类选择器（class）好比人的名字，一个人可以有多个名字，同时一个名字也可以被多个人使用。 2.id 选择器好比人的身份证号码，全中国是唯一的，不得重复。 3.id 选择器和类选择器最大的不同在于使用次数上。 4.类选择器在修改样式中用的最多，id 选择器一般用于页面唯一性的元素上，经常和 JavaScript 搭配使用。通配符选择器： 语法： * { 属性1: 属性值1; ... }通配符选择器不需…