[CSS浮动原理

CSS Float是网页设计最强大的灵活性功能之一。本文介绍CSS Float的基本原理和行为特征，并介绍各种浏器Float特性的Bugs。

内容

  • 基本的浮动原理
  • 浮动是如何进行的
  • 浮动从何处开始
  • 水平浮动堆叠
  • 反向浮动
  • Clearing Floats

基本的浮动原理

任何元素 element 都可以被浮动。段落、div、list、tables,以及图像都可以被浮动，事实上即使是像 span 和 strong 这样的行内置元素也可以很好地进行浮动。

任何申明为 float 的元素自动被设置为一个"块级元素", 这表示它可以具有申明的"width"和"height"属性。事实上，floats当前被要求具有一个申明的宽度，但这不是现代浏览器制造者的思 路，W3C以及开始同意这样的作法。现在大多数人的意见是没有指定宽度的float应当伸缩包装到浮动内容的宽度。因此，内部带有图片的一个float将 和图片一样宽，带有文本的一个浮动将与该浮动内的最长文本行一样宽。

CSS2.1的浮动规则中这样讲： "如果 width 是以 auto 方式计算得到，使用的值是 shrink-tofit 伸缩到适合的宽度。" 所有现代的浏览器已经这样做，除了IE5/Mac。除非浮动具有某种指定的宽度，否则该浏览器会变得错误百出。现在大多数聪明的编码人员会让浏览器伸缩其 没有宽度属性的floats， 并使用一个隐藏的专门给IE5/Mac的宽度知识。这可能不算很巧妙，但是它是现在不能满足该规范的极少数的浏览器，同时Mac用户有几种更好的选择。 MS停止了对IE5/Mac的支持，因此寻求像伸缩包装式浮动这样有用特性被避免的代价太高了，这样只有IE5/Mac用户不会看到错误的浮动。

浮动是如何进行的

浮动"从流程中被移除出来", 但是与绝对位置的元素（层次）不同，浮动是在他们前面的最后一个块元素之后直接被显示出来（就像块盒一样）。如果该浮动是在一个“行块”中，该浮动的上边 界被放置在行块顶部的水平上。当除此以外，浮动与绝对元素相似，原先的块盒会完全忽略浮动和AP元素。那些静态的块盒知识保持一个接一个地”跟随“，就好 像没有浮动不在那里一样。

The following is minimal code for the example graphic:

 
    
上例展示了行盒在一个浮动中是如何被削短的。你可以让行内元素（像文本、图像）在一个浮动的边上放置并且在它的下面继续，就好像使用很好的老式（不过已过时）图像的属性"align=left"。浮动，比这要灵活的多。
 
    
认为跟在一个浮动后面的块元素会被设置为放置在浮动的下方是通常的一个误解。事实上，只有在哪些块元素内部的”行盒“才会这样。
 
    
还记得我提到的浮动被从文档处理流程中移除出来的话吗？标准要求在一个浮动后面的行盒被进行足够的削短以保持行盒在外部开放区。这表示文本和行内的 图像永远不会被浮动覆盖，除非他们其中之一或两个在独立的、指定位置的容器中。这就是说，如果一个浮动被嵌套在一个绝对位置的元素中，并且AP元素被设置 为覆盖一个段落，在段落中的行盒不会被浮动削短，这是因为他们不同的上下文环境造成的。而且，文本的确会被该浮动覆盖。
 
    
 
     
对于浮动的一个常见错误是：将文本保留在该浮动的边界之外。对浮动后面跟着的段落放置padding或设置边界是不会生效的，因为这些属性被应用在 跟随在浮动后面的段落的左边。正确的方式是对浮动本身设置margins，这样可以让行盒正确显示，浮动要比它呈现的要更大，并且对他们进行相应的削短。 大多数浮动通常只是从按照最靠近文本的边和底部获得这样的边界信息。上面浮动的截图有一个小的右边界。
 
    
 
    
同时跟在float后面的块盒只是被该浮动覆盖（即使他们的内容已经被移动到边上）。如果该浮动被设置的非常高，它可以挡住大量堆叠的块盒上，就像第二个截图看到的那样:
 
    
 
    
该图展示了浮动是如何覆盖多个块盒的。
 
    
如上所示，浮动的另一个行为是他们的”方向”。当一个浮动被定义的时候，总是被给予一个方向值。（“left”或“right”），例如：div{ float:left;}. 这些值简单地将浮动移到到容器盒的指定边界。
 
    
偶尔，float的新手会试图使用浮动值，例如{float:up;} or {float:botton;}, 但是这些值是无效的，在浮动的标准中并没有计划要添加这些值。人们总是可以期待...
 
   
 
   
 
    
浮动从何处开始
 
    
如果一个浮动在两个块盒之间，它会将其上边界放置在前置块盒的下边界上，并且将其移动到左（或右边），直到达到外界容器元素的边界，通常是<body>元素。
 
    
如果浮动被嵌套在第二个块盒中，并且该容器盒没有边框盒填充，浮动呈现样式，与浮动被放置在块盒之间是一样的。但是，如果这些块盒通过边距分离，该 浮动的顶部边界从一个盒与另一个盒边界的交叉点上开始。在以下截图中，块盒右顶部边界，但是左侧的浮动的左边距已经被移动以显示缺省的动作。:
 
    
<p>Paragraph</p> <!-- first block box (complete) -->

<div style="float:left; width:30%;">

<p>Left float text</p></div>

<div> <!-- second block box -->

<div style="float:right; width:150px;">

<p>Right float text</p>

</div>

<p>Text following the right nested float</p>

</div>


 
    
该图展示了浮动可能被放置在不同的位置。
 
   
 
   
 
    
水平浮动堆叠
 
    
如果居左的浮动被放置在其容器的左上脚，并且其后跟随一个同向的浮动，该浮动会被放置在容器右上脚，然后移动到左侧，边界延伸到第一个浮动的右侧时停止。
 
    
最后的一种行为让我们创建整行的floats，每个都被放置在前一个的右侧（或者左侧，如果使用{float:right;}). 同样，当一行中没有足够的空间时，多出来的floats绕到下一行，非常像行内元素那样。这对于制作可点击的图像“简略图”非常方便，因为矩阵会自动调整 到屏幕的尺寸，只是简单地在需要时进行回绕。
 
    
以下是一行彩色的左向浮动。左上方的浮动在源代码中先出现，右下方的最后。他们都有一个小的边距以便看起来更好一些。试一下将浏览器的尺寸变小一些，观察浮动行被回绕以使用窗口尺寸。
 
    
Float 1 Float 2 Float 3 Float 4 Float 5 Float 6 Float 7 Float 8 Float 9 Float 10 Float 11 Float 12 Float 13 Float 14 Float 15
 
    
上述浮动会回绕以使用任何屏幕的尺寸。注意其下段落（不可见）的文本同样也调整以使用浮动排列的变化。该段落实际上从第一个浮动开始的地方开始，但是只有在段落文本可见的情况下，该事实才不明显。截图中的段落具有边框盒背景以便显示实际的位置。
 
    
如果浮动被设置为“右侧”而不是“左侧”，其行为完全相同，知识浮动从右开始，而不是从左开始，后续的浮动被添加到左侧行尾而不是右侧。两种情况，回绕都是一样的，除非float的Bugs导致差异。
 
    
用这样的方式思考，一个容器中的浮动首先被移到它能够到达的最上方的空间（在其定位的方向），然后按设置的浮动反向移动直到到达容器的边界，或者遇 到另一个浮动。每个连续的浮动都是同样处理，直到其中一个浮动在另一个浮动的level中无法发现足够宽的空间。这样，它会被强制停止到另一个浮动的底 部，然后向之前那样进行滑行。
 
    
Float 1 Float 2 Float 3 Float 4 Float 5 Float 6 Float 7 Float 8 Float 9 Float 10 Float 11 Float 12 Float 13 Float 14 Float 15 Float 16 Float 17 Float 18 Float 19 Float 20
 
    
警告！注意上面的浮动的高度不是一样的。当一个浮动被放置到第二行紧接第一行时，它视图滑行到边界，当遇到第一高的浮动时会被停住。当有大量不规则浮动时，这会造成很丑陋的情况。上面的浮动中包含一些比其他高一些的浮动。
 
    
缩小你的浏览器以不同的屏幕宽度来测试。
 
    
在追着一个大型的简略图矩阵时，必须注意确保所有的浮动具有同样的高度，或者页面可以轻易地被出轨的浮动重新组装。
 
    
本文中的所有例子都使用了特殊的处理以适应IE5.x/win盒模式的缺点。由于边框和填充造成了必须特殊处理。
 
   
 
    
   
 
    
Clearing Floats
 
    
以下开始讲述关于浮动的最晦涩、最难以理解的部分。
 
    
回顾一下跟随浮动后面的静态盒。这些盒只是忽略浮动，并且在前一个静态盒的后面排列显示。假设你给以下盒一个清除属性， {clear:both;}。这是将被清除盒的顶部边距扩展，将其向下推直到清理浮动的底部。换句话说，该被清理的盒的顶部边距（无论它之前被设置成什么 值），都会被浏览器增加到需要保证被清理盒位于浮动下回的长度。
 
    
这样的效果是，一个被清理的盒无法与前置浮动保持在同一个水平位置上。它必须出现在其下方。以下图例展示了效果。
 
    
展示一个盒如何清理下方的一个浮动。
 
    
记住，浮动实际上并不是真正地被包含在一个块盒中，即使在源代码中是怎样嵌套的。请注意确认，浮动的屏幕开始点是由它所嵌套的位置决定的，之后它只是在容器盒上展开，就像绝对元素一项。只有包含行内元素的行盒（例如文本），才需要关注浮动在哪里被显示。
 
    
制作一个看起来封装一个嵌套浮动的外容器的标准方法是在容器的最后放置一个完整“被清理”的元素:
 
    
<div> <!-- float container -->

<div style="float:left; width:30%;"><p>Some content</p></div>

<p>Text not inside the float</p>

<div style="clear:both;"></div>

</div>


 
    
由于div没有被浮动，容器必须识别它并封装它，并且由于顶部边距（由于“clear”属性由浏览器添加），该div将容器的底部边界拉到浮动框的底部。
 
    
的确，这是一个古怪的方法，但是标准就是这样说的。不过，W3C中有一个讨论关于添加一个容器自动封装一个浮动的规则。这样就于更加简单。
 
    
事实上，IE盒Opera7已经自动封装嵌套的浮动，与标准不一样。Opera6不是这样，因此看来Opera在跟随MS的非标准道路。
 
    
还可以使用 {clear:left;} 或 {clear:right;}. 这可以让一个元素清除左侧浮动当不影响右侧浮动，或者相反。要使用这种控制你需要有相当的想像力。
 
    
通常来说，清除可以很好地完成，但是有时会引起不大不小的错误，这完全是由IE造成的。 
 
   
 
  


                            

                        

                    

                    
                    

                    
                    
                    

                

                

                    
                

            

        

    

    

        
你可能感兴趣的:(css)

        

            

                
    
                    
  • DIV+CSS+JavaScript技术制作网页（旅游主题网页设计与制作）云南大理
                        STU学生网页设计
网页设计期末网页作业html静态网页html5期末大作业网页设计web大作业
                        
    ️精彩专栏推荐作者主页:【进入主页—获取更多源码】web前端期末大作业：【HTML5网页期末作业(1000套)】程序员有趣的告白方式：【HTML七夕情人节表白网页制作(110套)】文章目录二、网站介绍三、网站效果▶️1.视频演示2.图片演示四、网站代码HTML结构代码CSS样式代码五、更多源码二、网站介绍网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。网站程
    
                    
    • 
                    
  • 关于城市旅游的HTML网页设计——(旅游风景云南 5页)HTML+CSS+JavaScript
                        二挡起步
web前端期末大作业javascripthtmlcss旅游风景
                        
    ⛵源码获取文末联系✈Web前端开发技术描述网页设计题材，DIV+CSS布局制作,HTML+CSS网页设计期末课程大作业|游景点介绍|旅游风景区|家乡介绍|等网站的设计与制作|HTML期末大学生网页设计作业，Web大学生网页HTML：结构CSS：样式在操作方面上运用了html5和css3，采用了div+css结构、表单、超链接、浮动、绝对定位、相对定位、字体样式、引用视频等基础知识JavaScrip
    
                    
    • 
                    
  • HTML网页设计制作大作业（div+css） 云南我的家乡旅游景点 带文字滚动
                        二挡起步
web前端期末大作业web设计网页规划与设计htmlcssjavascriptdreamweaver前端
                        
    Web前端开发技术描述网页设计题材，DIV+CSS布局制作,HTML+CSS网页设计期末课程大作业游景点介绍|旅游风景区|家乡介绍|等网站的设计与制作HTML期末大学生网页设计作业HTML：结构CSS：样式在操作方面上运用了html5和css3，采用了div+css结构、表单、超链接、浮动、绝对定位、相对定位、字体样式、引用视频等基础知识JavaScript：做与用户的交互行为文章目录前端学习路线
    
                    
    • 
                    
  • webpack图片等资源的处理
                        dmengmeng

                        
    需要的loaderfile-loader（让我们可以引入这些资源文件）url-loader（其实是file-loader的二次封装）img-loader（处理图片所需要的）在没有使用任何处理图片的loader之前，比如说css中用到了背景图片，那么最后打包会报错的，因为他没办法处理图片。其实你只想能够使用图片的话。只加一个file-loader就可以，打开网页能准确看到图片。{test:/\.(p
    
                    
    • 
                    
  • 《HTML 与 CSS—— 响应式设计》
                        陈在天box
htmlcss前端
                        
    一、引言在当今数字化时代，人们使用各种不同的设备访问互联网，包括智能手机、平板电脑、笔记本电脑和台式机等。为了确保网站在不同设备上都能提供良好的用户体验，响应式设计成为了网页开发的关键。HTML和CSS作为网页开发的基础技术，在实现响应式设计方面发挥着重要作用。本文将深入探讨HTML与CSS中的响应式设计原理、方法和最佳实践。二、响应式设计的概念与重要性（一）概念响应式设计是一种网页设计方法，旨在
    
                    
    • 
                    
  • html+css网页设计 旅游网站首页1个页面
                        html+css+js网页设计
htmlcss旅游
                        
    html+css网页设计旅游网站首页1个页面网页作品代码简单，可使用任意HTML辑软件（如：Dreamweaver、HBuilder、Vscode、Sublime、Webstorm、Text、Notepad++等任意html编辑软件进行运行及修改编辑等操作）。获取源码1，访问该网站https://download.csdn.net/download/qq_42431718/897527112，点击
    
                    
    • 
                    
  • css设置当字数超过限制后以省略号（...）显示
                        周bro
css前端vuecss3html经验分享
                        
    1、文字超出一行，省略超出部分，显示’…’用text-overflow:ellipsis属性来，当然还需要加宽度width属来兼容部分浏览。overflow:hidden;text-overflow:ellipsis;white-space:nowrap;2、多行文本溢出显示省略号display:-webkit-box;-webkit-box-orient:vertical;-webkit-lin
    
                    
    • 
                    
  • 360前端星计划-动画可以这么玩
                        马小蜗

                        
    动画的基本原理定时器改变对象的属性根据新的属性重新渲染动画functionupdate(context){//更新属性}constticker=newTicker();ticker.tick(update,context);动画的种类1、JavaScript动画操作DOMCanvas2、CSS动画transitionanimation3、SVG动画SMILJS动画的优缺点优点：灵活度、可控性、性能
    
                    
    • 
                    
  • css2中的透明
                        琪33

                        
    .out{width:400px;height:400px;background-color:blue;margin:100pxauto;border:1pxsolid#000;opacity:0.6;}.in{width:200px;height:200px;background-color:red;margin:100pxauto;}
    
                    
    • 
                    
  • Nginx从入门到实践(三)
                        听你讲故事啊

                        
    动静分离动静分离是将网站静态资源（JavaScript，CSS，img等文件）与后台应用分开部署，提高用户访问静态代码的速度，降低对后台应用访问。动静分离的一种做法是将静态资源部署在nginx上，后台项目部署到应用服务器上，根据一定规则静态资源的请求全部请求nginx服务器，达到动静分离的目标。rewrite规则Rewrite规则常见正则表达式Rewrite主要的功能就是实现URL的重写，Ngin
    
                    
    • 
                    
  • Nginx的使用场景：构建高效、可扩展的Web架构
                        张某布响丸辣
nginx前端架构
                        
    Nginx，作为当今最流行的Web服务器和反向代理软件之一，凭借其高性能、稳定性和灵活性，在众多Web项目中扮演着核心角色。无论是个人博客、中小型网站，还是大型企业级应用，Nginx都能提供强大的支持。本文将探讨Nginx的几个主要使用场景，帮助读者理解如何在实际项目中充分利用Nginx的优势。1.静态文件服务对于包含大量静态文件（如HTML、CSS、JavaScript、图片等）的网站，Ngin
    
                    
    • 
                    
  • Python精选200Tips：121-125
                        AnFany
Python200+Tipspython开发语言
                        
    Spendyourtimeonself-improvement121Requests-简化的HTTP请求处理发送GET请求发送POST请求发送PUT请求发送DELETE请求会话管理处理超时文件上传122BeautifulSoup-网页解析和抓取解析HTML和XML文档查找单个标签查找多个标签使用CSS选择器查找标签提取文本修改文档内容删除标签处理XML文档123Scrapy-强大的网络爬虫框架示例
    
                    
    • 
                    
  • 前端CSS面试常见题
                        剑亦未配妥
前端面试前端css面试
                        
    边界塌陷盒模型有两种：W3C盒模型和IE盒模型，区别在于宽度是否包含边框定义：同时给兄弟/父子盒模型设置上下边距，理论上边距值是两者之和，实际上不是注意：浮动和定位不会产生边界塌陷；只有块级元素垂直方向才会产生margin合并margin计算方案margin同为正负：取绝对值大的值一正一负：求和父子元素边界塌陷解决父元素可以通过调整padding处理；设置overflowhidden，触发BFC子
    
                    
    • 
                    
  • 爬虫技术抓取网站数据
                        Bearjumpingcandy
爬虫
                        
    爬虫技术是一种自动化获取网站数据的技术，它可以模拟人类浏览器的行为，访问网页并提取所需的信息。以下是爬虫技术抓取网站数据的一般步骤：发起HTTP请求：爬虫首先会发送HTTP请求到目标网站，获取网页的内容。解析HTML：获取到网页内容后，爬虫会使用HTML解析器解析HTML代码，提取出需要的数据。数据提取：通过使用XPath、CSS选择器或正则表达式等工具，爬虫可以从HTML中提取出所需的数据，如文
    
                    
    • 
                    
  • 创建一个完整的购物商城系统是一个复杂的项目，涉及前端（用户界面）、后端（服务器逻辑）、数据库等多个部分。由于篇幅限制，我无法在这里提供一个完整的系统代码，但我可以分别给出一些关键部分的示例代码，涵盖几
                        uthRaman
前端ui服务器
                        
    前端（HTML/CSS/JavaScript）grsyzp.cnHTML页面结构（index.html）html购物商城欢迎来到购物商城JavaScript（Ajax请求商品数据，app.js）javascriptdocument.addEventListener('DOMContentLoaded',function(){fetch('/api/products').then(response=
    
                    
    • 
                    
  • HTML中"bgcolor"与"background-color"的区别
                        Sardar_
html
                        
    bgcolor只是标签属性，而backgroud更多作为css的样式属性。它们俩大多数情况下效果完全相同。但在标签下效果不同。不支持bgcolor属性，只能用style标签添加CSS样式。作为table的属性而言：HelloWorld!和HelloWorld!效果完全相同。作为body属性而言：效果完全相同。不过个人推荐统一用CSS样式进行控制，把style统一放到.css文件中。backgrou
    
                    
    • 
                    
  • 2019-05-29 vue-router的两种模式的区别
                        Kason晨

                        
    1、大家都知道vue是一种单页应用,单页应用就是仅在页面初始化的时候加载相应的html/css/js一单页面加载完成,不会因为用户的操作而进行页面的重新加载或者跳转,用javascript动态的变化html的内容优点:良好的交互体验,用户不需要刷新页面,页面显示流畅,良好的前后端工作分离模式,减轻服务器压力,缺点:不利于SEO,初次加载耗时比较多2、hash模式vue-router默认的是hash
    
                    
    • 
                    
  • 清除 Conda 缓存
                        Dmatteratall
conda缓存
                        
    清除Conda缓存：cssCopycodecondaclean--allcondaclean--all命令将会清除Conda缓存和临时文件，而不会删除已经安装的软件包和环境。它主要用于清理不必要的缓存和临时文件以释放磁盘空间。
    
                    
    • 
                    
  • electron多标签页模式更像客户端
                        diygwcom
electronjavascript前端
                        
    Electron多标签页模式是指在Electron框架中实现的类似Web浏览器的多标签页功能。Electron是一个使用Web技术（HTML、CSS和JavaScript）来创建跨平台桌面应用程序的框架。在Electron中实现多标签页模式，通常需要借助一些特定的库或组件，如BrowserView或electron-tabs，或者通过自定义实现。实现方式1.使用BrowserViewBrowser
    
                    
    • 
                    
  • 前端HTML+CSS+JS的入门学习
                        俊昭喜喜里
前端htmlcss
                        
    一.HTMLHTML（HyperTextMarkupLanguage）即超文本标记语言，是用于创建网页和网页应用程序的标准标记语言。它不是一种编程语言，而是一种标记语言，通过一系列的元素（elements）来告诉浏览器如何显示网页上的内容，如文本、图片、链接、表格、列表等。HTML文档由一系列的标签（tags）组成，这些标签告诉浏览器如何显示内容。标签通常成对出现，例如和，其中是开始标签，表示一个
    
                    
    • 
                    
  • 10/24 每周学习总结5
                        木木ainiks
1024程序员节
                        
    1RecordingtheMoolympicsS#include#includeusingnamespacestd;typedeflonglongint_1;intn;structnode{int_1begin_b;int_1end_e;}a[300];boolcmp(nodea,nodeb){if(a.end_e==b.end_e)returna.begin_b>b.begin_b;return
    
                    
    • 
                    
  • HTML5概述
                        WFIT~SKY
Web前端html5前端html
                        
    1.HTML概述1.1HTML定义HTML超文本标记语言，其中超文本是链接，标记也叫标签（即带尖括号的文本）。1.2HTML基本骨架HTML基本骨架是网页模板。网页的标题网页的内容html：整个网页head：网页头部，存放给浏览器看的代码，例如CSSbody：网页主体，存放给用户看的代码，例如文字、图片title：网页标题1.3HTML关系父子关系（嵌套）兄弟关系（并列）2.HTML开发环境2.1
    
                    
    • 
                    
  • CSS中如何实现鼠标悬停效果？
                        神明木佑
css前端
                        
    在CSS中，您可以使用:hover伪类来实现鼠标悬停效果。:hover伪类会在用户将鼠标悬停在选择器所匹配的元素上时应用指定的样式。下面是一个简单的例子，展示了如何在鼠标悬停时改变文本颜色和背景颜色：MouseHoverExample.hover-effect{color:black;background-color:white;padding:10px;text-align:center;}.h
    
                    
    • 
                    
  • js的书写位置和css的书写位置的区别？为什么要这样写？
                        李是啥也不会
javascriptcss开发语言
                        
    JavaScript和CSS的书写位置有以下区别：CSS通常写在标签中，或者在外部样式表文件中（）。CSS主要用于控制页面的视觉样式和布局，通常在HTML文件的部分引入，以确保在页面渲染时样式已经加载完毕，从而避免样式闪烁。JavaScript通常写在标签中，或者在外部脚本文件中（）。JavaScript用于添加页面的动态行为和交互。一般建议将JavaScript放在HTML文件的末尾（标签之前）
    
                    
    • 
                    
  • 【H2O2|全栈】关于CSS（3）CSS基础（三）
                        过期的H2O2
【H2O2】CSS入门css前端
                        
    目录CSS基础知识前言准备工作盒模型概念内容的宽高displaypaddingborderborder-widthborder-styleborder-colormargin预告和回顾后话CSS基础知识前言本系列博客将分享层叠样式表（CSS）有关的知识点。作为本系列的第三篇，本博客将分享盒模型以及页面布局有关的知识点。不是专业的科普博主，主打一个分享知识，写的不好，多多包涵（哈哈）。准备工作软件：
    
                    
    • 
                    
  • css鼠标移上去向上移动,css3鼠标移动图片上移效果
                        yo xiba
css鼠标移上去向上移动
                        
    css3的功能真是很强大，学无止境，不多说，直接上代码css部分：*{margin:;padding:;}.text-center{text-align:center}.col_cont{width:300px;height:300px;margin:auto}.thumbnail{cursor:pointer;text-decoration:none;display:block;padding:
    
                    
    • 
                    
  • css3实现鼠标放到图标上自动切换图标
                        黄丫丫07
csscss3html
                        
    作业div{font-family:'icomoon';width:1217px;height:1217px;background:url(images/1.jpg)no-repeat00;transition:all.2s;}div:hover{background:url(images/1.jpg)no-repeat-1200px0;}
    
                    
    • 
                    
  • CSS实现鼠标移动到购物车显示详情
                        AsiaFT.
csscss3html
                        
    需求：鼠标滑动到购物车时，购物车下面显示购物车详情信息解析：清除所有默认样式：{margin:0;padding:0;}2.CSS3新增属性：box-sizing:border-box;这个属性基本盒子都增加该属性；代码：鼠标划过显示购物车详情/*清除所有默认样式*/*{margin:0;padding:0;}.shoppingcart{/*css3新增属性，控制WIDTH和HEIGHT属性是盒子
    
                    
    • 
                    
  • 基于HTML+JS+CSS+Echarts实现的设备环境监测可视化平台前端整套模板
                        abments
实用小工具javascript前端html
                        
    效果图基于HTML+JS+CSS+Echarts实现的设备环境监测可视化平台前端整套模板。可用过修改源码快速完成需求。源码结构下载地址
    
                    
    • 
                    
  • unocss 一直热更新打印[vite] hot updated: /__uno.css
                        柳雾青烟紫燕穿
csscss3vue
                        
    控制台持续打印了几千条这条信息，页面逐渐卡死client.ts:450[vite]hotupdated:/__uno.css找出的原因是：依赖出问题了，重新安装unocss，执行命令npmiunocss后修复。但奇怪的是，删除node_modules重新全部安装依赖却不能修复，tmd。还有一种解决方法是切换分支，切去其它分支，再切回来，也不会再打印了。一开始还怀疑了是哪里的unocss类名一直在监
    
                    
    • 
                                
  • 桌面上有多个球在同时运动，怎么实现球之间不交叉，即碰撞？
                                    换个号韩国红果果
html小球碰撞
                                    
    稍微想了一下，然后解决了很多bug，最后终于把它实现了。其实原理很简单。在每改变一个小球的x y坐标后，遍历整个在dom树中的其他小球，看一下它们与当前小球的距离是否小于球半径的两倍？若小于说明下一次绘制该小球（设为a）前要把他的方向变为原来相反方向（与a要碰撞的小球设为b），即假如当前小球的距离小于球半径的两倍的话，马上改变当前小球方向。那么下一次绘制也是先绘制b，再绘制a，由于a的方向已经改变
    
                                
    • 
                                
  • 《高性能HTML5》读后整理的Web性能优化内容
                                    白糖_
html5
                                    
     
 读后感 
 
        先说说《高性能HTML5》这本书的读后感吧，个人觉得这本书前两章跟书的标题完全搭不上关系，或者说只能算是讲解了“高性能”这三个字，HTML5完全不见踪影。个人觉得作者应该首先把HTML5的大菜拿出来讲一讲，再去分析性能优化的内容，这样才会有吸引力。因为只是在线试读，没有机会看后面的内容，所以不胡乱评价了。 
  
    
                                
    • 
                                
  • [JShop]Spring MVC的RequestContextHolder使用误区
                                    dinguangx
jeeshop商城系统jshop电商系统
                                    
        在spring mvc中，为了随时都能取到当前请求的request对象，可以通过RequestContextHolder的静态方法getRequestAttributes()获取Request相关的变量，如request, response等。         在jshop中，对RequestContextHolder的
    
                                
    • 
                                
  • 算法之时间复杂度
                                    周凡杨
java算法时间复杂度效率
                                    
          在 
计算机科学 中， 
算法 的时间复杂度是一个 
函数 ，它定量描述了该算法的运行时间。这是一个关于代表算法输入值的 
字符串 的长度的函数。时间复杂度常用 
大O符号 表述，不包括这个函数的低阶项和首项系数。使用这种方式时，时间复杂度可被称为是 
渐近 的，它考察当输入值大小趋近无穷时的情况。 
这样用大写O()来体现算法时间复杂度的记法，
    
                                
    • 
                                
  • Java事务处理
                                    g21121
java
                                    
    一、什么是Java事务 通常的观念认为，事务仅与数据库相关。 事务必须服从ISO/IEC所制定的ACID原则。ACID是原子性（atomicity）、一致性（consistency）、隔离性（isolation）和持久性（durability）的缩写。事务的原子性表示事务执行过程中的任何失败都将导致事务所做的任何修改失效。一致性表示当事务执行失败时，所有被该事务影响的数据都应该恢复到事务执行前的状
    
                                
    • 
                                
  • Linux awk命令详解
                                    510888780
linux
                                    
    一.  AWK 说明 
  awk是一种编程语言，用于在linux/unix下对文本和数据进行处理。数据可以来自标准输入、一个或多个文件，或其它命令的输出。它支持用户自定义函数和动态正则表达式等先进功能，是linux/unix下的一个强大编程工具。它在命令行中使用，但更多是作为脚本来使用。 
 
   awk的处理文本和数据的方式：它逐行扫描文件，从第一行到
    
                                
    • 
                                
  • android permission
                                    布衣凌宇
Permission
                                    
    <uses-permission android:name="android.permission.ACCESS_CHECKIN_PROPERTIES" ></uses-permission>允许读写访问"properties"表在checkin数据库中，改值可以修改上传 
<uses-permission android:na
    
                                
    • 
                                
  • Oracle和谷歌Java Android官司将推迟
                                    aijuans
javaoracle
                                    
    北京时间 10 月 7 日，据国外媒体报道，Oracle 和谷歌之间一场等待已久的官司可能会推迟至 10 月 17 日以后进行，这场官司的内容是 Android 操作系统所谓的 Java 专利权之争。本案法官 William Alsup 称根据专利权专家 Florian Mueller 的预测，谷歌 Oracle 案很可能会被推迟。　　该案中的第二波辩护被安排在 10 月 17 日出庭，从目前看来
    
                                
    • 
                                
  • linux shell 常用命令
                                    antlove
linuxshellcommand
                                    
    grep [options] [regex] [files] 
/var/root # grep -n "o" *                                                       
hello.c:1:/* This C source can be compiled with:                            
    
                                
    • 
                                
  • Java解析XML配置数据库连接(DOM技术连接 SAX技术连接)
                                    百合不是茶
sax技术Java解析xml文档dom技术XML配置数据库连接
                                    
        XML配置数据库文件的连接其实是个很简单的问题,为什么到现在才写出来主要是昨天在网上看了别人写的,然后一直陷入其中,最后发现不能自拔 所以今天决定自己完成 ,,,,现将代码与思路贴出来供大家一起学习 
  
XML配置数据库的连接主要技术点的博客; 
JDBC编程 : JDBC连接数据库 
DOM解析XML:  DOM解析XML文件 
SA
    
                                
    • 
                                
  • underscore.js 学习（二）
                                    bijian1013
JavaScriptunderscore
                                    
            Array Functions 所有数组函数对参数对象一样适用。1.first   _.first(array, [n])   别名: head, take       返回array的第一个元素，设置了参数n，就
    
                                
    • 
                                
  • plSql介绍
                                    bijian1013
oracle数据库plsql
                                    
    /*
 * PL/SQL 程序设计学习笔记
 * 学习plSql介绍.pdf
 * 时间：2010-10-05
*/

--创建DEPT表
create table DEPT
(
  DEPTNO NUMBER(10),
  DNAME  NVARCHAR2(255),
  LOC    NVARCHAR2(255)
)

delete dept;

select 
    
                                
    • 
                                
  • 【Nginx一】Nginx安装与总体介绍
                                    bit1129
nginx
                                    
    启动、停止、重新加载Nginx 
nginx            启动Nginx服务器，不需要任何参数u
nginx -s stop    快速(强制)关系Nginx服务器
nginx -s quit    优雅的关闭Nginx服务器
nginx -s reload  重新加载Nginx服务器的配置文件
nginx -s reopen  重新打开Nginx日志文件 
  
 

    
                                
    • 
                                
  • spring mvc开发中浏览器兼容的奇怪问题
                                    bitray
jqueryAjaxspringMVC浏览器上传文件
                                    
        最近个人开发一个小的OA项目,属于复习阶段.使用的技术主要是spring mvc作为前端框架,mybatis作为数据库持久化技术.前台使用jquery和一些jquery的插件. 
    在开发到中间阶段时候发现自己好像忽略了一个小问题,整个项目一直在firefox下测试,没有在IE下测试,不确定是否会出现兼容问题.由于jquer
    
                                
    • 
                                
  • Lua的io库函数列表
                                    ronin47
lua io
                                    
    1、io表调用方式：使用io表，io.open将返回指定文件的描述，并且所有的操作将围绕这个文件描述 
　　io表同样提供三种预定义的文件描述io.stdin,io.stdout,io.stderr 
　　2、文件句柄直接调用方式,即使用file:XXX()函数方式进行操作,其中file为io.open()返回的文件句柄 
　　多数I/O函数调用失败时返回nil加错误信息,有些函数成功时返回nil
    
                                
    • 
                                
  • java-26-左旋转字符串
                                    bylijinnan
java
                                    
    
public class LeftRotateString {

	/**
	 * Q 26 左旋转字符串
	 * 题目：定义字符串的左旋转操作：把字符串前面的若干个字符移动到字符串的尾部。
	 * 如把字符串abcdef左旋转2位得到字符串cdefab。
	 * 请实现字符串左旋转的函数。要求时间对长度为n的字符串操作的复杂度为O(n)，辅助内存为O(1)。
	 */
	pu
    
                                
    • 
                                
  • 《vi中的替换艺术》-linux命令五分钟系列之十一
                                    cfyme
linux命令
                                    
    vi方面的内容不知道分类到哪里好，就放到《Linux命令五分钟系列》里吧！ 
今天编程，关于栈的一个小例子，其间我需要把”S.”替换为”S->”(替换不包括双引号)。 
其实这个不难，不过我觉得应该总结一下vi里的替换技术了，以备以后查阅。 
  
1 
所有替换方案都要在冒号“:”状态下书写。 
2 
如果想将abc替换为xyz，那么就这样 
:s/abc/xyz/ 
不过要特别
    
                                
    • 
                                
  • [轨道与计算]新的并行计算架构
                                    comsci
并行计算
                                    
     
 
     我在进行流程引擎循环反馈试验的过程中，发现一个有趣的事情。。。如果我们在流程图的每个节点中嵌入一个双向循环代码段，而整个流程中又充满着很多并行路由，每个并行路由中又包含着一些并行节点，那么当整个流程图开始循环反馈过程的时候，这个流程图的运行过程是否变成一个并行计算的架构呢？ 
 
     
    
                                
    • 
                                
  • 重复执行某段代码
                                    dai_lm
android
                                    
    用handler就可以了 
 

private Handler handler = new Handler();

private Runnable runnable = new Runnable() {
	public void run() {
		update();
		handler.postDelayed(this, 5000);
	}
};
 
开始计时 
 

h
    
                                
    • 
                                
  • Java实现堆栈（list实现）
                                    datageek
数据结构——堆栈
                                    
    public interface IStack<T> {
    //元素出栈，并返回出栈元素
    public T pop();
    //元素入栈
    public void push(T element);
    //获取栈顶元素
    public T peek();
    //判断栈是否为空
    public boolean isEmpty
    
                                
    • 
                                
  • 四大备份MySql数据库方法及可能遇到的问题
                                    dcj3sjt126com
DBbackup
                                    
    一：通过备份王等软件进行备份前台进不去？ 
用备份王等软件进行备份是大多老站长的选择，这种方法方便快捷，只要上传备份软件到空间一步步操作就可以，但是许多刚接触备份王软件的客用户来说还原后会出现一个问题：因为新老空间数据库用户名和密码不统一，网站文件打包过来后因没有修改连接文件，还原数据库是好了，可是前台会提示数据库连接错误，网站从而出现打不开的情况。 
解决方法：学会修改网站配置文件，大多是由co
    
                                
    • 
                                
  • github做webhooks：[1]钩子触发是否成功测试
                                    dcj3sjt126com
githubgitwebhook
                                    
    转自: http://jingyan.baidu.com/article/5d6edee228c88899ebdeec47.html 
github和svn一样有钩子的功能，而且更加强大。例如我做的是最常见的push操作触发的钩子操作，则每次更新之后的钩子操作记录都会在github的控制板可以看到！       
工具/原料  
 
   github   
     
方法/步骤  
 
   
    
                                
    • 
                                
  • ">的作用" target="_blank">JSP中的作用
                                    蕃薯耀

                                    
    JSP中<base href="<%=basePath%>">的作用 
>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> 

    
                                
    • 
                                
  • linux下SAMBA服务安装与配置
                                    hanqunfeng
linux
                                    
    局域网使用的文件共享服务。 
一.安装包： 
rpm -qa | grep samba 
samba-3.6.9-151.el6.x86_64 
samba-common-3.6.9-151.el6.x86_64 
samba-winbind-3.6.9-151.el6.x86_64 
samba-client-3.6.9-151.el6.x86_64 
samba-winbind-clients
    
                                
    • 
                                
  • guava cache
                                    IXHONG
cache
                                    
    缓存，在我们日常开发中是必不可少的一种解决性能问题的方法。简单的说，cache 就是为了提升系统性能而开辟的一块内存空间。 
　　缓存的主要作用是暂时在内存中保存业务系统的数据处理结果，并且等待下次访问使用。在日常开发的很多场合，由于受限于硬盘IO的性能或者我们自身业务系统的数据处理和获取可能非常费时，当我们发现我们的系统这个数据请求量很大的时候，频繁的IO和频繁的逻辑处理会导致硬盘和CPU资源的
    
                                
    • 
                                
  • Query的开始--全局变量,noconflict和兼容各种js的初始化方法
                                    kvhur
JavaScriptjquerycss
                                    
    这个是整个jQuery代码的开始，里面包含了对不同环境的js进行的处理，例如普通环境，Nodejs，和requiredJs的处理方法。   还有jQuery生成$, jQuery全局变量的代码和noConflict代码详解    完整资源： 
http://www.gbtags.com/gb/share/5640.htm   jQuery 源码：          
 
  (
    
                                
    • 
                                
  • 美国人的福利和中国人的储蓄
                                    nannan408

                                    
       今天看了篇文章，震动很大，说的是美国的福利。 
   美国医院的无偿入院真的是个好措施。小小的改善，对于社会是大大的信心。小孩，税费等，政府不收反补，真的体现了人文主义。 
   美国这么高的社会保障会不会使人变懒？答案是否定的。正因为政府解决了后顾之忧，人们才得以倾尽精力去做一些有创造力，更造福社会的事情，这竟成了美国社会思想、人
    
                                
    • 
                                
  • N阶行列式计算(JAVA)
                                    qiuwanchi
N阶行列式计算
                                    
    package gaodai;

import java.util.List;

/**
 * N阶行列式计算
 * @author 邱万迟
 *
 */
public class DeterminantCalculation {
	
	public DeterminantCalculation(List<List<Double>> determina
    
                                
    • 
                                
  • C语言算法之打渔晒网问题
                                    qiufeihu
c算法
                                    
    如果一个渔夫从2011年1月1日开始每三天打一次渔，两天晒一次网，编程实现当输入2011年1月1日以后任意一天，输出该渔夫是在打渔还是在晒网。 
代码如下： 
  
#include <stdio.h>
int leap(int a)  /*自定义函数leap()用来指定输入的年份是否为闰年*/
{
	if((a%4 == 0 && a%100 != 0
    
                                
    • 
                                
  • XML中DOCTYPE字段的解析
                                    wyzuomumu
xml
                                    
    DTD声明始终以!DOCTYPE开头,空一格后跟着文档根元素的名称,如果是内部DTD,则再空一格出现[],在中括号中是文档类型定义的内容. 而对于外部DTD,则又分为私有DTD与公共DTD,私有DTD使用SYSTEM表示,接着是外部DTD的URL. 而公共DTD则使用PUBLIC,接着是DTD公共名称,接着是DTD的URL. 
  
私有DTD 
<!DOCTYPErootSYST
    
                                
    • 
                

            

        

    




    

        

            按字母分类：
            ABCDEFGHIJKLMNOPQRSTUVWXYZ其他