我在乐字节学习前端的第一天和第二天-学习笔记：CSS3全面知识汇总

笔记：CSS3全面知识汇总

结构框架：分为六个部分（属性、选择符、语法与规则、取值、css单位以及附录）

第一部分：属性（定位、布局、弹性盒模型、尺寸、外补白、内补白、边框、背景、颜色、字体、列表、表格、内容、用户界面、多栏、2D变换、过渡、动画、打印、媒体查询、only IE、only Firefox、only webkit）

第二部分：选择符（元素选择符、关系选择符、属性选择符、伪类选择符、伪对象选择符）

第三部分：语法与规则（！Important、/_comment_/、@import、@charset、@media、#font-face、@page、@keyframes）

第四部分：取值（颜色、文本、函数、图像、数字、其他）

第五部分：css单位（长度、角度、时间、频率、布局）

第六部分：附录（颜色关键字、媒体类型、css条件hack、css属性hack、css选择符hack、cssbugs解决方案、css技巧和经验、css其他技巧）

第一部分：属性

第一节：定位（position、z-index、top、right、bottom、left）
第二节：布局（display、float、clear、visibility、clip、overflow、overflow-x、overflow-y）

display：none 隐藏对象。与visibility属性的hidden值不同，其不为被隐藏的对象保留其物理空间 inline指定对象为内联元素。 block指定对象为块元素。 list-item指定对象为列表项目。 inline-block指定对象为内联块元素。（CSS2） table指定对象作为块元素级的表格。类同于html标签

（CSS2） inline-table指定对象作为内联元素级的表格。类同于html标签

（CSS2） table-caption指定对象作为表格标题。类同于html标签（CSS2） table-row-group指定对象作为表格行组。类同于html标签（CSS2） table-column指定对象作为表格列。类同于html标签（CSS2） table-column-group指定对象作为表格列组显示。类同于html标签（CSS2） table-header-group指定对象作为表格标题组。类同于html标签（CSS2） table-footer-group指定对象作为表格脚注组。类同于html标签（CSS2） compact分配对象为块对象或基于内容之上的内联对象（CSS3） run-in分配对象为块对象或基于内容之上的内联对象（CSS3） ruby将对象作为表格脚注组显示（CSS3） ruby-base将对象作为表格脚注组显示（CSS3） ruby-text将对象作为表格脚注组显示（CSS3） ruby-base-group将对象作为表格脚注组显示（CSS3） ruby-text-group将对象作为表格脚注组显示（CSS3） box将对象作为弹性盒模型显示（CSS3）-webkit-box;-moz-box;-o-box;-ms-box;inline-box将对象作为内联块级弹性盒模型显示（CSS3）

clip:rect(0 auto 35px 10px) 上边不剪切，右边不剪切，下边从第35个像素开始剪切直至最底部，左边剪10

overflow:visible 不剪切内容 hidden将超出对象尺寸的内容进行裁剪，将不出现滚动条。 scroll将超出对象尺寸的内容进行裁剪，并以滚动条的方式显示超出的内容。 auto在需要时剪切内容并添加滚动条，此为body对象和textarea的默认值。

第三节：弹性盒模型（box-orient子元素排列方式、box-pack子元素对齐方式、box-align子元素对齐方式、box-flex子元素如何分配剩余盒子的剩余空间、box-flex-group子元素的所属组、box-ordinal-group子元素的显示顺序、box-direction子元素顺序是否相反、box-lines子元素是否可以换行显示）要使其生效需给父级元素display为box或者是inline-box；注意浏览器

box-orient 定义盒子内部元素的方向排列方式 horizontal(水平线上从左到右) vertical(垂直线上从上到下) inline-axis(水平编排)、block-axis(垂直编排)、inherit(继承父级元素)

box-pack:start 设置弹性盒模型对象的子元素从开始位置对齐（大部分情况等同于左对齐） center设置弹性盒模型对象的子元素居中对齐 end设置弹性盒模型对象的子元素从结束位置对齐（大部分情况等同于右对齐） justify设置或弹性盒模型对象的子元素两端对齐

box-align:start 设置弹性盒模型对象的子元素从开始位置对齐 center设置弹性盒模型对象的子元素居中对齐 end设置弹性盒模型对象的子元素从结束位置对齐 baseline设置弹性盒模型对象的子元素基线对齐 stretch设置弹性盒模型对象的子元素自适应父元素尺寸

box-flex:0让子元素按照父元素的宽度划分 将一个容器分成6份，子对象a分1份，b分2份，c分3份（动态的分配剩余空间）

box-flex-group:1 动态的给数字较大的组分配其内容所需的实际空间（如无内容、paddin、border则不占空间），剩余空间则均分给数字最小的那个组（可能有1个或多个元素）

box-ordinal-group:1 调整三个栏目的先后顺序，数字越大越靠后，数值较低的元素显示在数值较高元素的前面，相同数值的元素，它们的显示顺序取决于它们的代码顺序

box-direction:normal 确定内部元素的排列顺序 normal、reverse（翻转）、inherit 设置弹性盒模型对象的子元素按正常顺序排列 reverse反转弹性盒模型对象的子元素的排列顺序

box-lines:single 弹性盒模型对象的子元素只在一行内显示 multiple弹性盒模型对象的子元素超出父元素的空间时换行显示

第四节：尺寸（width、min-width、max-width、height、min-height、max-height）第五节：外补白（margin、margin-top、margin-right、margin-bottom、margin-left）第六节：内补白（padding、padding-top、padding-right、padding-bottom、padding-left）第七节：边框（border、border-width、border-style、border-color、border-top、border-top-width、border-top-style、border-top-color、border-right、border-right-width、border-right-style、border-right-color、border-bottom、border-bottom-width、border-bottom-style、border-bottom-color、border-left、border-left-width、border-left-style、border-left-color、 border-image、border-radius、border-top-left-radius、border-top-right-radius、border-bottom-left-radius、border-bottom-right-radius、box-shadow阴影、box-reflect倒影）

border-image：border-image-sourceborder-image-slice / border-image-width / border-image-outset / border-image-repeat none：无背景图片。使用绝对或相对地址指定图像。用浮点数指定宽度。不允许负值。用百分比指定宽度。不允许负值。用长度值指定宽度。不允许负值。 stretch：指定用拉伸方式来填充边框背景图。 repeat：指定用平铺方式来填充边框背景图。当图片碰到边界时，如果超过则被截断。 round：指定用平铺方式来填充边框背景图。图片会根据边框的尺寸动态调整图片的大小直至正好可以铺满整个边框。

border-image:url(skin/border.png) 27/27px;

box-shadow none：无阴影 ①第1个长度值用来设置对象的阴影水平偏移值。可以为负值 ②第2个长度值用来设置对象的阴影垂直偏移值。可以为负值 ③如果提供了第3个长度值则用来设置对象的阴影模糊值。不允许负值 ④如果提供了第4个长度值则用来设置对象的阴影外延值。不允许负值设置对象的阴影的颜色。 inset：设置对象的阴影类型为内阴影。该值为空时，则对象的阴影类型为外阴影 box-shadow:5px 5px 5px 10px rgba(0,0,0,.6);

第八节：背景（background、background-color、 background-image、background-repeat、background-attachment背景图片是滚动还是固定、background-position、background-origin、background-clip、background-size、multiple-background混合属性）

background-image:-moz-linear-gradient(top , #45B5DA, #0382AD);渐变背景`
background-image:-webkit-gradient(linear, 50% 0%, 50% 100%, from(#45B5DA), to(#0382AD));渐变背景
background-image:-o-linear-gradient(top , #45B5DA, #0382AD);渐变背景
background-image:url(skin/p_103x196_1.jpg),url(skin/p_103x196_2.jpg),url(skin/p_103x196_3.jpg);多重背景
background：linear-gradient（top，#000，#999）。从上到下、从黑色到灰色水平方向渐变
background：linear-gradient（left，#000，#999）。起始于左边、从黑色到灰色垂直方向渐变
background：linear-gradient（left，30deg，#000，#999）。起始于左边，倾斜30度、从黑色到灰色水平渐变
`background-image: linear-gradient(0deg, rgba(255, 255, 255, .2) 50%, transparent 50%, transparent);

第九节：颜色（color、opacity）第十节：字体（font、font-style、font-weight、font-size、font-family、font-stretch）第十一节：文本（text-indent、text-overflow、text-align、text-transform、text-decration、text-decoration-line、text-decoration-color、text-decoration-style、text-shadow、text-fill-color、text-stroke、text-stroke-width、text-stroke-color、letter-spacing、word-spacing、vertical-align、word-wrap、white-space、direction、unicode-bidi、line-height、tab-size）

text-overflow clip：当对象内文本溢出时不显示省略标记（…），而是将溢出的部分裁切掉。 ellipsis：当对象内文本溢出时显示省略标记（…）。

text-transform none：无转换 capitalize：将每个单词的第一个字母转换成大写 uppercase：转换成大写 lowercase：转换成小写 full-width： full-size-kana：

white-space normal：默认处理方式。 pre：用等宽字体显示预先格式化的文本，不合并文字间的空白距离，当文字超出边界时不换行。可查阅pre对象 nowrap：强制在同一行内显示所有文本，直到文本结束或者遭遇br对象。 pre-wrap：用等宽字体显示预先格式化的文本，不合并文字间的空白距离，当文字碰到边界时发生换行。 pre-line：保持文本的换行，不保留文字间的空白距离，当文字碰到边界时发生换行。

direction ltr：文本流从左到右。 rtl：文本流从右到左

unicode-bidi normal：对象不打开附加的嵌入层，对于内联要素，隐式重排序跨对象边界进行工作。 embed：对象打开附加的嵌入层，direction属性的值指定嵌入层，在对象内部进行隐式重排序。

bidi-override 严格按照direction属性的值重排序。忽略隐式双向运算规则。用于同一个页面里存在从不同方向读进的文本显示。与direction属性一起使用假如您想应用direction属性于内联元素的文本，您必须设定unicode-bidi属性为embed或bidi-override。

第十二节：列表（list-style、list-style-image、list-style-position、list-style-type）

list-style-type disc：实心圆(CSS1) circle：空心圆(CSS1) square：实心方块(CSS1) decimal：阿拉伯数字(CSS1) lower-roman：小写罗马数字(CSS1) upper-roman：大写罗马数字(CSS1) lower-alpha：小写英文字母(CSS1) upper-alpha：大写英文字母(CSS1) none：不使用项目符号(CSS1) armenian：传统的亚美尼亚数字(CSS2) cjk-ideographic：浅白的表意数字(CSS2) georgian：传统的乔治数字(CSS2) lower-greek：基本的希腊小写字母(CSS2) hebrew：传统的希伯莱数字(CSS2) hiragana：日文平假名字符(CSS2) hiragana-iroha：日文平假名序号(CSS2) katakana：日文片假名字符(CSS2) katakana-iroha：日文片假名序号(CSS2) lower-latin：小写拉丁字母(CSS2) upper-latin：大写拉丁字母(CSS2)

第十三节：表格（table-layout、border-collapse、border-spacing、caption-side、empty-cells）第十四节：内容（content、counter-increment、counter-reset、quotes）

content normal：默认值。表现与none值相同 none：不生成任何值。插入标签属性值 .attr p:after{content:attr(title);} 使用指定的绝对或相对地址插入一个外部资源（图像，声频，视频或浏览器支持的其他任何资源） .url p:before{content:url(…/…/skin/ico.png);} 插入字符串 counter(name)：使用已命名的计数器 .counter1 li:before{content:counter(testname);} counter(name,list-style-type)：使用已命名的计数器并遵从指定的list-style-type属性 .counter2 li:before{content:counter(testname2,lower-roman);} counters(name,string)：使用所有已命名的计数器 .counter3 li{counter-increment:testname3;} .counter3 li:before{content:counter(testname3,decimal)".";} counters(name,string,list-style-type)：使用所有已命名的计数器并遵从指定的list-style-type属性 no-close-quote：并不插入quotes属性的后标记。但增加其嵌套级别 .counter3 li li:before{content:counter(testname3,decimal)".“counter(testname4,decimal)”.";} no-open-quote：并不插入quotes属性的前标记。但减少其嵌套级别 close-quote：插入quotes属性的后标记 open-quote：插入quotes属性的前标记 counter-increment：none |[ ]

第十五节：用户user interface（outline、outline-width、outline-style、outline-color、outline-offset、nav-index、nav-up、nav-right、nav-down、nav-left、cursor、zoom、box-sizing、resize、ime-mode）

outline定义元素周围轮廓线，类似于border outline-width ：指定轮廓边框的宽度。 outline-style ：指定轮廓边框的样式。 outline-color ：指定轮廓边框的颜色。 outline:2px solid #f00;border:3px solid #333; outline-width 用长度值来定义轮廓的厚度。不允许负值 medium：定义默认宽度的轮廓。 thin：定义比默认宽度细的轮廓。 thick：定义比默认宽度粗的轮廓。

resize none：不允许用户调整元素大小。 both：用户可以调节元素的宽度和高度。 horizontal：用户可以调节元素的宽度 vertical：用户可以调节元素的高度。 none：不允许用户调整元素大小。 both：用户可以调节元素的宽度和高度。 horizontal：用户可以调节元素的宽度 vertical：用户可以调节元素的高度。

第十六节：多栏multi-column（columns、column-width、column-count、column-gap、column-rule、column-rule-style、column-rule-color、column-span、column-fill、column-break-before、column-break-after、column-break-inside）

columns:200px 3;

第十七节：2D变换（transform、transform-origin）

translate移动。translate（X（距离left位置）,Y（距离top位置））。以坐标轴原点为中心进行位移，正值向右下角移动。 1旋转。transfrom：rotate（10deg）。平面旋转多少度 2斜拉。skew（X,Y）。倾斜多少度 3缩放。scale（X,Y）。放大或缩小多少倍 4移动。translate（X，Y）

transfrom：rotate（30deg）。
transfrom：scale（X，Y）。
transfrom：skew（X，Y）。
transfrom：translate（X，Y）。
1234

所有2D转换方法连在一起就是matrix()。矩形方式进行变换matrix(); 改变起点位置：transfrom-origin：bottom left

eg：transfrom：scale（1.5）。
对应的matrix是 transfrom：matrix（1.5，0，0，1.5，0，0）；

matrix（scaleX，0，0，scaleY，0，0）
1234

深究矩阵 matrix

ax+cy+e 为水平坐标。bx+dy+f 为垂直坐标。

transfrom：matrix（1 ， 0 ， 0 ，1 ， 30 ，30）//a=1,b=0,c=0,d=1,e=30,f=30。假设中心坐标为（0 ，0） x坐标为 ax+cy+e = 1_0 + 0_0 +30 = 30。 y坐标为 bx+dy+f = 0_0 + 1_0 + 30 = 30。中心坐标变为了（30 ，30）向右下角偏移，transfrom：translate（30px, 30px）所以matrix只用关心最后两个参数就可以了缩放：transfrom：matrix（1 ， 0 ， 0 ，1 ， 30 ，30）当中的1是缩放的参数，所以写为transfrom：matrix（scalex ,0, 0 ,scaley ,30 ,30）

第十八节：过渡

transition-property：过渡效果的css属性名称。none、all、indent transition-duration：过渡的时长。 transition-timing-function：过渡速度曲线。平缓还是先慢后快。 transition-delay：过渡延迟。

第十九节：动画（animation-timing-function）

animation-name：`动画名称。
animation-delay：动画延迟。
animation-duration：动画运动周期时长。
animation-timing-function：动画速度曲线。linear（速度一致）、ease（低速开始，然后加快，结束慢）、ease-in（低速开始）、ease-out（低速结束）、ease-in-out（低速开始和结束）、cubic-bezier（自己的值，从0到1）
animation-iteration-count：动画播放次数。0、infinite。
animation-direction：动画是否在下一个周期逆向播放。normal、alternate。
animation-play-state：动画是否正在运行或暂停。
`animation-fill-mode

简写：animation：name duration timing-function delay

@keyframes animationName{
from{ ...... }
to{ ...... }
}
@keyframes animationName{
0%{ ...... }
50%{ ...... }
100%{ ...... }
}

你可能感兴趣的:(前端,css3)

Long类型前后端数据不一致 igotyback 前端
响应给前端的数据浏览器控制台中response中看到的Long类型的数据是正常的到前端数据不一致前后端数据类型不匹配是一个常见问题，尤其是当后端使用Java的Long类型（64位）与前端JavaScript的Number类型（最大安全整数为2^53-1，即16位）进行数据交互时，很容易出现精度丢失的问题。这是因为JavaScript中的Number类型无法安全地表示超过16位的整数。为了解决这个问
DIV+CSS+JavaScript技术制作网页（旅游主题网页设计与制作）云南大理 STU学生网页设计网页设计期末网页作业 html静态网页 html5期末大作业网页设计 web大作业
️精彩专栏推荐作者主页:【进入主页—获取更多源码】web前端期末大作业：【HTML5网页期末作业(1000套)】程序员有趣的告白方式：【HTML七夕情人节表白网页制作(110套)】文章目录二、网站介绍三、网站效果▶️1.视频演示2.图片演示四、网站代码HTML结构代码CSS样式代码五、更多源码二、网站介绍网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。网站程
【加密社】Solidity 中的事件机制及其应用加密社闲侃区块链智能合约区块链
加密社引言在Solidity合约开发过程中，事件（Events）是一种非常重要的机制。它们不仅能够让开发者记录智能合约的重要状态变更，还能够让外部系统（如前端应用）监听这些状态的变化。本文将详细介绍Solidity中的事件机制以及如何利用不同的手段来触发、监听和获取这些事件。事件存储的地方当我们在Solidity合约中使用emit关键字触发事件时，该事件会被记录在区块链的交易收据中。具体而言，事件
关于城市旅游的HTML网页设计——(旅游风景云南 5页)HTML+CSS+JavaScript 二挡起步 web前端期末大作业 javascript html css 旅游风景
⛵源码获取文末联系✈Web前端开发技术描述网页设计题材，DIV+CSS布局制作,HTML+CSS网页设计期末课程大作业|游景点介绍|旅游风景区|家乡介绍|等网站的设计与制作|HTML期末大学生网页设计作业，Web大学生网页HTML：结构CSS：样式在操作方面上运用了html5和css3，采用了div+css结构、表单、超链接、浮动、绝对定位、相对定位、字体样式、引用视频等基础知识JavaScrip
HTML网页设计制作大作业（div+css）云南我的家乡旅游景点带文字滚动二挡起步 web前端期末大作业 web设计网页规划与设计 html css javascript dreamweaver 前端
Web前端开发技术描述网页设计题材，DIV+CSS布局制作,HTML+CSS网页设计期末课程大作业游景点介绍|旅游风景区|家乡介绍|等网站的设计与制作HTML期末大学生网页设计作业HTML：结构CSS：样式在操作方面上运用了html5和css3，采用了div+css结构、表单、超链接、浮动、绝对定位、相对定位、字体样式、引用视频等基础知识JavaScript：做与用户的交互行为文章目录前端学习路线
springboot+vue项目实战一-创建SpringBoot简单项目苹果酱0567 面试题汇总与解析 spring boot 后端 java 中间件开发语言
这段时间抽空给女朋友搭建一个个人博客，想着记录一下建站的过程，就当做笔记吧。虽然复制zjblog只要一个小时就可以搞定一个网站，或者用cms系统，三四个小时就可以做出一个前后台都有的网站，而且想做成啥样也都行。但是就是要从新做，自己做的意义不一样，更何况，俺就是专门干这个的，嘿嘿嘿要做一个网站，而且从零开始，首先呢就是技术选型了，经过一番思量决定选择-SpringBoot做后端，前端使用Vue做一
博客网站制作教程 2401_85194651 java maven
首先就是技术框架：后端：Java+SpringBoot数据库：MySQL前端：Vue.js数据库连接：JPA(JavaPersistenceAPI)1.项目结构blog-app/├──backend/│├──src/main/java/com/example/blogapp/││├──BlogApplication.java││├──config/│││└──DatabaseConfig.java
最简单将静态网页挂载到服务器上(不用nginx) 全能全知者服务器 nginx 运维前端 html 笔记
最简单将静态网页挂载到服务器上(不用nginx)如果随便弄个静态网页挂在服务器都要用nignx就太麻烦了，所以直接使用Apache来搭建一些简单前端静态网页会相对方便很多检查Web服务器服务状态：sudosystemctlstatushttpd#ApacheWeb服务器如果发现没有安装web服务器：安装Apache：sudoyuminstallhttpd启动Apache：sudosystemctl
补充元象二面 Redstone Monstrosity 前端面试
1.请尽可能详细地说明，防抖和节流的区别，应用场景？你的回答中不要写出示例代码。防抖（Debounce）和节流（Throttle）是两种常用的前端性能优化技术，它们的主要区别在于如何处理高频事件的触发。以下是防抖和节流的区别和应用场景的详细说明：防抖和节流的定义防抖：在一段时间内，多次执行变为只执行最后一次。防抖的原理是，当事件被触发后，设置一个延迟定时器。如果在这个延迟时间内事件再次被触发，则重
微信小程序开发注意事项 jun778895 微信小程序小程序
微信小程序开发是一个融合了前端开发、用户体验设计、后端服务（可选）以及微信小程序平台特性的综合性项目。这里，我将详细介绍一个典型的小程序开发项目的全过程，包括项目规划、设计、开发、测试及部署上线等各个环节，并尽量使内容达到或超过2000字的要求。一、项目规划1.1项目背景与目标假设我们要开发一个名为“智慧校园助手”的微信小程序，旨在为学生提供一站式校园生活服务，包括课程表查询、图书馆座位预约、食堂
字节二面 Redstone Monstrosity 前端面试
1.假设你是正在面试前端开发工程师的候选人，面试官让你详细说出你上一段实习过程的收获和感悟。在上一段实习过程中，我获得了宝贵的实践经验和深刻的行业洞察，以下是我的主要收获和感悟：一、专业技能提升框架应用熟练度：通过实际项目，我深入掌握了React、Vue等前端框架的使用，不仅提升了编码效率，还学会了如何根据项目需求选择合适的框架。问题解决能力：在实习期间，我遇到了许多预料之外的技术难题。通过查阅文
前端代码上传文件余生逆风飞翔前端 javascript 开发语言
点击上传文件import{ElNotification}from'element-plus'import{API_CONFIG}from'../config/index.js'import{UploadFilled}from'@element-plus/icons-vue'import{reactive}from'vue'import{BASE_URL}from'../config/index'i
uniapp实现动态标记效果详细步骤【前端开发】 2401_85123349 uni-app
第二个点在于实现将已经被用户标记的内容在下一次获取后刷新它的状态为已标记。这是什么意思呢？比如说上面gif图中的这些人物对象，有一些已被该用户添加为关心，那么当用户下一次进入该页面时，这些已经被添加关心的对象需要以“红心”状态显现出来。这个点的难度还不算大，只需要在每一次获取后端的内容后对标记对象进行状态更新即可。II.动态标记效果实现思路和步骤首先，整体的思路是利用动态类名对不同的元素进行选择。
360前端星计划-动画可以这么玩马小蜗
动画的基本原理定时器改变对象的属性根据新的属性重新渲染动画functionupdate(context){//更新属性}constticker=newTicker();ticker.tick(update,context);动画的种类1、JavaScript动画操作DOMCanvas2、CSS动画transitionanimation3、SVG动画SMILJS动画的优缺点优点：灵活度、可控性、性能
Vue + Express实现一个表单提交九旬大爷的梦
最近在折腾一个cms系统，用的vue+express，但是就一个表单提交就弄了好久，记录一下。环境：Node10+前端：Vue服务端：Express依赖包：vueexpressaxiosexpress-formidableelement-ui（可选）前言：axiosget请求参数是：paramsaxiospost请求参数是：dataexpressget接受参数是req.queryexpresspo
前端知识点 ZhangTao_zata 前端 javascript css
下面是一个最基本的html代码body{font-family:Arial,sans-serif;margin:20px;}//JavaScriptfunctionthatdisplaysanalertwhencalledfunctionshowMessage(){alert("Hello!Youclickedthebutton.");}MyFirstHTMLPageWelcometoMyPage
第三十一节:Vue路由:前端路由vs后端路由的了解曹老师
1.认识前端路由和后端路由前端路由相对于后端路由而言的,在理解前端路由之前先对于路由有一个基本的了解路由:简而言之,就是把信息从原地址传输到目的地的活动对于我们来说路由就是:根据不同的url地址展示不同的页面内容1.1后端路由以前咱们接触比较多的后端路由,当改变url地址时,浏览器会向服务器发送请求,服务器根据这个url,返回不同的资源内容后端路由的特点就是前端每次跳转到不同url地址,都会重新访
华雁智科前端面试题因为奋斗超太帅啦前端笔试面试问题整理 javascript 开发语言 ecmascript
1.var变量的提升题目：vara=1functionfun(){console.log(b)varb=2}fun()console.log(a)正确输出结果：undefined、1答错了，给一个大嘴巴子，错误答案输出结果为：2,1此题主要考察var定义的变量，作用域提升的问题，相当于varaa=1functionfun(){varbconsole.log(b)b=2}fun()console.l
如何建设数据中台（五）——数据汇集—打破企业数据孤岛 weixin_47088026 学习记录和总结中台数据中台程序人生经验分享
数据汇集——打破企业数据孤岛要构建企业级数据中台，第一步就是将企业内部各个业务系统的数据实现互通互联，打破数据孤岛，主要通过数据汇聚和交换来实现。企业采集的数据可以是线上采集、线下数据采集、互联网数据采集、内部数据采集等。线上数据采集主要载体分为互联网和移动互联网两种，对应有系统平台、网页、H5、小程序、App等，可以采用前端或后端埋点方式采集数据。线下数据采集主要是通过硬件来采集，例如：WiFi
分布式锁和spring事务管理暴躁的鱼锁及事务分布式 spring java
最近开发一个小程序遇到一个需求需要实现分布式事务管理业务需求用户在使用小程序的过程中可以查看景点，对景点地区或者城市标记是否想去，那么需要统计一个地点被标记的人数，以及记录某个用户对某个地点是否标记为想去，用两个表存储数据，一个地点表记录改地点被标记的次数，一个用户意向表记录某个用户对某个地点是否标记为想去。由于可能有多个用户同时标记一个地点，每个用户在前端点击想去按钮之后，后台接收到请求，从数据
前端CSS面试常见题剑亦未配妥前端面试前端 css 面试
边界塌陷盒模型有两种：W3C盒模型和IE盒模型，区别在于宽度是否包含边框定义：同时给兄弟/父子盒模型设置上下边距，理论上边距值是两者之和，实际上不是注意：浮动和定位不会产生边界塌陷；只有块级元素垂直方向才会产生margin合并margin计算方案margin同为正负：取绝对值大的值一正一负：求和父子元素边界塌陷解决父元素可以通过调整padding处理；设置overflowhidden，触发BFC子
【JS】前端文件读取FileReader操作总结程序员-张师傅前端前端 javascript 开发语言
前端文件读取FileReader操作总结FileReader是JavaScript中的一个WebAPI，它允许web应用程序异步读取用户计算机上的文件（或原始数据缓冲区）的内容，例如读取文件以获取其内容，并在不将文件发送到服务器的情况下在客户端使用它。这对于处理图片、文本文件等非常有用，尤其是当你想要在用户界面中即时显示文件内容或进行文件预览时。创建FileReader对象首先，你需要创建一个Fi
【前端】vue 报错:The template root requires exactly one element 程序员-张师傅前端前端 vue.js javascript
【前端】vue报错:Thetemplaterootrequiresexactlyoneelement在Vue.js中，当你遇到错误“Thetemplaterootrequiresexactlyoneelement”时，这通常意味着你的Vue组件的模板（template）根节点不是单一的元素。Vue要求每个组件的模板必须有一个根元素来包裹所有的子元素。这个错误通常出现在以下几种情况：模板中有多个并行
从单体到微服务：FastAPI ‘挂载’子应用程序的转变黑金IT fastapi 微服务 fastapi 架构
在现代Web应用开发中，模块化架构是一种常见的设计模式，它有助于将大型应用程序分解为更小、更易于管理的部分。FastAPI，作为一个高性能的PythonWeb框架，提供了强大的支持来实现这种模块化设计。通过“挂载”子应用程序，我们可以为不同的功能区域（如前端接口、管理员接口和用户中心）创建独立的应用程序，并将它们整合到一个主应用程序中。本文将详细介绍如何在FastAPI中使用“挂载”子应用程序的方
创建一个完整的购物商城系统是一个复杂的项目，涉及前端（用户界面）、后端（服务器逻辑）、数据库等多个部分。由于篇幅限制，我无法在这里提供一个完整的系统代码，但我可以分别给出一些关键部分的示例代码，涵盖几 uthRaman 前端 ui 服务器
前端（HTML/CSS/JavaScript）grsyzp.cnHTML页面结构（index.html）html购物商城欢迎来到购物商城JavaScript（Ajax请求商品数据，app.js）javascriptdocument.addEventListener('DOMContentLoaded',function(){fetch('/api/products').then(response=
了解 UNPKG：前端开发者的包管理利器小于负无穷前端 javascript typescript css html5 node.js
在现代前端开发中，JavaScript包管理和模块化是至关重要的，而npm则是最流行的JavaScript包管理器之一。不过，随着前端项目复杂性的增加，有时候我们希望快速引入外部依赖，而无需本地安装和构建。此时，CDN（内容分发网络）成为了一种方便快捷的解决方案，而UNPKG就是这种方式中的佼佼者。什么是UNPKG？UNPKG是一个基于npm的内容分发网络（CDN），它允许开发者直接通过URL从n
前端three.js的Sprite模拟下雪动画效果 qq_35430208 three.js 前端 javascript 三维场景中下雪效果 threejs实现下雪效果
一、效果如图所示：二、原理同下雨一样三、完整代码：index.jsimport*asTHREEfrom'three';import{OrbitControls}from'three/addons/controls/OrbitControls.js';importmodelfrom'./model.js';//模型对象//场景constscene=newTHREE.Scene();scene.add
系列3：【深入】qiankun动态与按需加载子应用—像电影一样控制出现时机 rabbit_it qiankun学习前端框架前端阿里云
一、引言：为何需要动态加载在现代前端开发中，性能优化始终是一个关键问题。对于微前端架构而言，管理多个子应用带来了前所未有的灵活性，但也对资源的加载和使用效率提出了更高要求。假设你的微前端项目就像一场电影，而子应用是场景或演员。在不同的情节中，我们只需要特定的场景和演员出现，而不需要所有场景和演员一开始就站在舞台上等待。这时，动态加载和按需加载就成为了关键工具——让需要的内容在正确的时机上场，节省性
ODOO不同版本与平台选择 chouchengyin2080 c#操作系统运维
1.10.0vs11.0vs8.0截至2017年底，最新的ODOO发布版为ODOO11.0，但功能上有一定精简（去除财务模块，去除工作流支持），技术上变动较大（代码逐步迁移至Python3，前端框架改写得抽象）。所以如果是从生产使用的角度来讲，ODOO10.0是当前最好选择，因为其更稳定，第三方模块也更多更全面。而如果是ODOO技术爱好从业者，则逐步迁移至ODOO11.0也有必要，因为其底层技术架
Nuxt Kit 自动导入功能：高效管理你的模块和组合式函数 qcidyu 好用的工具集合代码效率前端技巧 Vue开发组合式函数模块管理自动导入 Nuxt Kit
title:NuxtKit自动导入功能：高效管理你的模块和组合式函数date:2024/9/14updated:2024/9/14author:cmdragonexcerpt:通过使用NuxtKit的自动导入功能，您可以更高效地管理和使用公共函数、组合式函数和VueAPI。无论是单个导入、目录导入还是从第三方模块导入，您都可以通过简单的API调用轻松实现。categories:前端开发tags:N
解读Servlet原理篇二---GenericServlet与HttpServlet 周凡杨 java HttpServlet 源理 GenericService 源码
在上一篇《解读Servlet原理篇一》中提到，要实现javax.servlet.Servlet接口（即写自己的Servlet应用），你可以写一个继承自javax.servlet.GenericServletr的generic Servlet ，也可以写一个继承自java.servlet.http.HttpServlet的HTTP Servlet（这就是为什么我们自定义的Servlet通常是exte
MySQL性能优化 bijian1013 数据库 mysql
性能优化是通过某些有效的方法来提高MySQL的运行速度，减少占用的磁盘空间。性能优化包含很多方面，例如优化查询速度，优化更新速度和优化MySQL服务器等。本文介绍方法的主要有： a.优化查询 b.优化数据库结构
ThreadPool定时重试 dai_lm java ThreadPool thread timer timertask
项目需要当某事件触发时，执行http请求任务，失败时需要有重试机制，并根据失败次数的增加，重试间隔也相应增加，任务可能并发。由于是耗时任务，首先考虑的就是用线程来实现，并且为了节约资源，因而选择线程池。为了解决不定间隔的重试，选择Timer和TimerTask来完成 package threadpool; public class ThreadPoolTest {
Oracle 查看数据库的连接情况周凡杨 sql oracle 连接
首先要说的是，不同版本数据库提供的系统表会有不同，你可以根据数据字典查看该版本数据库所提供的表。 select * from dict where table_name like '%SESSION%'; 就可以查出一些表，然后根据这些表就可以获得会话信息 select sid,serial#,status,username,schemaname,osuser,terminal,ma
类的继承朱辉辉33 java
类的继承可以提高代码的重用行，减少冗余代码；还能提高代码的扩展性。Java继承的关键字是extends 格式:public class 类名（子类）extends 类名（父类）{ } 子类可以继承到父类所有的属性和普通方法，但不能继承构造方法。且子类可以直接使用父类的public和 protected属性，但要使用private属性仍需通过调用。子类的方法可以重写，但必须和父类的返回值类
android 悬浮窗特效肆无忌惮_ android
最近在开发项目的时候需要做一个悬浮层的动画，类似于支付宝掉钱动画。但是区别在于，需求是浮出一个窗口，之后边缩放边位移至屏幕右下角标签处。效果图如下：一开始考虑用自定义View来做。后来发现开线程让其移动很卡，ListView+动画也没法精确定位到目标点。后来想利用Dialog的dismiss动画来完成。自定义一个Dialog后，在styl
hadoop伪分布式搭建林鹤霄 hadoop
要修改4个文件 1: vim hadoop-env.sh 第九行 2: vim core-site.xml <configuration> &n
gdb调试命令 aigo gdb
原文：http://blog.csdn.net/hanchaoman/article/details/5517362 一、GDB常用命令简介 r run 运行.程序还没有运行前使用 c cuntinue
Socket编程的HelloWorld实例 alleni123 socket
public class Client { public static void main(String[] args) { Client c=new Client(); c.receiveMessage(); } public void receiveMessage(){ Socket s=null; BufferedRea
线程同步和异步百合不是茶线程同步异步
多线程和同步 : 如进程、线程同步，可理解为进程或线程A和B一块配合，A执行到一定程度时要依靠B的某个结果，于是停下来，示意B运行；B依言执行，再将结果给A；A再继续操作。所谓同步，就是在发出一个功能调用时，在没有得到结果之前，该调用就不返回，同时其它线程也不能调用这个方法多线程和异步:多线程可以做不同的事情,涉及到线程通知 &
JSP中文乱码分析 bijian1013 java jsp 中文乱码
在JSP的开发过程中，经常出现中文乱码的问题。首先了解一下Java中文问题的由来： Java的内核和class文件是基于unicode的，这使Java程序具有良好的跨平台性，但也带来了一些中文乱码问题的麻烦。原因主要有两方面，
js实现页面跳转重定向的几种方式 bijian1013 JavaScript 重定向
js实现页面跳转重定向有如下几种方式：一.window.location.href <script language="javascript"type="text/javascript"> window.location.href="http://www.baidu.c
【Struts2三】Struts2 Action转发类型 bit1129 struts2
在【Struts2一】 Struts Hello World http://bit1129.iteye.com/blog/2109365中配置了一个简单的Action，配置如下 <!DOCTYPE struts PUBLIC "-//Apache Software Foundation//DTD Struts Configurat
【HBase十一】Java API操作HBase bit1129 hbase
Admin类的主要方法注释： 1. 创建表 /** * Creates a new table. Synchronous operation. * * @param desc table descriptor for table * @throws IllegalArgumentException if the table name is res
nginx gzip ronin47 nginx gzip
Nginx GZip 压缩 Nginx GZip 模块文档详见：http://wiki.nginx.org/HttpGzipModule 常用配置片段如下： gzip on; gzip_comp_level 2; # 压缩比例，比例越大，压缩时间越长。默认是1 gzip_types text/css text/javascript; # 哪些文件可以被压缩 gzip_disable &q
java-7.微软亚院之编程判断俩个链表是否相交给出俩个单向链表的头指针，比如 h1 ， h2 ，判断这俩个链表是否相交 bylijinnan java
public class LinkListTest { /** * we deal with two main missions: * * A. * 1.we create two joined-List(both have no loop) * 2.whether list1 and list2 join * 3.print the join
Spring源码学习-JdbcTemplate batchUpdate批量操作 bylijinnan java spring
Spring JdbcTemplate的batch操作最后还是利用了JDBC提供的方法，Spring只是做了一下改造和封装 JDBC的batch操作： String sql = "INSERT INTO CUSTOMER " + "(CUST_ID, NAME, AGE) VALUES (?, ?, ?)";
[JWFD开源工作流]大规模拓扑矩阵存储结构最新进展 comsci 工作流
生成和创建类已经完成,构造一个100万个元素的矩阵模型,存储空间只有11M大,请大家参考我在博客园上面的文档"构造下一代工作流存储结构的尝试",更加相信的设计和代码将陆续推出......... 竞争对手的能力也很强.......,我相信..你们一定能够先于我们推出大规模拓扑扫描和分析系统的....
base64编码和url编码 cuityang base64 url
import java.io.BufferedReader; import java.io.IOException; import java.io.InputStreamReader; import java.io.PrintWriter; import java.io.StringWriter; import java.io.UnsupportedEncodingException;
web应用集群Session保持 dalan_123 session
关于使用 memcached 或redis 存储 session ，以及使用 terracotta 服务器共享。建议使用 redis，不仅仅因为它可以将缓存的内容持久化，还因为它支持的单个对象比较大，而且数据类型丰富，不只是缓存 session，还可以做其他用途，一举几得啊。1、使用 filter 方法存储这种方法比较推荐，因为它的服务器使用范围比较多，不仅限于tomcat ，而且实现的原理比较简
Yii 框架里数据库操作详解-[增加、查询、更新、删除的方法 'AR模式'] dcj3sjt126com 数据库
public function getMinLimit () { $sql = "..."; $result = yii::app()->db->createCo
solr StatsComponent（聚合统计） eksliang solr聚合查询 solr stats
StatsComponent 转载请出自出处：http://eksliang.iteye.com/blog/2169134 http://eksliang.iteye.com/ 一、概述 Solr可以利用StatsComponent 实现数据库的聚合统计查询，也就是min、max、avg、count、sum的功能二、参数
百度一道面试题 greemranqq 位运算百度面试寻找奇数算法 bitmap 算法
那天看朋友提了一个百度面试的题目：怎么找出{1,1,2,3,3,4,4,4,5,5,5,5} 找出出现次数为奇数的数字. 我这里复制的是原话，当然顺序是不一定的，很多拿到题目第一反应就是用map,当然可以解决，但是效率不高。还有人觉得应该用算法xxx,我是没想到用啥算法好...！还有觉得应该先排序... 还有觉
Spring之在开发中使用SpringJDBC ihuning spring
在实际开发中使用SpringJDBC有两种方式： 1. 在Dao中添加属性JdbcTemplate并用Spring注入； JdbcTemplate类被设计成为线程安全的，所以可以在IOC 容器中声明它的单个实例，并将这个实例注入到所有的 DAO 实例中。JdbcTemplate也利用了Java 1.5 的特定(自动装箱，泛型，可变长度
JSON API 1.0 核心开发者自述 | 你所不知道的那些技术细节 justjavac json
2013年5月，Yehuda Katz 完成了JSON API(英文，中文) 技术规范的初稿。事情就发生在 RailsConf 之后，在那次会议上他和 Steve Klabnik 就 JSON 雏形的技术细节相聊甚欢。在沟通单一 Rails 服务器库—— ActiveModel::Serializers 和单一 JavaScript 客户端库——&
网站项目建设流程概述 macroli 工作
一.概念网站项目管理就是根据特定的规范、在预算范围内、按时完成的网站开发任务。二.需求分析项目立项　　我们接到客户的业务咨询，经过双方不断的接洽和了解，并通过基本的可行性讨论够，初步达成制作协议，这时就需要将项目立项。较好的做法是成立一个专门的项目小组，小组成员包括：项目经理，网页设计，程序员，测试员，编辑/文档等必须人员。项目实行项目经理制。客户的需求说明书　　第一步是需
AngularJs 三目运算表达式判断 qiaolevip 每天进步一点点学习永无止境众观千象 AngularJS
事件回顾：由于需要修改同一个模板，里面包含2个不同的内容，第一个里面使用的时间差和第二个里面名称不一样，其他过滤器，内容都大同小异。希望杜绝If这样比较傻的来判断if-show or not，继续追究其源码。 var b = "{{", a = "}}"; this.startSymbol = function(a) {
Spark算子：统计RDD分区中的元素及数量 superlxw1234 spark spark算子 Spark RDD分区元素
关键字：Spark算子、Spark RDD分区、Spark RDD分区元素数量 Spark RDD是被分区的，在生成RDD时候，一般可以指定分区的数量，如果不指定分区数量，当RDD从集合创建时候，则默认为该程序所分配到的资源的CPU核数，如果是从HDFS文件创建，默认为文件的Block数。可以利用RDD的mapPartitionsWithInd
Spring 3.2.x将于2016年12月31日停止支持 wiselyman Spring 3
Spring 团队公布在2016年12月31日停止对Spring Framework 3.2.x（包含tomcat 6.x）的支持。在此之前spring团队将持续发布3.2.x的维护版本。请大家及时准备及时升级到Spring
fis纯前端解决方案fis-pure zccst JavaScript
作者：zccst FIS通过插件扩展可以完美的支持模块化的前端开发方案，我们通过FIS的二次封装能力，封装了一个功能完备的纯前端模块化方案pure。 1，fis-pure的安装 $ fis install -g fis-pure $ pure -v 0.1.4 2，下载demo到本地 git clone https://github.com/hefangshi/f

按字母分类： A B C D E F G H I J K L M N O P Q R S T U V W X Y Z 其他

（CSS2） `table-cell`指定对象作为表格单元格。类同于html标签
（CSS2） `table-row`指定对象作为表格行。类同于html标签