加载事件我们有两种方式，一种就是javascript直接写：window.onload来加载。还有一种就是我们的jQuery中的加载方式$(function(){})
整理自 MDN web docs 的笔记，同时参考了 Web Bos 上的什么是 Flexbox系列视频。
方案1：用 div 标签包裹 img 标签 用div标签包裹图片，这种方案比较通用。 缺点：产生无用标签。
<html> <head> <title>div展开收缩代码</title> <style> * { margin:0; padding:0;} body { text-align:center; font:75% Verdana, Arial, Helvetica, sans-serif;} h1 { font:125% Arial, Helvetica, sans-serif; text-align:left; font-weight:bo
1.在header.php中添加下面的代码，或者也可以单独写进一个js文件中然后在header.php中引入也可以。我是引入的。 <script type="text/javascript"> jQuery(document).ready(function(jQuery) { jQuery('.collapseButton').click(function() { jQuery(this).parent().parent().find('.xContent').slideToggle('slow
伸缩容器是display的计算值为flex或inline-flex的元素，其流内孩子就是伸缩项（flex item）
熟悉我们的小伙伴都知道，当我们的RTSP/Onvif流媒体服务器与摄像头可以进行网络连接时，通过RTSP/Onvif流媒体服务器自带的Onvif探测即可实现Onvif摄像头的设备IP探测，成功后返回需要的流地址，实现摄像头的PTZ云台控制，PTZ控制包含转动、变焦等。
通常我们会通过字体图标来显示中间的加号，外层用一个div包裹即可；或者使用伪元素来模拟中间的一横一竖，这都比较麻烦。
百分比则为使用对应点，假设设left:20%;则浏览器会在距离图片左边20%，同时设为距离元素左边的20%；如图：
.xControl { font-size: 15px; font-weight: bold; padding: 5px 0; box-shadow:0 0 20px #d0d0d0;/* 阴影 */ background-color: #FFFFFF;/* 背景颜色 */ border-bottom: 2px solid #e74c3c;/* 边 */ transition: all 0.1s linear; text-align: center; border-radius: 0 0 5% 5%; border-radius:4px; } .xControl a{ text-decoration: none; display: block; }
大家好，我是一个闲着没事热衷于重复造轮子的不知名前端，今天给大家带来的是一个代码在线编辑预览工具的实现介绍，目前这类工具使用很广泛，常见于各种文档网站及代码分享场景，相关工具也比较多，如codepen、jsrun、codesandbox、jsbin、plnkr、jsfiddle等，这些工具大体分两类，一类可以自由添加多个文件，比较像我们平常使用的编辑器，另一类固定只能单独编辑html、js、css，第二类比较常见，对于demo场景来说其实已经够用，当然，说的只是表象，底层实现方式可能还是各有千秋的。
CSS 的 Float（浮动），会使元素向左或向右移动，直到外边缘碰到包含框或另一个浮动元素位置。
Flex伸缩布局决定性的特性是让伸缩项目可伸缩，也就是让伸缩项目的宽度或高度自动填充剩余的空间。这可以以flex属性完成。一个伸缩容器会等比地按照各伸缩项目的 扩展比率 分配剩余空间，也会按照 收缩比率 缩小各项目以避免溢出。
最近在做一个后台管理系统，要求可以对前台用户的作品进行评论，而评论要可以输入表情，常规的文字输入框都是用的文本域textarea来做的，但这种输入框只能输入文字，没有办法输入表情图标，这个时候可编辑div就能起到作用了，那么如何在可编辑的div中插入表情呢？
多列布局在一个网页设计中非常常见，不仅可以用来做外部容器的布局，在一些局部也经常出现多列布局，比如下面圈出来的都是多列布局：
今天看了一篇关于 CSS 的文章，文章用到的几个点，想和大家聊聊。 附「原文地址」大家可自己查阅。
今日打卡任务 Day9参考答案 打卡作业 Day09 作业布置 一. 完成课堂所有的代码 二. 总结绝对定位的相对元素以及常见的解决方案 子绝父相 子元素绝对定位、 父元素相对定位 子绝父绝 子元素绝对定位 父元素绝对定位 子绝父固 子元素绝对定位 父元素固定定位 三. 总结浮动常见的规则内容 元素一旦浮动后, 脱离标准流 朝着向左或向右方向移动，直到自己的边界紧贴着包含块（一般是父元素）或者其他浮动元素的边界为止 定位元素会层叠在浮动元素上面 如果元素是向左（右）浮动，浮动元素
展开收起效果是比较常见的一种交互方式，通常的做法是控制display属性值在none和其它值之间切换，虽说功能可以实现，但是效果略显生硬，所以会有这样的需求——希望元素展开收起能具有平滑的效果。
我是🏅有6年前端及跨平台开发经验、掘金/51CTO活跃作者、曾独立设计混开框架和重构方案并顺利落地 de 小鑫同学。 写作背景： 在热火朝天的前端框架演进的进程中，大多数的人都把目光关注到了 JavaScript / TypeScript 的身上，TailwindCSS作为最有争议但也是最受欢迎的一个 CSS 框架的产品我们也来看一下它到底好不好用，有什么优势~ 快速开始： 创建 vite + vue-ts 项目： yarn create vite 安装 Tailwind CSS 依赖： npm inst
Bootstrap 3 与 Bootstrap 4 最大的区别就是 Bootstrap 4 使用弹性盒子来布局，而不是使用浮动来布局。
<!doctype html> <html> <head> <style> div{width:300px;height:300px;border-radius:50%;overflow:hidden;position:relative;} div img{width:100%;height:100%;} div span{position:absolute;left:0;top:0;width:100%;height:100%; border-color:black; border-style:sol
1.1.3. 案例1：测试两种方式的区别【个数+顺序】
弹性布局是指通过调整其内元素的宽高，从而在任何显示设备上实现对可用显示空间最佳填充的能力。弹性容器扩展其内元素来填充可用空间，或将其收缩来避免溢出。
EasyNVR核心在于摄像机的音视频流的获取、转换、转码与高性能分发，同时同步完成对实时直播流的录像存储，在客户端（PC浏览器、Android、iOS、微信）进行录像文件的检索、回放和下载。
作为一个前端小白，入门跟着这四个来源学习，感谢作者的分享，在其基础上，通过自己的理解，梳理出的知识点，或许有遗漏，或许有些理解是错误的，如有发现，欢迎指点下。
折叠效果是通过触发事件后，循环改变nav的宽度和cont的左边距实现cont盖住nav的视觉效果。但在代码中，并不能真的用for循环来做，那样在移动过程中js就会一直卡在循环中而不能执行其他代码，所以这里可以使用setInterval函数来做，它会每隔一段时间调用一次某个方法，格式为setInterval(调用函数，调用间隔时间，调用函数参数1,参数2,...);当任务完成时再通过clearInterval函数结束循环调用。 为了使移动更平滑，每次调用时只移动到目标位置之间的距离的10%.实现折叠的函数代码如下：
给元素添加display: flex，该元素变成了一个弹性容器（flex container），它的直接子元素变成了弹性子元素（flex item）。
CSS3中新出现的多列布局 (multi-column) 是传统 HTML 网页中块状布局模式的有力扩充。
jQuery 是一个快速、简洁的 JavaScript 框架，封装 JavaScript 常用的功能代码，提供一种简便的 JavaScript 设计模式，优化 HTML 文档操作、事件处理、动画设计和 Ajax 交互
今天写项目的时候突然不知道如何通过jquery来操作css样式了，于是就上网查了一下，现在总结出来给大家分享一下。
最近开发后台，因为不想使用 ElementUI 和其他现成的 UI 框架，于是决定自己做。
执行结果链接描述 在header 和footer上再包裹一层div，在外层的div上添加背景颜色，设置内层layout上设置左右margin：auto，就出现了通栏的效果。实际上layout占据的位置是固定的，如下图border框出的位置。
在官方最新版本的Matery主题版本中已经优化了代码块的问题，但在旧版本Hexo主题Matery中对hexo-prism-plugin只支持高亮显示，而且存在着许多的BUG。比如新版本的hexo-prism-plugin已经支持了代码块的一键复制和收缩功能，如果不手动对旧版本Matery原有的代码做改动，则代码块显示会存在一些问题。
outline-offset: -66px; 是关键，它表示轮廓距div边的距离，如果为负值则会往里面收缩，最后形成一个加号。
上图中可以看到，h1标签是块级元素，占据了整行，span标签是行内元素，只占据内容这一部分。
flex-flow属性：flex-direction和flex-wrap的简写，默认row nowrap
<style type="text/css"> *{ margin:0; padding:0; list-style:none;} body{ font-size:14px;} .main{ width:0px; height:0px; position:fixed; bottom:150px; border:1px solid #b83b3b; background-color:#FFF;} .main2{ width:0px; height:0px; position:relative; padding:10px;} .main2 ul li{ width:100%; height:30px; line-height:30px; text-align:left;} .main2 ul li a{ color:#000; text-decoration:none;} .main2 ul li a:hover{ text-decoration:underline; color:#000;} .bar{ width:100px; height:105px; position:absolute; left:-100px; top:-1px; background:url(http://pic.kuaizhan.com/g2/M00/28/2D/wKjmqlXAH3aALlzfAAAcqLZkqM40852415) no-repeat; display:block;} </style> <body> </body>
flex的一些属性 CSS3中引入了另一种框--flexbox，flexbox有一些block和inline不同的性质，比如： 自适应子元素（flex item，又称伸缩项目）的宽度 伸缩项目的float，clear，vertical-align属性失效 不能继承flex框，但可以依次设置 可以修改flex流的方向以及布置规则 现在就大体讲述下这个具体属性的表示含义。 设置flexbox的兼容性 将一个容器设置为flexbox（又称伸缩容器）很简单，但是却存在一些兼容性的问题，比如
Flexbox布局概念 Flexbox布局（ Flexible Box 或CSS3 弹性布局），是CSS3中的一种新的布局模式，是可以自动调整子元素的高和宽，来很好的填充任何不同屏幕大小的显示设备中的可用显示空间，收缩内容防止内容溢出，确保元素拥有恰当的行为的布局方式。使用Flexbox来布局更容易，可以使用更少的代码，更简单的方式实现更复杂的布局，例如对齐方式，排列方向，排列顺序（这也是Flexbox布局的核心能力所在），弹性盒中的子元素通过在各个方向放置就可以以弹性的尺寸适应父元素的显示区域。由于子元素
弹性盒，是一种布局方式，当页面需要适应不同的屏幕大小以及设备类型时，它依然能确保元素拥有更恰当的排布行为，弹性盒属于 CSS 3 部分，IE9 以下不支持，现代浏览器指的就是 IE9 及以上的浏览器
前面一篇文章整体介绍了 CSS 的布局知识，其中说到 float 布局是 CSS 不断完善的副产物。而在 2023 年的今天，flex 这种布局方式才是未来！那么今天我们就来学习下 flex 弹性布局。
（注1：如果有问题欢迎留言探讨，一起学习！转载请注明出处，喜欢可以点个赞哦！） （注2：更多内容请查看我的目录。）
有一个盒子(div)初始宽度100px，设置CSS hover属性后使它鼠标悬浮上面时实现盒子宽度属性变为300px；
有一个盒子(div)初始宽度100px，设置CSS hover属性后使它鼠标悬浮上面时实现盒子宽度属性变为300px； 但是我们鼠标一放上去后，盒子的宽度属性会立马变成300px，没有任何过渡效果； 我们可以利用CSS3中的过渡来实现过渡效果，让它平滑的展开或者收缩；
不多说了，本站目前使用的效果，可以到我的存档页一览，该方法来自zww，感谢原作者，在这之前，建议你： 1、你的博客存档页面地址后面的应该为/articles,而不是常见的/archives 。在英文中，article表示“文章”，而archive意为“档案”，使用archive貌似不那么规范；2、你的博客存档页面应该禁止搜索引擎访问，因为这会造成内容重复（在你启用站点地图插件的情况下）。 折腾功能：代码实现WordPress归档页面模板[WP原生函数篇] 原创作者：zwwooooo 特点： 1. 按
如何仅用 flex 实现。那不是很简单吗。左边一个 div 右边一个 div，完了之后父级加上 align-items: center; justify-content: center; 就完了。那如果中间的字，超过了容器的原有宽度呢。flex 盒子会继续增长，中间的文字会撑开整个容器，导致外层容器变形。如图。未读数消失在了外面。
新手帮助.gif 安装driver.js cnpm install driver.js -s 引入 import Driver from "driver.js" // 引入插件 import "driver.js/dist/driver.min.css" // 引入插件 import steps from "./dd" // 引入步骤 创建一个js文件，用于存放 step的提示, 内容如下 // 通过绑定元素 类名，id名的形式来 执行步骤， 注意第一个对象要写两次。 con
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
对象存储
即时通信 IM
实时音视频
