qinyuanqiblog
qinyuanqiblog

【css世界】学习笔记

大纲

  • 【css世界】的一些笔记（2020-05-10）
  • css世界的所有demo
  • 大佬写的这本书，个人而言，对我受益匪浅
  • 欢迎灌水吐槽o(∩_∩)o 哈哈

流、元素与基本尺寸

标签分类

内联元素： display:inline;

内联块元素： display:inline-block;

块元素： display:block;

一个水平流上只能单独显示一个元素，多个块元素则换行展示

width :auto 特性，

1. 充分利用可用空间，宽度默认100%

2. 收缩与包裹

3. 收缩到最小

4. 超出容器限制

height的计算方式

绝对定位元素到百分比计算和非绝对定位元素是有区别的：区别在于绝对定位到宽高百分比是相对于paddingbox的，也就是说会把padding大小计算在内，但是，非绝对定位元素则是相对于conten box计算的

https://demo.cssworld.cn/3/2-11.php

【css世界】学习笔记_第1张图片

max-width 和 width: 200px !important 那个大？

答案是 max-width 最大， 不管是你写在行间还是 使用！important语法

实例：

max-height与任意高度元素滑动展开收起效果实例页面

https://demo.cssworld.cn/3/3-2.php

没有使用任何js，完全使用css ，大佬就是叼哈

【css世界】学习笔记_第2张图片

流动性

所谓流动性，并不是宽度100%显示，而是一种margin/border/padding 和conten内容区域自动分配空间到机制，如果设置width为定值，流动性丢失

例子：

【css世界】学习笔记_第3张图片

内部尺寸与流动特性

包裹性

表现：按钮 文字 越多 宽度 越 宽（ 内部 尺寸 特性），但如 果 文字 足够 多， 则 会在 容器 的 宽度 处 自动 换行（ 自 适应 特性）。

具有包裹性的css:

display:inline-block;

float：left | right;

position: absolute;

例1:

< button> 标签 按钮 才会 自动 换行，< input> 标签 按钮， 默认 white- space: pre， 是 不会 换行 的， 需要 将 pre 值 重置 为 默认 的 normal。

线上地址: http:// demo. cssworld. cn/ 3/ 2- 4. php

【css世界】学习笔记_第4张图片

实际示例 ：

请看 这个 需求： 页面 某个 模块 的 文字 内容 是 动态 的， 可能 是 几个 字， 也可能 是一 句话。 然后， 希望 文字 少的 时候 居中 显示， 文字 超过 一行 的 时候 居 左 显示。 该 如何 实现？

核心代码：

.box {text- align: center; } .content { 　 display: inline- block; 　 text- align: left; }

预览地址： http://demo.cssworld.cn/3/2-5.php

默认文字文字不满一行的时候居中

【css世界】学习笔记_第5张图片

文字超过一行的时候，靠左或者靠右看你怎么设置了

【css世界】学习笔记_第6张图片

首选最小宽度

https://demo.cssworld.cn/3/2-6.php

【css世界】学习笔记_第7张图片

最大宽度

https://demo.cssworld.cn/3/2-7.php 个人还是喜欢用flex，flex大法好哈

【css世界】学习笔记_第8张图片

内联盒模型

幽灵空白节点

是内联元素（display:inline) ，相当于他前面就有一个幽灵空白节点

【css世界】学习笔记_第9张图片

在html5文档声明中，每一个内联元素到前面都有一个空白节点，不占据任何宽度，永远透明。

例子：

【css世界】学习笔记_第10张图片

高度不为0，证明幽灵空白节点存在

【css世界】学习笔记_第11张图片

盒尺寸四大家族

可替换元素

定义： 通过修改某个属性值呈现得内容就可以被替换得元素就称为 【替换元素】

特性：

1. 内容的外观不受页面上的css影响。用专业的话讲就是在样式改变在css作用域之外。

如何更改替换元素本身的外观？

需要类似appearance属性，或者浏览器自身暴露的一些样式接口

例如： ：：-ms-check{} 可以更换高版本IE浏览器下单复选框得内间距、背景色等杨思，但是直接input[type='checkbox']{} 却无法更改内间距、背景色等样式。

2. 有自己的尺寸。

在web中，很多替换元素在没有明确尺寸的前提下，其默认的尺寸（不包括边框），是300像素 x 150像素，如video iframe 或者canvas等，也有少部分替换元素为0像素，如img标签，而表单元素得替换元素的尺寸则和浏览器有关，没有明显得规律

3. 在很多css属性上游自己的一套表现规则。

比如具有代表性的就是vertical-align属性，对于替换元素和非替换元素，vertical-align属性值得表现是不一样。比如说vertical-align的默认值是baseline，在替换元素身上表现全无！！

4. 可替换元素不能使用伪类，有兼容性问题

https://demo.cssworld.cn/4/1-4.php

【css世界】学习笔记_第12张图片

例如下面的这些标签：

img

input

textarea

object

video

iframe

select

深入理解 content

1. 生成图片

https://demo.cssworld.cn/4/1-5.php

【css世界】学习笔记_第13张图片

content 生成到图片，不能被选中哦，content技术生成到元素就是可替换元素

2. 生成loading 动态点点点

https://demo.cssworld.cn/4/1-9.php

【css世界】学习笔记_第14张图片

3. content attr的使用

content attr属性值内容生成，意思就是可以通过 css伪类的conten 的attr特性 使用自定义属性的值

css: div:after{ content:attr(alt) } html:

div:after{ content:attr(data-src) } html:

4. conten 计数器

https://demo.cssworld.cn/4/1-11.php

【css世界】学习笔记_第15张图片

5. CSS计数器counters的string参数与嵌套实例页面

https://demo.cssworld.cn/4/1-18.php

【css世界】学习笔记_第16张图片

input 和button按钮的区别

input的white-space值上pre，文字足够多的的时候，不会自动换行，

button的white-space的值上normal，文字足够多的时候，自动换行

padding

box-sizing 失效

设置了box-sizing:border-box,一般情况下，尺寸没有变化，如果padding的值足够大，那么width也无能为力了。

例如： .box｛ width:80px; padding:20px 60px; box-sizing:border-box;｝，此时width无效，最终宽度为120px，而里面的内容表现为 首选最小宽度

【css世界】学习笔记_第17张图片

属性值

不支持负数，

支持百分比，

内联元素的文字会断行

百分比计算规则：padding的百分比值无论是水平的还是垂直的方向，都是相对于宽度设计来计算的。

运用实例：https://demo.cssworld.cn/4/2-3.php

【css世界】学习笔记_第18张图片

padding与图形生成实例页面 https://demo.cssworld.cn/4/2-4.php

【css世界】学习笔记_第19张图片

margin

属性值

支持负值

支持百分比

inline 元素 margin 的垂直方向不生效

实例：

元素默认值

【css世界】学习笔记_第20张图片

当前元素添加margin负值，宽高不受影响

【css世界】学习笔记_第21张图片

给子元素赋值

【css世界】学习笔记_第22张图片

给儿子元素添加负值，父元素宽度不变，子元素宽度有变化

【css世界】学习笔记_第23张图片

利用上面的特性可以做：

自适应布局：https://demo.cssworld.cn/4/3-1.php

【css世界】学习笔记_第24张图片

两端对齐布局

margin合并

一般发生在垂直方向

场景

1. 相邻兄弟元素margin合并

p{margin:1em 0;}

2. 父级和第一个/最后一个子元素 margin合并

https://demo.cssworld.cn/4/3-3.php

【css世界】学习笔记_第25张图片

计算规则

正正取大值

负负取最负值

如何阻止margin合并

阻止margin-top合并

1. 父元素设置为块状格式化上下文(BFC)元素(比如说：overflow:hidden)

2. 父元素设置border-top值

3. 父元素设置padding-top

4. 父元素和第一个子元素之间添加内联元素进行分隔

阻止margin-bottom合并

1. 父元素设置为块状格式化上下文元素(比如说：overflow:hidden)

2. 父元素设置border-bottom值

3. 父元素设置padding-bottom

4. 父元素和第一个子元素之间添加内联元素进行分隔

5. 父元素设置height 、 min-height或max-height

margin auto

填充规则

1. 如果一侧定值，一侧auto，则auto为剩余空间大小

例1

https://demo.cssworld.cn/4/3-4.php

【css世界】学习笔记_第26张图片

例2

html代码

【css世界】学习笔记_第27张图片

展示效果

【css世界】学习笔记_第28张图片

2. 如果两侧均是auto，则平分剩余空间

【css世界】学习笔记_第29张图片

3. margin auto 实现垂直水平居中

html代码

【css世界】学习笔记_第30张图片

展示效果，margin auto 居中

【css世界】学习笔记_第31张图片

border

属性值

不支持百分比

支持固定数值；比如说1px

border-width 关键词

thin：薄薄的，相当于1px

medium(默认值）：薄厚均匀，等同于3px

thick: 厚厚到，等同于4px

为啥medium 是默认值，因为border-style:double 至少3px才有效果

border-style 关键词

dashed: 虚线

【css世界】学习笔记_第32张图片

dotted : 小圆点虚线

【css世界】学习笔记_第33张图片

solid: 实线

【css世界】学习笔记_第34张图片

double: 双线边框

【css世界】学习笔记_第35张图片

border-color

border-color

默认颜色就是 color 的值，类似特性到css属性还有outline box-shadow text-shadow等

【css世界】学习笔记_第36张图片

实际运用

https://demo.cssworld.cn/4/4-1.php

【css世界】学习笔记_第37张图片

只需该一个地方，就可以实现类似的效果，

【css世界】学习笔记_第38张图片

实际运用

三条扛

【css世界】学习笔记_第39张图片

增加点击区域

三角形图形绘制

【css世界】学习笔记_第40张图片

多边形

【css世界】学习笔记_第41张图片

border等高布局

https://demo.cssworld.cn/4/4-4.php

【css世界】学习笔记_第42张图片

内联元素与流

字母x就是基线vertical-align: baseline;到位置

ex, 不受字体和字号影响到单位

https://demo.cssworld.cn/5/1-1.php

【css世界】学习笔记_第43张图片

line-height

属性值

不支持负数

支持百分比

支持固定数：line-height:1.2

支持px： line-height:10px

不能影响替换元素

line-height:normal 和设置到字体有关系，不同字体可能不一样哦

无论内联元素如何设置line-height,最终都是谁最大，谁生效

line-height 决定内联元素的大小

https://demo.cssworld.cn/5/2-1.php

【css世界】学习笔记_第44张图片

【css世界】学习笔记_第45张图片

【css世界】学习笔记_第46张图片

行距等于 line-height - font-size

https://demo.cssworld.cn/5/2-2.php

【css世界】学习笔记_第47张图片

line-height 让单行文字近似到垂直居中实现：

很明显，只是近似到垂直居中

【css世界】学习笔记_第48张图片

line-height 让多行文字近似到垂直居中实现：

https://demo.cssworld.cn/5/2-4.php

【css世界】学习笔记_第49张图片

没有vertical-align：middle 的效果

【css世界】学习笔记_第50张图片

line-height 的继承性

https://demo.cssworld.cn/5/2-5.php

【css世界】学习笔记_第51张图片

vertical-align

生效的条件

css属性是如下的都支持

display：inline

display:inline-block

display:inline-table

display:table-cell

如下标签也支持

img

button

input等替换元素

td

其他块元素(display:block)不支持！！！

属性值

线类

baseline(默认值）

top

middle

bottom

文本类

text-top

text-bottom

上标下标类

sub

super

数值百分比类

-20px

20px

2em

20%

实例

使用vertical-align数值实现文字和小图标对齐实例页面

https://demo.cssworld.cn/5/3-2.php

【css世界】学习笔记_第52张图片
使用vertical-align数值实现文字和小图标对齐实例页面

https://demo.cssworld.cn/5/3-3.php

【css世界】学习笔记_第53张图片

table-cell与vertical-align属性关系示意实例页面

https://demo.cssworld.cn/5/3-4.php

【css世界】学习笔记_第54张图片

图片底部留有间隙的问题实例页面

https://demo.cssworld.cn/5/3-5.php

【css世界】学习笔记_第55张图片

计算规则

vertical-align 百分比值是相对于line-height来计算的

margin 和padding到百分比值是相对于宽度计算的

line-height的百分比值是相对于font-size计算的

两端对齐列表的间隙问题实例页面

https://demo.cssworld.cn/5/3-6.php

【css世界】学习笔记_第56张图片

【css世界】学习笔记_第57张图片

数学公式

【css世界】学习笔记_第58张图片

【css世界】学习笔记_第59张图片

实现水平垂直居中 这种布局还是很不错的

https://demo.cssworld.cn/5/3-10.php

css

【css世界】学习笔记_第60张图片

【css世界】学习笔记_第61张图片

html

【css世界】学习笔记_第62张图片

效果

【css世界】学习笔记_第63张图片

流的破坏与保护

float

特性

包裹性

自适应

块状化并格式化上下文

块状化就是元素一旦float的属性不为none，则display的值就是block 或者table

破坏文档流

没有任何margin合并

属性值

【css世界】学习笔记_第64张图片

文字环绕

https://demo.cssworld.cn/6/1-1.php

【css世界】学习笔记_第65张图片

利用float破坏流特性的两栏自适应布局实例页面

https://demo.cssworld.cn/6/1-2.php

【css世界】学习笔记_第66张图片

clear

属性值

none 默认值

left 左侧扛浮动

right 右侧扛浮动

both 两侧扛浮动

生效条件

只有块元素才生效，这个就是为啥：：after等伪类元素要清除浮动到时候都要加上display:block 的原因，因为伪类默认是内联元素

clear：both 并不是清除浮动，而是让自己不和浮动元素在一行显示。不是彻底的清除浮动，所以他后面到元素到浮动特性还保留

1. 如果clear:both 元素是float元素，则margin-top负值即使设成-9999px，也不见任何效果

2. clear:both 后面到元素依旧可能会发生文字环绕到的现象。

https://demo.cssworld.cn/6/2-1.php

【css世界】学习笔记_第67张图片

块格式化上下文（Block Formatting Context，BFC）

如何触发BFC

https://developer.mozilla.org/zh-CN/docs/Web/Guide/CSS/Block_formatting_context

【css世界】学习笔记_第68张图片

作用

1. 治疗 margin 合并

2. 清除浮动

3. 流体布局

overflow

属性值

visible 默认值

hidden 内容会被修剪，并且其余内容是不可见的

scroll 内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容

auto 如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容

inherit 规定应该从父元素继承 overflow 属性的值

永远不可能实现一个方向溢出剪切或滚动，领一个方向内容溢出显示的效果

【css世界】学习笔记_第69张图片

【css世界】学习笔记_第70张图片

但是scroll auto hidden 三个属性值可以共存

滚动条不晃动的方法

【css世界】学习笔记_第71张图片

URL锚链锚点定位和overflow的选项卡切换效果实例页面 学习使用就行，体验不是很好

https://demo.cssworld.cn/6/4-2.php

【css世界】学习笔记_第72张图片

focus锚点定位和overflow的选项卡切换效果实例页面

https://demo.cssworld.cn/6/4-3.php

【css世界】学习笔记_第73张图片

absolute

属性

不能和float共存 float失效

可以不适用display：inline-block,多次一举，都是bfc

absolute计算规则

1. 根元素，即html

2. 对于其他元素，如果该元素到position是relative或者static，则包含块由其最近的块容器祖先盒到contentx box边界形成

3. 如果元素position：fixed,则包含块是初始包含块，即html

4. 如果元素position：absolute，则包含块由最近到position不为static的祖先元素建立

无依赖定位实例，需要熟练记住的

实例1

html代码

【css世界】学习笔记_第74张图片

效果，如果文档流很多，自动出现滚动条，定位不受影响，比如demo元素出现滚动条就不行了， 具体看实例2：

【css世界】学习笔记_第75张图片

实例2

html

【css世界】学习笔记_第76张图片

效果

【css世界】学习笔记_第77张图片

解决方法：

【css世界】学习笔记_第78张图片

【css世界】学习笔记_第79张图片

搞定

【css世界】学习笔记_第80张图片

无依赖绝对定位”与导航图标定位实例页面

https://demo.cssworld.cn/6/5-5.php

【css世界】学习笔记_第81张图片

无依赖绝对定位”与超越常规布局的布局实例页面

https://demo.cssworld.cn/6/5-6.php

【css世界】学习笔记_第82张图片

“无依赖绝对定位”与下拉列表定位实例页面

https://demo.cssworld.cn/6/5-7.php

【css世界】学习笔记_第83张图片

text-align实现的右外侧定位效果实例页面

https://demo.cssworld.cn/6/5-10.php

【css世界】学习笔记_第84张图片

absolute 与 overflow

定义:

overflow 对 absolute 元素 的 剪裁 规则 用 一句话 表述 就是： 绝对 定位 元素 不 总是 被 父 级 overflow 属性 剪裁， 尤其 当 overflow 在 绝对 定位 元素 及其 包含 块 之间 的 时候。

上面 这句 话是 官方 文档 的 直译， 似乎 还是 有些 拗口， 我们 再 换 一种 方法 表述 就是： 如果 overflow 不是 定位 元素， 同时 绝对 定位 元素 和 overflow 容器 之间 也没 有 定位 元素，

不会被裁剪的情况： overflow：hidden

< div > 　 < img src=" 1. jpg" >

< div > 　< div > 　 　 < img src=" 1. jpg" > 　

不会被裁剪的情况 overflow：hidden

< div > 　 < img src=" 1. jpg" > 　

< div > 　 < div > < img src=" 1. jpg" > 　 　

如果 overflow 的 属性 值 不是 hidden 而是 auto 或者 scroll， 即使 绝对 定位 元素 高 宽 比 overflow 元素 高 宽 还要 大， 也都 不会 出现 滚动 条。

< div > 　 < div > 　 　 < img src=" 1. jpg" > 　 　

< div class=" box"> 　 < img src=" 1. jpg">

.box { 　 width: 300px; height: 100px; 　 background- color: #f0f3f9; 　 overflow: auto; } .box > img { 　 width: 256px; height: 192px; 　 position: absolute; }

实例：

https://demo.cssworld.cn/6/5-11.php

【css世界】学习笔记_第85张图片

absolute 与垂直水平居中

不固定宽高 使用transform：translate

html代码

【css世界】学习笔记_第86张图片

效果

【css世界】学习笔记_第87张图片

固定宽高 使用margin:auto

html代码

【css世界】学习笔记_第88张图片

效果

【css世界】学习笔记_第89张图片

模拟fixed定位

relative

计算规则

相对定位元素到left/top/right/bottom 的百分比值是相对于包含块计算到，而不是自身。注意：虽然定位位移是相对于自身，但是百分比的计算值不是哦。

relative的top/bottom和left/right 同时使用的时候，其表现和absolute不同，他们只有一个方向上的属性生效，计算规则如下

默认的文档流是从上而下、从左往右，因此，top/bottom 同时使用到时候，bottom被干掉，left/right同时存在的时候，rigt被干掉

relative定位和margin定位对比实例的区别

实现的效果都一样

【css世界】学习笔记_第90张图片

区别如下

【css世界】学习笔记_第91张图片

fixed 与背景锁定

1. 页面滚动条不是从根元素产生，而是普通元素

2.如果是桌面端，让根元素加上overflow:hidden

3.如果是移动端，阻止touchmove事件的默认行为即可阻止滚动

clip可以裁剪 absolute 和fixed

transform 对属性的影响

overflow

1. transform对overflow 元素自身裁剪（IE9以上裁剪 chrome和opera不裁剪）

2. transform对overflow 子元素裁剪（IE9以上裁剪 chrome和opera也裁剪）

fixed

会导致fixed固定失效

css世界到层叠规则

z-index

定义：只有和定位元素（position不为static的元素）在一起到时候，才 有作用，理论上数值越大，层级越高

z-index 可以为负值

层叠上下文

英文：stacking content, 是一个三维的概念，如果一个元素有层叠上下文，那么这个元素在z轴上就"高人一等"

层叠水平

英文：stacking level,决定了同一个层叠上下文中元素在z轴上的显示顺序。

css2.1的层叠规则

【css世界】学习笔记_第92张图片

css3层叠上下文

1. 元素为flex布局元素（父元素display:flex | inline-flex）,同时z-index值不是auto

2. 元素的opacity值不是1

3. 元素的transform值不是none

4. 元素的min-blend-mode值不是normal

5. 元素的filter值不是none

6. 元素到isolation值是isolate

7. 元素的will-change属性值为上面2-6的任意一个

8. 元素的-webkit-overflow-scrolling 设为touch

强大的文本处理能力

隐藏元素的新方法

font-size:0

text-indent:-999px 有隐藏风险

word-break 和word-wrap 的区别

https://demo.cssworld.cn/8/6-5.php

【css世界】学习笔记_第93张图片

text-transform

还是很有用的，可以自动把输入的值转换成大写 或者小写

【css世界】学习笔记_第94张图片

隐藏元素的background-image 到底加不加载

1. 如果隐藏元素同时又设置来background-image, 则图片依然加载

2. 如果父元素设置了display:none ，那就不加载

元素的显示与隐藏

visibility

继承性：父元素设置来visibility：hidden, 子元素也会看不见，如果子元素设置来visibility：visible,则子元素显示，这个和display不一样

实例：

https://demo.cssworld.cn/10/2-3.php

【css世界】学习笔记_第95张图片

outline

放大镜

https://demo.cssworld.cn/11/1-1.php

【css世界】学习笔记_第96张图片

自动填满剩余空间

https://demo.cssworld.cn/11/1-2.php

html代码

【css世界】学习笔记_第97张图片

效果

【css世界】学习笔记_第98张图片

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

  • 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前端期末大作业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
  • springboot+vue项目实战一-创建SpringBoot简单项目 苹果酱0567 面试题汇总与解析springboot后端java中间件开发语言
    这段时间抽空给女朋友搭建一个个人博客，想着记录一下建站的过程，就当做笔记吧。虽然复制zjblog只要一个小时就可以搞定一个网站，或者用cms系统，三四个小时就可以做出一个前后台都有的网站，而且想做成啥样也都行。但是就是要从新做，自己做的意义不一样，更何况，俺就是专门干这个的，嘿嘿嘿要做一个网站，而且从零开始，首先呢就是技术选型了，经过一番思量决定选择-SpringBoot做后端，前端使用Vue做一
  • 博客网站制作教程 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
  • 最简单将静态网页挂载到服务器上(不用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
  • 《HTML 与 CSS—— 响应式设计》 陈在天box htmlcss前端
    一、引言在当今数字化时代，人们使用各种不同的设备访问互联网，包括智能手机、平板电脑、笔记本电脑和台式机等。为了确保网站在不同设备上都能提供良好的用户体验，响应式设计成为了网页开发的关键。HTML和CSS作为网页开发的基础技术，在实现响应式设计方面发挥着重要作用。本文将深入探讨HTML与CSS中的响应式设计原理、方法和最佳实践。二、响应式设计的概念与重要性（一）概念响应式设计是一种网页设计方法，旨在
  • uniapp实现动态标记效果详细步骤【前端开发】 2401_85123349 uni-app
    第二个点在于实现将已经被用户标记的内容在下一次获取后刷新它的状态为已标记。这是什么意思呢？比如说上面gif图中的这些人物对象，有一些已被该用户添加为关心，那么当用户下一次进入该页面时，这些已经被添加关心的对象需要以“红心”状态显现出来。这个点的难度还不算大，只需要在每一次获取后端的内容后对标记对象进行状态更新即可。II.动态标记效果实现思路和步骤首先，整体的思路是利用动态类名对不同的元素进行选择。
  • html+css网页设计 旅游网站首页1个页面 html+css+js网页设计 htmlcss旅游
    html+css网页设计旅游网站首页1个页面网页作品代码简单，可使用任意HTML辑软件（如：Dreamweaver、HBuilder、Vscode、Sublime、Webstorm、Text、Notepad++等任意html编辑软件进行运行及修改编辑等操作）。获取源码1，访问该网站https://download.csdn.net/download/qq_42431718/897527112，点击
  • css设置当字数超过限制后以省略号（...）显示 周bro css前端vuecss3html经验分享
    1、文字超出一行，省略超出部分，显示’…’用text-overflow:ellipsis属性来，当然还需要加宽度width属来兼容部分浏览。overflow:hidden;text-overflow:ellipsis;white-space:nowrap;2、多行文本溢出显示省略号display:-webkit-box;-webkit-box-orient:vertical;-webkit-lin
  • 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
  • css2中的透明 琪33
    .out{width:400px;height:400px;background-color:blue;margin:100pxauto;border:1pxsolid#000;opacity:0.6;}.in{width:200px;height:200px;background-color:red;margin:100pxauto;}
  • Nginx从入门到实践(三) 听你讲故事啊
    动静分离动静分离是将网站静态资源（JavaScript，CSS，img等文件）与后台应用分开部署，提高用户访问静态代码的速度，降低对后台应用访问。动静分离的一种做法是将静态资源部署在nginx上，后台项目部署到应用服务器上，根据一定规则静态资源的请求全部请求nginx服务器，达到动静分离的目标。rewrite规则Rewrite规则常见正则表达式Rewrite主要的功能就是实现URL的重写，Ngin
  • Nginx的使用场景：构建高效、可扩展的Web架构 张某布响丸辣 nginx前端架构
    Nginx，作为当今最流行的Web服务器和反向代理软件之一，凭借其高性能、稳定性和灵活性，在众多Web项目中扮演着核心角色。无论是个人博客、中小型网站，还是大型企业级应用，Nginx都能提供强大的支持。本文将探讨Nginx的几个主要使用场景，帮助读者理解如何在实际项目中充分利用Nginx的优势。1.静态文件服务对于包含大量静态文件（如HTML、CSS、JavaScript、图片等）的网站，Ngin
  • 前端知识点 ZhangTao_zata 前端javascriptcss
    下面是一个最基本的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事务管理 暴躁的鱼 锁及事务分布式springjava
    最近开发一个小程序遇到一个需求需要实现分布式事务管理业务需求用户在使用小程序的过程中可以查看景点，对景点地区或者城市标记是否想去，那么需要统计一个地点被标记的人数，以及记录某个用户对某个地点是否标记为想去，用两个表存储数据，一个地点表记录改地点被标记的次数，一个用户意向表记录某个用户对某个地点是否标记为想去。由于可能有多个用户同时标记一个地点，每个用户在前端点击想去按钮之后，后台接收到请求，从数据
  • Python精选200Tips：121-125 AnFany Python200+Tipspython开发语言
    Spendyourtimeonself-improvement121Requests-简化的HTTP请求处理发送GET请求发送POST请求发送PUT请求发送DELETE请求会话管理处理超时文件上传122BeautifulSoup-网页解析和抓取解析HTML和XML文档查找单个标签查找多个标签使用CSS选择器查找标签提取文本修改文档内容删除标签处理XML文档123Scrapy-强大的网络爬虫框架示例
  • 前端CSS面试常见题 剑亦未配妥 前端面试前端css面试
    边界塌陷盒模型有两种：W3C盒模型和IE盒模型，区别在于宽度是否包含边框定义：同时给兄弟/父子盒模型设置上下边距，理论上边距值是两者之和，实际上不是注意：浮动和定位不会产生边界塌陷；只有块级元素垂直方向才会产生margin合并margin计算方案margin同为正负：取绝对值大的值一正一负：求和父子元素边界塌陷解决父元素可以通过调整padding处理；设置overflowhidden，触发BFC子
  • 爬虫技术抓取网站数据 Bearjumpingcandy 爬虫
    爬虫技术是一种自动化获取网站数据的技术，它可以模拟人类浏览器的行为，访问网页并提取所需的信息。以下是爬虫技术抓取网站数据的一般步骤：发起HTTP请求：爬虫首先会发送HTTP请求到目标网站，获取网页的内容。解析HTML：获取到网页内容后，爬虫会使用HTML解析器解析HTML代码，提取出需要的数据。数据提取：通过使用XPath、CSS选择器或正则表达式等工具，爬虫可以从HTML中提取出所需的数据，如文
  • 怎么样才能成为专业的程序员？ cocos2d-x小菜 编程PHP
      如何要想成为一名专业的程序员？仅仅会写代码是不够的。从团队合作去解决问题到版本控制，你还得具备其他关键技能的工具包。当我们询问相关的专业开发人员，那些必备的关键技能都是什么的时候，下面是我们了解到的情况。   关于如何学习代码，各种声音很多，然后很多人就被误导为成为专业开发人员懂得一门编程语言就够了？！呵呵，就像其他工作一样，光会一个技能那是远远不够的。如果你想要成为
  • java web开发 高并发处理 BreakingBad javaWeb并发开发处理高
    java处理高并发高负载类网站中数据库的设计方法（java教程,java处理大量数据，java高负载数据） 一：高并发高负载类网站关注点之数据库 没错,首先是数据库,这是大多数应用所面临的首个SPOF。尤其是Web2.0的应用，数据库的响应是首先要解决的。 一般来说MySQL是最常用的，可能最初是一个mysql主机，当数据增加到100万以上，那么，MySQL的效能急剧下降。常用的优化措施是M-S（
  • mysql批量更新 ekian mysql
    mysql更新优化： 一版的更新的话都是采用update set的方式，但是如果需要批量更新的话，只能for循环的执行更新。或者采用executeBatch的方式，执行更新。无论哪种方式，性能都不见得多好。 三千多条的更新，需要3分多钟。 查询了批量更新的优化，有说replace into的方式，即： replace into tableName(id,status) values
  • 微软BI（3） 18289753290 微软BI SSIS
    1) Q：该列违反了完整性约束错误；已获得 OLE DB 记录。源:“Microsoft SQL Server Native Client 11.0” Hresult: 0x80004005 说明:“不能将值 NULL 插入列 'FZCHID'，表 'JRB_EnterpriseCredit.dbo.QYFZCH'；列不允许有 Null 值。INSERT 失败。”。 A：一般这类问题的存在是
  • Java中的List g21121 java
            List是一个有序的 collection（也称为序列）。此接口的用户可以对列表中每个元素的插入位置进行精确地控制。用户可以根据元素的整数索引（在列表中的位置）访问元素，并搜索列表中的元素。         与 set 不同，列表通常允许重复
  • 读书笔记 永夜-极光 读书笔记
       1.  K是一家加工厂,需要采购原材料,有A,B,C,D 4家供应商,其中A给出的价格最低,性价比最高,那么假如你是这家企业的采购经理,你会如何决策?          传统决策: A:100%订单  B,C,D:0%     &nbs
  • centos 安装 Codeblocks 随便小屋 codeblocks
    1.安装gcc,需要c和c++两部分,默认安装下,CentOS不安装编译器的,在终端输入以下命令即可yum install gccyum install gcc-c++   2.安装gtk2-devel,因为默认已经安装了正式产品需要的支持库,但是没有安装开发所需要的文档.yum install gtk2* 3. 安装wxGTK    yum search w
  • 23种设计模式的形象比喻 aijuans 设计模式
    1、ABSTRACT FACTORY—追MM少不了请吃饭了，麦当劳的鸡翅和肯德基的鸡翅都是MM爱吃的东西，虽然口味有所不同，但不管你带MM去麦当劳或肯德基，只管向服务员说“来四个鸡翅”就行了。麦当劳和肯德基就是生产鸡翅的Factory 　　工厂模式：客户类和工厂类分开。消费者任何时候需要某种产品，只需向工厂请求即可。消费者无须修改就可以接纳新产品。缺点是当产品修改时，工厂类也要做相应的修改。如：
  • 开发管理 CheckLists aoyouzi 开发管理 CheckLists
    开发管理 CheckLists(23) -使项目组度过完整的生命周期 开发管理 CheckLists(22) -组织项目资源 开发管理 CheckLists(21) -控制项目的范围开发管理 CheckLists(20) -项目利益相关者责任开发管理 CheckLists(19) -选择合适的团队成员开发管理 CheckLists(18) -敏捷开发 Scrum Master 工作开发管理 C
  • js实现切换 百合不是茶 JavaScript栏目切换
    js主要功能之一就是实现页面的特效,窗体的切换可以减少页面的大小,被门户网站大量应用思路: 1,先将要显示的设置为display:bisible 否则设为none 2,设置栏目的id ,js获取栏目的id,如果id为Null就设置为显示 3,判断js获取的id名字;再设置是否显示   代码实现:   html代码: <di
  • 周鸿祎在360新员工入职培训上的讲话 bijian1013 感悟项目管理人生职场
            这篇文章也是最近偶尔看到的，考虑到原博客发布者可能将其删除等原因，也更方便个人查找，特将原文拷贝再发布的。“学东西是为自己的，不要整天以混的姿态来跟公司博弈，就算是混，我觉得你要是能在混的时间里，收获一些别的有利于人生发展的东西，也是不错的，看你怎么把握了”，看了之后，对这句话记忆犹新。  &
  • 前端Web开发的页面效果 Bill_chen htmlWebMicrosoft
    1.IE6下png图片的透明显示： <img src="图片地址" border="0" style="Filter.Alpha(Opacity)=数值(100),style=数值(3)"/> 或在<head></head>间加一段JS代码让透明png图片正常显示。 2.<li>标
  • 【JVM五】老年代垃圾回收：并发标记清理GC(CMS GC) bit1129 垃圾回收
      CMS概述 并发标记清理垃圾回收(Concurrent Mark and Sweep GC）算法的主要目标是在GC过程中，减少暂停用户线程的次数以及在不得不暂停用户线程的请夸功能，尽可能短的暂停用户线程的时间。这对于交互式应用，比如web应用来说，是非常重要的。   CMS垃圾回收针对新生代和老年代采用不同的策略。相比同吞吐量垃圾回收，它要复杂的多。吞吐量垃圾回收在执
  • Struts2技术总结 白糖_ struts2
      必备jar文件 早在struts2.0.*的时候，struts2的必备jar包需要如下几个： commons-logging-*.jar   Apache旗下commons项目的log日志包 freemarker-*.jar          
  • Jquery easyui layout应用注意事项 bozch jquery浏览器easyuilayout
    在jquery easyui中提供了easyui-layout布局，他的布局比较局限，类似java中GUI的border布局。下面对其使用注意事项作简要介绍：      如果在现有的工程中前台界面均应用了jquery easyui，那么在布局的时候最好应用jquery eaysui的layout布局，否则在表单页面（编辑、查看、添加等等）在不同的浏览器会出
  • java-拷贝特殊链表：有一个特殊的链表，其中每个节点不但有指向下一个节点的指针pNext，还有一个指向链表中任意节点的指针pRand，如何拷贝这个特殊链表？ bylijinnan java
    public class CopySpecialLinkedList { /** * 题目：有一个特殊的链表，其中每个节点不但有指向下一个节点的指针pNext，还有一个指向链表中任意节点的指针pRand，如何拷贝这个特殊链表？ 拷贝pNext指针非常容易，所以题目的难点是如何拷贝pRand指针。 假设原来链表为A1 -> A2 ->... -> An，新拷贝
  • color Chen.H JavaScripthtmlcss
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"  "http://www.w3.org/TR/html4/loose.dtd">    <HTML>    <HEAD>&nbs
  • [信息与战争]移动通讯与网络 comsci 网络
          两个坚持:手机的电池必须可以取下来                光纤不能够入户,只能够到楼宇       建议大家找这本书看看:<&
  • oracle flashback query(闪回查询) daizj oracleflashback queryflashback table
    在Oracle 10g中，Flash back家族分为以下成员： Flashback Database Flashback Drop Flashback Table Flashback Query(分Flashback Query,Flashback Version Query，Flashback Transaction Query) 下面介绍一下Flashback Drop 和Flas
  • zeus持久层DAO单元测试 deng520159 单元测试
    zeus代码测试正紧张进行中,但由于工作比较忙,但速度比较慢.现在已经完成读写分离单元测试了,现在把几种情况单元测试的例子发出来,希望有人能进出意见,让它走下去. 本文是zeus的dao单元测试: 1.单元测试直接上代码   package com.dengliang.zeus.webdemo.test; import org.junit.Test; import o
  • C语言学习三printf函数和scanf函数学习 dcj3sjt126com cprintfscanflanguage
    printf函数 /* 2013年3月10日20:42:32 地点：北京潘家园 功能： 目的： 测试%x %X %#x %#X的用法 */ # include <stdio.h> int main(void) { printf("哈哈！\n"); // \n表示换行 int i = 10; printf
  • 那你为什么小时候不好好读书? dcj3sjt126com life
    dady, 我今天捡到了十块钱, 不过我还给那个人了 good girl! 那个人有没有和你讲thank you啊 没有啦....他拉我的耳朵我才把钱还给他的, 他哪里会和我讲thank you   爸爸, 如果地上有一张5块一张10块你拿哪一张呢.... 当然是拿十块的咯... 爸爸你很笨的, 你不会两张都拿   爸爸为什么上个月那个人来跟你讨钱, 你告诉他没
  • iptables开放端口 Fanyucai linuxiptables端口
    1，找到配置文件 vi /etc/sysconfig/iptables   2，添加端口开放，增加一行，开放18081端口 -A INPUT -m state --state NEW -m tcp -p tcp --dport 18081 -j ACCEPT   3，保存 ESC :wq!   4，重启服务 service iptables
  • Ehcache（05）——缓存的查询 234390216 排序ehcache统计query
    缓存的查询 目录 1.    使Cache可查询 1.1     基于Xml配置 1.2     基于代码的配置 2     指定可搜索的属性 2.1     可查询属性类型 2.2 &
  • 通过hashset找到数组中重复的元素 jackyrong hashset
      如何在hashset中快速找到重复的元素呢?方法很多，下面是其中一个办法： int[] array = {1,1,2,3,4,5,6,7,8,8}; Set<Integer> set = new HashSet<Integer>(); for(int i = 0
  • 使用ajax和window.history.pushState无刷新改变页面内容和地址栏URL lanrikey history
    后退时关闭当前页面 <script type="text/javascript"> jQuery(document).ready(function ($) {         if (window.history && window.history.pushState) {
  • 应用程序的通信成本 netkiller.github.com 虚拟机应用服务器陈景峰netkillerneo
    应用程序的通信成本 什么是通信 一个程序中两个以上功能相互传递信号或数据叫做通信。 什么是成本 这是是指时间成本与空间成本。 时间就是传递数据所花费的时间。空间是指传递过程耗费容量大小。 都有哪些通信方式 全局变量 线程间通信 共享内存 共享文件 管道 Socket 硬件（串口，USB） 等等 全局变量 全局变量是成本最低通信方法，通过设置
  • 一维数组与二维数组的声明与定义 恋洁e生 二维数组一维数组定义声明初始化
    /**  *  */ package test20111005; /**  * @author FlyingFire  * @date:2011-11-18 上午04:33:36  * @author ：代码整理  * @introduce :一维数组与二维数组的初始化  *summary：  */ public c
  • Spring Mybatis独立事务配置 toknowme mybatis
    在项目中有很多地方会使用到独立事务，下面以获取主键为例   （1）修改配置文件spring-mybatis.xml  <!-- 开启事务支持 -->  <tx:annotation-driven transaction-manager="transactionManager" />   &n
  • 更新Anadroid SDK Tooks之后，Eclipse提示No update were found xp9802 eclipse
    使用Android SDK Manager 更新了Anadroid SDK Tooks 之后， 打开eclipse提示 This Android SDK requires Android Developer Toolkit version 23.0.0 or above, 点击Check for Updates  检测一会后提示 No update were found 
按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他