Ecool

background

引言在日常前端开发中，经常需要进行背景或背景图的处理。但是大多数前端er并未真正清楚背景的正确使用方式。经过本章的学习，相信你一定可以解决99%的背景处理问题。一：简单使用背景颜色和背景图片是可以共同出现的 div { width: 300px; height: 300px; background-color: red; background-image: url(./imgs/1.jpg); background-repeat: no-repeat; } 页面展示一：background-repeat background-repeat决定背景图片的平铺方式属性值 background-repeat:repeat (默认值) background-repeat:no-repeat (不平铺) background-repeat:repeat-x （水平方向平铺） background-repeat:repeat-y （垂直方向平铺） 1. repeat 默认情况下，如果背景图片不能铺满整个盒子时，系统会在水平和垂直方向同时平铺直到覆盖整个盒子 div { width: 300px; height: 300px; background-color: red; background-image: url(./imgs/1.jpg); background-repeat: repeat; } 2.repeat-x 如果背景图片不能将盒子的水平方向铺满，则在水平方向采取平铺处理直到铺满盒子的水平方向。 div { width: 300px; height: 300px; background-color: red; background-image: url(./imgs/1.jpg); background-repeat: repeat-x; } 3.repeat-y 如果背景图片不能将盒子的垂直方向铺满，则在垂直方向采取平铺处理直到铺满盒子的垂直方向。 div { width: 300px; height: 300px; background-color: red; background-image: url(./imgs/1.jpg); background-repeat: repeat-y; } 二：background-position background-positiont决定背景图片在盒子区域的定位位置。其方位由水平和垂直决定 1.px设置 px决定了背景图片在盒子水平和垂直方向偏移指定px的距离。 div { width: 300px; height: 300px; background-color: red; background-image: url(./imgs/1.jpg); background-repeat: no-repeat; background-position: 100px 100px; } ...

font

什么是 font 属性？在CSS中， font 属性是一个简写属性，用于设置字体的多个相关属性，包括字体大小、字体样式、字体粗细、字体系列等。使用 font 属性可以方便地在一个声明中设置多个字体相关的样式。 font 属性的语法 font: [font-style] [font-variant] [font-weight] [font-size] [line-height] [font-family]; 各个属性的详细说明 font-style：设置字体的样式。取值： normal：正常字体（默认值）。 italic：斜体字。 oblique：倾斜字体。 font-variant：设置字体的变体。取值： normal：正常（默认值）。 small-caps：小型大写字母。 font-weight：设置字体的粗细。取值： normal：正常粗细（默认值）。 bold：加粗。 bolder：比父元素更粗。 lighter：比父元素更细。数值：可以使用 100 到 900 的数值，100 为最细，900 为最粗。 font-size：设置字体的大小。取值：可以使用绝对单位（如 px、 pt）或相对单位（如 em、 rem、 %）。 line-height：设置行高。取值：可以使用数值、单位（如 px、 em）或百分比。 font-family：设置字体系列。取值：可以指定多个字体名称，以逗号分隔，浏览器将使用第一个可用的字体。例如： "Arial", "Helvetica", sans-serif。使用 font 属性的注意事项 font 属性必须按照特定的顺序书写，尤其是 font-size 和 font-family，它们是必需的。如果使用 font 属性，其他相关的字体属性（如 font-size 和 font-family）不能单独设置。实例：使用 font 属性设置文本样式 HTML 代码 <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Font 属性示例</title> <link rel="stylesheet" href="styles.css"> </head> <body> <h1 class="title">欢迎来到我的网站</h1> <p class="description">这是一个关于CSS字体属性的示例，展示如何使用font属性设置文本样式。</p> </body> </html> CSS 代码（styles.css） body { font-family: Arial, sans-serif; /* 设置全局字体 */ } .title { font: bold 24px/1.5 "Helvetica Neue", Arial, sans-serif; /* 设置标题字体样式 */ color: #333; /* 字体颜色 */ } .description { font: italic normal 16px/1.8 "Georgia", serif; /* 设置描述文本字体样式 */ color: #666; /* 字体颜色 */ } 解释 HTML结构：我们创建了一个包含标题和描述的简单网页。 CSS样式：在 .title 类中，使用 font 属性设置了字体为加粗、24px大、行高为1.5、字体系列为 "Helvetica Neue"，后备字体为 Arial 和无衬线字体。在 .description 类中，使用 font 属性设置了字体为斜体、正常粗细、16px大、行高为1.8、字体系列为 "Georgia"，后备字体为衬线字体。结果通过以上代码，浏览器将展示一个标题和描述文本，标题为加粗大字体，描述为斜体较小字体。这样可以清晰地展示不同文本的样式和视觉层次感。 ...

优先级

在前端面试中，经常会遇到CSS选择器的问题三连：说一下CSS的选择器有哪些优先级是怎样的权重计算方式今天就来给大家介绍选择器的优先级和权重计算方式。优先级是什么？有什么用？先提出一个问题：如果一个元素通过多种方式设置了字体大小，那么浏览器在最后渲染时会使用哪个属性值呢？其实，浏览器会通过优先级来判断哪些属性值与一个元素最为相关，从而在该元素上应用这些属性值。优先级是基于不同种类选择器组成的匹配规则。换种说法，优先级就是分配给指定的 CSS 声明的一个权重，它由匹配的选择器中的每一种选择器类型的数值决定。总结一下：权重决定了你css规则怎样被浏览器解析直到生效，css权重关系到你的css规则是怎样显示的。当很多的样式被应用到某一个元素上时，权重决定哪种样式生效。每个选择器都有自己的权重。你的每条css规则，都包含一个权重级别。这个级别是由不同的选择器加权计算的，通过权重，不同的样式最终会作用到你的网页中。如果两个选择器同时作用到一个元素上，权重高者生效。权重的计算规则接着介绍权重的计算规则：第一优先级：!important会覆盖页面内任何位置的元素样式内联样式，如style="color: green"，权值为1000 ID选择器，如#app，权值为0100 类、伪类、属性选择器，如.foo, :first-child, div[class="foo"]，权值为0010 标签、伪元素选择器，如div::first-line，权值为0001 通配符、子类选择器、兄弟选择器，如*, >, +，权值为0000 继承的样式没有权值权值计算公式：权值 = 第一等级选择器 x 个数，第二等级选择器 x 个数，第三等级选择器 x 个数，第四等级选择器 x 个数比如：选择器千位百位十位个位优先级 h1 0 0 0 1 0001 h1 + p::first-letter 0 0 0 3 0003 li > a[href*=“en-US”] > .inline-warning 0 0 2 2 0022 #identifier 0 1 0 0 0100 内联样式 1 0 0 0 1000 权重的比较规则当两个权值进行比较的时候，是从高到低逐级将等级位上的权重值（如权值 1,0,0,0 对应–> 第一等级权重值，第二等级权重值，第三等级权重值，第四等级权重值）来进行比较的，而不是简单的 1000个数 + 100个数 + 10个数 + 1个数的总和来进行比较的，换句话说，低等级的选择器，个数再多也不会越等级超过高等级的选择器的优先级的。 ...

Web Storage

一、简介浏览器本地存储是指浏览器提供的一种机制，允许 Web 应用程序在浏览器端存储数据，以便在用户下次访问时可以快速获取和使用这些数据。一共两种存储方式：localStorage 和 sessionStorage。下面介绍下两种缓存的特性和在内部平台的一些应用。二、localStorage 和 sessionStorage 2.1、区别 localStorage 和 sessionStorage 的主要区别是生命周期，具体区别如下： localStorage sessionStorage 生命周期持久化存储：除非自行删除或清除缓存，否则一直存在会话级别的存储：浏览器标签页或窗口关闭作用域相同浏览器，同域名，不同标签，不同窗口相同浏览器，同域名，同源窗口获取方式 window.localStorage window.sessionStorage 存储容量 5M 5M 容量限制的目的是防止滥用本地存储空间，导致用户浏览器变慢。 2.2、浏览器兼容性 1）现在的浏览器基本上都是支持这两种 Storage 特性的。各浏览器支持版本如下： Chrome Firefox IE Opera Safari Android Opera Mobile Safari Mobile localStorage 4 3.5 8 10.5 4 2.1 11 iOS 3.2 sessionStorage 5 2 8 10.5 4 2.1 11 iOS 3.2 2）如果使用的是老式浏览器，比如Internet Explorer 6、7 或者其他，就需要在使用前检测浏览器是否支持本地存储或者是否被禁用。以 localStorage 为例： ...

Canvas 和 SVG

1.Canvas Canvas 是 HTML5 中新增的一个元素，它提供了一种通过 JavaScript 来绘制图形的方式，使用笔刷绘制2D图案。通过 Canvas，我们可以在网页中动态地绘制出各种图形、图表、动画等内容，实现更丰富的交互效果。工作方式 Canvas 的工作方式是，我们首先在 HTML 页面中添加一个 <canvas> 元素，并指定其宽度和高度，然后在 JavaScript 中获取该元素的上下文对象，并通过调用它的方法来绘制图形。Canvas 的上下文对象有多种，包括 2D 上下文、WebGL 上下文等，我们可以根据需求选择相应的上下文对象来进行绘制。常用属性属性效果 fillStyle 填充颜色。默认为黑色 strokeStyle 描边颜色。默认为黑色 lineWidth 线条宽度。默认为 1 像素 lineCap 线条末端的样式,可选值有 butt、round 和 square。默认为 butt lineJoin 线条相交处的样式,可选值有 miter、round 和 bevel。默认为 miter。 miterLimit 线条相交处的最大斜接长度。默认为 10 像素 globalAlpha 绘制的透明度。默认为 1（不透明） shadowColor 阴影颜色。默认为黑色 shadowOffsetX、shadowOffsetY 阴影的偏移量和模糊程度 shadowBlur 模糊程度优缺点优点基于矢量绘制，图形可以自由缩放而不失真具有良好的跨浏览器兼容性通过 JavaScript 动态生成图形，可以更加灵活地控制图形的显示和交互缺点无法处理复杂的交互事件、不支持跨域图像等使用实例这个实例中，我们使用了一个 HTML5 的 Canvas 元素，它的宽度和高度分别为 200 像素。在 JavaScript 中，我们获取了这个元素，并通过 getContext 方法获取了它的上下文对象。然后，我们使用 fillStyle 属性设置了矩形的填充颜色为红色，并使用 fillRect 方法绘制了一个起点坐标为 (50,50)，宽度为 100 像素，高度为 100 像素的矩形。 ...

响应式设计

引言响应式布局指的是同一页面在不同屏幕尺寸下有不同的布局。传统的开发方式是PC端开发一套，手机端再开发一套，而使用响应式布局只要开发一套就够，缺点就是CSS比较重。下面是博客网站对不同设备适配后的结果，分别是iPhone5/SE,iphone6/7/8,iphone 6/7/8 plus,ipad pro,dell台式宽屏(1440 X 900)。响应式设计与自适应设计的区别：响应式开发一套界面，通过检测视口分辨率，针对不同客户端在客户端做代码处理，来展现不同的布局和内容；自适应需要开发多套界面，通过检测视口分辨率，来判断当前访问的设备是pc端、平板、手机，从而请求服务层，返回不同的页面。响应式布局的实现方案 1. 媒体查询 CSS3媒体查询可以让我们针对不同的媒体类型定义不同的样式，当重置浏览器窗口大小的过程中，页面也会根据浏览器的宽度和高度重新渲染页面。如何选择屏幕大小分割点如何确定媒体查询的分割点也是一个开发中会遇到的问题，下面是市场上的移动设备和电脑屏幕分辨率的分布情况，可以发现不同品牌和型号的设备屏幕分辨率一般都不一样如果我们选择600px,900px,1200px,1800px作为分割点，可以适配到常见的14个机型：当然这只是其中的一种分割方案，我们还可以这样划分：480px,800px,1400px,1400px 而作为曾经典型的响应式布局框架，Bootstrap是怎么进行断点的呢？上面的分割方案不一定满足项目中的实际需求，我们可以先用跨度大的分割点进行分割，如果出现不适配的情况可以再根据实际情况增加新的分割点。移动优先 OR PC优先不管是移动优先还是PC优先，都是依据当随着屏幕宽度增大或减小的时候，后面的样式会覆盖前面的样式。因此，移动端优先首先使用的是min-width，PC端优先使用的max-width。移动优先: /* iphone6 7 8 */ body { background-color: yellow; } /* iphone 5 */ @media screen and (max-width: 320px) { body { background-color: red; } } /* iphoneX */ @media screen and (min-width: 375px) and (-webkit-device-pixel-ratio: 3) { body { background-color: #0FF000; } } /* iphone6 7 8 plus */ @media screen and (min-width: 414px) { body { background-color: blue; } } /* ipad */ @media screen and (min-width: 768px) { body { background-color: green; } } /* ipad pro */ @media screen and (min-width: 1024px) { body { background-color: #FF00FF; } } /* pc */ @media screen and (min-width: 1100px) { body { background-color: black; } } PC优先： ...

transition

CSS transition 提供了一种在更改 CSS 属性时控制动画速度的方法。其可以让属性变化成为一个持续一段时间的，而不是立即生效的过程。比如，将一个元素的颜色从白色改为黑色，通常这个改变是立即生效的，使用 CSS 过渡后该元素的颜色将按照一定的曲线速率从白色变化为黑色。这个过程可以自定义。通常将两个状态之间的过渡称为隐式过渡，因为开始与结束之间的状态由浏览器决定。 CSS 过渡可以决定哪些属性发生动画效果（通过明确地列出这些属性），何时开始（通过设置延时），持续多久（通过设置时长）以及如何动画（通过定义缓动函数，如线性或先快后慢）。比如在不同的伪元素之间切换，像是 :hover，:active 或者通过 JavaScript 实现的状态变化。开发者可以定义哪一属性需以何种方式用于动画，由此允许创造复杂的过渡。然而因为为某些属性赋予动画无意义，所以这些属性无动画性。备注： auto 值常常较复杂，规范指出不要在它上动画。一些用户代理，比如基于 Gecko 的，实现了这个需求；然而另外一些用户代理，比如基于 WebKit 的，没有这么严格限制。在 auto 上使用动画，取决于浏览器及其版本，可能会导致非预期结果，应当避免使用。属性以下 transition 属性，若有多个属性值，则以,（逗号）衔接。 transition-property 指定哪个或哪些 CSS 属性名称用于过渡。只有指定的属性才会在过渡中发生动画，其他属性仍如通常那样瞬间变化。如果指定简写属性（比如 background），那么其完整版中所有可以动画的属性都会被应用过渡。取值如下： none：没有过渡动画。 all（初始值）：所有可被动画的属性都表现出过渡动画。 <custom-ident>：属性名称。由小写字母 a 到 z，数字 0 到 9，下划线（_）和破折号（-）。第一个不能为非破折号字符或数字。同时，不能以两个破折号开头。通俗来说就是可以是自定义名称也可以是css规范中的属性名。 transition-duration 表示过渡属性从旧的值转变到新的值所需要的时间。你可以为所有属性指定一个值，或者指定多个值，或者为每个属性指定不同的时长。该属性值以秒（s）或毫秒（ms）为单位指定过渡动画所需的时间。默认值为 0s，表示不会呈现过渡动画，属性会瞬间完成转变。不接受负值。可以指定多个时长，每个时长会被应用到由 transition-property 指定的对应属性上。如果某个属性的值列表小于 transition-property 的属性值数量，那么时长列表会重复，重复规则是按照现有值进行重复。例如：如3s，则重复多个3s div { transition-property: opacity, left, top, height; transition-duration: 3s; } 将视为： div { transition-property: opacity, left, top, height; transition-duration: 3s, 3s, 3s, 3s; } 如果是3s，5s，则会重复多个3s，5s。 div { transition-property: opacity, left, top, height; transition-duration: 3s, 5s; } 将视为： ...

动画

前言 CSS中有几个特别相近的几个属性。他们是transition,transform,animation。可能还有人对translate是什么也不清楚，那我们先给个简单的介绍。属性含义 transition 过渡用于设置元素的样式过度，和animation有着类似的效果，但细节上有很大的不同 transform 变形用于元素进行旋转、缩放、移动或倾斜，和设置样式的动画并没有什么关系，就相当于color一样用来设置元素的“外表” animation 动画 css动画属性 translate 移动只是transform的一个属性值，即移动。 transition 过渡字面意思上来讲，就是元素从这个属性(color)的某个值(red)过渡到这个属性(color)的另外一个值(green)，这是一个状态的转变，需要一种条件来触发这种转变，比如我们平时用到的:hoever、:focus、:checked、媒体查询或者JavaScript。一条transition规则，是可以定义多个属性的变化的，中间用逗号隔开，如果是全部属性变化则用“all”即可。语法：transition: property duration timing-function delay; 值描述 transition-property 规定设置过渡效果的 CSS 属性的名称 transition-duration 规定完成过渡效果需要多少秒或毫秒 transition-timing-function 规定速度效果的速度曲线 transition-delay 定义过渡效果何时开始我发现简写时候的顺序并不一定就是写死的，经过测试在chrome上只要delay在duration后面即可。当然按照标准写是最好的。 Demo <!DOCTYPE html> <html lang="en"> <head> <title>transition</title> <style> #box { height: 100px; width: 100px; background: green; transition: transform 1s ease-in 1s; } #box:hover { transform: rotate(180deg) scale(.5, .5); } </style> </head> <body> <div id="box"></div> </body> </html> 效果 ...

Grid布局

Grid 布局是什么？ Grid 布局即网格布局，是一种新的 CSS 布局模型，比较擅长将一个页面划分为几个主要区域，以及定义这些区域的大小、位置、层次等关系。号称是最强大的的 CSS 布局方案，是目前唯一一种 CSS 二维布局。利用 Grid 布局，我们可以轻松实现类似下图布局，演示地址 Grid 布局和 flex 布局讲到布局，我们就会想到 flex 布局，甚至有人认为竟然有 flex 布局了，似乎没有必要去了解 Grid 布局。但 flex 布局和 Grid 布局有实质的区别，那就是 flex 布局是一维布局，Grid 布局是二维布局。flex 布局一次只能处理一个维度上的元素布局，一行或者一列。Grid 布局是将容器划分成了“行”和“列”，产生了一个个的网格，我们可以将网格元素放在与这些行和列相关的位置上，从而达到我们布局的目的。 Grid 布局远比 flex 布局强大！ flex布局示例: Grid 布局示例： Grid 的一些基础概念我们使用 Grid 实现一个小例子，演示 Grid 的一些基础概念，演示地址 <div class="wrapper"> <div class="one item">One</div> <div class="two item">Two</div> <div class="three item">Three</div> <div class="four item">Four</div> <div class="five item">Five</div> <div class="six item">Six</div> </div> .wrapper { margin: 60px; /* 声明一个容器 */ display: grid; /* 声明列的宽度 */ grid-template-columns: repeat(3, 200px); /* 声明行间距和列间距 */ grid-gap: 20px; /* 声明行的高度 */ grid-template-rows: 100px 200px; } .one { background: #19CAAD; } .two { background: #8CC7B5; } .three { background: #D1BA74; } .four { background: #BEE7E9; } .five { background: #E6CEAC; } .six { background: #ECAD9E; } .item { text-align: center; font-size: 200%; color: #fff; } ...

Flexbox

一、Flexbox布局的概念 Flexbox布局也叫Flex布局，弹性盒子布局。它的目标是提供一个更有效地布局、对齐方式，并且能够使父元素在子元素的大小未知或动态变化情况下仍然能够分配好子元素之间的间隙。主要思想是使父元素能够调整子元素的宽度、高度、排列方式，从而更好的适应可用的布局空间。设定为flex布局的元素能够放大子元素使之尽可能填充可用空间，也可以收缩子元素使之不溢出。 Flex布局更适合小规模的布局，可以简便、完整、响应式的实现各种页面布局。但是，设为Flex布局以后，其子元素的float、clear和vertical-align属性将失效。Flex弹性盒模型的优势在于只需声明布局应该具有的⾏为，⽽不需要给出具体的实现⽅式，浏览器负责完成实际布局，当布局涉及到不定宽度，分布对⻬的场景时，就要优先考虑弹性盒布局。 Flex布局是一个完整的模块，它包括了一套完整的属性。其中采用 Flex 布局的元素，称为 Flex 容器，简称"容器"。它的所有子元素就是容器成员，称为 Flex 项目，简称"项目"。容器默认存在两个轴：水平轴（main axis）和垂直轴（cross axis），项目默认沿主轴排列（水平轴）：这里面涉及到了几个概念，下面来看一下： main axis: Flex 父元素的主轴是指子元素布局的主要方向轴，它由属性flex-direction来确定主轴是水平还是垂直的，默认为水平轴。 main-start & main-end: 分别表示主轴的开始和结束，子元素在父元素中会沿着主轴从main-start到main-end排布。 main size: 单个项目占据主轴的长度大小。 cross axis: 交叉轴，与主轴垂直。 cross-start & cross-end: 分别表示交叉轴的开始和结束。子元素在交叉轴的排布从cross-start开始到cross-end。 cross size: 子元素在交叉轴方向上的大小。二、父元素属性想要使用flex布局，首先需要给父元素指定为flex布局，这样容器内的元素才能实现flex布局： <div class="container"></div> .container { display: flex | inline-flex; } 这里有两种方式可以设置flex布局，使用display: flex;会生成一个块状的flex容器盒子，使用display: inline-flex;会生成一个行内的flex容器盒子。如果我们使用块状元素，比如div标签，就可以使用flex，如果使用行内元素，就可以使用inline-flex。多数情况下，我们会使用display: flex;。父元素（容器）可以设置以下六个属性： flex-direction flex-wrap flex-flow justify-content align-items align-content 1. flex-direction flex-direction：主轴方向，它决定了容器内元素排列方向，它有四个属性值： .container { flex-direction: row | row-reverse | column | column-reverse; } （1）flex-direction: row：默认值，沿水平主轴从左到右排列，起点在左沿（2）flex-direction: row-reverse：沿水平主轴从右到左排列，起点在右沿（3）flex-direction: column：沿垂直主轴从上到下排列，起点在上沿 ...