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)
        
            
                
                    深入理解检查约束：确保数据质量的重要工具
                        

                        title:深入理解检查约束：确保数据质量的重要工具date:2025/1/20updated:2025/1/20author:cmdragonexcerpt:在数据库管理中，检查约束是一种重要的约束类型，用于确保表中某一列或某些列的数据符合特定条件，从而维护数据的有效性和一致性。检查约束通过对数据的有效性进行验证，防止无效或不合逻辑的数据进入数据库。categories:前端开发tags:检查约
                    
                    ofa.js：无需打包的MVVM框架，前端开发的轻量之选
                        
前端
                        近年来，前端开发领域涌现了许多优秀的框架，如React、Vue和Angular，它们极大地提升了开发效率和代码可维护性。然而，随着项目复杂度的增加，这些框架的学习曲线和构建工具链的复杂性也让许多开发者感到头疼。在这样的背景下，ofa.js应运而生，它号称“无需打包的MVVM框架”，试图为前端开发带来一种全新的体验。那么，ofa.js究竟有何独特之处？它与其他MVVM框架相比又有哪些优势？本文将为你
                    
                    AI生成前端页面：解放前端开发，拥抱AI时代的高效
                        
前端
                        在数字时代，效率是企业和个人的核心竞争力。而对于前端开发人员来说，重复性工作和繁琐的代码编写常常成为效率提升的瓶颈。幸运的是，随着人工智能技术的飞速发展，一个新的时代已经到来——AI代码生成器（例如ScriptEcho）的出现，正以前所未有的方式改变着前端开发的格局。本文将探讨人工智能在日常应用中的广泛影响，并着重介绍如何利用AI技术，例如ScriptEcho，来提升前端开发效率，从而更好地应对当
                    
                    华为OD机试C卷--手机App防沉迷系统（Java & JS & Python & C）
                        飞码创造者
华为OD机试题库华为odc语言javajavascriptpython
                        获取题库不需要订阅专栏，可直接私信我进入CSDN领军人物top1博主的华为OD交流圈观看完整题库、最新面试实况、考试报告等内容以及大佬一对一答疑。题目描述智能手机方便了我们生活的同时，也侵占了我们不少的时间。“手机App防沉迷系统”能够让我们每天合理地规划手机App使用时间，在正确的时间做正确的事。它的大概原理是这样的：1.在一天24小时内，可以注册每个App的允许使用时段2.一个时间段只能使用一
                    
                    如何一步步形成“代码屎山”——前端开发中的痛点与反思
                        
前端
                        引言在一个大型项目中，随着功能不断扩展、需求不断变化、人员不断更替，代码的质量和可维护性可能会逐渐恶化，最终演变成所谓的“代码屎山”。你一定对代码屎山的形成和后果有深刻的体会。那么，究竟是什么原因导致了代码屎山的形成？如何在开发过程中避免掉进这一陷阱？本文将从多个角度剖析这一问题，并提出一些解决方案，希望能帮助大家减少开发中的痛苦，提升代码质量。第一章：什么是“代码屎山”？在正式探讨代码屎山的形成
                    
                    MySql场景面试题：满意度调查分组去除最高最低求平均分
                        码到三十五
mysql高手mysqlspringbootspringcloud分布式数据分析数据挖掘
                        ❃博主首页：「码到三十五」，同名公众号:「码到三十五」，wx号:「liwu0213」☠博主专栏：♝博主的话：搬的每块砖，皆为峰峦之基；公众号搜索「码到三十五」关注这个爱发技术干货的coder，一起筑基场景描述我们有一个员工满意度调查系统，数据库中有一张表：survey_scores表：存储员工对公司的满意度打分。表结构如下：--调查打分表CREATETABLEsurvey_scores(score
                    
                    未来前端发展方向：深度探索与技术前瞻
                        
前端
                        未来前端发展方向：深度探索与技术前瞻在数字化浪潮席卷全球的今天，前端开发作为连接用户与数字世界的桥梁，其重要性不言而喻。随着技术的不断进步和市场的不断变化，前端开发领域正经历着前所未有的变革。今天，我们将深入探讨未来前端发展的几个关键方向，为前端开发者们提供有价值的参考。一、性能优化与用户体验性能优化一直是前端开发的核心议题之一。在未来，随着用户对于应用响应速度和流畅性的要求越来越高，性能优化将变
                    
                    小明，谈谈你对Vue 虚拟dom的理解
                        
程序员
                        Vue.js的虚拟DOM（VirtualDOM）是为了提高前端性能和开发体验而引入的一种技术。Vue.js虚拟DOM的大致实现虚拟DOM的定义虚拟DOM是一种JavaScript对象，它用来描述用户界面（UI）的结构和内容。每个虚拟DOM节点（VNode）代表一个真实的DOM元素或组件实例。//VNode示例constvnode={tag:'div',data:{id:'app'},childre
                    
                    Vue.js 的组合式 API 与状态管理
                        

                        随着现代前端开发的不断发展，Vue.js作为一个渐进式JavaScript框架，已经成为开发动态和交互式用户界面的流行选择之一。Vue.js的设计旨在通过简洁的语法和强大的功能来提升开发者的生产力。在Vue3中引入的组合式API（CompositionAPI）及其状态管理功能，为开发者提供了一种灵活且可扩展的方式来构建复杂的应用程序。本文将深入探讨Vue.js的组合式API，并结合状态管理的概念，
                    
                    MySQL面试题
                        泰山小张只吃荷园
mysql数据库java面试后端
                        MySQL目录1.MySQL中的数据排序是怎么实现的？2.那怎么去优化ORDERBY呢？3.MySQL中的ChangeBuffer是什么?有什么作用？4.详细描述一下一条SQL语句在MySQL中的执行过程5.MySQL的存储引擎有哪些？6.MySQL的索引有哪些？7.MySQLInnoDB引擎中的聚集索引和非聚集索引有什么区别?8.MySQL索引的最左前缀匹配原则是什么?9.MySQL的覆盖索引是
                    
                    JavaScript 运算符详解：各类运算符及优先级。
                        前端基地
javascript运算符优先级算数运算符逻辑运算符一元运算符比较运算符赋值运算符
                        目录非VIP用户可前往公众号“前端基地”进行免费阅读运算符介绍运算符优先级算数运算符赋值运算符比较运算符逻辑运算符介绍a&&b和a||b一元运算符非VIP用户可前往公众号“前端基地”进行免费阅读运算符介绍以下是各类运算符的详细介绍：运算符描述算术运算符加(+)、减(-)、乘(*)、除(/)、求余数并保留整数(%)、累加(++)、递减(--)赋值运算符=、+=(num+=5等同于num=num+5)
                    
                    华为OD机试E卷 - 手机App防沉迷系统（Java & Python& JS & C++ & C ）
                        算法大师
最新华为OD机试华为odjavapythonc语言c++javascript华为OD机试E卷
                        最新华为OD机试真题目录：点击查看目录华为OD面试真题精选：点击立即查看题目描述智能手机方便了我们生活的同时，也侵占了我们不少的时间。“手机App防沉迷系统”能够让我们每天合理地规划手机App使用时间，在正确的时间做正确的事。它的大概原理是这样的：在一天24小时内，可以注册每个App的允许使用时段一个时间段只能使用一个AppApp有优先级，数值越高，优先级越高。注册使用时段时，如果高优先级的App
                    
                    Windows 窗口置顶工具推荐 如何始终置顶窗口 窗口前置 窗口固定 窗口钉在桌面 始终保持在其他窗口前端 在其他窗口之上 PowerToys MouseInc
                        七星关雎
Windows疑难杂症Windowswindows开源软件
                        工具一：微软PowerToysReleases·microsoft/PowerToys·GitHubWindowssystemutilitiestomaximizeproductivity.Contributetomicrosoft/PowerToysdevelopmentbycreatinganaccountonGitHub.https://github.com/microsoft/PowerT
                    
                    深度解析智能问答系统：如何打造精准、高效的AI对话架构？
                        和老莫一起学AI
人工智能架构自然语言处理产品经理语言模型学习ai
                        在人工智能的飞速发展中，智能问答系统（QA系统）逐渐成为了企业内部管理、客户服务、搜索引擎等多个领域中的关键技术。今天，我们将深入探讨一个基于大模型、自然语言处理、知识检索的智能问答系统的架构，详细介绍其技术原理、流程以及未来应用前景。一、系统整体概览在这个智能问答系统中，整个流程可以大致划分为两大部分：前端问答生成与后端离线数据处理。前端部分是用户交互的核心，通过用户的输入、关键词提取、检索和问
                    
                    《中型 Vue 项目：挑战与成长》
                        计算机毕设定制辅导-无忧学长
#Vuevue.jsflutter前端
                        一、引言在当今的前端开发领域，Vue作为一款渐进式JavaScript框架，以其强大的功能和灵活性备受开发者青睐。对于中型Vue项目而言，其重要性不言而喻。中型Vue项目通常在功能复杂度和规模上介于小型项目和大型项目之间，既需要应对一定的业务需求挑战，又要考虑开发效率和可维护性。中型Vue项目面临着诸多挑战与机遇。挑战方面，随着项目规模的扩大，代码的复杂性增加，如何进行有效的状态管理、组件化开发以
                    
                    httpslocalhostindex 配置的nginx，一刷新就报404了
                        m0_74824112
nginx运维
                        当你的Nginx配置导致页面刷新时报404错误时，通常是由于以下几个原因造成的：静态文件路径配置错误：Nginx没有正确地指向静态文件的目录。前端路由问题：如果是SPA（单页应用），刷新页面时Nginx没有正确地将请求重定向到入口文件（如index.html）。反向代理配置错误：如果Nginx作为反向代理，后端服务可能没有正确处理请求。检查和解决步骤1.检查静态文件路径配置确保Nginx配置文件中
                    
                    深度解析 React 合成事件：机制、作用及与 Vue 事件机制的对比
                        
前端vue.jsreact
                        在前端开发领域，React与Vue作为两款备受瞩目的框架，凭借独特的设计理念和技术架构，为开发者打造出截然不同的开发体验。React的合成事件是其核心亮点之一，Vue则采用了别具一格的事件处理机制，二者的差异背后蕴藏着多方面的考量。一、React合成事件的底层剖析（一）事件创建与封装细节当DOM事件触发，React会第一时间在内部事件池中检索对应的合成事件实例。若未找到，便依据原生事件类型，像cl
                    
                    告别代码堆砌！AI生成前端页面，让开发效率飞升
                        
前端
                        在当今快节奏的数字世界中，前端开发效率至关重要。面对日益增长的市场需求和复杂的项目，开发者们常常面临着巨大的压力。而一款优秀的AI生成前端页面工具，无疑能成为提升效率的利器。本文将深入探讨谷歌Gemini的强大功能，并结合ScriptEcho——一款基于大模型AI技术的前端代码生成工具，展现如何将AI技术应用于前端开发，从而实现效率的显著提升。谷歌Gemini：AI赋能的未来谷歌Gemini的出现
                    
                    零售业的AI赋能与前端开发效率革命：ScriptEcho 的助力
                        
前端
                        零售业正经历着前所未有的数字化转型，但同时也面临着巨大的挑战。库存管理混乱、个性化客户体验不足等问题，严重制约着零售企业的盈利能力。而人工智能（AI）的兴起，为解决这些问题提供了新的思路。通过AI驱动的实时库存管理和客户行为分析，零售企业可以显著提升运营效率和客户满意度。然而，构建这些AI赋能的零售应用，需要强大的前端开发能力，这正是AI代码生成器ScriptEcho能够发挥关键作用的地方。AI赋
                    
                    AI时代的前端开发：技能提升与职业发展之路
                        
前端
                        在瞬息万变的科技时代，个人职业发展的重要性日益凸显。提升技能，不断学习，已经不再是锦上添花，而是立足之本，是我们在竞争激烈的职场中脱颖而出的关键。而人工智能（AI）技术的快速发展，为我们提供了前所未有的机遇，特别是对于前端开发领域，AI正以前所未有的速度改变着我们的工作方式和学习方式。AI赋能前端开发：个性化学习路径前端开发领域的技术栈庞大而复杂，涵盖HTML、CSS、JavaScript、各种框
                    
                    清华计算机考研csp,「考研2021」400分跨考清华大学软件学院经验帖
                        大豆小米
清华计算机考研csp
                        基本信息：应届武汉大学本科生跨考清华计算机系学硕拟录取。学硕面试结束，一切尘埃落定，趁现在回忆还比较清晰，记录下一年来的奋斗历程，以供诸君参考。择校择校当时拟定的有三所：浙大，北大，清华。然而北大保研名额锐减60%，因此考研也显得异常艰辛，由于近几年对于跨考北大比较友好，且去年第一是武大药院跨考，因此我预感报考信科可能会由于人数爆炸而惨败，老师也很可能由于跨考人数太多而对跨考生变得不友好。去年浙大
                    
                    出海工具集
                        web前端进阶者
前端
                        群聊分享的一个工具集合，看了几个，感觉有点子用，收藏一波，下面有GitHub的地址；吃水不忘挖井人；GitHub地址分类目录导航Web开发框架或模板Chrome插件开发前端开发后端开发数据库管理对象关系映射（ORM）样式与UI框架原型设计认证与授权支付集成邮件服务网站分析在线客服和反馈服务部署与托管网站管理域名注册文档管理协议生成图标资源字体资源图片视频素材图片视频处理工具屏幕录制短链或长链信息渠
                    
                    大厂面试系列：JVM中有哪些内存区域，分别都是用来干嘛的？
                        石杉的架构笔记
面试求职java面试jvm内存划分类加载
                        添加VX：ruyuan0220，回复：CSDN，领取更多精品学习资料！目录背景知识大厂面试背景引入到底什么是JVM的内存区域划分？存放类的方法区执行代码指令用的程序计数器Java虚拟机栈Java堆内存核心内存区域的全流程串讲其他内存区域本文小结背景知识我们先聊了一下相关的背景知识：JVM类加载这块的机制，简单介绍一下。大家需要搞明白的是，在什么情况下会触发类的加载？加载之后的验证、准备和解析分别是
                    
                    UE5面试题汇总
                        阿贾克斯的黎明
游戏开发ue5
                        基础概念类什么是UE5？：UE5即UnrealEngine5，是一款由EpicGames开发的功能强大的实时3D开发引擎，用于创建高品质的游戏、虚拟现实、增强现实等交互式体验内容，提供了先进的渲染技术、关卡设计工具等。简述UE5中的Actor和Pawn：Actor是UE5中游戏世界里的基本对象，可包含组件来实现功能，如场景中的静态物体等。Pawn是可被控制的Actor子类，常代表游戏中的角色，具有
                    
                    华为OD机试E卷 - 跳马（Java & Python& JS & C++ & C ）
                        算法大师
最新华为OD机试java华为odpythonjavascriptc语言c++华为OD机试E卷
                        最新华为OD机试真题目录：点击查看目录华为OD面试真题精选：点击立即查看题目描述输入m和n两个数，m和n表示一个m*n的棋盘。输入棋盘内的数据。棋盘中存在数字和"."两种字符，如果是数字表示该位置是一匹马，如果是"."表示该位置为空的，棋盘内的数字表示为该马能走的最大步数。例如棋盘内某个位置一个数字为k，表示该马只能移动1~k步的距离。棋盘内的马移动类似于中国象棋中的马移动，先在水平或者垂直方向上
                    
                    2025java面试常见八股文整理
                        Java八股文面试
面试职场和发展javaspringbootjvmspringspringcloud
                        1.多线程编程下，怎么解决线程的数据安全问题？如果线程存在竞争临界资源，多线程访问下添加同步代码块synchronized解决，或者分布式排他锁进行临界资源控制。在分布式多线程环境下，线程的数据安全尽量不要产生连接资源，使用线程本地化ThreadLocal实现线程资源隔离。2.SpringIOC依赖注入怎么理解，spring有几种方式属性注入，setter构建pojo实体类和有参构造方法工厂方法注
                    
                    Arch - 架构安全性_验证（Verification）
                        小小工匠
【凤凰架构】架构验证Verification
                        文章目录OverView导图1.引言：数据验证的重要性概述2.数据验证的基本概念3.数据验证的层次前端验证后端验证4.数据验证的标准做法5.自定义校验注解6.校验结果的处理7.性能考虑与副作用8.小结OverView即使只限定在“软件架构设计”这个语境下，系统安全仍然是一个很大的话题。接下来我们将对系统安全架构的各个方面进行详细分析，包括认证、授权、凭证、保密、传输安全和验证，结合案例实践，展示如
                    
                    【2023最新Java大厂面试题】——MyBatis面试题，看完拿捏面试官
                        Java凤梨
Java金三银四面试题mybatisjava面试
                        全套Java金三银四面试题持续更新可文末自取，建议关注收藏不然下次找不到哟~目录1、什么是Mybatis？2、Mybaits的优点：3、MyBatis框架的缺点：4、MyBatis框架适用场合：5、MyBatis与Hibernate有哪些不同？6、#{}和${}的区别是什么？7、当实体类中的属性名和表中的字段名不一样，怎么办？8、模糊查询like语句该怎么写?9、通常一个Xml映射文件，都会写一个
                    
                    如何利用 Dexie.js 管理前端状态或持久化复杂数据
                        maply
Node.jsvue前端javascript状态模式Dexie.js前端状态管理前端状态持久化vue.js
                        使用Dexie.js管理前端状态或持久化复杂数据Dexie.js是一个功能强大的IndexedDB封装库，不仅适用于简单的离线存储，还非常适合管理前端状态和持久化复杂数据。以下是如何利用Dexie.js管理前端状态或持久化复杂数据的详细介绍：1.Dexie.js管理前端状态的优势数据持久化：将应用状态存储在浏览器中，即使刷新页面或关闭浏览器，状态仍然存在。异步数据操作：支持异步读取和写入，提高性能
                    
                    SpringBoot3使用Swagger3
                        m0_74825260
java
                        SpringBoot3使用Swagger3项目中的后端接口进行简单的前端展示一、依赖引入二、快速启动1.在application.yml中配置2.或者properties文件,则配置3.启动项目访问swagger三、使用注解标注接口Swagger配置文件Swagger注解迁移举例五种常用@Api@ApiOperation@ApiImplicitParam@ApiModel@ApiModelProp
                    
                                对于规范和实现，你会混淆吗？
                                    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.