元素。它定义了一个块级别的盒子。
table-row-group
该元素的行为类似于 HTML 的 元素。
table-header-group
该元素的行为类似于 HTML 的 元素。
table-footer-group
该元素的行为类似于 HTML 的 元素。
table-row
该元素的行为类似于 HTML 的 元素。
table-cell
该元素的行为类似于 HTML 的 元素。
table-column-group
该元素的行为类似于 HTML 的
元素。
table-column
该元素的行为类似于 HTML 的
元素。
table-caption
该元素的行为类似于 HTML 的
元素。
flex
该元素的行为类似块级元素并且根据弹性盒模型布局它的内容。
grid
该元素的行为类似块级元素并且根据网格模型布局它的内容。
list-item
像块类型元素一样显示,并添加样式列表标记。
display:inline-block
为什么会有间隙?
原来HTML代码中的回车换行等被转成一个空白符,可以删除空格解决;
margin
正值时,可以让 margin
使用负值解决;
使用font-size
时,可通过设置font-size:0
、letter-spacing
、word-spacing
解决;
5. CSS中哪些可以与不可以继承属性
一、 无继承属性
盒子模型的属性:width、height、margin、border、padding
背景属性:background、background-color、background-image、background-repeat、background-position、background-attachment
定位属性:float、clear、position、top、right、bottom、left、min-width、max-width、min-height、max-height、overflow、clip、z-index
display:规定元素应该生成的框的类型
生成内容属性:content、counter-reset、counter-increment
轮廓样式属性:outline、outline-style、outline-width、outline-color
页面样式属性:size、page-break-before、page-break-after
声音样式属性:pause-before、pause-after、pause、cue-before、cue-after、cue、play-during
文本属性:
vertical-align:垂直文本对齐
text-decoration:规定添加到文本的装饰
text-shadow:文本阴影效果
white-space:空白符的处理
unicode-bidi:设置文本的方向
二、有继承的属性
字体系列属性
font-family:字体系列
font-weight:字体粗细
font-size:字体大小
font-style:字体风格
文本系列属性
text-indent:文本缩进
text-align:文本对齐方式
text-transform:控制文本大小写
line-height:行高
letter-spacing:中文或者字母之间的间距
word-spacing:单词之间的间距
color:文本颜色
列表布局属性
list-style:列表风格,包括list-style-image、list-styke-type等
元素可见性
光标属性
6. 对BFC(块级格式化上下文)的理解
块格式化上下文(Block Formatting Context,BFC)是 Web 页面的可视 CSS 渲染的一部分,是块级盒子的布局过程发生的区域,也是浮动元素与其他元素交互的区域。
下列方式会创建BFC:
根元素(
)
浮动元素(float
值不为 none
)
绝对定位元素(position
值为 absolute
或 fixed
)
行内块元素(display
值为 inline-block
)
表格单元格(display
值为 table-cell
,HTML 表格单元格默认值)
表格标题(display
值为 table-caption
,HTML 表格标题默认值)
匿名表格单元格元素(display
值为 table
、table-row
、 table-row-group
、table-header-group
、table-footer-group
(分别是 HTML table、tr、tbody、thead、tfoot 的默认值)或 inline-table
)
overflow
值不为 visible
、clip
的块元素
display
值为 flow-root
的元素
contain
值为 layout
、content
或 paint
的元素
弹性元素(display
值为 flex
或 inline-flex
元素的直接子元素),如果它们本身既不是 flex
、grid
也不是 table
容器
网格元素(display
值为 grid
或 inline-grid
元素的直接子元素),如果它们本身既不是 flex
、grid
也不是 table
容器
多列容器(column-count
或 column-width
值不为 auto
,包括column-count
为 1
)
column-span
值为 all
的元素始终会创建一个新的 BFC,即使该元素没有包裹在一个多列容器中
BFC的特点
BFC使用场景
解决margin的重叠问题:由于BFC是一个独立的区域,内部的元素和外部的元素互不影响,将两个元素变为两个BFC,就解决了margin重叠的问题。
解决高度塌陷的问题:在对子元素设置浮动后,父元素会发生高度塌陷,也就是父元素的高度变为0。解决这个问题,只需要把父元素变成一个BFC。常用的办法是给父元素设置overflow:hidden
。
创建自适应两栏布局:可以用来创建自适应两栏布局:左边的宽度固定,右边的宽度自适应。
.left {
width : 100px;
height : 200px;
background : red;
float : left;
}
.right {
height : 300px;
background : blue;
overflow : hidden;
}
"left">
"right">
左侧设置float:left
,右侧设置overflow: hidden
。这样右边就触发了BFC,BFC的区域不会与浮动元素发生重叠,所以两侧就不会发生重叠,实现了自适应两栏布局。
7. 什么是margin重叠问题?该如何解决?
问题描述: 两个块级元素的上外边距和下外边距可能会合并为一个外边距,其大小会取其中外边距值大的那个,这种行为就是外边距折叠。需要注意的是,浮动的元素和绝对定位这种脱离文档流的元素外边距不会折叠,重叠只会出现在垂直方向。
解决办法:
兄弟之间重叠
底部元素变为行内盒子: display: inline-block
底部元素设置浮动:float
底部元素的position的值为 absolute/fixed
父子之间重叠
父元素加入:overflow:hidden
父元素添加透明边框:border:1px solid transparent
子元素变为行内盒子:display:inline-block
子元素加入浮动属性或定位
8. position的属性有哪些?
属性
概述
static(默认定位)
指定元素使用正常的布局行为,即元素在文档常规流中当前的布局位置。此时 top
, right
, bottom
, left
和 z-index
属性无效。
relative(相对定位)
指定元素先放置在未添加定位时的位置,再在不改变页面布局的前提下调整元素位置(因此会在此元素未添加定位时所在位置留下空白)。position:relative
对 table-*-group
, table-row
, table-column
, table-cell
, table-caption
元素无效。
absolute(绝对定位)
元素会被移出正常文档流,并不为元素预留空间,通过指定元素相对于最近的非 static
定位祖先元素的偏移,来确定元素位置。绝对定位的元素可以设置外边距(margin),且不会与其他边距合并。
fixed(固定定位)
元素会被移出正常文档流,并不为元素预留空间,而是通过指定元素相对于屏幕视口的位置来指定元素位置。元素的位置在屏幕滚动时不会改变。打印时,元素会出现在的每页的固定位置。fixed 属性会创建新的层叠上下文。当元素祖先的 transform
、perspective
、filter
或 backdrop-filter
属性非 none
时,容器由视口改为该祖先。
sticky(粘性定位)
元素根据正常文档流进行定位,然后相对它的最近滚动祖先和最近块级祖先,包括 table-related 元素,基于 top、right、bottom 和 left 的值进行偏移。偏移值不会影响任何其他元素的位置。 该值总是创建一个新的层叠上下文。注意,一个 sticky 元素会“固定”在离它最近的一个拥有“滚动机制”的祖先上(当该祖先的 overflow 是 hidden、scroll、auto 或 overlay 时),即便这个祖先不是最近的真实可滚动祖先。
9. 隐藏元素的方法有哪些
display:none
:元素会变得不可见,元素从文档流中消失,不再占用文档的空间,不可交互
visibility:hidden
:元素在页面隐藏,仍占据空间,不可交互
position:absolute
:通过使用绝对定位将元素移除可视区域内,以此来实现元素的隐藏
opacity:0
:将元素的透明度设置为 0,以此来实现元素的隐藏。元素在页面中仍然占据空间,可以交互
transform:scale(0)
:将一个元素设置为缩放无限小,元素将不可见,元素原来所在的位置将被保留,不可交互
height:0/width:0
: 将元素高度/宽度设置为0,以此来实现隐藏
z-index:负值
:来使其他元素遮挡住该元素,以此来实现隐藏
clip/clip-path
:使用元素裁剪的方法来实现元素的隐藏,这种方法下,元素仍在页面中占据位置,不可交互
10. link和@import的区别
link
可以放在html
任意位置,@import
一定要写在除@charset
外的其他任何 CSS
规则之前,并且@import
之后的分号必须书写不可省略;
link
的内容会被并行加载,html
内的@import
也会被并行加载,但是link
内的import
需要等到页面加载完后才会加载;
@import
需要 IE5
以上才能使用,link
作为html
标签没有兼容问题;
link
可以使用 js
动态插入,@import
也可以通过js
插入,但是比较麻烦;需要新建一个style
标签,在style
标签里面再注入import
指令再插入
到页面上;
11. 简述transition、animation的区别
transition
:样式过渡,从一种效果逐渐改变为另一种效果,它是一个合写属性。transition: transition-property transition-duration transition-timing-function transition-delay 从左到右,依次是:过渡效果的css属性名称、过渡效果花费时间、速度曲线、过渡开始的延迟时间 transition
通常和 hover 等事件配合使用,需要由事件来触发过渡。
animation
:- css3
的animation
是css3新增的动画属性,这个css3
动画的每一帧是通过@keyframes
来声明的,keyframes
声明了动画的名称,通过from
、to
或者是百分比来定义。
transition
设置的是 css
属性变化时的过渡动画,而 animation
动画会自动执行; transition
定义的动画触发一次执行一次,想再次执行就需要再次触发;animation
可以执行指定次数或者无数次;
transition
定义的动画只有两个状态,开始态和结束态,animation
可以定义多个动画中间态,且可以控制多个复杂动画的有序执行。
12. 伪元素和伪类的区别及作用
伪类: 是添加到选择器的关键字,用于指定所选元素的特殊状态
button:hover {
color : blue;
}
伪元素: 是一个附加至选择器末的关键词,允许你对被选择元素的特定部分修改样式
p::first-line {
color : blue;
text-transform : uppercase;
}
总结: 伪类是通过在元素选择器上加⼊伪类改变元素状态,⽽伪元素通过对元素的操作进⾏对元素的改变。
13. 为什么有时候用translate来改变位置而不是定位
translate
是 transform
属性的⼀个值。改变transform
或opacity
不会触发浏览器重新布局或重绘,只会触发复合。⽽改变绝对定位会触发重新布局,进⽽触发重绘和复合。transform
使浏览器为元素创建⼀个 GPU 图层,但改变绝对定位会使⽤到 CPU。 因此translate
更⾼效,可以缩短平滑动画的绘制时间。 ⽽translate
改变位置时,元素依然会占据其原始空间,绝对定位就不会发⽣这种情况。
14. 对line-height的理解及赋值方式
line-height
CSS 属性用于设置多行元素的空间量,如多行文本的间距。对于块级元素,它指定元素行盒的最小高度。对于非替代的 inline 元素,它用于计算行盒的高度。
赋值
作用
normal
取决于用户端。桌面浏览器使用默认值,约为1.2
,这取决于元素的 font-family
数字(line-height: 1.2
)
该属性的应用值是这个无单位数字<数字>
乘以该元素的字体大小。计算值与指定值相同。大多数情况下,这是设置line-height
的推荐方法 ,不会在继承时产生不确定的结果
长度(line-height: 1.2em
)
px 是固定值,而 em 会参考父元素 font-size 计算自身的 行高
百分比(line-height: 120%
)
与元素自身的字体大小有关。计算值是给定的百分比值乘以元素计算出的字体大小。百分比 值可能会带来不确定的结果
15. CSS优化和提高性能的方法
加载性能:
css压缩:将写好的css进行打包压缩,可以减少文件体积
css单一格式:当需要下边距和左边距的时候,使用margin-bottom:bottom;margin-left:left
减少使用@import,建议使用link,因为link在页面加载时一起加载,@import是等待页面加载完成后再进行加载
选择器性能:
关键选择器,选择器的最后面的部分为关键选择器(即用来匹配目标元素的部分)。CSS选择符是从右到左进行匹配的。当使用后代选择器的时候,浏览器会遍历所有子元素来确定是否是指定的元素等等
如果规则拥有id选择器作为其关键选择器,则不要为规则添加标签
避免使用通配规则,如*{}计算次数惊人,只对需要用到的元素进行选择
尽量少的去对标签进行选择,而是使用class
尽量少的去使用后代选择器,降低选择器的权重值;后代选择器的开销是最高的,尽量将选择器的深度降到最低,最高不要超过三层,更多的使用类来关联每一个标签元素
了解哪些属性是可以通过继承而来的,然后避免对这些属性重复指定规则
渲染性能:
慎重使用高性能属性:浮动,定位
尽量减少页面重排、重绘
去除空规则:{}。空规则的产生原因一般来说是为了预留样式,去除这些空规则无疑能减少css文档体积
属性值为0时,不加单位
属性值为浮动小数点0.** ,可以省略小数点之前的0
标准化各种浏览器前缀,带浏览器前缀的在前,标准属性在后
不使用@import前缀,它会影响css的加载速度
选择器优化嵌套,尽量避免层级过深
正确使用display的属性,由于display的作用,某些样式组合会无效,增加样式体积的同时也影响解析性能
不滥用web字体,webfont通常体积庞大,一些浏览器在下载字体时会阻塞页面渲染损伤性能
可维护性、健壮性:
将具有相同属性的样式抽离出来,整合并通过class在页面中进行使用,提高css的可维护性
样式与内容分离,将css代码定义到外部css中
16. css预处理器/后处理器是什么?为什么要使用?
预处理器 如:less
、sass
、stylus
,用来预编译sass
或者less
,增加了css
代码的复用性;层级,mixin
,变量,循环,函数等对编写以及开发UI组件都极为方便
后处理器 如:postcss
,通常是在完成的样式表中根据css规范处理css,让其更加有效。目前最常做的是给css属性添加浏览器私有前缀,实现跨浏览器兼容性的问题
css预处理器为css增加一些编程特性,无需考虑浏览器的兼容问题,可以在css中使用变量,简单的逻辑程序,函数等在编程语言中的一些基本的性能,可以让css更加的简洁,增加适应性以及可读性,可维护性等
使用原因:
结构清晰,便于扩展
可以很方便的屏蔽浏览器私有语法的差异
可以轻松实现多重继承
完美的兼容了css代码,可以应用到老项目中
17. 单行、多行文本溢出隐藏
单行
overflow : hidden; // 溢出隐藏
text-overflow : ellipsis; // 溢出用省略号显示
white-space : nowrap; // 规定段落中的文本不进行换行
多行
overflow : hidden; // 溢出隐藏
text-overflow : ellipsis; // 溢出用省略号显示
display : -webkit-box; // 作为弹性伸缩盒子模型显示
-webkit-box-orient : vertical; // 设置伸缩盒子的子元素排列方式:从上到下垂直排列
-webkit-line-clamp : 3; // 显示的行数
18. 对媒体查询的理解
@media
CSS @ 规则 可用于基于一个或多个媒体查询的结果来应用样式表的一部分。使用它,你可以指定一个媒体查询和一个 CSS 块,当且仅当该媒体查询与正在使用其内容的设备匹配时,该 CSS 块才能应用于该文档。
< ! -- link元素中的CSS 媒体查询 -- >
< link rel= "stylesheet" media= "(max-width: 800px)" href= "example.css" / >
< ! -- 样式表中的CSS 媒体查询 -- >
< style>
@media ( max- width: 600px ) {
. facet_sidebar {
display : none;
}
}
@media only screen and ( min- width: 320px) and ( max- width: 480px) and ( resolution : 150dpi) {
body {
line- height: 1.4 ;
}
}
@media ( 400px <= width <= 700px ) {
body {
line- height: 1.4 ;
}
}
< / style>
19. 如何判断元素是否到达可视区域
window.innerHeight
是浏览器可视区的高度;
document.body.scrollTop || document.documentElement.scrollTop
是浏览器滚动的过的距离;
imgs.offsetTop
是元素顶部距离文档顶部的高度(包括滚动条的距离);
内容达到显示区域的:img.offsetTop < window.innerHeight + document.body.scrollTop;
20. 说说弹性盒布局模型以及使用场景
通常被称为flexbox
,flex
是弹性布局
,是CSS3
的一种布局方式,给子元素提供了空间分布和对齐能力。它由(Flex Container
容器/Flex item
项目成员)构成。
flex
布局的元素称为Flex Container
容器,它的所有子元素都是Flex item
项目成员;
容器有两个轴线排列,水平轴和垂直轴,默认为水平轴排列;
理器属性
flex-direction
属性:有 row | row-reverse | column | column-reverse
等取值,决定主轴的方向(即项目成员的排列方向)。
row
(默认值):主轴为水平方向,起点在左端。
row-reverse
:主轴为水平方向,起点在右端。
column
:主轴为垂直方向,起点在上沿。
column-reverse
:主轴为垂直方向,起点在下沿。
flex-wrap
属性:有 nowrap | wrap | wrap-reverse
等取值如果一条轴线排不下,如何换行。
nowrap
(默认):不换行。
wrap
:换行,第一行在上方。
wrap-reverse
:换行,第一行在下方。
flex-flow
属性:是flex-direction属性和flex-wrap属性的简写形式,默认值为row nowrap。
justify-content
属性:定义了项目在主轴上的对齐方式(水平方向)。
align-items
属性:定义项目在交叉轴上的对齐方式(垂直方向)。
align-content
属性:定义了多根轴线的对齐方式。如果项目只有一根轴线,该属性不起作用。
项目属性
order
: 定义项目的排列顺序。数值越小,排列越靠前,默认为0
flex-grow
:项目的放大比例,默认为0
,即如果存在剩余空间,也不放大
如果所有项目的flex-grow
属性相等(或都为1
),将等分剩余空间,如果有一个为2
,那么它占据的剩余空间将比其他项目多
flex-shrink
:项目的缩小比例,默认为1
,即如果空间不足,该项目将缩小
flex-basis
属性定义了在分配多余空间之前,项目占据的主轴空间(main size
)。浏览器根据这个属性,计算主轴是否有多余空间。它的默认值为auto
,也就是项目的本来大小
flex
属性是flex-grow
,flex-shrink
和 flex-basis
的简写,默认值为0 1 auto
后 两个属性可选。该属性有两个快捷值
:auto (1 1 auto)
和 none (0 0 auto)
;如果设置 flex:1
,就等于 flex: 1 1 0
;设置 flex:0
;就等于 flex: 0 0 0
align-self
:允许单个项目有与其他项目不一样的对齐方式,可覆盖align-items
属性。默认值为auto
,表示继承父元素的align-items
属性,如果没有父元素,则等同于stretch
注意事项
在父级元素设置为flex
布局后,子元素的float
、clear
、vertical-align
属性都将失效,所以在使用flex
布局时,不应该先设置完子元素布局后再使用
作用
水平垂直居中
,两栏
、三栏布局
等的场景里
21.两栏布局实现
左float
+ 右margin
(左设置固定宽度+向左浮动
,右边设置margin-left
为左边的固定宽度)
.left {
float : left;
height : 100px;
width : 200px;
background : tomato;
}
.right {
margin-left : 200px;
height : 100px;
width : auto;
background : gold;
}
左float
+右BFC
,是利用了BFC
的区域不会与 float
的元素区域重叠的机制
.left {
width : 100px;
height : 200px;
background : red;
float : left;
}
.right {
height : 300px;
background : blue;
overflow : hidden;
}
.outer {
display : flex;
height : 100px;
}
.left {
width : 200px;
background : tomato;
}
.right {
flex : 1;
background : gold;
}
.outer {
position : relative;
height : 100px;
}
.left {
position : absolute;
width : 200px;
height : 100px;
background : tomato;
}
.right {
margin-left : 200px;
background : gold;
}
.parent {
width : 300px;
height : 400px;
}
.left {
float : left;
width : 100px;
height : 100%;
background : #bce8f1;
}
.right {
float : left;
width : calc ( 100% - 100px) ;
height : 100%;
background : coral;
}
22. 三栏布局实现
左右绝对定位
+中margin
:左右两栏设置绝对定位放左右,中间设置两个方面的margin
值
.outer {
position : relative;
height : 100px;
}
.left {
position : absolute;
width : 100px;
height : 100px;
background : tomato;
}
.right {
position : absolute;
top : 0;
right : 0;
width : 200px;
height : 100px;
background : gold;
}
.center {
margin-left : 100px;
margin-right : 200px;
height : 100px;
background : lightgreen;
}
圣杯布局
:父元素设置左右padding
,子元素三栏都通过float
浮动,通过负值margin
进行调整
.outer {
height : 100px;
padding-left : 100px;
padding-right : 200px;
}
.left {
position : relative;
left : -100px;
float : left;
margin-left : -100%;
width : 100px;
height : 100px;
background : tomato;
}
.right {
position : relative;
left : 200px;
float : right;
margin-left : -200px;
width : 200px;
height : 100px;
background : gold;
}
.center {
float : left;
width : 100%;
height : 100px;
background : lightgreen;
}
左右float
+中margin
:左右栏定宽并设置浮动,中间一栏设置左右两个方向的margin
值且不设置宽度;(中间一栏必须放在最后
)
.outer {
height : 100px;
}
.left {
float : left;
width : 100px;
height : 100px;
background : tomato;
}
.right {
float : right;
width : 200px;
height : 100px;
background : gold;
}
.center {
height : 100px;
margin-left : 100px;
margin-right : 200px;
background : lightgreen;
}
.outer {
height : 100px;
}
.left {
float : left;
margin-left : -100%;
width : 100px;
height : 100px;
background : tomato;
}
.right {
float : left;
margin-left : -200px;
width : 200px;
height : 100px;
background : gold;
}
.wrapper {
float : left;
width : 100%;
height : 100px;
background : lightgreen;
}
.center {
margin-left : 100px;
margin-right : 200px;
height : 100px;
}
最简单的flex
布局,左右设置flex: 0 1 200px
;中间设置flex:1;
父元素flex
.outer {
display : flex;
height : 100px;
}
.left {
width : 100px;
background : tomato;
}
.right {
width : 100px;
background : gold;
}
.center {
flex : 1;
background : lightgreen;
}
23. 实现一个三角形
CSS绘制三角形主要用到的是border属性,也就是边框。
平时在给盒子设置边框时,往往都设置很窄,就可能误以为边框是由矩形组成的。实际上,border属性是右三角形组成的,下面看一个例子:
div {
width : 0;
height : 0;
border : 100px solid;
border-color : orange blue red green;
}
24. 实现一个扇形
用CSS实现扇形的思路和三角形基本一致,就是多了一个圆角的样式,实现一个90°的扇形:
div {
border : 100px solid transparent;
width : 0;
heigt : 0;
border-radius : 100px;
border-top-color : red;
}
25. 实行一个宽高自适应的正方形
.square {
width : 10%;
height : 10vw;
background : tomato;
}
利用元素的margin/padding百分比是相对父元素width的性质来实现:
.square {
width : 20%;
height : 0;
padding-top : 20%;
background : orange;
}
.square {
width : 30%;
overflow : hidden;
background : yellow;
}
.square::after {
content : '' ;
display : block;
margin-top : 100%;
}
26. 画一条0.5px的线
采用transform: scale()的方式 ,该方法用来定义元素的2D 缩放转换:
transform : scale ( 0.5, 0.5) ;
你可能感兴趣的:(前端面试题整理,前端,面试,css,css3)
Selenium面试题(二)
知识的宝藏
Selenium(Java) selenium 测试工具
如何在不使用sendKeys()的情况下输入文本可以通过组合使用JavaScript和WebDriver扩展类来实现。以下是一个示例代码:publicstaticvoidsetAttribute(WebElementelement,StringattributeName,Stringvalue){WrapsDriverwrappedElement=(WrapsDriver)element;Java
Java经典面试题118问,还不会你就out了!(附赠答案)
阿博的java技术栈
前言1.什么是Java虚拟机?为什么Java被称作是"平台无关的编程语言"?Java虚拟机是一个可以执行Java字节码的虚拟机进程。Java源文件被编译成能被Java虚拟机执行的字节码文件。Java被设计成允许应用程序可以运行在任意的平台,而不需要程序员为每一个平台单独重写或者是重新编译。Java虚拟机让这个变为可能,因为它知道底层硬件平台的指令长度和其特性。2.JDK和JRE的区别是什么?Jav
前端文件预览,PDF,word,TXT
LJ小番茄
随便写点 pdf
先说一下需求:这里要做的就是从后端返回的URL下载地址,然后前端去渲染出来刚开始看了其他的一些博主的文章,都是不怎么适用于我,我自己找了几个新的第三方库vue-office/pdf官网:vue-office简介|vue-office这里支持docx,xlsx,PDF文件格式mammoth.js文档:mammoth-npmPDF预览我用的是vue-office/pdf这个库//引入该库importV
前端基础知识点
der..
html css javascript
本人现在是一名准大二计算机系的学生,准备开始写博客,一方面是想在csdn留下自己的足迹,另一方面是想通过写博客来提高自己的能力。以后会分享一些学习心得,程序代码,以及我的一些学习计划,还有每天学习后的知识总结。如果你和我一样,不甘于平凡,那么,就请给我点一个关注,我们互相交流,共同进步。--------------------------------------------------------
linux多个sh 同时执行命令,sh, 批量执行Linux命令
一颗橙子君
linux多个sh 同时执行命令
step1:创建一个sh批处理命令文件#vim/etc/batch_ssh/install_redis.shstep2:给当前用户,能够执行sh脚本权限#chmodinstall_redis.sh777step3:编写要批量执行的命令,read表示等待前端用户输入,sleep表示等待时间单位为秒。echo'\nbegintoinstall01plugin\n';yuminstallcpp-y;ec
uniapp 小程序样式兼容
zpjing~.~
uni-app 小程序 前端
一、遇到的问题使用uniapp一起开发h5和小程序版本,在h5上样式是正常的,但是小程序里样式未生效二、遇到的情况1、*标签经过小程序编译后会变成label标签,css中span样式的位置label标签*标签位置添加class,class在h5和小程序中都兼容2、ulli*标签标签经过小程序编译后会变成view标签*标签位置添加class,class在h5和小程序中都兼容3、引用子组件div中几个
hr标签和注释的总结
Rashore
web零基础学习 html css html5
hr标签的定义与使用说明定义以及使用说明标签定义HTML页面中的主题变化(比如话题的转移),并显示为一条水平线。元素被用来分隔HTML页面中的内容(或者定义一个变化)。实例hr标签的使用HTMLHTML是用于描述web页面的一种语言。CSSCSS定义如何显示HTML元素。html中注释的使用定义注释标签用来在源文档中插入注释。注释不会在浏览器中显示。使用范围我们可使用注释对您的代码进行解释,这样做
前端进阶:JavaScript实现优雅遮罩层下的表单验证技巧
VaporGas
前端 前端 javascript html html5 ecmascript 开发语言
表单验证的高级特性本次介绍的重点如下:动态改变样式属性className属性的用法遮罩层特效的制作动态输入的提示特性实现当文本框获得焦点时改变背景颜色,失去焦点时恢复白色使用元素的style属性访问样式规则object.style.property;例如:访问字体的颜色color使用obj.style.color访问字体的大小属性使用obj.style.fontSizefont-size变换成fo
jQuery选择器
VaporGas
前端 jquery 前端 javascript 学习
jQuery选择器jQuery选择器类似于CSS选择器,用来选取网页中的元素$("h3").css("background","#09F");代码分析:获取并设置网页中所有元素的背景“h3”为选择器语法,必须放在$()中$(“h3”)返回jQuery对象.css()是为jQuery对象设置样式的方法jQuery选择器分类jQuery选择器功能强大,种类也很多,分类如下:类CSS选择器基本选择器层次
前端工程化——脚手架及自动化构建
Jelly-JK
前端工程化 javascript node.js html
定义一切以提高效率、降低成本、质量保证为目的的手段,都属于工程化前端工程化主要解决的问题传统语言或语法的弊端无法使用模块化/组件化重复性的机械工作代码风格统一、质量保证依赖后端服务接口的保证整体依赖后端项目工程化的表现体现在项目的整个流程:创建项目创建项目结构创建特定类型文件编码格式化校验校验代码风格编译/构建/打包预览/测试WebServer/MockLiveReloading/HMRSourc
Java架构师学习路线
网络全息测量
心得体会
(1)第一步:研究spring,hibernate。通过研究jeecms开源框架。也同时学习css,html,javascript,jquery.以前都学习过,不过没有系统学习过,现在必须系统学习。同时看cms相关的论文。然后,改造jeecms能够改为自己的一个开源框架,以后开发cms系统都用我自己开发的框架,作为第一阶段的成果。(2)第二步:学习开源工作流引擎Activiti5,jbpm4.4以
使用Electron读取本地文件
ch_s_t
前端开发 electron javascript 前端
Electron原来叫AtomShell,可以用Web技术搭建桌面端程序,以Electron为基础,可以用HTML,CSS和javascriptpt实现程序逻辑和用户桌面,Electron程序一般有主进程和渲染进程,主进程是启动程序的Node脚本,提供对原生的node模块访问。渲染进程是由chromium管理的Web界面。以下的内容介绍从零开始搭建一个读取本地文件的Electron项目。一运行简单
[WinError 10013] 以一种访问权限不允许的方式做了一个访问套接字的尝试
lgc0208
服务器 网络 socket
在使用Tensorboard的过程中,遇到报错[WinError10013]以一种访问权限不允许的方式做了一个访问套接字的尝试可能原因:当前端口被占用。解决方案:以6006端口为例,首先打开命令行,输入命令:netstat-aon|findstr"6006"查找当前正在占用6006端口的进程PID。查询到对应进程PID后,打开任务管理器,点击详细信息,找到PID对应的进程关闭即可。
块级标签不自动换行的解决方式
搜捕鸟了
HTML&CSS 前端 css html
关键点:任何固定了长度的块级元素里,长单词和长数字不自动换行,中文字符会自动换行效果如下:https://codepen.io/xiao_5/pen/oNQZOpZ解决方案:给块级元素添加word-wrap:break-word;或word-break:break-all;样式。扩展知识点:CSS属性word-break,用于控制文本在换行时的断字规则,参考链接CSS属性word-wrap,允许长
mysql是后端还是前端_MySQL数据库之前端和后端的系统优化
草莓西瓜大桃子
mysql是后端还是前端
本文中介绍的系统优化,主要针对前端和后台这两方面(后台方面主要对SQL语句和数据存储进行了优化),下文中我们将介绍一些优化技巧和经验。技巧:1.如何查出效率低的语句?在MySQL下,在启动参数中设置--log-slow-queries=[文件名],就可以在指定的日志文件中记录执行时间超过long_query_time(缺省为10秒)的SQL语句。你也可以在启动配置文件中修改longquery的时间
css 个人喜欢的样式 速查笔记
waterHBO
css 笔记 前端
起因,目的:记录自己喜欢的,觉得比较好看的css.下次用的时候,直接复制,很方便。1.个人html模板,导入常用的link设置英语字体:Noto导入默认的css使用网络icon图标导入Bootstrapcss框架html-->2.常用css模板todo,以后再增加。*{font-family:"NotoSerif",system-ui;font-optical-sizing:auto;}Noto字
Vue解說
白总Server
vue.js 前端 javascript 数据库架构 网络协议 ssl 网络
Vue.js(通常简称为Vue)是一个开源的JavaScript框架,用于构建用户界面和单页应用程序(SPA)。它由前谷歌工程师尤雨溪(EvanYou)创建,并首次发布于2014年。Vue被设计为易于上手、灵活且高效,它允许开发者通过组件化的方式构建复杂的前端应用。Vue.js的关键特点:渐进式框架:Vue可以从简单的界面元素开始,逐步扩展到复杂的单页应用。响应式数据绑定:Vue使用双向数据绑定,
程式语言区分
白总Server
html python java c++ 开发语言
程序语言有很多种,每种都有其特定的用途和特点。以下是一些广泛使用的编程语言:1.Python:易于学习,广泛用于数据科学、机器学习、网络开发、自动化等领域。2.Java:广泛应用于企业级应用、安卓开发、大型系统开发等。3.C:一种基础语言,广泛用于系统编程、嵌入式开发、操作系统等领域。4.C++:C语言的扩展,支持面向对象编程,用于游戏开发、高性能应用等。5.JavaScript:主要用于网页前端
div和textarea中英文和数字不换行解决方案
k_t_feng
网页前端
设置div的css:word-wrap:break-word;word-break:break-all;解释:word-wrap:break-word;强制换行以单词为分解word-break:break-all;强制换行以最后一个单词,会强制拆分单词
java面试--http和https的区别
望山。
面试题 http https
先来观察这两张图,第一张访问域名http://www.12306.cn,谷歌浏览器提示不安全链接,第二张是https://kyfw.12306.cn/otn/regist/init,浏览器显示安全,为什么会这样子呢?2017年1月发布的Chrome56浏览器开始把收集密码或信用卡数据的HTTP页面标记为“不安全”,若用户使用2017年10月推出的Chrome62,带有输入数据的HTTP页面和所有以
html animation 属性,css3学习--css3动画详解一(animation属性)
蜗牛老湿
html animation 属性
***介绍的属性并不完全,写的都是我认为容易混淆的难点属性,所以属性会在最后综合案例展示~Keyframes介绍:Keyframes被称为关键帧,其类似于Flash中的关键帧。在CSS3中其主要以“@keyframes”开头,后面紧跟着是动画名称加上一对花括号“{…}”,括号中就是一些不同时间段样式规则。@keyframeschangecolor{0%{background:red;}100%{b
css3动画延迟运行 animation-delay
努力,加油,奋斗
笔记
1.语法animation:namedurationtiming-functiondelayiteration-countdirectionfill-modeplay-state;2.说明name指定要绑定到选择器的关键帧的名称duration动画指定需要多少秒或毫秒完成timing-function设置动画将如何完成一个周期delay设置动画在启动前的延迟间隔。iteration-count定义
前端架构师招聘
qq_42801150
前端架构 金融
前端架构师(薪酬50-80W)所属部门:医美云事业部级别:T4岗位职责:1.负责事业部前端技术选型、关键技术决策;2.负责为技术VP前端相关技术决策提供建议和支持;3.负责组织实施内部UI库、内部基础研发工具和研发依赖的开发和实施;4.负责制订公司前端研发规范的制订和实施审查;5.负责组织定期内部前端业务培训,协助提升内部员工前端业务技能。任职要求:1.5年以上工作经验,大型互联网公司前端团队技术
大前端面试题集锦——HTML篇
Midshar.top
前端 html
HTML篇1.什么是DOCTYPE,有何作用?DOCTYPE是用来声明HTML文档应当使用哪种版本来进行解析如果不使用DOCTYPE告知浏览器应当使用哪种版本解析文档,那么浏览器将会开启最大兼容模式来解析文档,一般称为怪异模式.在怪异模式下,可能会产生一些预想不到的bug2.说说对HTML语义化的理解?HTML的语义化指的是在合适的地方使用合适的标签,让人能够根据标签进而大致知晓标签内容语义化使得
高频面试题:ReactNative前端面试频率较高的面试题和答案(十六)
夲奋亻Jay
高频面试题 react 跨端 react native 前端 面试
ReactNative是一个由Facebook开发的框架,它允许使用React来开发原生移动应用。以下是一些在前端面试中可能会问到的关于ReactNative的高频面试题及答案:ReactNative是什么?答案:ReactNative是一个基于React构建的框架,允许使用JavaScript和React的编程方式来开发原生移动应用。ReactNative与React有什么不同?答案:React
CSS接入的四种方式
本来无一物_f1f2
1.内联内联式是将CSS样式集中写在网页的标签对的标签对中。格式如下:...此处写CSS样式缺点是对于一个包含很多网页的网站,在每个网页中使用内联式,进行修改样式时非常麻烦。单一网页可以考虑使用内联式。2.内嵌具体表现形式3.外联也是将一个.css文件引入到HTML文件中,在网页的标签对中使用标记来引入外部样式表文件,使用语法如下:4.链接式在css文件中@importurl(./b.css);总
前端架构师的职责
acigt0531
前端 git ViewUI
前端架构师的职责没有文档的代码=放弃治疗作为前端架构师,首先要解决的问题就是让日益膨胀的代码可控,因此你需要梳理代码,建立架构,组织文档,管理架构的更新和维护,评审技术方案对架构的影响,核心模块的方案设计,重点项目的方案设计,CodeReview等.架构师和资深开发在工作职责上有着明确的界限,在一个没有架构师的团队,每一个资深开发或多或少都承担了一部分架构的工作,但都是破碎的,不成体系而且不统一,
前端技能树,面试复习第 54 天—— 手写代码:情景题
编程轨迹_
前端面试复习笔记 前端 面试题 手写题 真题 场景题
⭐️本文首发自前端修罗场(点击加入社区,参与学习打卡,获取奖励),是一个由资深开发者独立运行的专业技术社区,我专注Web技术、区块链、Web3、答疑解惑、面试辅导以及职业发展。本文已收录至前端面试题库专栏:《前端面试复习笔记》(点击订阅)。1.循环打印红黄绿下面来看一道比较典型的问题,通过这个问题来对比几种异步编程方法:红灯3s亮一次,绿灯1s亮一次,黄灯2s亮一次;如何让三个灯不断交替重复亮灯?
CSS前端经典面试题及解析——小白入门必备
2301_82243710
程序员 前端 css
12.如何实现一个使用非标准字体的网页设计?使用@font-face并为不同的font-weight定义font-family。13.解释浏览器如何确定哪些元素与CSS选择器匹配。这部分与上面关于编写高效的CSS有关。浏览器从最右边的选择器(关键选择器)根据关键选择器,浏览器从DOM中筛选出元素,然后向上遍历被选元素的父元素,判断是否匹配。选择器匹配语句链越短,浏览器的匹配速度越快。例如,对于形如
前端基础面试题·第三篇——JavaScript(其四)
DT——
前端面试 javascript 前端 开发语言
highlight:atom-one-dark1.JSON.stringifyJSON.stringify()方法将一个JavaScript值(对象或者数组)转换为一个JSON字符串,如果指定了一个replacer函数,则可以替换值。语法:JSON.stringify(value,replacer,space)参数value:要转换的值。replacer:替换值,可以是一个函数或者数组。(这个参数
对于规范和实现,你会混淆吗?
yangshangchuan
HotSpot
昨晚和朋友聊天,喝了点咖啡,由于我经常喝茶,很长时间没喝咖啡了,所以失眠了,于是起床读JVM规范,读完后在朋友圈发了一条信息:
JVM Run-Time Data Areas:The Java Virtual Machine defines various run-time data areas that are used during execution of a program. So
android 网络
百合不是茶
网络
android的网络编程和java的一样没什么好分析的都是一些死的照着写就可以了,所以记录下来 方便查找 , 服务器使用的是TomCat
服务器代码; servlet的使用需要在xml中注册
package servlet;
import java.io.IOException;
import java.util.Arr
[读书笔记]读法拉第传
comsci
读书笔记
1831年的时候,一年可以赚到1000英镑的人..应该很少的...
要成为一个科学家,没有足够的资金支持,很多实验都无法完成
但是当钱赚够了以后....就不能够一直在商业和市场中徘徊......
随机数的产生
沐刃青蛟
随机数
c++中阐述随机数的方法有两种:
一是产生假随机数(不管操作多少次,所产生的数都不会改变)
这类随机数是使用了默认的种子值产生的,所以每次都是一样的。
//默认种子
for (int i = 0; i < 5; i++)
{
cout<<
PHP检测函数所在的文件名
IT独行者
PHP 函数
很简单的功能,用到PHP中的反射机制,具体使用的是ReflectionFunction类,可以获取指定函数所在PHP脚本中的具体位置。 创建引用脚本。
代码:
[php]
view plain
copy
// Filename: functions.php
<?php&nbs
银行各系统功能简介
文强chu
金融
银行各系统功能简介 业务系统 核心业务系统 业务功能包括:总账管理、卡系统管理、客户信息管理、额度控管、存款、贷款、资金业务、国际结算、支付结算、对外接口等 清分清算系统 以清算日期为准,将账务类交易、非账务类交易的手续费、代理费、网络服务费等相关费用,按费用类型计算应收、应付金额,经过清算人员确认后上送核心系统完成结算的过程 国际结算系
Python学习1(pip django 安装以及第一个project)
小桔子
python django pip
最近开始学习python,要安装个pip的工具。听说这个工具很强大,安装了它,在安装第三方工具的话so easy!然后也下载了,按照别人给的教程开始安装,奶奶的怎么也安装不上!
第一步:官方下载pip-1.5.6.tar.gz, https://pypi.python.org/pypi/pip easy!
第二部:解压这个压缩文件,会看到一个setup.p
php 数组
aichenglong
PHP 排序 数组 循环 多维数组
1 php中的创建数组
$product = array('tires','oil','spark');//array()实际上是语言结构而不 是函数
2 如果需要创建一个升序的排列的数字保存在一个数组中,可以使用range()函数来自动创建数组
$numbers=range(1,10)//1 2 3 4 5 6 7 8 9 10
$numbers=range(1,10,
安装python2.7
AILIKES
python
安装python2.7
1、下载可从 http://www.python.org/进行下载#wget https://www.python.org/ftp/python/2.7.10/Python-2.7.10.tgz
2、复制解压
#mkdir -p /opt/usr/python
#cp /opt/soft/Python-2
java异常的处理探讨
百合不是茶
JAVA异常
//java异常
/*
1,了解java 中的异常处理机制,有三种操作
a,声明异常
b,抛出异常
c,捕获异常
2,学会使用try-catch-finally来处理异常
3,学会如何声明异常和抛出异常
4,学会创建自己的异常
*/
//2,学会使用try-catch-finally来处理异常
getElementsByName实例
bijian1013
element
实例1:
<!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/1999/x
探索JUnit4扩展:Runner
bijian1013
java 单元测试 JUnit
参加敏捷培训时,教练提到Junit4的Runner和Rule,于是特上网查一下,发现很多都讲的太理论,或者是举的例子实在是太牵强。多搜索了几下,搜索到两篇我觉得写的非常好的文章。
文章地址:http://www.blogjava.net/jiangshachina/archive/20
[MongoDB学习笔记二]MongoDB副本集
bit1129
mongodb
1. 副本集的特性
1)一台主服务器(Primary),多台从服务器(Secondary)
2)Primary挂了之后,从服务器自动完成从它们之中选举一台服务器作为主服务器,继续工作,这就解决了单点故障,因此,在这种情况下,MongoDB集群能够继续工作
3)挂了的主服务器恢复到集群中只能以Secondary服务器的角色加入进来
2
【Spark八十一】Hive in the spark assembly
bit1129
assembly
Spark SQL supports most commonly used features of HiveQL. However, different HiveQL statements are executed in different manners:
1. DDL statements (e.g. CREATE TABLE, DROP TABLE, etc.)
Nginx问题定位之监控进程异常退出
ronin47
nginx在运行过程中是否稳定,是否有异常退出过?这里总结几项平时会用到的小技巧。
1. 在error.log中查看是否有signal项,如果有,看看signal是多少。
比如,这是一个异常退出的情况:
$grep signal error.log
2012/12/24 16:39:56 [alert] 13661#0: worker process 13666 exited on s
No grammar constraints (DTD or XML schema).....两种解决方法
byalias
xml
方法一:常用方法 关闭XML验证
工具栏:windows => preferences => xml => xml files => validation => Indicate when no grammar is specified:选择Ignore即可。
方法二:(个人推荐)
添加 内容如下
<?xml version=
Netty源码学习-DefaultChannelPipeline
bylijinnan
netty
package com.ljn.channel;
/**
* ChannelPipeline采用的是Intercepting Filter 模式
* 但由于用到两个双向链表和内部类,这个模式看起来不是那么明显,需要仔细查看调用过程才发现
*
* 下面对ChannelPipeline作一个模拟,只模拟关键代码:
*/
public class Pipeline {
MYSQL数据库常用备份及恢复语句
chicony
mysql
备份MySQL数据库的命令,可以加选不同的参数选项来实现不同格式的要求。
mysqldump -h主机 -u用户名 -p密码 数据库名 > 文件
备份MySQL数据库为带删除表的格式,能够让该备份覆盖已有数据库而不需要手动删除原有数据库。
mysqldump -–add-drop-table -uusername -ppassword databasename > ba
小白谈谈云计算--基于Google三大论文
CrazyMizzz
Google 云计算 GFS
之前在没有接触到云计算之前,只是对云计算有一点点模糊的概念,觉得这是一个很高大上的东西,似乎离我们大一的还很远。后来有机会上了一节云计算的普及课程吧,并且在之前的一周里拜读了谷歌三大论文。不敢说理解,至少囫囵吞枣啃下了一大堆看不明白的理论。现在就简单聊聊我对于云计算的了解。
我先说说GFS
&n
hadoop 平衡空间设置方法
daizj
hadoop balancer
在hdfs-site.xml中增加设置balance的带宽,默认只有1M:
<property>
<name>dfs.balance.bandwidthPerSec</name>
<value>10485760</value>
<description&g
Eclipse程序员要掌握的常用快捷键
dcj3sjt126com
编程
判断一个人的编程水平,就看他用键盘多,还是鼠标多。用键盘一是为了输入代码(当然了,也包括注释),再有就是熟练使用快捷键。 曾有人在豆瓣评
《卓有成效的程序员》:“人有多大懒,才有多大闲”。之前我整理了一个
程序员图书列表,目的也就是通过读书,让程序员变懒。 程序员作为特殊的群体,有的人可以这么懒,懒到事情都交给机器去做,而有的人又可以那么勤奋,每天都孜孜不倦得
Android学习之路
dcj3sjt126com
Android学习
转自:http://blog.csdn.net/ryantang03/article/details/6901459
以前有J2EE基础,接触JAVA也有两三年的时间了,上手Android并不困难,思维上稍微转变一下就可以很快适应。以前做的都是WEB项目,现今体验移动终端项目,让我越来越觉得移动互联网应用是未来的主宰。
下面说说我学习Android的感受,我学Android首先是看MARS的视
java 遍历Map的四种方法
eksliang
java HashMap java 遍历Map的四种方法
转载请出自出处:
http://eksliang.iteye.com/blog/2059996
package com.ickes;
import java.util.HashMap;
import java.util.Iterator;
import java.util.Map;
import java.util.Map.Entry;
/**
* 遍历Map的四种方式
【精典】数据库相关相关
gengzg
数据库
package C3P0;
import java.sql.Connection;
import java.sql.SQLException;
import java.beans.PropertyVetoException;
import com.mchange.v2.c3p0.ComboPooledDataSource;
public class DBPool{
自动补全
huyana_town
自动补全
<!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/1999/xhtml&quo
jquery在线预览PDF文件,打开PDF文件
天梯梦
jquery
最主要的是使用到了一个jquery的插件jquery.media.js,使用这个插件就很容易实现了。
核心代码
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.
ViewPager刷新单个页面的方法
lovelease
android viewpager tag 刷新
使用ViewPager做滑动切换图片的效果时,如果图片是从网络下载的,那么再子线程中下载完图片时我们会使用handler通知UI线程,然后UI线程就可以调用mViewPager.getAdapter().notifyDataSetChanged()进行页面的刷新,但是viewpager不同于listview,你会发现单纯的调用notifyDataSetChanged()并不能刷新页面
利用按位取反(~)从复合枚举值里清除枚举值
草料场
enum
以 C# 中的 System.Drawing.FontStyle 为例。
如果需要同时有多种效果,
如:“粗体”和“下划线”的效果,可以用按位或(|)
FontStyle style = FontStyle.Bold | FontStyle.Underline;
如果需要去除 style 里的某一种效果,
Linux系统新手学习的11点建议
刘星宇
编程 工作 linux 脚本
随着Linux应用的扩展许多朋友开始接触Linux,根据学习Windwos的经验往往有一些茫然的感觉:不知从何处开始学起。这里介绍学习Linux的一些建议。
一、从基础开始:常常有些朋友在Linux论坛问一些问题,不过,其中大多数的问题都是很基础的。例如:为什么我使用一个命令的时候,系统告诉我找不到该目录,我要如何限制使用者的权限等问题,这些问题其实都不是很难的,只要了解了 Linu
hibernate dao层应用之HibernateDaoSupport二次封装
wangzhezichuan
DAO Hibernate
/**
* <p>方法描述:sql语句查询 返回List<Class> </p>
* <p>方法备注: Class 只能是自定义类 </p>
* @param calzz
* @param sql
* @return
* <p>创建人:王川</p>
* <p>创建时间:Jul