Jay·Yuen

2023年前端面试知识点总结（CSS篇）

近期整理了一下高频的前端面试题，分享给大家一起来学习。如有问题，欢迎指正！

1. 对CSS盒模型的理解

CSS3的盒模型有两种盒子模型：标准盒子模型、IE盒子模型

盒模型都是由四个部分组成的，分别是content（内容）、padding（内边距）、border（边框）、margin（外边距）

标准盒子模型： 盒子实际的宽/高 = content（内容）的width/height + padding + border + margin

IE盒子模型： 盒子实际的宽/高 = 内容的width/height（content + padding + border） + margin

设置盒模型可以通过box-sizing的值改变

box-sizing: content-box  // 标准盒子模型  默认类型
box-sizing: border-box   // IE盒子模型（怪异盒子模型）

盒模型margin负值问题

margin-left 元素自身会向左侧移动，同时会影响右侧的元素向左侧移动；
margin-top 元素自身会向上移动，同时会影响下方的元素向上移动；
marigin-right 元素自身不会移动，但会减少自身供css读取的高度，从而影响右侧的元素向左移动；
margin-bottom 元素指点不会移动，但会减少自身供css读取的高度，从而影响下方的元素向上移动；

2. CSS选择器及其优先级

选择器	格式	优先级权重
id选择器	#id	100
类选择器	.class	10
属性选择器	a[rel=“external”]	10
伪类选择器	p:last-child	10
标签选择器	span	1
伪元素选择器	div::first-line	1
相邻兄弟选择器	div+span	0
后代选择器	div p	0
子代选择器	ul>li	0
通用选择器	*	0

注意事项：

!important 声明的样式优先级最高，如果冲突再进行计算；

如果优先级相同，则选择最后出现的样式；

继承得到的样式优先级最低；

不同来源下优先级：内联样式 > 内部样式 > 外部样式 > 浏览器用户自定义样式 > 浏览器默认样式

3. CSS3有哪些新特性

圆角（border-radius）
文字阴影（text-shadow）
文本修饰（text-decoration）
自定义字体（@font-face）
媒体查询（@media）
过度效果（transition）
旋转、缩放、倾斜、平移（transform）
匹配不符合一组选择器的元素（:not）
线性渐变（linear-gradient）
边框上绘制图像（border-image）

4. display的属性值及其作用

属性值作用

none 元素不显示，并且会从文档流中移除

block 该元素生成一个块级元素盒，在正常的流中，默认宽度为父元素宽度，可设置宽高，该元素之前和之后产生换行。

inline 该元素生成一个或多个内联元素盒，默认宽度为内容宽度，不可设置宽高，它们之前或者之后并不会产生换行。在正常的流中，如果有空间，下一个元素将会在同一行上。

inline-block 该元素生成块级元素盒，它们之前或者之后并不会产生换行。

inline-flex 元素的行为类似于内联元素并且它的内容根据弹性盒模型布局。

inline-grid 元素的行为类似于内联元素并且它的内容根据网格盒模型布局。

flow-root 该元素生成一个块级元素盒，其会建立一个新的块级格式化上下文，定义格式化上下文的根元素。

table

该元素的行为类似于 HTML 中的

 元素。它定义了一个块级别的盒子。 元素。 元素。 元素。 元素。 元素。 元素。 
     
     
     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等 
   
   
   元素可见性 
   
   
   visibility：控制元素显示隐藏 
   
   
   光标属性 
   
   
   cursor：光标显示为何种形态 
   
  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区域不会与浮动的容器发生重叠
  
    BFC是独立的容器，容器内部元素不会影响外部元素
  
    每个元素的左margin值和容器的左border相接触
  
   
  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;
}
 
   
   使用flex布局（左定宽，右flex1） 
   
  .outer {
  display: flex;
  height: 100px;
}
.left {
  width: 200px;
  background: tomato;
}
.right {
  flex: 1;
  background: gold;
}
 
   
   左absolute+右margin 
   
  .outer {
  position: relative;
  height: 100px;
}
.left {
  position: absolute;
  width: 200px;
  height: 100px;
  background: tomato;
}
.right {
  margin-left: 200px;
  background: gold;
}
 
   
   双float+ 右calc 
   
  .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. 实行一个宽高自适应的正方形 
   
   利用vw来实现： 
   
  .square {
  width: 10%;
  height: 10vw;
  background: tomato;
}
 
   
   利用元素的margin/padding百分比是相对父元素width的性质来实现： 
   
  .square {
  width: 20%;
  height: 0;
  padding-top: 20%;
  background: orange;
}
 
   
   利用子元素的margin-top的值来实现： 
   
  .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)
        
            
                
                    移动端城市区县二级联动选择功能实现包
                        good2know

                        本文还有配套的精品资源，点击获取简介：本项目是一套为移动端设计的jQuery实现方案，用于简化用户在选择城市和区县时的流程。它包括所有必需文件：HTML、JavaScript、CSS及图片资源。通过动态更新下拉菜单选项，实现城市到区县的联动效果，支持数据异步加载。开发者可以轻松集成此功能到移动网站或应用，并可基于需求进行扩展和优化。1.jQuery移动端解决方案概述jQuery技术简介jQuery
                    
                    day15｜前端框架学习和算法
                        universe_01
前端算法笔记
                        T22括号生成先把所有情况都画出来，然后（在满足什么情况下）把不符合条件的删除。T78子集要画树状图，把思路清晰。可以用暴力法、回溯法和DFS做这个题DFS深度搜索：每个边都走完，再回溯应用：二叉树搜索，图搜索回溯算法=DFS+剪枝T200岛屿数量（非常经典BFS宽度把树状转化成队列形式，lambda匿名函数“一次性的小函数，没有名字”setup语法糖：让代码更简洁好写的语法ref创建：基本类型的
                    
                    力扣面试题07 - 旋转矩阵
                        茶猫_
leetcode矩阵算法c语言
                        题目：给你一幅由N×N矩阵表示的图像，其中每个像素的大小为4字节。请你设计一种算法，将图像旋转90度。不占用额外内存空间能否做到？示例1:给定matrix=[[1,2,3],[4,5,6],[7,8,9]],原地旋转输入矩阵，使其变为:[[7,4,1],[8,5,2],[9,6,3]]示例2:给定matrix=[[5,1,9,11],[2,4,8,10],[13,3,6,7],[15,14,12,
                    
                    最新阿里四面面试真题46道：面试技巧+核心问题+面试心得
                        风平浪静如码

                        前言做技术的有一种资历，叫做通过了阿里的面试。这些阿里Java相关问题，都是之前通过不断优秀人才的铺垫总结的，先自己弄懂了再去阿里面试，不然就是去丢脸，被虐。希望对大家帮助，祝面试成功，有个更好的职业规划。一，阿里常见技术面1、微信红包怎么实现。2、海量数据分析。3、测试职位问的线程安全和非线程安全。4、HTTP2.0、thrift。5、面试电话沟通可能先让自我介绍。6、分布式事务一致性。7、ni
                    
                    图论算法经典题目解析：DFS、BFS与拓扑排序实战
                        周童學
数据结构与算法深度优先算法图论
                        图论算法经典题目解析：DFS、BFS与拓扑排序实战图论问题是算法面试中的高频考点，本博客将通过四道LeetCode经典题目（均来自"Top100Liked"题库），深入讲解图论的核心算法思想和实现技巧。涵盖DFS、BFS、拓扑排序和前缀树等知识点，每道题配有Java实现和易错点分析。1.岛屿数量(DFS遍历)问题描述给定一个由'1'(陆地)和'0'(水)组成的二维网格，计算岛屿的数量。岛屿由水平或
                    
                    js操作样式
                        郝加升

                        DOM样式属性和方法：指定的元素，它的style有这么几个属性和方法：cssText：通过这个属性可以访问到元素的特性style设置的属性，并且可以直接赋值设置。removeProperty（属性名称）：从样式中删除给定属性。setProperty（属性名称，值，权重）：可以通过这个方法设置给定样式的同时设置其权重，可以传入”important”或者一个空字符串。获取计算后样式：window.ge
                    
                    分布式链路追踪系统架构设计：从理论到企业级实践
                        ma451152002
java分布式系统架构
                        分布式链路追踪系统架构设计：从理论到企业级实践本文深入探讨分布式链路追踪系统的架构设计原理、关键技术实现和企业级应用实践，为P7架构师提供完整的技术方案参考。目录引言：分布式链路追踪的重要性核心概念与技术原理系统架构设计数据模型与协议标准核心组件架构设计性能优化与扩展性设计企业级实施策略技术选型与对比分析监控与运维体系未来发展趋势P7架构师面试要点引言：分布式链路追踪的重要性微服务架构下的挑战在现
                    
                    面试必考题：Android Binder 机制详解
                        大模型大数据攻城狮
androidbinder面试reactnativekotlindalvikretrofit
                        目录第一章：Binder的基本概念什么是Binder？多角度解读Binder第二章：Binder的工作机制Binder的整体流程服务注册：从零到有的第一步服务查询：找到目标的“地图”服务调用：请求与响应的旅程Binder驱动的幕后功劳为什么Binder这么快？第三章：Binder在系统架构中的角色Activity：界面背后的通信枢纽Binder的角色实例分析Service：后台任务的跨进程支柱Bi
                    
                    用代码生成艺术字：设计个性化海报的秘密
                        

                        本文围绕“用代码生成艺术字：设计个性化海报的秘密”展开，先概述代码生成艺术字在海报设计中的独特价值，接着介绍常用的代码工具（如HTML、CSS、JavaScript等），详细阐述从构思到实现的完整流程，包括字体样式设计、动态效果添加等，还分享了提升艺术字质感的技巧及实际案例。最后总结代码生成艺术字的优势，为设计师提供打造个性化海报的实用指南，助力提升海报设计的独特性与吸引力，符合搜索引擎SEO标准
                    
                    vue element 封装表单
                        影子信息
vuevue.jsjavascript前端
                        背景：在前端系统开发中，系统页面涉及到的表单组件比较多，所以进行了简单的封装。封装的包括一些Form表单组件，如下：input输入框、select下拉框、等实现效果：理论知识：表单组件官方链接：点击跳转封装组件：封装组件的思路：不封装element组件，每一个input组件绑定一个form对象，例如官网。简单封装element组件，利用for循环生成form表单的每一项el-form-item。进
                    
                    前端面试每日 3+1 —— 第39天
                        浪子神剑

                        今天的面试题(2019.05.25)——第39天[html]title与h1、b与strong、i与em的区别分别是什么？[css]写出你知道的CSS水平和垂直居中的方法[js]说说你对模块化的理解[软技能]公钥加密和私钥加密是什么？《论语》，曾子曰：“吾日三省吾身”（我每天多次反省自己）。前端面试每日3+1题，以面试题来驱动学习，每天进步一点！让努力成为一种习惯，让奋斗成为一种享受！欢迎在Iss
                    
                    前端数据库：IndexedDB从基础到高级使用指南
                        

                        文章目录前端数据库：IndexedDB从基础到高级使用指南引言一、IndexedDB概述1.1什么是IndexedDB1.2与其他存储方案的比较二、基础使用2.1打开/创建数据库2.2基本CRUD操作添加数据读取数据更新数据删除数据三、高级特性3.1复杂查询与游标3.2事务高级用法3.3性能优化技巧四、实战案例：构建离线优先的待办事项应用4.1数据库设计4.2同步策略实现五、常见问题与解决方案5.
                    
                    【经典面试题】【JVM与性能调优】垃圾回收算法（标记-清除算法/复制算法/标记-整理算法/CMS/G1/ZGC）
                        本本本添哥
归档-Inbox1001-基础开发能力面试题目汇总jvm算法
                        JVM自动管理内存，当对象不再被引用时，垃圾回收器（GarbageCollector）会自动释放这些对象占用的内存。标记-清除算法（Mark-Sweep）：标记垃圾再清除，会产生碎片。复制算法（Copying）：将存活对象复制到新区域，适合新生代，无碎片但浪费空间。标记-整理算法（Mark-Compact）：标记后将存活对象移到一端，清除另一端，适合老年代。分代收集算法（GenerationalC
                    
                    【Java Web实战】从零到一打造企业级网上购书网站系统 | 完整开发实录（三）
                        笙囧同学
java前端状态模式
                        核心功能设计用户管理系统用户管理是整个系统的基础，我设计了完整的用户生命周期管理：用户注册流程验证失败验证通过验证失败验证通过用户名已存在用户名可用失败成功用户访问注册页面填写注册信息前端表单验证显示错误提示提交到后端后端数据验证返回错误信息用户名唯一性检查提示用户名重复密码加密处理保存用户信息保存成功?显示系统错误注册成功跳转登录页面登录认证机制深度解析我实现了一套企业级的多层次安全认证机制：认
                    
                    从零到一：打造基于GigaChat AI的艺术创作平台 | 笙囧同学的全栈开发实战
                        

                        作者简介：笙囧同学，中科院计算机大模型方向硕士，全栈开发爱好者联系方式：[email protected]各大平台账号：笙囧同学座右铭：偷懒是人生进步的阶梯前言在AI技术飞速发展的今天，如何将前沿的大模型技术与实际应用相结合，一直是我们开发者关注的焦点。今天，笙囧同学将带大家从零开始，构建一个基于GigaChatAI的艺术创作平台，实现React前端+Django后端的完整全栈解决方案。这不仅仅是
                    
                    14.tornado操作之应用Websocket协议实现聊天室功能
                        孤寒者
Tornado框架从入门到实战websockettornado聊天室功能实现python
                        目录：每篇前言：1.什么是WebSocket（1）定义（2）优点（3）和HTTP对比（4）适用场景2.WebSocket关键方法3.本tornado项目中使用WebSocket（1）准备一个聊天室的页面：第一步：编写视图：第二步：编写接口：（app.py中加入以下接口！）第三步：编写前端页面：测试接口——响应OK！（2）使用WebSocket：（3）聊天室的聊天功能的最终实现：第一步：战前准备第二
                    
                    每日面试题15：如何解决堆溢出？
                        ℡余晖^
每日面试题python开发语言
                        在Java应用运行过程中，"java.lang.OutOfMemoryError:Javaheapspace"是最常见的错误之一。无论是高并发的电商大促场景，还是持续运行的后台服务，堆内存溢出都可能导致服务不可用、数据丢失，甚至引发系统崩溃。本文将结合实际排查经验，系统讲解堆溢出的底层逻辑、应急处理流程及长效预防策略。一、堆溢出的本质：内存分配的"收支失衡"Java堆是JVM管理的内存区域，用于存
                    
                    记录自己第n次面试(n＞3)
                        Warren98
Java面试python职场和发展java开发语言服务器linux
                        1.Spring Boot可执行JAR的内存分配答：“在Spring Boot可执行JAR中，JVM的内存通常分为两大块：堆（Heap）和栈（Stack）。堆内存：存放对象实例和数组，通过-Xms（初始）和-Xmx（最大）控制。比如java-Xms512m-Xmx1024m-jarapp.jar，表示启动时给512 MB堆，最大可以到1 024 MB。栈内存：每个线程有独立的栈帧，用来保存方法调用
                    
                    为什么学习Web前端一定要掌握JavaScript？
                        web前端学习指南

                        为什么学习Web前端一定要掌握JavaScript？在前端的世界里，没有什么是JavaScript实现不了的，关于JS有一句话：凡是可以用JavaScript来写的应用，最终都会用JavaScript，JavaScript可运行在所有主要平台的所有主流浏览器上，也可运行在每一个主流操作系统的服务器端上。现如今我们在为网站写任何一个主要功能的时候都需要有懂能够用JavaScript写前端的开发人员。
                    
                    小架构step系列25：错误码
                        秋千码途
架构java
                        1概述一个系统中，可能产生各种各样的错误，对这些错误进行编码。当错误发生时，通过这个错误码就有可能快速判断是什么错误，不一定需要查看代码就可以进行处理，提高问题处理效率。有了统一的错误码，还可以标准化错误信息，方便把错误信息纳入文档管理和对错误信息进行国际化等。没有错误码的管理，开发人员就会按自己的理解处理这些错误。有些直接把堆栈直接反馈到前端页面上，使用看不懂这些信息体验很差，也暴露了堆栈信息有
                    
                    2020公考申论备考指导：把握思辨型文章写作脉络
                        不负时光_3d63

                        公务员考试一般分为笔试和面试，笔试较重要的是申论、行测和时事热点。不论是哪一部分都需要进行备考，抽时间复习相关内容。下面格燃教育小编整理了"2020公考申论备考指导：把握思辨型文章写作脉络"文章，希望对大家有所帮助一、确定立意首先要了解思辨型文章的提问方式，一般会以"围绕A与B书写文章"这样的方式进行提问，例如城市建设中的"有"与"无"，都是典型的思辨型文章。想要确定思辨型文章写作的立意，首先要先
                    
                    Java朴实无华按天计划从入门到实战（强化速战版-66天）
                        岫珩
Java后端java开发语言学习Java时间安排学习计划
                        致敬读者感谢阅读笑口常开生日快乐⬛早点睡觉博主相关博主信息博客首页专栏推荐活动信息文章目录Java朴实无华按天计划从入门到实战（强化速战版-66天）1.基础（18）1.1JavaSE核心（5天）1.2数据库与SQL（5天）1.3前端基础（8天）2.进阶（17天）2.1JavaWeb核心（5天）2.2Mybatis与Spring全家桶（6天）2.3中间件入门（4天）2.4实践项目（2天）3.高阶（1
                    
                    《跨域资源共享CORS的深层逻辑与前端实践精要》
                        

                        不同源头的资源交互已成为常态，而跨域资源共享（CORS）正是支撑这种交互的隐形架构。现代Web安全体系中平衡开放与防护的精妙设计。理解CORS的深层逻辑，不仅能解决实际开发中的跨域难题，更能触及网络安全与资源流通的核心矛盾，为前端工程师构建稳健的应用提供底层认知支撑。跨域资源共享的诞生，源于网络安全与应用发展的必然冲突。浏览器的同源策略，作为早期网络安全的基石，通过限制不同源文档的交互，有效阻挡了
                    
                    深入了解 Kubernetes（k8s）：从概念到实践
                        

                        目录一、k8s核心概念二、k8s的优势三、k8s架构组件控制平面组件节点组件四、k8s+docker运行前后端分离项目的例子1.准备前端项目2.准备后端项目3.创建k8s部署配置文件4.部署应用到k8s集群在当今云计算和容器化技术飞速发展的时代，Kubernetes（简称k8s）已成为容器编排领域的事实标准。无论是互联网巨头、传统企业还是初创公司，都在广泛采用k8s来管理和部署容器化应用。本文将带
                    
                    从零到大厂：硬件程序员的硬核修炼手册——2025版面试笔试全攻略
                        small_wh1te_coder
c面试嵌入式面试职场和发展c算法嵌入式硬件汇编linux
                        从零到大厂：嵌入式程序员的硬核修炼手册——2025版面试笔试全攻略第一章：C语言的内功心法——从“会用”到“精通”的蜕变引子：C语言，嵌入式江湖的“独孤九剑”兄弟，你是不是觉得C语言都学烂了？指针、数组、结构体，这些东西张口就来。但为啥一到大厂面试，或者遇到稍微复杂点的嵌入式项目，就感觉力不从心，甚至有点懵圈？原因很简单：你可能只是“会用”C语言，离“精通”C语言，特别是“精通”嵌入式领域所需的C
                    
                    大厂95%面试人不懂的易错点：strlen和sizeof 的底层博弈，大部分人踩过的内存陷阱 一文吃透 strlen/sizeof 的本质区别（附 30 + 代码演示 从崩溃到精通！
                        

                        1揭开c语言内存底裤：strlensizeof区别（上）是否曾被C语言中strlen和sizeof这两个“磨人精”搞得一头雾水？它们一个号称能测“长度”，一个号称能测“大小”，可当你把它们用在字符串和字符数组上时，结果却常常让你大跌眼镜，甚至引发诡异的程序崩溃！就像你和豆包AI的对话中，那两个看似无辜的字符数组：chara8[]="hello";chara9[]={'h','e','l','l',
                    
                    大厂都在用的前端缓存策略，你掌握了吗？
                        AI架构全栈开发实战笔记
前端缓存ai
                        大厂都在用的前端缓存策略，你掌握了吗？关键词：前端缓存、HTTP缓存、ServiceWorker、CDN缓存、缓存策略、性能优化、浏览器缓存摘要：本文将深入探讨前端开发中常用的缓存策略，从浏览器缓存到ServiceWorker，从HTTP缓存头到CDN缓存，全面解析大厂都在使用的高效缓存技术。通过生动的比喻和实际代码示例，帮助开发者理解并掌握这些提升Web应用性能的关键技术。背景介绍目的和范围本文
                    
                    26. 什么是雪碧图，作用和原理了解吗
                        yqcoder
前端面试-CSScss前端html
                        总结小图合成一张，使用background来使用，减少资源请求一、什么是雪碧图？雪碧图（CSSSprite）是一种前端优化技术，指的是将多个小图标合并成一张大图，通过CSS控制显示其中的某一部分。它常用于网站中图标、按钮等小图较多的场景。二、雪碧图的作用作用说明✅减少HTTP请求次数合并多个图片为一张图，减少请求资源数✅提升页面加载速度尤其在图片较多时效果明显✅避免图片加载闪烁鼠标悬停切换图片时不
                    
                    H5UI微信小程序前端框架实战指南
                        ai

                        本文还有配套的精品资源，点击获取简介：H5UI是一个为微信小程序开发设计的前端框架，基于H5技术，提供简洁高效的组件库。框架集成了丰富的UI元素，如按钮、表格、导航栏等，简化了界面布局和交互的实现。通过安装、引入、使用组件和事件绑定四个步骤，开发者可以轻松构建功能齐全的应用。了解性能优化等注意事项对于高效开发同样重要。1.微信小程序前端开发框架介绍微信小程序概述微信小程序是微信官方推出的一种无需下
                    
                    Ubuntu安装LAMP
                        L_h1
测试ubuntulinux
                        在安装vim时遇到了一个问题：E:无法获得锁/var/lib/dpkg/lock-frontend-open(11:资源暂时不可用)E:无法获取dpkg前端锁(/var/lib/dpkg/lock-frontend)，是否有其他进程正占用它？解决办法：强制解锁sudorm/var/lib/dpkg/lock-frontendsudorm/var/cache/apt/archives/locksud
                    
                                对于规范和实现，你会混淆吗？
                                    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)
                                    小桔子
pythondjangopip
                                        最近开始学习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
hadoopbalancer
                                    在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
javaHashMapjava 遍历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
androidviewpagertag刷新
                                      使用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
DAOHibernate
                                    /** 
 * <p>方法描述:sql语句查询 返回List<Class> </p> 
 * <p>方法备注: Class 只能是自定义类 </p> 
 * @param calzz 
 * @param sql 
 * @return 
 * <p>创建人：王川</p> 
 * <p>创建时间：Jul
                                
                
            
        
    


    
        
            按字母分类：
            ABCDEFGHIJKLMNOPQRSTUVWXYZ其他
        
    


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