CSS面试大全

以下题目是根据网上多份面经收集而来的，题目相同意味着被问的频率比较高，有问题欢迎留言讨论，喜欢可以点赞关注。

哪些操作会引起页面回流（Reflow）

谈谈重绘(repaint)和回流(reflow)

比如我们增删DOM节点，修改一个元素的宽高，页面布局发生变化，DOM树结构发生变化，那么肯定要重新构建DOM树，而DOM树与渲染树是紧密相连的，DOM树构建完，渲染树也会随之对页面进行再次渲染，这个过程就叫回流。当你给一个元素更换颜色，这样的行为是不会影响页面布局的，DOM树不会变化，但颜色变了，渲染树得重新渲染页面，这就是重汇

你应该能感觉到，回流的代价要远大于重绘。且回流必然会造成重绘，但重绘不一定会造成回流。

1.由于display为none的元素在页面不需要渲染，渲染树构建不会包括这些节点；但visibility为hidden的元素会在渲染树中。因为display为none会脱离文档流，visibility为hidden虽然看不到，但类似与透明度为0，其实还在文档流中，还是有渲染的过程。

2.尽量避免使用表格布局，当我们不为表格td添加固定宽度时，一列的td的宽度会以最宽td的宽作为渲染标准，假设前几行td在渲染时都渲染好了，结果下面某行的一个td特别宽，table为了统一宽，前几行的td会回流重新计算宽度，这是个很耗时的事情。

结合上面的解释，引起DOM树结构变化，页面布局变化的行为叫回流，且回流一定伴随重绘。只是样式的变化，不会引起DOM树变化，页面布局变化的行为叫重绘，且重绘不一定会便随回流。

documentFragment是一个保存多个element的容器对象（保存在内存）当更新其中的一个或者多个element时，页面不会更新。只有当documentFragment容器中保存的所有element更新后再将其插入到页面中才能更新页面。documentFragment用来批量更新。

image.png

标准盒模型和怪异盒模型，怎么控制x2

只要在文档首部加了doctype申明，即使用了标准盒模型，而不加，则会由浏览器自己决定，比如，ie 浏览器中显示“ie盒子模型”，在 ff 浏览器中显示“标准 w3c 盒子模型”。当用编辑器新建一个html页面的时候最顶上都会有一个DOCTYPE标签，不定义DOCTYPE，会触发怪异模式

box-sizing: content-box || border-box || inherit || initial

当设置为box-sizing:content-box时，将采用标准模式解析计算，也是默认模式；
当设置为box-sizing:border-box时，将采用怪异模式解析计算；

盒子模型，以及标准情况和IE下的区别

而标准盒模型或怪异盒模型显而易见的区别就是，width和height除了content区域外，还包含padding和border

css3触发怪异盒子模型

absolute的containing block计算方式跟正常流有什么不同？

image.png

CSS里的visibility属性有个collapse属性值？

在通常情况下，使用visibility: collapse;和使用visibility:hidden值没有什么区别。
在非谷歌且是在table的tr上使用collapse，效果同display:none;
在ie低版本（如7）下使用visibility: collapse;没有效果。

`
对于CSS里的visibility属性，相信你用过不下几百次。大多时候，你会把它的值设置成visible(这是所有页面元素的缺省值)，或者是hidden。后者相当于display: none，但仍然占用页面空间。其实visibility可以有第三种值，就是collapse。当一个元素的visibility属性被设置成collapse值后，对于一般的元素，它的表现跟hidden是一样的。但例外的是，如果这个元素是table相关的元素，例如table行，table group，table列，table column group，它的表现却跟display: none一样，也就是说，它们占用的空间也会释放。

display哪些取值

display的取值有很多种，下面列出比较常用的几种取值，还有其它的少用的值没有列出来：
1、none 此元素不会被显示，并且不占据页面空间，这也是与visibility:hidden不同的地方，设置visibility:hidden的元素，不会被显示，但是还是会占据原来的页面空间。
2、inline 行内元素元素会在一行内显示，超出屏幕宽度自动换行，不能设置宽度和高度，元素的宽度和高度只能是靠元素内的内容撑开。
示例元素：span,b,i,a,u,sub,sup,strong,em
3、block 块级元素会独占一行，如果不设置宽度，其宽度会自动填满父元素的宽度，可以设置宽高，即使设置了宽度，小于父元素的宽度，块级元素也会独占一行。
示例元素：div,h1-h6,ul,ol,dl,p
4、inline-block 行内块元素与行内元素一样可以再一行内显示，而且可以设置宽高，可以设置margin和padding。
示例元素：input,button,img
5、list-item 列表元素
示例元素：li
6、table 会作为块级表格来显示(类似于

)，表格前后带有换行符。
7、inline-table 会作为内联表格来显示(类似于

)，表格前后没有换行符。
8、flex 多栏多列布局，火狐可以直接使用，谷歌和opera需要在属性值前面加-webkit-前缀，比较适合移动端开发使用。一个Flexbox布局是由一个伸缩容器(flex containers)和在这个容器里的伸缩项目(flex items)组成。伸缩容器(flex containers)是一个HTML标签元素，并且“display”属性显式的设置了“flex”属性值。在伸缩容器中的所有子元素都会自动变成伸缩项目(flex items)。

设置元素浮动后，该元素的display值是多少？

都是block

display:none与visibility：hidden的区别？

很多前端的同学认为visibility: hidden和display: none的区别仅仅在于display: none隐藏后的元素不占据任何空间，而visibility: hidden隐藏后的元素空间依旧保留，实际上没那么简单，visibility是一个非常有故事性的属性

1、visibility具有继承性，给父元素设置visibility:hidden;子元素也会继承这个属性。但是如果重新给子元素设置visibility: visible,则子元素又会显示出来。这个和display: none有着质的区别

2、visibility: hidden不会影响计数器的计数，如图所示，visibility: hidden虽然让一个元素不见了，但是其计数器仍在运行。这和display: none完全不一样

3.在css3的transition中支持visibility属性，但是不支持display，因为transition可以延迟执行，因此配合visibility使用纯css实现hover延时显示效果可以提高用户体验

display:none会引起回流(重排)和重绘 visibility:hidden会引起重绘

position跟display、overflow、float这些特性相互叠加后会怎么样？

display属性规定元素应该生成的框的类型；position属性规定元素的定位类型；float属性是一种布局方式，定义元素在哪个方向浮动。
类似于优先级机制：position：absolute/fixed优先级最高，有他们在时，float不起作用，display值需要调整。float 或者absolute定位的元素，只能是块元素或表格。

1如果元素的display为none,那么元素不被渲染,position,float不起作用,
2如果元素拥有position:absolute;或者position:fixed;属性那么元素将为绝对定位,float不起作用.
3如果元素float属性不是none,元素会脱离文档流,根据float属性值来显示.
4有浮动,绝对定位,inline-block属性的元素,margin不会和垂直方向上的其他元素margin折叠.

如果需要手动写动画，你认为最小时间间隔是多久，为什么？

多数显示器默认频率是60Hz，即1秒刷新60次，所以理论上最小间隔为1/60＊1000ms ＝ 16.7ms

li与li之间有看不见的空白间隔是什么原因引起的？有什么解决办法？

浏览器的默认行为是把inline元素间的空白字符（空格换行tab）渲染成一个空格，也就是我们上面的代码

换行后会产生换行字符，而它会变成一个空格，当然空格就占用一个字符的宽度。

display:inline-block 什么时候会显示间隙？

CSS属性overflow属性定义溢出元素内容区的内容会如何处理?#####阐述一下CSS Sprites

一行或多行文本超出隐藏

position有那些，各自效果

以下只是常用的属性值

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

static：默认值；
不脱离文档流，top，right，bottom，left等属性不生效。

绝对定位：absolute

绝对定位的关键是找对参照物，要成为绝对定位元素的参照物必须满足以下两个条件：

1.参照物和绝对定位元素必须是包含与被包含关系；
2.该参照物必须具有定位属性；
如果找不到满足以上两个条件的父包含块，那么相对于浏览器窗口进行定位。

注：设置了position:absolute;属性后，元素会脱离正常文档流，不在占据空间；左右margin为auto将会失效；我们通过 left、top、bottom、right来决定元素位置。

相对定位：relative
参照物：元素偏移前位置
注：设置了相对定位，左右 margin为auto仍然有效、并且不会脱离文档流。

固定定位：fixed
参照物：浏览器窗口；
注：固定定位会脱离文档流；

当绝对定位和固定定位参照物都是浏览器窗口时的区别：当出现滚动条时，固定定位的元素不会跟随滚动条滚动，绝对定位会跟随滚动条滚动。

sticky粘性定位:该定位基于用户滚动的位置

它的行为就像 position:relative; 而当页面滚动超出目标区域时，它的表现就像 position:fixed;，它会固定在目标位置。也就是说是relative和fixed的合体。

button {
        position: sticky;
        top: 10px;
    }

1、父元素不能overflow:hidden或者overflow:auto属性。
2、必须指定top、bottom、left、right4个值之一，否则只会处于相对定位
3、父元素的高度不能低于sticky元素的高度
4、sticky元素仅在其父元素内生效

介绍position属性包括CSS3新增

sticky粘性定位:该定位基于用户滚动的位置

position:fixed;在android下无效怎么处理？

发现原来使用isscroll.js滚动库以及在移动端设置-webkit-overflow-scrolling属性时也会出现同样的问题。

前两种情况下，fixed失效的原因是使用的插件时给该元素的父级元素设置了transform： translate（0, 0）属性，该属性设置之后，子元素固定定位失效。

失效的解决办法是：对父级元素设置transform: none; 或者display：inline,后一种方法规避这种设置

介绍css3中position:sticky

对BFC规范(块级格式化上下文：block formatting context)的理解？

https://www.jianshu.com/p/7f82ab2542bd

image.png

什么是BFC，如何触发

image.png

上下margin重合的问题

https://www.jianshu.com/p/58a6edeff0f2
a、全部都为正值，取最大者；
b、在 margin中有正值有负值的时候,要从所有负值中选出绝对值最大的,所有正值中选择绝对值最大的,二者相加,此例的结果即为: 100px + (-50)px =50px;
c、没有正值，取绝对值最大的。
总而言之取绝对值最大的相加

有哪些DOM接口可以获取一个元素的尺寸（宽度和高度）

clientHeight和clientWidth用于描述元素内尺寸，是指 元素内容+内边距大小，不包括边框（IE下实际包括）、外边距、滚动条部分
offsetHeight和offsetWidth用于描述元素外尺寸，是指 元素内容+内边距+边框，不包括外边距和滚动条部分
clientTop和clientLeft返回内边距的边缘和边框的外边缘之间的水平和垂直距离，也就是左，上边框宽度
offsetTop和offsetLeft表示该元素的左上角（边框外边缘）与已定位的父容器（offsetParent对象）左上角的距离
offsetParent对象是指元素最近的定位（relative,absolute）祖先元素，递归上溯，如果没有祖先元素是定位的话，会返回null

image.png

scrollWidth为实际内容的宽度。
clientWidth是内容可视区的宽度。
offsetWidth是元素的实际宽度。包括滚动条

为什么会出现浮动和什么时候需要清除浮动？清除浮动的方式？

为什么出现浮动？
浮动float最开始出现的意义是为了让文字环绕图片而已，但人们发现，如果想要三个块级元素并排显示，都给它们加个float来得会比较方便。问题出现了，父元素高度塌陷了。一目了然：如果我们给上面的三个绿颜色的方块设置display:inline-block也能达到让它们并排显示的效果。并且父元素的高度也不会塌陷。只不过无法控制是居左还是居右，display:inline-block只能从左往右。

清除浮动的两大基本方法：

方法1：脚底插入clear:both;
方法2：父元素BFC(ie8+)或haslayout(ie6/ie7)

在父元素的最后加一个冗余元素并为其设置clear:both
此方法的缺点是，必要在页面中添加很多没有意义的冗余元素，太麻烦，而且不符合语义

有一个高度自适应的div，里面有两个div，一个高度100px，希望另一个填满剩下的高度

2.采用伪元素，这里我们使用:after。添加一个类clearfix：（推荐）


    1
    2


.clearfix:after { 
     content:""; 
     display:table; /*采用此方法可以有效避免浏览器兼容问题*/
     clear:both;
}

image.png

右边宽度固定，左边自适应

position布局 flex布局 BFC原理 calc

css如何实现高度自适应

用padding撑开
js
calc

css垂直居中

https://www.cnblogs.com/clj2017/p/9293363.html

这个方法把一些 div 的显示方式设置为表格，因此我们可以使用表格的 vertical-align property 属性。
通过verticle-align:middle实现CSS垂直居中。vertical生效的前提是元素的display：inline-block。
flex align-items
line-height
position absolute

居中方式

水平垂直居中

https://www.jianshu.com/p/907f99004c3e

flex
postion
calc

居中为什么要使用transform（为什么不使用marginLeft/Top）

https://blog.csdn.net/callmeCassie/article/details/89290945

transform 属于合成属性（composite property），对合成属性进行 transition/animation 动画将会创建一个合成层（composite layer），这使得被动画元素在一个独立的层中进行动画。通常情况下，浏览器会将一个层的内容先绘制进一个位图中，然后再作为纹理（texture）上传到 GPU，只要该层的内容不发生改变，就没必要进行重绘（repaint），浏览器会通过重新复合（recomposite）来形成一个新的帧。

top/left属于布局属性，该属性的变化会导致重排（reflow/relayout），所谓重排即指对这些节点以及受这些节点影响的其它节点，进行CSS计算->布局->重绘过程，浏览器需要为整个层进行重绘并重新上传到 GPU，造成了极大的性能开销

对布局属性进行动画，浏览器需要为每一帧进行重绘并上传到 GPU 中
对合成属性进行动画，浏览器会为元素创建一个独立的复合层，当元素内容没有发生改变，该层就不会被重绘，浏览器会通过重新复合来创建动画帧

两个元素块，一左一右，中间相距10像素

上下固定，中间滚动布局如何实现

fixed
sticky
flex

meta viewport 移动端适配

CSS实现宽度自适应100%，宽高16:9的比例的矩形

padding-bottom
position absolute
calc
js

元素竖向的百分比设定是相对于容器的高度吗？

对于竖直方向的margin和padding，参照父元素的宽度。
对于水平方向的margin和padding，也是参照父元素的宽度。

一般而言，子元素的百分比设定都是以父元素为依据，子元素的宽度百分比依赖父元素的宽度百分比，子元素的高度百分比依赖父元素的高度百分比。那么margin ，padding这些属性也是如此

什么是响应式设计？响应式设计的基本原理是什么？如何兼容

响应式网站设计(Responsive Web design)的理念是：集中创建页面的图片排版大小，可以智能地根据用户行为以及使用的设备环境（系统平台、屏幕尺寸、屏幕定向等）进行相对应的布局，无论用户正在使用笔记本还是iPad，我们的页面都应该能够自动切换分辨率、图片尺寸及相关脚本功能等，以适应不同设备。

响应式Web设计不仅仅是关于屏幕分辨率自适应以及自动缩放的图片等等，它更像是一种对于设计的全新思维模式, 如我们需要兼容不同屏幕分辨率、清晰度以及屏幕定向方式竖屏(portrait)、横屏(landscape)，怎样才能做到让一种设计方案满足所有情况？

基本原理: 媒体查询 @media，页面头部必须有meta声明viewport：

 
   
     
    
   
  
    image.png 
   
  
 全屏滚动的原理是什么？ 
 fullpage插件
 我们可以通过js获取窗口可视区的大小，并为其设置overflow: hidden属性，使得窗口不出现滚动条，只显示窗口大小的一页内容；top属性实现不同页面的切换 
 CSS优化、提高性能的方法有哪些？ 
  
   
     
    
   
  
    image.png 
   
  
 为什么css写顶部，js写最下面 
 CSS和JS的位置会影响页面效率，为什么？ 
 style标签写在body后与body前有什么区别？ 
 写在head标签中利于浏览器逐步渲染（resources downloading->CSSOM+DOM->RenderTree(composite)->Layout->paint）。具体渲染过程请参考
 http://blog.csdn.net/wozaixia...
 写在body标签后由于浏览器以逐行方式对html文档进行解析，当解析到写在尾部的样式表（外联或写在style标签）会导致浏览器停止之前的渲染，等待加载且解析样式表完成之后重新渲染，在windows的IE下可能会出现FOUC现象（即样式失效导致的页面闪烁问题） 
 浏览器是怎样解析CSS选择器的？ 
 按照从上到下，从右到左的顺序解析。 
 .list a {color:blue;}
 
 先解析到 a 标签，并将页面上所有 a 标签的字体颜色都按照 color:red 进行渲染（蓝色），再解析到 .list ，将页面上所有 .list 类目下的 a 标签的字体渲染成蓝色。是的，你没有看错，浏览器解析CSS从来就是这么苦逼。 
 
 
  
   
     
    
   
  
    image.png 
   
  
 在网页中的应该使用奇数还是偶数的字体？为什么呢？ 
 好多人说对浏览器解析有影响，这个我也不清楚，自己试试，也没试出来什么。别说是奇数了，小数都可以解析。 
 还有的说11px 在谷歌中打开会自动转换成12px,这个纯属扯淡呢，连小数的数值之间都有明显的区别。 
 但是根据程序员的习惯一般是写偶数，在使用移动端布局，和百分比布局的时候，换算单位和数值更加的方便精准 
 margin和padding分别适合什么场景使用？ 
  
   
     
    
   
  
    image.png 
   
  
 低版本的IE？ 
 视差滚动效果？ 
 所谓的视差滚动，就是在页面滚动过程中，多层次的元素进行不同程度的位移，带来立体的视差效果。还有很多的奇思妙想的展现方式，都是滚动页面触发的，也可称为视差滚动。视差滚动里面最基础的就是切换背景，这点其实一个CSS就满足了。 
 【视差滚动原理一】 
 | 1 | background-attachment: fixed || scroll || local | 
 默认是scroll，内容跟着背景走，而视差滚动页面里用fixed，背景相对页面固定而不跟内容滚动。 
 ::before 和 :after中双冒号和单冒号有什么区别？ 
 在 CSS 中伪类一直用 : 表示，如 :hover, :active 等
 伪元素在CSS1中已存在，当时语法是用 : 表示，如 :before 和 :after
 后来在CSS3中修订，伪元素用 :: 表示，如 ::before 和 ::after，以此区分伪元素和伪类
 由于低版本IE对双冒号不兼容，开发者为了兼容性各浏览器，继续使使用 :after 这种老语法表示伪元素
 综上所述：::before 是 CSS3 中写伪元素的新语法； :after 是 CSS1 中存在的、兼容IE的老语法 
 伪元素和伪类的区别 
  
   
     
    
   
  
    image.png 
   
  
  
   
     
    
   
  
    image.png 
   
  
  
   
     
    
   
  
    image.png 
   
  
  
   
     
    
   
  
    image.png 
   
  
 :before 和 :after 解释一下这2个伪元素的作用 
 :before 和 :after 这两个伪元素，是在CSS2.1里新出现的。起初，伪元素的前缀使用的是单冒号语法，但随着Web的进化，在CSS3的规范里，伪元素的语法被修改成使用双冒号，成为::before ::after 
 让页面里的字体变清晰，变细用CSS怎么做？ 
 CSS3里面加入了一个“-webkit-font-smoothing”属性。这个属性可以使页面上的字体抗锯齿,使用后字体看起来会更清晰舒服。加上之后就顿时感觉页面小清晰了。 
 
 
  
   
     
    
   
  
    image.png 
   
  
 px和em的区别 
  
   
     
    
   
  
    image.png 
   
  
 渲染页面，构建DOM树。 
 渲染树（Render Tree）由DOM树、CSSOM树合并而成，但并不是必须等DOM树及CSSOM树加载完成后才开始合并构建渲染树。三者的构建并无先后条件，亦非完全独立，而是会有交叉，并行构建。因此会形成一边加载，一边解析，一边渲染的工作现象。 
 若在构建DOM树的过程中，当 HTML 解析器遇到一个 script 标记时，即遇到了js，将立即阻塞DOM树的构建，将控制权移交给 JavaScript 引擎，等到 JavaScript 引擎运行完毕，浏览器才会从中断的地方恢复DOM树的构建。
 其根本原因在于，JS会对DOM节点进行操作，浏览器无法预测未来的DOM节点的具体内容，为了防止无效操作，节省资源，只能阻塞DOM树的构建。譬如，若不阻塞DOM树的构建，若JS删除了某个DOM节点A，那么浏览器为构建此节点A花费的资源就是无效的。 
 若在HTML头部加载JS文件，由于JS阻塞，会推迟页面的首绘。为了加快页面渲染，一般将JS文件放到HTML底部进行加载，或是对JS文件执行async或defer加载。 
 实现一个css框架你有什么思路吗 
 png、jpg、gif 这些图片格式解释一下，分别什么时候用。有没有了解过webp？ 
 渐进jpg了解过吗 
 渐进式：从模糊变清晰，有利于用户体验，但是低版本IE不支持，会在图片完全加载完之后，突然显示！
 基线式：支持所有浏览器，从上到下加载，用户体验一般！
 *使用渐进式jpg，在ps中选择“另存为web格式”，在右侧勾选上“连续”！在fw中，图像选项，勾选上“渐进式增强”！ 
  
  你用永不知道基本式图片内容，除非他完全加载出来； 
  渐进式图片一开始大小框架就定好，不会像基本式图片一样，由于尺寸未设定而造成回流——提高的渲染性能； 
  渐进式图片也有不足，就是吃CPU吃内存。 
  
  
   
     
    
   
  
    image.png 
   
  
 data-属性的作用 
  
   
     
    
   
  
    image.png 
   
  
 css预处理，后处理 
 [Sass](http://caibaojian.com/t/sass "View all posts in Sass")、LESS、Stylus 是目前最主流的 CSS 预处理器。
  
  
   
     
    
   
  
    image.png 
   
  
  
 css3新特性 
 2.过渡 transition： CSS属性，花费时间，效果曲线(默认ease)，延迟时间(默认0)复制代码
 3.动画 animation：动画名称，一个周期花费时间，运动曲线（默认ease），动画延迟（默认0），播放次数（默认1），是否反向播放动画（默认normal），是否暂停动画（默认running）复制代码
 4.形状转换 transform:适用于2D或3D转换的元素
 rotate(30deg); translate(30px,30px); scale(.8); skew(10deg,10deg); rotateX(180deg); rotateY(180deg); rotate3d(10,10,10,90deg);
 5.选择器
 6.阴影 box-shadow: 水平阴影的位置 垂直阴影的位置 模糊距离 阴影的大小 阴影的颜色 阴影开始方向（默认是从里往外，设置inset就是从外往里）;复制代码
 7.边框 border-image: 图片url 图像边界向内偏移 图像边界的宽度(默认为边框的宽度) 用于指定在边框外部绘制偏移的量（默认0） 铺满方式--重复（repeat）、拉伸（stretch）或铺满（round）（默认：拉伸（stretch））;
 8.背景 background-clip 制定背景绘制（显示）区域 background-origin background-size 
 1.（background-clip: border-box;）默认情况（从边框开始绘制）
 2.（background-clip: padding-box;）从padding开始绘制（显示），不算border,，相当于把border那里的背景给裁剪掉！
 3.（background-clip: content-box;）只在内容区绘制（显示），不算padding和border，相当于把padding和border那里的背景给裁剪掉！
 9.反射 -webkit-box-reflect:方向[ above-上 | below-下 | right-右 | left-左 ]，偏移量，遮罩图片
 10.文字换行 语法：word-break: normal|break-all|keep-all;、语法：word-wrap: normal|break-word; 超出省略号 text-overflow:clip|ellipsis|string 文字阴影 语法：text-shadow:水平阴影，垂直阴影，模糊的距离，以及阴影的颜色。
 11.颜色 rgba（rgb为颜色值，a为透明度） color: rgba(255,00,00,1);background: rgba(00,00,00,.5); hsla h:色相”，“s：饱和度”，“l：亮度”，“a：透明度” color: hsla( 112, 72%, 33%, 0.68);background-color: hsla( 49, 65%, 60%, 0.68);复制代码
 12.渐变 
 13.Filter（滤镜）：黑白色filter: grayscale(100%)、褐色filter:sepia(1)、饱和度saturate(2)、色相旋转hue-rotate(90deg)、反色filter:invert(1)、透明度opacity(.5)、亮度brightness(.5)、对比度contrast(2)、模糊blur(3px)
 14.弹性布局 Flex
 15.栅格布局 grid
 16.多列布局
 17.盒模型定义 box-sizing:border-box的时候，边框和padding包含在元素的宽高之内！ box-sizing:content-box的时候，边框和padding不包含在元素的宽高之内！如下图
 18.媒体查询 就在监听屏幕尺寸的变化，在不同尺寸的时候显示不同的样式！在做响应式的网站里面，是必不可少的一环！ 
 选择器优先级 
  
   
     
    
   
  
    image.png 
   
  
 谈谈css预处理器机制 
  
   
     
    
   
  
    image.png 
   
  
 贝塞尔曲线 
 贝塞尔曲线在线取值
  
  
   
     
    
   
  
    image.png 
   
  
  
 使用css实现一个持续的动画效果 
 animation:mymove 5s infinite;
@keyframes mymove {
from {top:0px;}
to {top:200px;}
}
 
 网页的渲染 
  
   
     
    
   
  
    image.png 
   
  
 改变placeholder的字体颜色 
     ***只适用于pc端
    input::-webkit-input-placeholder { 
        /* WebKit browsers */ 
        font-size:14px;
        color: #333;
    } 
    input::-moz-placeholder { 
        /* Mozilla Firefox 19+ */ 
        font-size:14px;
        color: #333;
    } 
    input:-ms-input-placeholder { 
        /* Internet Explorer 10+ */ 
        font-size:14px;
        color: #333;
    }

 
  
  如何写一个CSS库,要注意哪些东西?
 总是类名优先
 组件代码放在一起
 使用一致的类命名空间
 维护命名空间和文件名之间的严格映射
 避免组件外的样式泄露
 避免组件内的样式泄露
 遵守组件边界
 松散地整合外部样式 
  
 移动端的边框0.5px,你有几种方式实现？ 
 建议自己百度; 伪类缩放： 
 devicePixelRatio:它是window对象中有一个devicePixelRatio属性，设备物理像素和设备独立像素的比例，也就是 devicePixelRatio = 物理像素 / 独立像素; 
 box-shadow:网上看到说使用box-shadow模拟边框，box-shadow: inset 0px -1px 1px -1px #06c; 
 Chrome、Safari等浏览器，当表单提交用户选择记住密码后，下次自动填充表单的背景变成黄色，影响了视觉体验是否可以修改？ 
 input:-webkit-autofill, textarea:-webkit-autofill, select:-webkit-autofill {
  background-color: #fff;//设置成元素原本的颜色
  background-image: none;
  color: rgb(0, 0, 0);
}
//方法2：由掘金大神 (licongwen )补充
input:-webkit-autofill {
    -webkit-box-shadow: 0px 0 3px 100px #ccc inset; //背景色
}
 

                            
                        
                    
                    
                    
                    
                    
                    
                
                
                    
                        
                        
                             
                        
                        
                        
                            
                        
                        
                        
                            
                        
                    
                
            
        
    
    
        你可能感兴趣的:(CSS面试大全)
        
            
                
                    DIV+CSS+JavaScript技术制作网页（旅游主题网页设计与制作）云南大理
                        STU学生网页设计
网页设计期末网页作业html静态网页html5期末大作业网页设计web大作业
                        ️精彩专栏推荐作者主页:【进入主页—获取更多源码】web前端期末大作业：【HTML5网页期末作业(1000套)】程序员有趣的告白方式：【HTML七夕情人节表白网页制作(110套)】文章目录二、网站介绍三、网站效果▶️1.视频演示2.图片演示四、网站代码HTML结构代码CSS样式代码五、更多源码二、网站介绍网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。网站程
                    
                    关于城市旅游的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：做与用户的交互行为文章目录前端学习路线
                    
                    python八股文面试题分享及解析(1)
                        Shawn________
python
                        #1.'''a=1b=2不用中间变量交换a和b'''#1.a=1b=2a,b=b,aprint(a)print(b)结果：21#2.ll=[]foriinrange(3):ll.append({'num':i})print(11)结果:#[{'num':0},{'num':1},{'num':2}]#3.kk=[]a={'num':0}foriinrange(3):#0,12#可变类型，不仅仅改变
                    
                    MYSQL面试系列-04
                        king01299
面试mysql面试
                        MYSQL面试系列-0417.关于redolog和binlog的刷盘机制、redolog、undolog作用、GTID是做什么的？innodb_flush_log_at_trx_commit及sync_binlog参数意义双117.1innodb_flush_log_at_trx_commit该变量定义了InnoDB在每次事务提交时，如何处理未刷入（flush）的重做日志信息（redolog）。它
                    
                    Kafka 消息丢失如何处理？
                        架构文摘JGWZ
学习
                        今天给大家分享一个在面试中经常遇到的问题：Kafka消息丢失该如何处理？这个问题啊，看似简单，其实里面藏着很多“套路”。来，咱们先讲一个面试的“真实”案例。面试官问：“Kafka消息丢失如何处理？”小明一听，反问：“你是怎么发现消息丢失了？”面试官顿时一愣，沉默了片刻后，可能有点不耐烦，说道：“这个你不用管，反正现在发现消息丢失了，你就说如何处理。”小明一头雾水：“问题是都不知道怎么丢的，处理起来
                    
                    每日算法&面试题，大厂特训二十八天——第二十天（树）
                        肥学
⚡算法题⚡面试题每日精进java算法数据结构
                        目录标题导读算法特训二十八天面试题点击直接资料领取导读肥友们为了更好的去帮助新同学适应算法和面试题，最近我们开始进行专项突击一步一步来。上一期我们完成了动态规划二十一天现在我们进行下一项对各类算法进行二十八天的一个小总结。还在等什么快来一起肥学进行二十八天挑战吧！！特别介绍小白练手专栏，适合刚入手的新人欢迎订阅编程小白进阶python有趣练手项目里面包括了像《机器人尬聊》《恶搞程序》这样的有趣文章
                    
                    webpack图片等资源的处理
                        dmengmeng

                        需要的loaderfile-loader（让我们可以引入这些资源文件）url-loader（其实是file-loader的二次封装）img-loader（处理图片所需要的）在没有使用任何处理图片的loader之前，比如说css中用到了背景图片，那么最后打包会报错的，因为他没办法处理图片。其实你只想能够使用图片的话。只加一个file-loader就可以，打开网页能准确看到图片。{test:/\.(p
                    
                    【华为OD技术面试真题 - 技术面】- python八股文真题题库（4)
                        算法大师
华为od面试python
                        华为OD面试真题精选专栏：华为OD面试真题精选目录:2024华为OD面试手撕代码真题目录以及八股文真题目录文章目录华为OD面试真题精选**1.Python中的`with`**用途和功能自动资源管理示例：文件操作上下文管理协议示例代码工作流程解析优点2.\_\_new\_\_和**\_\_init\_\_**区别__new____init__区别总结3.**切片（Slicing）操作**基本切片语法
                    
                    【华为OD技术面试真题 - 技术面】-测试八股文真题题库（1）
                        算法大师
华为od面试python算法前端
                        华为OD面试真题精选专栏：华为OD面试真题精选目录:2024华为OD面试手撕代码真题目录以及八股文真题目录文章目录华为OD面试真题精选1.黑盒测试和白盒测试的区别2.假设我们公司现在开发一个类似于微信的软件1.0版本，现在要你测试这个功能：打开聊天窗口，输入文本，限制字数在200字以内。问你怎么提取测试点。功能测试性能测试安全性测试可用性测试跨平台兼容性测试网络环境测试3.接口测试的工具你了解哪些
                    
                    【华为OD技术面试真题精选 - 非技术题】 -HR面，综合面_华为od hr面
                        一个射手座的程序媛
程序员华为od面试职场和发展
                        最后的话最近很多小伙伴找我要Linux学习资料，于是我翻箱倒柜，整理了一些优质资源，涵盖视频、电子书、PPT等共享给大家！资料预览给大家整理的视频资料：给大家整理的电子书资料：如果本文对你有帮助，欢迎点赞、收藏、转发给朋友，让我有持续创作的动力！网上学习资料一大堆，但如果学到的知识不成体系，遇到问题时只是浅尝辄止，不再深入研究，那么很难做到真正的技术提升。需要这份系统化的资料的朋友，可以点击这里获
                    
                    【华为OD技术面试真题 - 技术面】- python八股文真题题库（1）
                        算法大师
华为od面试python
                        华为OD面试真题精选专栏：华为OD面试真题精选目录:2024华为OD面试手撕代码真题目录以及八股文真题目录文章目录华为OD面试真题精选1.数据预处理流程数据预处理的主要步骤工具和库2.介绍线性回归、逻辑回归模型线性回归（LinearRegression）模型形式：关键点：逻辑回归（LogisticRegression）模型形式：关键点：参数估计与评估：3.python浅拷贝及深拷贝浅拷贝（Shal
                    
                    Java企业面试题3
                        马龙强_
java
                        1.break和continue的作用(智*图)break：用于完全退出一个循环（如for,while）或一个switch语句。当在循环体内遇到break语句时，程序会立即跳出当前循环体，继续执行循环之后的代码。continue：用于跳过当前循环体中剩余的部分，并开始下一次循环。如果是在for循环中使用continue，则会直接进行条件判断以决定是否执行下一轮循环。2.if分支语句和switch分
                    
                    Java面试题精选：消息队列(二)
                        芒果不是芒
Java面试题精选javakafka
                        一、Kafka的特性1.消息持久化：消息存储在磁盘，所以消息不会丢失2.高吞吐量：可以轻松实现单机百万级别的并发3.扩展性：扩展性强，还是动态扩展4.多客户端支持：支持多种语言（Java、C、C++、GO、）5.KafkaStreams（一个天生的流处理）:在双十一或者销售大屏就会用到这种流处理。使用KafkaStreams可以快速的把销售额统计出来6.安全机制：Kafka进行生产或者消费的时候会
                    
                    2019考研 | 西交大软件工程
                        笔者阿蓉

                        本科背景：某北京211学校电子信息工程互联网开发工作两年录取结果：全日制软件工程学院分数：初试350+复试笔试80+面试85+总排名：100+从五月份开始脱产学习，我主要说一下专业课和复试还有我对非全的一些看法。【数学100+】张宇，张宇，张宇。跟着张宇学习，入门视频刷一遍，真题刷两遍，错题刷三遍。书刷N多遍。从视频开始学习，是最快的学习方法。5-7月份把主要是数学学好，8-9月份开始给自己每个周
                    
                    2024春节微信红包封面序列号大全一览
                        帮忙赚赏金

                        2024微信红包封面序列号哪里领取红包封面领取微信搜索公众号：【艺间封面】千万红包封面等你领取2024微信红包封面免费序列号如何设置微信红包封面？1.打开微信，点击好友选择红包。2.单击红包封面。3.单击“添加红包封面”。4.输入接收序列号。来一波免费的微信红包封面序列号微信红包封面序列号红包封面领取微信搜索公众号：艺间封面千万红包封面等你领取微信红包封面序列号kGnkrbw5a7N微信红包封面序
                    
                    Day_11
                        ROC_bird..
算法
                        面试题16.15.珠玑妙算-力扣（LeetCode）/***Note:Thereturnedarraymustbemalloced,assumecallercallsfree().*///下标和对应位置的值都一样，answer[0]+1,对应位置的值猜对了，但是下标不对，answer[1]+1int*masterMind(char*solution,char*guess,int*returnSiz
                    
                    字节二面
                        Redstone Monstrosity
前端面试
                        1.假设你是正在面试前端开发工程师的候选人，面试官让你详细说出你上一段实习过程的收获和感悟。在上一段实习过程中，我获得了宝贵的实践经验和深刻的行业洞察，以下是我的主要收获和感悟：一、专业技能提升框架应用熟练度：通过实际项目，我深入掌握了React、Vue等前端框架的使用，不仅提升了编码效率，还学会了如何根据项目需求选择合适的框架。问题解决能力：在实习期间，我遇到了许多预料之外的技术难题。通过查阅文
                    
                    靠谱的海淘APP大全 可以海淘的软件有哪些
                        氧惠评测

                        96KaiFa为您整理了可以海淘的软件有哪些，分别有海淘、ZOZO日本海淘、海淘铺、美芽海淘、海淘1号海外购、高乐高海淘、海淘美瞳、海淘返利网、海淘拼单、豌豆公主海淘，下面一起来看靠谱的海淘APP大全吧！购物、看电影、点外卖、用氧惠APP！更优惠！氧惠（全网优惠上氧惠）——是与以往完全不同的抖客+淘客app！2023全新模式，我的直推也会放到你下面，送1:1超级补贴(邀请好友自购多少，你就推广得多
                    
                    《HTML 与 CSS—— 响应式设计》
                        陈在天box
htmlcss前端
                        一、引言在当今数字化时代，人们使用各种不同的设备访问互联网，包括智能手机、平板电脑、笔记本电脑和台式机等。为了确保网站在不同设备上都能提供良好的用户体验，响应式设计成为了网页开发的关键。HTML和CSS作为网页开发的基础技术，在实现响应式设计方面发挥着重要作用。本文将深入探讨HTML与CSS中的响应式设计原理、方法和最佳实践。二、响应式设计的概念与重要性（一）概念响应式设计是一种网页设计方法，旨在
                    
                    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，点击
                    
                    【从问题中去学习k8s】k8s中的常见面试题（夯实理论基础）（二十八）
                        向往风的男子
k8s学习kubernetes容器
                        本站以分享各种运维经验和运维所需要的技能为主《python零基础入门》：python零基础入门学习《python运维脚本》：python运维脚本实践《shell》：shell学习《terraform》持续更新中：terraform_Aws学习零基础入门到最佳实战《k8》从问题中去学习k8s《docker学习》暂未更新《ceph学习》ceph日常问题解决分享《日志收集》ELK+各种中间件《运维日常》
                    
                    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动画的优缺点优点：灵活度、可控性、性能
                    
                    Java -jar 如何在后台运行项目
                        vincent_hahaha

                        撸了今年阿里、头条和美团的面试，我有一个重要发现.......>>>说到运行jar包通常我们都会以下面的方式运行:java-jarspringboot-0.0.1-SNAPSHOT.jar这样运行的话会有一个问题，就是我们一关闭当前窗口就会停止运行项目，要想解决这个问题，就需要在后台运行。nohupjava-jarbabyshark-0.0.1-SNAPSHOT.jar >log.file 2>&
                    
                    史上最全git命令,git回滚,git命令大全
                        騒周
其他git
                        git命令大全一、Git整体理解二、由暂存区本地仓库三、由本地仓->远程仓库四、冲突处理五、Git分支操作六、bug的分支七、feature分支八、暂存的使用九、远程仓的操作十、标签的使用十一、Git配置全局信息十二、Linux的一些简单操作和一些符号的解释十三、符号解释十四、显示安装详细信息十五、gitconfig十六、Gitclone十七、Gitinit十八、gitstatus十九、gitre
                    
                    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
                    
                    【Death Note】网吧战神之7天爆肝渗透测试死亡笔记_sqlmap在默认情况下除了使用 char() 函数防止出现单引号
                        2401_84561374
程序员笔记
                        网上学习资料一大堆，但如果学到的知识不成体系，遇到问题时只是浅尝辄止，不再深入研究，那么很难做到真正的技术提升。需要这份系统化的资料的朋友，可以戳这里获取一个人可以走的很快，但一群人才能走的更远！不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人，都欢迎加入我们的的圈子（技术交流、学习资源、职场吐槽、大厂内推、面试辅导），让我们一起学习成长！特殊服务端口2181zookeeper服务未授权访问
                    
                    Nginx的使用场景：构建高效、可扩展的Web架构
                        张某布响丸辣
nginx前端架构
                        Nginx，作为当今最流行的Web服务器和反向代理软件之一，凭借其高性能、稳定性和灵活性，在众多Web项目中扮演着核心角色。无论是个人博客、中小型网站，还是大型企业级应用，Nginx都能提供强大的支持。本文将探讨Nginx的几个主要使用场景，帮助读者理解如何在实际项目中充分利用Nginx的优势。1.静态文件服务对于包含大量静态文件（如HTML、CSS、JavaScript、图片等）的网站，Ngin
                    
                                Java常用排序算法/程序员必须掌握的8大排序算法
                                    cugfy
java
                                    分类： 
 
1）插入排序（直接插入排序、希尔排序） 
2）交换排序（冒泡排序、快速排序） 
3）选择排序（直接选择排序、堆排序） 
4）归并排序 
5）分配排序（基数排序） 
 
所需辅助空间最多：归并排序 
所需辅助空间最少：堆排序 
平均速度最快：快速排序 
 
不稳定：快速排序，希尔排序，堆排序。 
 
先来看看8种排序之间的关系： 
 
  
 
 1.直接插入排序 
 
（1
                                
                                【Spark102】Spark存储模块BlockManager剖析
                                    bit1129
manager
                                    Spark围绕着BlockManager构建了存储模块，包括RDD，Shuffle，Broadcast的存储都使用了BlockManager。而BlockManager在实现上是一个针对每个应用的Master/Executor结构，即Driver上BlockManager充当了Master角色，而各个Slave上(具体到应用范围，就是Executor)的BlockManager充当了Slave角色
                                
                                linux 查看端口被占用情况详解
                                    daizj
linux端口占用netstatlsof
                                    经常在启动一个程序会碰到端口被占用，这里讲一下怎么查看端口是否被占用，及哪个程序占用，怎么Kill掉已占用端口的程序 
  
1、lsof -i:port 
port为端口号 
  
[root@slave /data/spark-1.4.0-bin-cdh4]# lsof -i:8080 
COMMAND   PID USER   FD   TY
                                
                                Hosts文件使用
                                    周凡杨
hostslocahost
                                         一切都要从localhost说起，经常在tomcat容器起动后，访问页面时输入http://localhost:8088/index.jsp，大家都知道localhost代表本机地址，如果本机IP是10.10.134.21，那就相当于http://10.10.134.21:8088/index.jsp，有时候也会看到http: 127.0.0.1:
                                
                                java excel工具
                                    g21121
Java excel
                                    直接上代码，一看就懂，利用的是jxl： 
import java.io.File;
import java.io.IOException;
import jxl.Cell;
import jxl.Sheet;
import jxl.Workbook;
import jxl.read.biff.BiffException;
import jxl.write.Label;
import 
                                
                                web报表工具finereport常用函数的用法总结（数组函数）
                                    老A不折腾
finereportweb报表函数总结
                                    ADD2ARRAY 
ADDARRAY(array,insertArray, start):在数组第start个位置插入insertArray中的所有元素，再返回该数组。 
示例： 
ADDARRAY([3,4, 1, 5, 7], [23, 43, 22], 3)返回[3, 4, 23, 43, 22, 1, 5, 7]. 
ADDARRAY([3,4, 1, 5, 7], "测试&q
                                
                                游戏服务器网络带宽负载计算
                                    墙头上一根草
服务器
                                    家庭所安装的4M，8M宽带。其中M是指，Mbits/S 
其中要提前说明的是： 
8bits = 1Byte 
即8位等于1字节。我们硬盘大小50G。意思是50*1024M字节，约为 50000多字节。但是网宽是以“位”为单位的，所以，8Mbits就是1M字节。是容积体积的单位。 
8Mbits/s后面的S是秒。8Mbits/s意思是 每秒8M位，即每秒1M字节。 
我是在计算我们网络流量时想到的
                                
                                我的spring学习笔记2-IoC（反向控制 依赖注入）
                                    aijuans
Spring 3 系列
                                    IoC（反向控制 依赖注入）这是Spring提出来了，这也是Spring一大特色。这里我不用多说，我们看Spring教程就可以了解。当然我们不用Spring也可以用IoC，下面我将介绍不用Spring的IoC。 
IoC不是框架，她是java的技术，如今大多数轻量级的容器都会用到IoC技术。这里我就用一个例子来说明： 
如：程序中有 Mysql.calss 、Oracle.class 、SqlSe
                                
                                高性能mysql 之 选择存储引擎(一)
                                    annan211
mysqlInnoDBMySQL引擎存储引擎
                                      1 没有特殊情况，应尽可能使用InnoDB存储引擎。   原因：InnoDB 和 MYIsAM 是mysql 最常用、使用最普遍的存储引擎。其中InnoDB是最重要、最广泛的存储引擎。她   被设计用来处理大量的短期事务。短期事务大部分情况下是正常提交的，很少有回滚的情况。InnoDB的性能和自动崩溃   恢复特性使得她在非事务型存储的需求中也非常流行，除非有非常
                                
                                UDP网络编程
                                    百合不是茶
UDP编程局域网组播
                                      
UDP是基于无连接的,不可靠的传输   与TCP/IP相反 
  
  
  
UDP实现私聊,发送方式客户端,接受方式服务器 
package netUDP_sc;

import java.net.DatagramPacket;
import java.net.DatagramSocket;
import java.net.Ine
                                
                                JQuery对象的val()方法执行结果分析
                                    bijian1013
JavaScriptjsjquery
                                            JavaScript中，如果id对应的标签不存在（同理JAVA中，如果对象不存在），则调用它的方法会报错或抛异常。在实际开发中，发现JQuery在id对应的标签不存在时，调其val()方法不会报错，结果是undefined。 
        
                                
                                http请求测试实例（采用json-lib解析）
                                    bijian1013
jsonhttp
                                            由于fastjson只支持JDK1.5版本，因些对于JDK1.4的项目，可以采用json-lib来解析JSON数据。如下是http请求的另外一种写法，仅供参考。 
package com;

import java.util.HashMap;
import java.util.Map;

import 
                                
                                【RPC框架Hessian四】Hessian与Spring集成
                                    bit1129
hessian
                                    在【RPC框架Hessian二】Hessian 对象序列化和反序列化一文中介绍了基于Hessian的RPC服务的实现步骤，在那里使用Hessian提供的API完成基于Hessian的RPC服务开发和客户端调用，本文使用Spring对Hessian的集成来实现Hessian的RPC调用。 
  定义模型、接口和服务器端代码 
|---Model 
   &nb
                                
                                【Mahout三】基于Mahout CBayes算法的20newsgroup流程分析
                                    bit1129
Mahout
                                    1.Mahout环境搭建 
 1.下载Mahout 
http://mirror.bit.edu.cn/apache/mahout/0.10.0/mahout-distribution-0.10.0.tar.gz 
  
 2.解压Mahout 
 3. 配置环境变量 
vim /etc/profile

export HADOOP_HOME=/home
                                
                                nginx负载tomcat遇非80时的转发问题
                                    ronin47

                                    　　nginx负载后端容器是tomcat（其它容器如WAS,JBOSS暂没发现这个问题）非８０端口，遇到跳转异常问题。解决的思路是：$host:port 
       详细如下： 
　　  
该问题是最先发现的，由于之前对nginx不是特别的熟悉所以该问题是个入门级别的：    
?       1   2   3   4   5   
                                
                                java-17-在一个字符串中找到第一个只出现一次的字符
                                    bylijinnan
java
                                    

public class FirstShowOnlyOnceElement {

	/**Q17.在一个字符串中找到第一个只出现一次的字符。如输入abaccdeff，则输出b
	 * 1.int[] count:count[i]表示i对应字符出现的次数
	 * 2.将26个英文字母映射：a-z <--> 0-25
	 * 3.假设全部字母都是小写
	 */
	pu
                                
                                mongoDB 复制集
                                    开窍的石头
mongodb
                                    mongo的复制集就像mysql的主从数据库，当你往其中的主复制集(primary)写数据的时候，副复制集(secondary)会自动同步主复制集(Primary)的数据,当主复制集挂掉以后其中的一个副复制集会自动成为主复制集。提供服务器的可用性。和防止当机问题 
       
 
     mo
                                
                                [宇宙与天文]宇宙时代的经济学
                                    comsci
经济
                                     
    宇宙尺度的交通工具一般都体型巨大，造价高昂。。。。。 
 
     在宇宙中进行航行，近程采用反作用力类型的发动机，需要消耗少量矿石燃料，中远程航行要采用量子或者聚变反应堆发动机，进行超空间跳跃，要消耗大量高纯度水晶体能源 
 
     以目前地球上国家的经济发展水平来讲，
                                
                                Git忽略文件
                                    Cwind
git
                                         有很多文件不必使用git管理。例如Eclipse或其他IDE生成的项目文件，编译生成的各种目标或临时文件等。使用git status时，会在Untracked files里面看到这些文件列表，在一次需要添加的文件比较多时（使用git add . / git add -u），会把这些所有的未跟踪文件添加进索引。  
   ==== ==== ==== 一些牢骚
                                
                                MySQL连接数据库的必须配置
                                    dashuaifu
mysql连接数据库配置
                                    MySQL连接数据库的必须配置 
  
1.driverClass：com.mysql.jdbc.Driver 
  
2.jdbcUrl：jdbc:mysql://localhost:3306/dbname 
  
3.user：username 
  
4.password：password 
  
其中1是驱动名；2是url，这里的‘dbna
                                
                                一生要养成的60个习惯
                                    dcj3sjt126com
习惯
                                    一生要养成的60个习惯 
第1篇 让你更受大家欢迎的习惯 
1 守时，不准时赴约,让别人等,会失去很多机会。 
如何做到： 
①该起床时就起床， 
②养成任何事情都提前15分钟的习惯。 
③带本可以随时阅读的书，如果早了就拿出来读读。 
④有条理，生活没条理最容易耽误时间。 
⑤提前计划：将重要和不重要的事情岔开。 
⑥今天就准备好明天要穿的衣服。 
⑦按时睡觉，这会让按时起床更容易。 
2 注重
                                
                                [介绍]Yii 是什么
                                    dcj3sjt126com
PHPyii2
                                    Yii 是一个高性能，基于组件的 PHP 框架，用于快速开发现代 Web 应用程序。名字 Yii （读作 易）在中文里有“极致简单与不断演变”两重含义，也可看作 Yes It Is! 的缩写。  
Yii 最适合做什么？ 
Yii 是一个通用的 Web 编程框架，即可以用于开发各种用 PHP 构建的 Web 应用。因为基于组件的框架结构和设计精巧的缓存支持，它特别适合开发大型应
                                
                                Linux SSH常用总结
                                    eksliang
linux sshSSHD
                                    转载请出自出处：http://eksliang.iteye.com/blog/2186931 一、连接到远程主机 
  
格式：
ssh name@remoteserver
例如：
ssh [email protected] 
  二、连接到远程主机指定的端口 
  
格式：
ssh name@remoteserver -p 22
例如：
ssh i
                                
                                快速上传头像到服务端工具类FaceUtil
                                    gundumw100
android
                                    快速迭代用 
 
 

import java.io.DataOutputStream;
import java.io.File;
import java.io.FileInputStream;
import java.io.FileNotFoundException;
import java.io.FileOutputStream;
import java.io.IOExceptio
                                
                                jQuery入门之怎么使用
                                    ini
JavaScripthtmljqueryWebcss
                                    jQuery的强大我何问起（个人主页：hovertree.com）就不用多说了，那么怎么使用jQuery呢？ 
  
首先，下载jquery。下载地址：http://hovertree.com/hvtart/bjae/b8627323101a4994.htm，一个是压缩版本，一个是未压缩版本，如果在开发测试阶段，可以使用未压缩版本，实际应用一般使用压缩版本(min)。然后就在页面上引用。
                                
                                带filter的hbase查询优化
                                    kane_xie
查询优化hbaseRandomRowFilter
                                     
 问题描述 
 
hbase scan数据缓慢，server端出现LeaseException。hbase写入缓慢。     
 
 问题原因 
 
直接原因是：  hbase client端每次和regionserver交互的时候，都会在服务器端生成一个Lease,Lease的有效期由参数hbase.regionserver.lease.period确定。如果hbase scan需
                                
                                java设计模式-单例模式
                                    men4661273
java单例枚举反射IOC
                                             单例模式1，饿汉模式 
//饿汉式单例类.在类初始化时，已经自行实例化
public class Singleton1 {
    //私有的默认构造函数
    private Singleton1() {}
    //已经自行实例化
    private static final Singleton1 singl
                                
                                mongodb 查询某一天所有信息的3种方法，根据日期查询
                                    qiaolevip
每天进步一点点学习永无止境mongodb纵观千象
                                    // mongodb的查询真让人难以琢磨，就查询单天信息，都需要花费一番功夫才行。

// 第一种方式：
coll.aggregate([
          {$project:{sendDate: {$substr: ['$sendTime', 0, 10]}, sendTime: 1, content:1}},
          {$match:{sendDate: '2015-
                                
                                二维数组转换成JSON
                                    tangqi609567707
java二维数组json
                                    原文出处：http://blog.csdn.net/springsen/article/details/7833596 
public class Demo { 
    public static void main(String[] args) {        String[][] blogL
                                
                                erlang supervisor
                                    wudixiaotie
erlang
                                    定义supervisor时，如果是监控celuesimple_one_for_one则删除children的时候就用supervisor:terminate_child (SupModuleName, ChildPid)，如果shutdown策略选择的是brutal_kill，那么supervisor会调用exit(ChildPid, kill)，这样的话如果Child的behavior是gen_
                                
                
            
        
    


    
        
            按字母分类：
            ABCDEFGHIJKLMNOPQRSTUVWXYZ其他
        
    


    
        
            首页 -
            关于我们 -
            站内搜索 -
            Sitemap -
            侵权投诉
        
        版权所有 IT知识库 CopyRight © 2000-2050 E-COM-NET.COM , All Rights Reserved.