是发财不是旺财
是发财不是旺财

字节跳动青训营--前端day2

文章目录

  • 前言
  • 一、css
    • 1. css的组成
    • 2. css三种使用方式
    • 3.css的工作方式
  • 二、 css选择器Selector
    • 1. 选择元素的方式
    • 2. 伪类（pseudo-classes）
      • 2.1 状态伪类
      • 2.1 结构伪类
    • 3.通过组合选择元素
      • 3.1 直接组合
      • 3.2 元素组合的拓展
    • 4. 选择器的特异度（Specificity）
    • 5. 样式覆盖
    • 6. 样式继承
      • 6.1 显式继承：
      • 6.2 初始值
    • 7. css求值过程
  • 三、css文档流（NormalFlow）
    • 1. css行级 & 块级
    • 2. diaplay 属性
    • 3. 行级排版上下文
      • 3.1 IFC 内的排版规则：
    • 4. 块级排版上下文
      • 4.1会创建一个BFC的容器
      • 4.2 BFC内的排版规则
  • 四、布局（Layout）
    • 1.布局相关技术
    • 2.常规盒模型
      • 2.1 width
      • 2.2 heigth
      • 2.3 padding
      • 2.4 boeder
      • 2.5 margin
    • 3. Flex Box
      • 3.1 他可以控制盒子的：
      • 3.2 Flexibility
    • 4. Grid
    • 5. float
    • 6. position属性
      • 6.1 position：relative
      • 6.2 position：absolute
  • 五、颜色
    • 1. RGB
    • 2. HSL
    • 3. 透明度

前言

仅以此文章记录学习历程

一、css

Cascading Style Sheets（用来定义页面元素的样式）

  • 设置字体和颜色
  • 设置位置和大小
  • 添加动画效果

1. css的组成

字节跳动青训营--前端day2_第1张图片

2. css三种使用方式

通常建议时用外链和嵌入式（主要是样式分离）
字节跳动青训营--前端day2_第2张图片

3.css的工作方式

字节跳动青训营--前端day2_第3张图片

二、 css选择器Selector

作用：找出页面中的元素，以便给他们设置样式

1. 选择元素的方式

  • 按照标签名（h1，div，p…）、类名class（.）或者id（#）
  • 按照属性
  • 按照DOM树中的位置

字节跳动青训营--前端day2_第4张图片
利用通配符匹配选择
字节跳动青训营--前端day2_第5张图片

2. 伪类（pseudo-classes）

定义：伪类是添加到选择器的关键字，用于指定所选元素的特殊状态

两种伪类类型：

  • 状态伪类
  • 结构性伪类

2.1 状态伪类

<style>
/*默认状态*/
a:link{
    color:black;
}
/*点击后状态*/
a:visited {
    color:gray;
}
/*鼠标悬浮状态*/
a:hover{
    color: red;
}
/*输入框边框高亮样式*/
:focus{
    outline: 2px solid orange;
}
</style>
<body>
<a href="http://baidu.com">百度</a>
<label>
  <input type="text">
</label>

2.1 结构伪类

<style>
/*默认状态*/
li{
    list-style-position: inside;
    border-bottom: 1px solid;
    padding: .5em;
}
/*选中第一个*/
li:first-child{
    color: #ff99cc;
}
/*选中最后一个*/
li:last-child{
    border-bottom: none;
}
</style>
<body>
<ol>
  <li>泰坦尼克号</li>
  <li>星球大战</li>
  <li>阿凡达</li>
  <li>复仇者联盟</li>
  <li>速度与激情8</li>
</ol>
</body>

字节跳动青训营--前端day2_第6张图片

3.通过组合选择元素

3.1 直接组合

<style>
/*默认状态*/
.error {
    color: red;
}
/*通过类名和标签组合*/
input.error {
    border-color: red;
}
</style>
<body>
<label>
  用户名
  <input class="error" value="aa">
</label>
<span class="error">
  最少3个字符
</span>
</body>

字节跳动青训营--前端day2_第7张图片

3.2 元素组合的拓展

字节跳动青训营--前端day2_第8张图片

4. 选择器的特异度（Specificity）

字节跳动青训营--前端day2_第9张图片

5. 样式覆盖

字节跳动青训营--前端day2_第10张图片

6. 样式继承

不可继承属性：width，hiegth等
可继承属性：color，font-size等

字节跳动青训营--前端day2_第11张图片

6.1 显式继承：

通过通配符 * 和 inherit 关键字使不可继承元素能够继承

inherit的定义和用法：

  • inherit 关键字指定一个属性应从父元素继承它的值
  • inherit 关键字可用于任何 HTML 元素上的任何 CSS 属性

字节跳动青训营--前端day2_第12张图片

6.2 初始值

CSS中，每个属性都有一个初始值

  • background-color 的初始值为 transparent
  • margin-left 的初始值为 0

可以使用initial 关键字显式重置为初始值

  • background-color: initial

7. css求值过程

字节跳动青训营--前端day2_第13张图片

三、css文档流（NormalFlow）

  • 根元素、浮动和绝对定位的元素会脱离常规流
  • 其它元素都在常规流之内 (in-flow)
  • 常规流中的盒子，在某种排版上下文中参与布局

1. css行级 & 块级

Block Level Box Inline Level Box
不和其它盒子并列摆放 和其它行级盒子一起放在一行或拆开成多行
适用所有的盒模型属性 盒模型中的width、height不适用
块级元素 行级元素
生成块级盒子 生成行级盒子；内容分散在多个行盒(line box) 中
body、article、div、main、section、h1-6、p、ul、li等 span、em: strong、cite、code 等
display: block display: inline

2. diaplay 属性

block inline inline - block none
块级盒子 行级盒子 行内块级盒子；本身是行级，可以放在行盒中;可以设置宽高;作为一个整体不会被拆散成多行 排版时完全被忽略

3. 行级排版上下文

  • Inline Formatting Context (IFC)
  • 只包含行级盒子的容器会创建一个IFC

3.1 IFC 内的排版规则：

  • 盒子在一行内水平摆放
  • 一行放不下时，换行显示
  • text-align 决定一行内盒子的水平对齐
  • vertical-align 决定一个盒子在行内的垂直对齐
  • 避开浮动(float)元素

4. 块级排版上下文

Block Formatting Context (BFC)

4.1会创建一个BFC的容器

  • 根元素
  • 浮动、绝对定位、inline-block
  • Flex子项和Grid子项
  • overflow 不是 visible 的块盒
  • display: flow-root;

4.2 BFC内的排版规则

  • 盒子从上到下摆放
  • 垂直 margin 合并
  • BFA内盒子的 margin 不会与外面的合并
  • BFC 不会和浮动元素重叠

四、布局（Layout）

作用：确定内容的大小和位置的算法

依据元素、容器、兄弟节点和内容等信息来计算

1.布局相关技术

常规流也称为文档流
字节跳动青训营--前端day2_第14张图片

2.常规盒模型

字节跳动青训营--前端day2_第15张图片

2.1 width

  • 指定 content box 宽度
  • 取值为长度、百分数、auto
  • auto 由浏览器根据其它属性确定
  • 百分数相对于容器的 content box 宽度

2.2 heigth

  • 指定 content box 宽度
  • 取值为长度、百分数、auto
  • auto 取值由内容计算得来
  • 百分数相对于容器的 content box 高度
  • 容器有指定的高度时，百分数才生效

2.3 padding

  • 指定元素四个方向的内边距
  • 百分数相对于容器宽度

padding定义的几种方式

  1. padding：10px（四个边内边距均为10px）
  2. padding：10px 20px（上下内边距为10px，左右内边距为20px）
  3. padding：10px 20px 30px 40px（内边距分别为上10px 右20px 下30px 左40px）

2.4 boeder

字节跳动青训营--前端day2_第16张图片

2.5 margin

  • 指定元素四个方向的外边距
  • 取值可以是长度、百分数、auto
  • 百分数相对于容器宽度

边距塌陷：
当有两个盒子存在，并且都有边距时，会取两者中最大的一个而不是相加，如：
a下边距为100px，b上边距为120px 他两者的间距为120px

3. Flex Box

一种新的排版上下文

3.1 他可以控制盒子的：

  • 摆放的流向( ↑ ↓ ← → )
  • 摆放顺序
  • 盒子宽度和高度水平和垂直方向的对齐
  • 是否允许折行

3.2 Flexibility

  • 可以设置子项的弹性：当容器有剩余空间时，会伸展;容器空间不够时，会收缩。
  • flex-grow 有剩余空间时的伸展能力
  • lex-shrink 容器空间不足时收缩的能力
  • flex-basis 没有伸展或收缩时的基础长度

字节跳动青训营--前端day2_第17张图片

4. Grid

  • display：grid使元素生成一个块级的Grid容器

  • display: grid 使元素生成一个块级的 Grid 容器
    使用grid-template 相关属性将容器划分为网格

  • 设置每一个子项占哪些行/列

5. float

  • 通过改变子元素的float：left/right值来让元素布局，需要时可以在子元素上加上width
  • 当子元素浮动之后会造成父元素塌陷的情况，需要在父元素上加上clearfix：after来清除浮动

6. position属性

static relative absolute fied stick
默认值，非定位元素 相对自身原本位置偏移，不脱离文档流 绝对定位，相对非 static 祖先元素定位 相对于视口绝对定位 一些时候是relative定位（定位基点是自身默认位置），另一些时候自动变成fixed定位（定位基点是视口）

6.1 position：relative

字节跳动青训营--前端day2_第18张图片

6.2 position：absolute

字节跳动青训营--前端day2_第19张图片

五、颜色

1. RGB

初始值都为0，最大值则为255
即：rgb（000,000,000）–> rgb(255,255,255)

字节跳动青训营--前端day2_第20张图片

2. HSL

场景：当需要把一个颜色变亮或者变暗时，可以通过调整Lightness实现
字节跳动青训营--前端day2_第21张图片
字节跳动青训营--前端day2_第22张图片

3. 透明度

字节跳动青训营--前端day2_第23张图片

你可能感兴趣的:(字节跳动青训营--前端,前端,javascript,css,字节跳动,字节跳动青训营)

  • Long类型前后端数据不一致 igotyback 前端
    响应给前端的数据浏览器控制台中response中看到的Long类型的数据是正常的到前端数据不一致前后端数据类型不匹配是一个常见问题，尤其是当后端使用Java的Long类型（64位）与前端JavaScript的Number类型（最大安全整数为2^53-1，即16位）进行数据交互时，很容易出现精度丢失的问题。这是因为JavaScript中的Number类型无法安全地表示超过16位的整数。为了解决这个问
  • 绘本讲师训练营【24期】8/21阅读原创《独生小孩》 1784e22615e0
    24016-孟娟《独生小孩》图片发自App今天我想分享一个蛮特别的绘本，讲的是一个特殊的群体，我也是属于这个群体，80后的独生小孩。这是一本中国绘本，作者郭婧，也是一个80厚。全书一百多页，均为铅笔绘制，虽然为黑白色调，但并不显得沉闷。全书没有文字，犹如“默片”，但并不影响读者对该作品的理解，反而显得神秘，梦幻，給读者留下想象的空间。作者在前蝴蝶页这样写到：“我更希望父母和孩子一起分享这本书，使他
  • 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前端期末大作业javascripthtmlcss旅游风景
    ⛵源码获取文末联系✈Web前端开发技术描述网页设计题材，DIV+CSS布局制作,HTML+CSS网页设计期末课程大作业|游景点介绍|旅游风景区|家乡介绍|等网站的设计与制作|HTML期末大学生网页设计作业，Web大学生网页HTML：结构CSS：样式在操作方面上运用了html5和css3，采用了div+css结构、表单、超链接、浮动、绝对定位、相对定位、字体样式、引用视频等基础知识JavaScrip
  • HTML网页设计制作大作业（div+css） 云南我的家乡旅游景点 带文字滚动 二挡起步 web前端期末大作业web设计网页规划与设计htmlcssjavascriptdreamweaver前端
    Web前端开发技术描述网页设计题材，DIV+CSS布局制作,HTML+CSS网页设计期末课程大作业游景点介绍|旅游风景区|家乡介绍|等网站的设计与制作HTML期末大学生网页设计作业HTML：结构CSS：样式在操作方面上运用了html5和css3，采用了div+css结构、表单、超链接、浮动、绝对定位、相对定位、字体样式、引用视频等基础知识JavaScript：做与用户的交互行为文章目录前端学习路线
  • webpack图片等资源的处理 dmengmeng
    需要的loaderfile-loader（让我们可以引入这些资源文件）url-loader（其实是file-loader的二次封装）img-loader（处理图片所需要的）在没有使用任何处理图片的loader之前，比如说css中用到了背景图片，那么最后打包会报错的，因为他没办法处理图片。其实你只想能够使用图片的话。只加一个file-loader就可以，打开网页能准确看到图片。{test:/\.(p
  • node.js学习 小猿L node.jsnode.js学习vim
    node.js学习实操及笔记温故node.js，node.js学习实操过程及笔记~node.js学习视频node.js官网node.js中文网实操笔记githubcsdn笔记为什么学node.js可以让别人访问我们编写的网页为后续的框架学习打下基础，三大框架vuereactangular离不开node.jsnode.js是什么官网：node.js是一个开源的、跨平台的运行JavaScript的运行
  • 赠晶晶 在平凡中重新出发
    逐伊衫望伊泪伊人雨中别离去莫再想莫再追莫要寸断再回味十六年六十年弹指挥间青鬓颜且浅行且珍惜待到山花烂漫时图片发自App
  • 展现思维导图魅力，不断挖掘人生宝藏 思维导图讲师Mandy
    第13期最强思维导图训练营已经结束一周了，但是我依旧是感觉所有学员还在努力的学习，这些学员中有教师、学生、白领、公务员、宝妈等等，只要你努力，只要你想改变自己，任何行业，任何岗位都可以参与进来，28天足以让你见成效，在这28天中，我们的学员不仅仅是收获了一枚毕业证，最重要的是让自己的思维方式得到升级，今天的你为自己投资，明天的你就会感谢你今天的付出，我们来听一听来自13期最强思维导图训练营优秀学员
  • 渝婧感恩日记第68天 梁渝婧lydia
    1.哇！我真是太幸福啦！感恩奇迹感恩训练营毕业典礼，让我能共振到同学们的喜悦和能量，感谢！感谢！感谢！2.哇！我真是太幸福啦！感恩每天早起，运动3公里！这个星期又做到连续三天，不间断！感谢亲爱的渝婧！你真的是非常的棒！加油，继续坚持！感谢！感谢！感谢！3.哇！我真是太幸福啦！感恩曾正波班主任给我们分享的艾宾浩斯的记忆曲线255学习法，让我蠢蠢欲试，感谢！感谢！感谢！4.哇！我真是太幸福啦！感恩胜利
  • 《太虚游》第六十二章。玄牝之威。 古楼臭道士
    “好好好，流云这孩子深得我心，想必长爻知道是你的话定然会惊喜不已的。”白玄牝听得风流云应了下来，脸色慈和，伸手在他头顶轻轻抚了抚，如同抚在怀中九尾小狐一样自然，极其温柔。身后的四位青丘长老同时一怔，嘴角微动，似要开口劝阻。风流云只感到一道霞光瑞气如有实质一般顺着头顶百会大穴直沉在下丹田内，随后这股气息又逐渐凝聚，似乎给自己吃了什么东西一般。啊喔不好，这祖奶奶该不会是看中我这肉身，像人魔一样，要给她
  • 古风原创 慕白漓
    【江南月】词:慕白漓曲:《庐州月》西厢一语惊醒梦中月光佳人为何素眉不添淡妆抚帕刺秀绵缎一缕清香南望飞雁又归西方城外又闻秋稻泛黄成殇细雨纷飞里春又归乡离家而去的你是否迷失彷徨一句诺言永记心上家书一封道尽咏平常青草才青暮色又飘扬等也难当回又何妨古拙的山水今又细水流长江南月光照耀湖旁如今的情也已不在心上十载月晃容颜覆黄问一句你今在他乡何方江南月光苏州城隍孤单的你可还记得夜凉西厢人忘你是否还在独唱却唱不出
  • springboot+vue项目实战一-创建SpringBoot简单项目 苹果酱0567 面试题汇总与解析springboot后端java中间件开发语言
    这段时间抽空给女朋友搭建一个个人博客，想着记录一下建站的过程，就当做笔记吧。虽然复制zjblog只要一个小时就可以搞定一个网站，或者用cms系统，三四个小时就可以做出一个前后台都有的网站，而且想做成啥样也都行。但是就是要从新做，自己做的意义不一样，更何况，俺就是专门干这个的，嘿嘿嘿要做一个网站，而且从零开始，首先呢就是技术选型了，经过一番思量决定选择-SpringBoot做后端，前端使用Vue做一
  • JavaScript 中，深拷贝（Deep Copy）和浅拷贝（Shallow Copy） 跳房子的前端 前端面试javascript开发语言ecmascript
    在JavaScript中，深拷贝（DeepCopy）和浅拷贝（ShallowCopy）是用于复制对象或数组的两种不同方法。了解它们的区别和应用场景对于避免潜在的bugs和高效地处理数据非常重要。以下是对深拷贝和浅拷贝的详细解释，包括它们的概念、用途、优缺点以及实现方式。1.浅拷贝（ShallowCopy）概念定义：浅拷贝是指创建一个新的对象或数组，其中包含了原对象或数组的基本数据类型的值和对引用数
  • “元宇宙”带不动Meta？基本业务已“后院起火”！小扎举步维艰！ 链科天下
    由于宏观经济疲软、市场动荡，“放缓”已经成为美国科技股的主线逻辑，曾风光无限的科技巨头Meta也开始一路下行、举步维艰。据彭博社报道，Meta已宣布计划裁员并重组团队以削减预算，这是该公司2004年成立以来首次大幅削减预算。此次裁员或受到业绩低迷的影响，Q2财报显示Meta业绩远不及预期，上市以来营收同比出现首次下滑，净利连续三季度下降。扎克伯格表示，“希望经济能够稳定下来，但从目前的情况来看并非
  • 放松的一天 4da9b7687fa0
    20190325总结起床07:20图片发自App睡觉:23:00天气:晴今日任务清单学习·信息·阅读•水滴阅读Day40Alice’sAdventuresinWonderlandChapter6.2图片发自App•BBC跟读训练营Day24图片发自App图片发自App图片发自App•潘多拉口语训练营Day6Wow.Whatabigboy!•文化知识学习今日无•阅读时间地狱健康·饮食·锻炼•饮食目标
  • 博客网站制作教程 2401_85194651 javamaven
    首先就是技术框架：后端：Java+SpringBoot数据库：MySQL前端：Vue.js数据库连接：JPA(JavaPersistenceAPI)1.项目结构blog-app/├──backend/│├──src/main/java/com/example/blogapp/││├──BlogApplication.java││├──config/│││└──DatabaseConfig.java
  • 人到中年的5大恐惧 不想独白的独白
    这一段时间闭关在家，心里越来越没有底。全球疫情，全国疫情，一直在关心和自我调试中。但是，好像还是对自己的未来充满了无所适从。不想去做什么，也没有激情和兴趣去开始什么。人生过半，还有什么可以逆袭或改变的机会呢。不知道做什么的时候，去追剧，做美食，教育孩子，锻炼，花钱进什么什么读书训练营，打卡训练营，微信群，各种分享和共同体的群。但是还是没有任何的起色。就这样了吗。中午并不困，但是到了12点，还是习惯
  • 第二十五辑-安尘乱物 wallowed
    1、《劳犁》作犁耕土解炎林，劳碌秋丰四两金。挥汗佝偻衣褴褛，卖得如洗衬寒贫。春种南山锄造力，傍老倚仗体民心。颗籽无收黍稷尘，农田饥劬苦疫病。牛羊冷炙食蚕桑，丁壮耒耜宿闲勤。归来未已开红豆，篱落花稀麦苗青。米贵征徭生柴火，荒草凄清渐鸡鸣。谷雨时节方期许，择日又是复曾经。2、《忘言》久别似相识，对酒客长安。嘘唏一仗夜，临行却忘言。江雪空投岸，梨花淡云烟。若问有缘人，相窥两不厌。莫作酒魂归，窗台结生寒。
  • 组诗·三国群英颂（周瑜、马超、贾诩、赵云） 颍川荀清
    念奴娇·怀周郎矶头万仞、若关情，仍叹当年英物！一揽长江，龙流怒，化作孙吴阵壁。浪里船城，铁锁平川，袖挽千堆雪。烈胆豪情，斗牛惊认奇杰！但看戎马余生，纵横万里，正英姿勃发。宏图霸业弹指间，惟见涛生云灭。苍天轻狂，妒意猖作，帅将难华发。难忆郎顾，青史相伴别月。古体·西凉天将军大漠狂烟起，孑然佩青锋。神威震羌月，锦袍曜汉空。终囚蜀山险，瘴疠掩长虹。天地一孤啸，匹马又西风。水调歌头·文和乱武山水应将残，清
  • JavaScript `Map` 和 `WeakMap`详细解释 跳房子的前端 JavaScript原生方法javascript前端开发语言
    在JavaScript中，Map和WeakMap都是用于存储键值对的数据结构，但它们有一些关键的不同之处。MapMap是一种可以存储任意类型的键值对的集合。它保持了键值对的插入顺序，并且可以通过键快速查找对应的值。Map提供了一些非常有用的方法和属性来操作这些数据对：set(key,value):将一个键值对添加到Map中。如果键已经存在，则更新其对应的值。get(key):获取指定键的值。如果键
  • 最简单将静态网页挂载到服务器上(不用nginx) 全能全知者 服务器nginx运维前端html笔记
    最简单将静态网页挂载到服务器上(不用nginx)如果随便弄个静态网页挂在服务器都要用nignx就太麻烦了，所以直接使用Apache来搭建一些简单前端静态网页会相对方便很多检查Web服务器服务状态：sudosystemctlstatushttpd#ApacheWeb服务器如果发现没有安装web服务器：安装Apache：sudoyuminstallhttpd启动Apache：sudosystemctl
  • 补充元象二面 Redstone Monstrosity 前端面试
    1.请尽可能详细地说明，防抖和节流的区别，应用场景？你的回答中不要写出示例代码。防抖（Debounce）和节流（Throttle）是两种常用的前端性能优化技术，它们的主要区别在于如何处理高频事件的触发。以下是防抖和节流的区别和应用场景的详细说明：防抖和节流的定义防抖：在一段时间内，多次执行变为只执行最后一次。防抖的原理是，当事件被触发后，设置一个延迟定时器。如果在这个延迟时间内事件再次被触发，则重
  • 微信小程序开发注意事项 jun778895 微信小程序小程序
    微信小程序开发是一个融合了前端开发、用户体验设计、后端服务（可选）以及微信小程序平台特性的综合性项目。这里，我将详细介绍一个典型的小程序开发项目的全过程，包括项目规划、设计、开发、测试及部署上线等各个环节，并尽量使内容达到或超过2000字的要求。一、项目规划1.1项目背景与目标假设我们要开发一个名为“智慧校园助手”的微信小程序，旨在为学生提供一站式校园生活服务，包括课程表查询、图书馆座位预约、食堂
  • 切换淘宝最新npm镜像源是 hai40587 npm前端node.js
    切换淘宝最新npm镜像源是一个相对简单的过程，但首先需要明确当前淘宝npm镜像源的状态和最新的镜像地址。由于网络环境和服务更新，镜像源的具体地址可能会发生变化，因此，我将基于当前可获取的信息，提供一个通用的切换步骤，并附上最新的镜像地址（截至回答时）。一、了解npm镜像源npm（NodePackageManager）是JavaScript的包管理器，用于安装、更新和管理项目依赖。由于npm官方仓库
  • #跟宇彤老师成为声音万人迷#第十季打卡营第二十一天# 穆希乐
    今天是这季打卡营的最后一天，今天的打卡是用心诵读“初心”！很有意义的俩个字，但函给了每一位来练声的伙伴们最初的想法，让我也想起了我来练声的初心:就是想让自己的声音听起来有亲和力。从每日的基本功练习、到喜怒哀乐的绕口令在到各种的配音秀，最后俩天是用心的朗读等等，也是各种的第一次，想来有的伙伴们也和我一样是各种的第一次，这些第一次带着新鲜、刺激、更多的是激动与感恩！激动的是伙伴们在愉快的环境中每天开心
  • 字节二面 Redstone Monstrosity 前端面试
    1.假设你是正在面试前端开发工程师的候选人，面试官让你详细说出你上一段实习过程的收获和感悟。在上一段实习过程中，我获得了宝贵的实践经验和深刻的行业洞察，以下是我的主要收获和感悟：一、专业技能提升框架应用熟练度：通过实际项目，我深入掌握了React、Vue等前端框架的使用，不仅提升了编码效率，还学会了如何根据项目需求选择合适的框架。问题解决能力：在实习期间，我遇到了许多预料之外的技术难题。通过查阅文
  • [Swift]LeetCode943. 最短超级串 | Find the Shortest Superstring 黄小二哥 swift
    ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★➤微信公众号：山青咏芝（shanqingyongzhi）➤博客园地址：山青咏芝（https://www.cnblogs.com/strengthen/）➤GitHub地址：https://github.com/strengthen/LeetCode➤原文地址：https://www.cnblogs.com/streng
  • [Swift]LeetCode767. 重构字符串 | Reorganize String weixin_30591551 swiftruntime
    ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★➤微信公众号：山青咏芝（shanqingyongzhi）➤博客园地址：山青咏芝（https://www.cnblogs.com/strengthen/）➤GitHub地址：https://github.com/strengthen/LeetCode➤原文地址：https://www.cnblogs.com/streng
  • ViewController添加button按钮解析。（翻译） 张亚雄 c
    <div class="it610-blog-content-contain" style="font-size: 14px"></div>//  ViewController.m //  Reservation software // //  Created by 张亚雄 on 15/6/2.
  • mongoDB 简单的增删改查 开窍的石头 mongodb
       在上一篇文章中我们已经讲了mongodb怎么安装和数据库/表的创建。在这里我们讲mongoDB的数据库操作       在mongo中对于不存在的表当你用db.表名 他会自动统计 下边用到的user是表明，db代表的是数据库       添加(insert):
  • log4j配置 0624chenhong log4j
    1) 新建java项目 2) 导入jar包，项目右击，properties—java build path—libraries—Add External jar，加入log4j.jar包。 3) 新建一个类com.hand.Log4jTest package com.hand; import org.apache.log4j.Logger; public class
  • 多点触摸(图片缩放为例) 不懂事的小屁孩 多点触摸
    多点触摸的事件跟单点是大同小异的，上个图片缩放的代码，供大家参考一下 import android.app.Activity; import android.os.Bundle; import android.view.MotionEvent; import android.view.View; import android.view.View.OnTouchListener
  • 有关浏览器窗口宽度高度几个值的解析 换个号韩国红果果 JavaScripthtml
    1 元素的 offsetWidth 包括border padding  content  整体的宽度。 clientWidth  只包括内容区 padding 不包括border。 clientLeft =  offsetWidth -clientWidth  即这个元素border的值 offsetLeft  若无已定位的包裹元素
  • 数据库产品巡礼：IBM DB2概览 蓝儿唯美 db2
    IBM DB2是一个支持了NoSQL功能的关系数据库管理系统，其包含了对XML，图像存储和Java脚本对象表示（JSON）的支持。DB2可被各种类型的企 业使用，它提供了一个数据平台，同时支持事务和分析操作，通过提供持续的数据流来保持事务工作流和分析操作的高效性。 DB2支持的操作系统 DB2可应用于以下三个主要的平台:   工作站，DB2可在Linus、Unix、Windo
  • java笔记5 a-john java
    控制执行流程： 1，true和false    利用条件表达式的真或假来决定执行路径。例：（a==b）。它利用条件操作符“==”来判断a值是否等于b值，返回true或false。java不允许我们将一个数字作为布尔值使用，虽然这在C和C++里是允许的。如果想在布尔测试中使用一个非布尔值，那么首先必须用一个条件表达式将其转化成布尔值，例如if(a!=0)。 2，if-els
  • Web开发常用手册汇总 aijuans PHP
    一门技术，如果没有好的参考手册指导,很难普及大众。这其实就是为什么很多技术，非常好，却得不到普遍运用的原因。 正如我们学习一门技术，过程大概是这个样子： ①我们日常工作中，遇到了问题，困难。寻找解决方案，即寻找新的技术； ②为什么要学习这门技术？这门技术是不是很好的解决了我们遇到的难题，困惑。这个问题，非常重要，我们不是为了学习技术而学习技术，而是为了更好的处理我们遇到的问题，才需要学习新的
  • 今天帮助人解决的一个sql问题 asialee sql
                今天有个人问了一个问题，如下： type     AD      value          A  
  • 意图对象传递数据 百合不是茶 android意图IntentBundle对象数据的传递
    学习意图将数据传递给目标活动; 初学者需要好好研究的       1,将下面的代码添加到main.xml中    <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http:/
  • oracle查询锁表解锁语句 bijian1013 oracleobjectsessionkill
    一.查询锁定的表 如下语句，都可以查询锁定的表 语句一： select a.sid, a.serial#, p.spid, c.object_name, b.session_id, b.oracle_username, b.os_user_name from v$process p, v$s
  • mac osx 10.10 下安装 mysql 5.6 二进制文件［tar.gz］ 征客丶 mysqlosx
    场景：在 mac osx 10.10 下安装 mysql 5.6 的二进制文件。 环境：mac osx 10.10、mysql 5.6 的二进制文件 步骤：[所有目录请从根“/”目录开始取，以免层级弄错导致找不到目录] 1、下载 mysql 5.6 的二进制文件，下载目录下面称之为 mysql5.6SourceDir； 下载地址：http://dev.mysql.com/downl
  • 分布式系统与框架 bit1129 分布式
    RPC框架 Dubbo 什么是Dubbo   Dubbo是一个分布式服务框架，致力于提供高性能和透明化的RPC远程服务调用方案，以及SOA服务治理方案。其核心部分包含:    远程通讯: 提供对多种基于长连接的NIO框架抽象封装，包括多种线程模型，序列化，以及“请求-响应”模式的信息交换方式。    集群容错: 提供基于接
  • 那些令人蛋痛的专业术语 白糖_ springWebSSOIOC
    spring 【控制反转(IOC)/依赖注入(DI)】： 由容器控制程序之间的关系，而非传统实现中，由程序代码直接操控。这也就是所谓“控制反转”的概念所在：控制权由应用代码中转到了外部容器，控制权的转移，是所谓反转。 简单的说：对象的创建又容器(比如spring容器)来执行，程序里不直接new对象。 Web 【单点登录(SSO)】：SSO的定义是在多个应用系统中，用户
  • 《给大忙人看的java8》摘抄 braveCS java8
    函数式接口：只包含一个抽象方法的接口 lambda表达式：是一段可以传递的代码       你最好将一个lambda表达式想象成一个函数，而不是一个对象，并记住它可以被转换为一个函数式接口。 事实上，函数式接口的转换是你在Java中使用lambda表达式能做的唯一一件事。   方法引用：又是要传递给其他代码的操作已经有实现的方法了，这时可以使
  • 编程之美-计算字符串的相似度 bylijinnan java算法编程之美
    public class StringDistance { /** * 编程之美 计算字符串的相似度 * 我们定义一套操作方法来把两个不相同的字符串变得相同，具体的操作方法为： * 1.修改一个字符（如把“a”替换为“b”）; * 2.增加一个字符（如把“abdd”变为“aebdd”）; * 3.删除一个字符（如把“travelling”变为“trav
  • 上传、下载压缩图片 chengxuyuancsdn 下载
    /** * * @param uploadImage --本地路径(tomacat路径) * @param serverDir --服务器路径 * @param imageType --文件或图片类型 * 此方法可以上传文件或图片.txt,.jpg,.gif等 */ public void upload(String uploadImage,Str
  • bellman-ford(贝尔曼-福特)算法 comsci 算法F#
    Bellman-Ford算法(根据发明者 Richard Bellman 和 Lester Ford 命名)是求解单源最短路径问题的一种算法。单源点的最短路径问题是指：给定一个加权有向图G和源点s，对于图G中的任意一点v，求从s到v的最短路径。有时候这种算法也被称为 Moore-Bellman-Ford 算法，因为 Edward F. Moore zu 也为这个算法的发展做出了贡献。 与迪科
  • oracle ASM中ASM_POWER_LIMIT参数 daizj ASMoracleASM_POWER_LIMIT磁盘平衡
    ASM_POWER_LIMIT 该初始化参数用于指定ASM例程平衡磁盘所用的最大权值，其数值范围为0~11，默认值为1。该初始化参数是动态参数，可以使用ALTER  SESSION或ALTER  SYSTEM命令进行修改。示例如下： SQL>ALTER  SESSION  SET   Asm_power_limit=2;
  • 高级排序:快速排序 dieslrae 快速排序
    public void quickSort(int[] array){ this.quickSort(array, 0, array.length - 1); } public void quickSort(int[] array,int left,int right){ if(right - left <= 0
  • C语言学习六指针_何谓变量的地址 一个指针变量到底占几个字节 dcj3sjt126com C语言
    # include <stdio.h> int main(void) { /* 1、一个变量的地址只用第一个字节表示 2、虽然他只使用了第一个字节表示，但是他本身指针变量类型就可以确定出他指向的指针变量占几个字节了 3、他都只存了第一个字节地址，为什么只需要存一个字节的地址，却占了4个字节，虽然只有一个字节， 但是这些字节比较多，所以编号就比较大，
  • phpize使用方法 dcj3sjt126com PHP
    phpize是用来扩展php扩展模块的，通过phpize可以建立php的外挂模块,下面介绍一个它的使用方法,需要的朋友可以参考下 安装（fastcgi模式）的时候，常常有这样一句命令： 代码如下: /usr/local/webserver/php/bin/phpize   一、phpize是干嘛的？ phpize是什么？ phpize是用来扩展php扩展模块的，通过phpi
  • Java虚拟机学习 - 对象引用强度 shuizhaosi888 JAVA虚拟机
    本文原文链接：http://blog.csdn.net/java2000_wl/article/details/8090276 转载请注明出处！ 无论是通过计数算法判断对象的引用数量，还是通过根搜索算法判断对象引用链是否可达，判定对象是否存活都与“引用”相关。 引用主要分为 ：强引用(Strong Reference)、软引用(Soft Reference)、弱引用(Wea
  • .NET Framework 3.5 Service Pack 1（完整软件包）下载地址 happyqing .net下载framework
      Microsoft .NET Framework 3.5 Service Pack 1（完整软件包）  http://www.microsoft.com/zh-cn/download/details.aspx?id=25150 Microsoft .NET Framework 3.5 Service Pack 1 是一个累积更新，包含很多基于 .NET Framewo
  • JAVA定时器的使用 jingjing0907 javatimer线程定时器
    1、在应用开发中，经常需要一些周期性的操作，比如每5分钟执行某一操作等。 对于这样的操作最方便、高效的实现方式就是使用java.util.Timer工具类。 privatejava.util.Timer timer; timer = newTimer(true); timer.schedule( newjava.util.TimerTask() { public void run()
  • Webbench 流浪鱼 webbench
    首页下载地址 http://home.tiscali.cz/~cz210552/webbench.html Webbench是知名的网站压力测试工具，它是由Lionbridge公司（http://www.lionbridge.com）开发。 Webbench能测试处在相同硬件上，不同服务的性能以及不同硬件上同一个服务的运行状况。webbench的标准测试可以向我们展示服务器的两项内容：每秒钟相
  • 第11章 动画效果（中） onestopweb 动画
    index.html <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/
  • windows下制作bat启动脚本. sanyecao2314 javacmd脚本bat
    java -classpath C:\dwjj\commons-dbcp.jar;C:\dwjj\commons-pool.jar;C:\dwjj\log4j-1.2.16.jar;C:\dwjj\poi-3.9-20121203.jar;C:\dwjj\sqljdbc4.jar;C:\dwjj\voucherimp.jar com.citsamex.core.startup.MainStart
  • Java进行RSA加解密的例子 tomcat_oracle java
    加密是保证数据安全的手段之一。加密是将纯文本数据转换为难以理解的密文；解密是将密文转换回纯文本。 　　数据的加解密属于密码学的范畴。通常，加密和解密都需要使用一些秘密信息，这些秘密信息叫做密钥，将纯文本转为密文或者转回的时候都要用到这些密钥。 　　对称加密指的是发送者和接收者共用同一个密钥的加解密方法。 　　非对称加密(又称公钥加密)指的是需要一个私有密钥一个公开密钥，两个不同的密钥的
  • Android_ViewStub 阿尔萨斯 ViewStub
    public final class ViewStub extends View java.lang.Object android.view.View android.view.ViewStub 类摘要： ViewStub 是一个隐藏的，不占用内存空间的视图对象，它可以在运行时延迟加载布局资源文件。当 ViewSt
按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他