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)
        
            
                
                    康冠科技嵌入式面试题及参考答案
                        大模型大数据攻城狮
嵌入式嵌软单片机面试嵌入式硬件RTOS面试移植驱动开发
                        LCD驱动你自己做了哪些内容？在LCD驱动开发中，首先是硬件层面的理解。需要仔细研究LCD的数据手册，明确其引脚定义，包括电源引脚、数据引脚、控制引脚等。比如，对于常见的RGB接口LCD，要清楚哪几个引脚是用于传输红、绿、蓝三种颜色的数据，以及像VSYNC（垂直同步信号）、HSYNC（水平同步信号）这些控制显示同步的引脚功能。在软件层面，初始化工作是关键。要设置合适的寄存器来配置LCD的工作模式。
                    
                    高效高并发调度架构
                        之群害马
架构
                        以下是从架构层面为你提供的适合多核CPU、多GPU环境下API客户端、服务端高级调度，以实现高效并发大规模与用户交互的技术栈：通信协议gRPC：基于HTTP/2协议，具有高性能、低延迟的特点，支持二进制序列化（通常搭配Protobuf），非常适合高并发场景。它提供了流式通信和多路复用功能，可有效减少网络开销。常用于微服务之间的通信，例如机器学习模型服务与前端应用之间的交互。RSocket：是一种基
                    
                    Java 实现拖拽列表更新排序
                        架构师成长进阶空间
Javaspringcloudspringbootjava后端
                        拖拽列表更新排序，接口提供给前端这个功能主要是需要的算法逻辑很多图解：如在前端页面上想把id=5拖拽到id=3上拖拽之后的效果：解析图例：代码示例：DevToCoding｜Java面试指南、学习笔记/***拖拽数据更新排序*@paramcurrentId当前数据id*@paramtargetId目标数据id*@return*/@RequestMapping("/sort/{currentId}/{
                    
                    Flux架构及Redux实践
                        GbkMobile
架构
                        随着前端应用的复杂性不断增加，有效管理应用状态和数据流变得至关重要。Flux架构及其最流行的实现之一Redux，为前端开发人员提供了一种可靠且可扩展的解决方案。本文将深入浅出地介绍Flux架构的核心概念，并通过实际的Redux实践示例来帮助读者更好地理解和应用这些概念。什么是Flux架构？Flux是一种前端应用架构模式，旨在解决传统MVC（Model-View-Controller）模式在大型应用
                    
                    Flux架构：构建可预测的Web应用状态管理体系
                        阿珊和她的猫
架构前端
                        前端开发工程师、技术日更博主、已过CET6阿珊和她的猫_CSDN博客专家、23年度博客之星前端领域TOP1牛客高级专题作者、打造专栏《前端面试必备》、《2024面试高频手撕题》蓝桥云课签约作者、上架课程《Vue.js和Egg.js开发企业级健康管理项目》、《带你从入门到实战全面掌握uni-app》前些天发现了一个巨牛的人工智能学习网站，通俗易懂，风趣幽默，忍不住分享一下给大家。点击跳转到网站。文章
                    
                    利用Python进行数据清洗与预处理：Pandas的高级用法
                        步入烟尘
python数据库开发语言
                        本文已收录于《Python超入门指南全册》本专栏专门针对零基础和需要进阶提升的同学所准备的一套完整教学，从基础到精通不断进阶深入，后续还有实战项目，轻松应对面试，专栏订阅地址：https://blog.csdn.net/mrdeam/category_12647587.html优点：订阅限时19.9付费专栏，私信博主还可进入全栈VIP答疑群，作者优先解答机会（代码指导、远程服务），群里大佬众多可以
                    
                    探索 Elm 的 Material Design 组件库：elm-mdl
                        薄垚宝

                        探索Elm的MaterialDesign组件库：elm-mdlelm-mdlElm-portoftheMaterialDesignLiteCSS/JSlibrary项目地址:https://gitcode.com/gh_mirrors/el/elm-mdl项目介绍elm-mdl是一个基于Elm语言的MaterialDesign组件库，它是对Google的MaterialDesignLite库的El
                    
                    [失业前端恶补算法]JavaScript leetcode刷题top100（六）：字母异位词分组、最长连续序列、找到字符串中所有字母异位词、最大子数组和、除自身以外数组的乘积
                        摸鱼老萌新
失业前端恶补算法前端javascript动态规划算法哈希
                        专栏声明：只求用最简单的，容易理解的方法通过，不求优化，不喜勿喷49.字母异位词分组题面给你一个字符串数组，请你将字母异位词组合在一起。可以按任意顺序返回结果列表。字母异位词是由重新排列源单词的所有字母得到的一个新单词。知识点：哈希表、排序思路这里用了js语言的一个小技巧，我们可以使用split这个api将字符串变成字符的数组，之后我们对得到的数组进行排序，这样字母异位词得到了结果字符串的一致的，
                    
                    Java面试八股文：Memcached面试题专场（持续更新中......）
                        Java凤梨
Java金三银四面试题memcachedjava面试
                        全套Java金三银四面试题持续更新可文末自取，建议关注收藏不然下次找不到哟~目录1、Memcached是什么，有什么作用？memcached服务在企业集群架构中有哪些应用场景？一、作为数据库的前端缓存应用二、作业集群的session会话共享存储。2、Memcached服务分布式集群如何实现？3、Memcached服务特点及工作原理是什么？4、简述Memcached内存管理机制原理？SlabAllo
                    
                    计算机编程中的抽象语法树（AST）在代码分析和转换中的应用与优化
                        借口
热点资讯
                        博客主页：借口的CSDN主页⏩文章专栏：《热点资讯》计算机编程中的抽象语法树（AST）在代码分析和转换中的应用与优化计算机编程中的抽象语法树（AST）在代码分析和转换中的应用与优化计算机编程中的抽象语法树（AST）在代码分析和转换中的应用与优化引言抽象语法树概述定义历史背景核心特性简化复杂度提供统一接口支持多种操作应用场景编译器前端静态代码分析自动化测试框架源码美化工具成功案例分析ESLintRo
                    
                    Spring Boot中使用RabbitMQ(2)
                        D1561691
程序员java-rabbitmqspringbootrabbitmq
                        《一线大厂Java面试题解析+核心总结学习笔记+最新讲解视频+实战项目源码》，点击传送门，即可获取！MessageBroker与AMQP简介MessageBroker是一种消息验证、传输、路由的架构模式，其设计目标主要应用于下面这些场景：消息路由到一个或多个目的地消息转化为其他的表现方式执行消息的聚集、消息的分解，并将结果发送到他们的目的地，然后重新组合相应返回给消息用户调用Web服务来检索数据响
                    
                    面试官 ：Java 调优经验有吗？
                        Think_Higher
Java生态圈大中IT企业面试题整理java数据库开发语言
                        文章目录调优准备性能分析CPU分析jstack[pid]jstat-gcutil[pid]vmstat15内存分析IO分析1.文件IO2.网络IO其他分析工具JavaMissionControl(jmc)BtraceJwebap性能调优CPU调优内存调优IO调优其他优化建议JVM参数进阶对于调优这个事情来说，一般就是三个过程：性能监控：问题没有发生，你并不知道你需要调优什么？此时需要一些系统、应用
                    
                    前端实现电子签名
                        一个00后前端开发
前端
                                          Document          *{        margin:0;        padding:0;      }                      取消      保存            constcanvas=document.querySelector('canvas');    canvas.width=500;    canvas
                    
                    css总结
                        threesevens
前端css前端
                        一、CSS引入二、CSS基本选择器1.通配选择器为所有元素设置样式*{padding:0;margin:0;}2.元素选择器为某种元素统一设置样式p{color:red;}3.类选择器为某个类名统一设置样式.className{color:red;}4.ID选择器为某个ID设置样式#idName{color:red;}三、复合选择器1.交集选择器选中同时符合多个条件的元素/*选中同时包含pid="
                    
                    深入理解现代前端框架：Vue.js 的进阶探秘
                        lozhyf
工作面试学习前端框架vue.jsflutter
                        在当今的web开发领域，前端框架如雨后春笋般涌现，而Vue.js凭借其简洁易用和强大的功能，成为了众多开发者的心头好。本文将带领大家深入探索Vue.js的一些进阶特性，帮助你将Vue应用开发提升到新的高度。一、Vue.js的响应式原理Vue.js最核心的特性之一就是其响应式系统。当数据发生变化时，Vue能够自动更新DOM，这一过程是如何实现的呢？Vue.js使用了Object.defineProp
                    
                    记录一次 vue3 + ele pls 改写 饿了么主题色实践
                        Ashy-
前端笔记前端vue.js
                        一、改写element主题色在main.ts中引入需要改写的scss文件main.ts:import'element-plus/dist/index.css'import'./styles/element-plus.scss'在自定义的element-plus.scss文件中改写elepls的变量element-plus.scss：/***更改主题色*/:root{--el-color-prima
                    
                    中科院空天院的面试题总结-Java
                        web18285997089
面试学习路线阿里巴巴java开发语言
                        JAVA1.谈谈ajax的异步请求，与同步请求的区别答：同步是指：发送方发出数据后，等接收方发回响应以后才发下一个数据包的通讯方式。异步是指：发送方发出数据后，不等接收方发回响应，接着发送下个数据包的通讯方式。自己说了一堆，面试官直接这两句回我，简洁明了，这就是功力，惭愧2.数据库中有成绩字段，给出查询排名前10的语句答：select*from(select*from表orderby成绩desc)
                    
                    深入思考：技术生态的繁荣与开发者的选择
                        艾米栗写代码
前端
                        作为一名前端开发者，我们是一直被两类问题困惑着的：1、技术生态中“轮子迭代”与“原理理解”的矛盾，2、业务开发与技术深度的平衡问题。这些问题本质上是开发者在不同阶段必然面临的挑战。我们可以从以下几个角度进一步探讨：一、为什么“轮子”永远在迭代？1.技术演进的必然性场景细化：早期工具（如Grunt、Gulp）解决的是通用构建问题，但随着前端复杂度提升，出现了更垂直的解决方案（如Vite专攻开发体验、
                    
                    对前端的技术进行分层
                        艾米栗写代码
前端
                        前端相比较后端而言，由于其发展历史和浏览器的标准不一，导致其看上去简单，但是深入起来又很复杂，在最开始学习的时候，我们往往是了解一下三剑客和vue、react的api就开始上手工作了，但是到后面会发现，每一步就像缺了一根拐杖，而这根拐杖指的就是对前端整个层面的了解。只有我们建立了对整个层面的了解，才能到我们遇到的问题进行分类，才能在遇到困难的时候，能够分门别类的去解决问题。前端技术的分层可以类比为
                    
                    牛客网面试必刷TOP101-010贪心算法BM96 主持人调度（二）
                        bingw0114
贪心算法算法
                        描述有n个活动即将举办，每个活动都有开始时间与活动的结束时间，第i个活动的开始时间是starti,第i个活动的结束时间是endi,举办某个活动就需要为该活动准备一个活动主持人。一位活动主持人在同一时间只能参与一个活动。并且活动主持人需要全程参与活动，换句话说，一个主持人参与了第i个活动，那么该主持人在(starti,endi)这个时间段不能参与其他任何活动。求为了成功举办这n个活动，最少需要多少名
                    
                    css:position
                        吴永琦（桂林电子科技大学）
web前端前端技术javascript
                        position属性是CSS中用于控制元素定位的重要属性，它决定了元素在文档中的定位方式以及如何响应top、right、bottom、left属性。下面详细介绍各个取值及其特点：static（默认值）描述：所有元素默认的定位方式，按照正常的文档流进行排布。特点：不受top、left、bottom、right属性影响。不会产生新的定位上下文，也不会改变元素原有的位置。relative（相对定位）描述
                    
                    This dependency was not found: * @logicflow/core/dist/LogicFlow.css
                        计算机辅助工程
css前端
                        在使用@logicflow/core这个库时，如果你遇到了找不到@logicflow/core/dist/LogicFlow.css的问题，通常是因为你没有正确地安装或引入该库的CSS文件。以下是几个步骤来帮助你解决这个问题：确认安装首先，确保你已经正确安装了@logicflow/core。你可以通过运行以下命令来安装它（如果你还没有安装的话）：npminstall@logicflow/core引
                    
                    一文讲清前端热更新
                        艾米栗写代码
前端
                        引言前端开发中，“保存代码后页面自动刷新”早已成为开发者的标配体验。但你是否思考过，为什么某些场景下修改代码后页面无需完全刷新，甚至能保留当前状态（如表单输入、滚动位置）？这背后的核心机制就是热更新（HotModuleReplacement,HMR）。本文将从现象出发，逐步拆解其实现原理，并揭示其中涉及的关键技术。一、热更新的“现象”：开发者眼中的魔法假设你正在开发一个React应用：修改CSS文
                    
                    【VUE】前端工程化与前端工程化与webpack
                        boy快快长大
VUE前端vue.jswebpack
                        前端工程化与webpack1.前端工程化2.webpack的基本使用2.1创建列表隔行变色项目1.前端工程化2.webpack的基本使用2.1创建列表隔行变色项目初始化项目①新建项目空白目录，并运行npminit–y命令，初始化包管理配置文件package.json②新建src源代码目录③新建src->index.html首页和src->index.js脚本文件④初始化首页基本的结构⑤运行npmi
                    
                    matlab调用cst计算扫频,CST MWS I算法求解单站RCS是否可以进行扫频设置
                        林为珮
matlab调用cst计算扫频
                        如题，利用I算法的FastRCSSweep求解单站RCS是否可以添加扫频设置？如果有如何添加？因为需要，必须计算一个介质目标的单站RCS，所以A算法用不了了。而I算法里面的快速RCS里又没找到扫频的设置，我知道有双站远场监视器的宏，但是单站RCS就不知道怎么办了，请各位大大帮忙解答网友回复:看看在这里设置一下fromto能不能解决扫频问题。网友回复:提供一个新思路，如果是介质的话可以用涂覆操作，这
                    
                    从零开始：如何用 Vue 3 和 Vite 创建现代前端项目
                        全栈探索者chen
前端前端vue.jsjavascript开发语言前端框架ecmascriptvite
                        从零开始：如何用Vue3和Vite创建现代前端项目前言随着现代前端框架的快速发展，开发工具和构建工具也在不断进化。Vue3是目前流行的前端框架之一，凭借其轻量、易用和高效的特性，广泛应用于各种web应用中。而Vite则是一个现代化的构建工具，它通过引入原生ES模块支持和极快的开发模式，成为前端开发的新宠。本文将介绍如何使用Vue3和Vite从零开始搭建一个前端项目，并展示一些常见的项目配置和优化技
                    
                    .NET 9.0 的 Blazor Web App 项目，进度条 ＜progress＞ 组件使用注意事项
                        cqths
BlazorWebAppBlazorwebapp.netc#前端
                        一、执行过程中，要刷新进度条的显示，需要延时、释放，否则进度条不实时更新，最后一下到100%//延时，释放给前端：【必须】，否则进度条不实时更新，最后一下到100awaitTask.Delay(1);二、执行过程中，需要通知Blazor更新UI，否则不实时更新//通知Blazor更新UI：【必须】，否则不实时更新StateHasChanged();三、如果是单击执行，执行过程中，应该禁用按钮，防止
                    
                    C# 面试问题高级：056 - 什么是中间件 ？
                        caifox菜狐狸
C#面试问题高级c#面试中间件开发语言设计模式职场和发展
                        中间件是指处理HTTP请求和响应的一部分组件，它们构成了一个处理请求的管道（Pipeline）。每个中间件在请求通过它时执行一些操作，并且可以选择将请求传递到下一个中间件或终止管道。1.中间件的基本概念中间件（Middleware）是软件架构中的一个重要组成部分，它位于操作系统和应用软件之间，为应用程序提供运行与开发环境的支持。在C#开发中，特别是在ASP.NETCore框架下，中间件是一种特殊的
                    
                    vue3 使用 highlight
                        穿越到未来calc
模板vue.jsjavascript前端
                        1.安装：npminstall--savehighlight.jsnpminstall--save@highlightjs/vue-plugin2.main.js中导入：import'highlight.js/styles/atom-one-dark.css'import'highlight.js/lib/common'importhljsVuePluginfrom'@highlightjs/vu
                    
                    后端学习前端-html+css
                        想要变瘦的小码头
后端学前端前端学习html
                        第一章.HTML与CSSHTML是什么：即HyperTextMarkuplanguage超文本标记语言，咱们熟知的网页就是用它编写的，HTML的作用是定义网页的内容和结构。HyperText是指用超链接的方式组织网页，把网页联系起来Markup是指用的方式赋予内容不同的功能和含义CSS是什么：即CascadingStyleSheets级联（层叠）样式表，它描述了网页的表现与展示效果1.HTML元素
                    
                                对于规范和实现，你会混淆吗？
                                    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.