龙哥好好哈

CSS:替换元素(Replaced)、不可替换元素(Nonreplaced)、块元素(Block-level)和行内/内联元素(Inline)

元素是文档结构的基础，在CSS中，每个元素生成了一个包含了元素内容的框（box，也译为“盒子”）。但是不同的元素显示的方式会有所不同，例如

和就不同，而和
也不一样。在文档类型定义（DTD）中对不同的元素规定了不同的类型，这也是DTD对文档之所以重要的原因之一。

1. 替换和不可替换元素

从元素本身的特点来讲，可以分为替换和不可替换元素。

a) 替换元素

替换元素就是浏览器根据元素的标签和属性，来决定元素的具体显示内容。

例如浏览器会根据标签的src属性的值来读取图片信息并显示出来，而如果查看(X)HTML代码，则看不到图片的实际内容；又例如根据标签的type属性来决定是显示输入框，还是单选按钮等。

(X)HTML中的、、、<select>、<object>都是替换元素。这些元素往往没有实际的内容，即是一个空元素，例如：</span></p> <p><span style="font-size:18px;"><img src=”cat.jpg”/><br> <input type="submit" name="Submit" value="提交"/></span></p> <p><span style="font-size:18px;">浏览器会根据元素的标签类型和属性来显示这些元素。可替换元素也在其显示中生成了框。</span></p> <p><span style="font-size:18px;"><strong>b) 不可替换元素</strong></span></p> <p><span style="font-size:18px;">(X)HTML的大多数元素是不可替换元素，即其内容直接表现给用户端（例如浏览器）。例如：</span></p> <p><span style="font-size:18px;"><p>段落的内容</p></span></p> <p><span style="font-size:18px;">段落<p>是一个不可替换元素，文字“段落的内容”全被显示。</span></p> <p><span style="font-size:18px;"><strong>2. 显示元素</strong></span></p> <p><span style="font-size:18px;">除了可替换元素和不可替换元素的分类方式外，CSS2.1中元素还有另外的分类方式：块级元素（block-level）和行内元素（inline-level，也译作“内联”元素）。</span></p> <p><span style="font-size:18px;"><strong>a) 块级元素</strong></span></p> <p><span style="font-size:18px;">在视觉上被格式化为块的元素，最明显的特征就是它默认在横向充满其父元素的内容区域，而且在其左右两边没有其他元素，即块级元素默认是独占一行的。</span></p> <p><span style="font-size:18px;">典型的块级元素有：<div>、<p>、<h1>到<h6>，等等。</span></p> <p><span style="font-size:18px;">通过CSS设定了浮动（float属性，可向左浮动或向右浮动）以及设定显示（display）属性为“block”或“list-item”的元素都是块级元素。</span></p> <p><span style="font-size:18px;">但是浮动元素比较特殊，由于浮动，其旁边可能会有其他元素的存在。而“list-item”（列表项<li>），会在其前面生成圆点符号，或者数字序号。</span></p> <p><span style="font-size:18px;"><strong>b) 行内元素</strong></span></p> <p><span style="font-size:18px;">行内元素不形成新内容块，即在其左右可以有其他元素，例如<a>、<span>、<strong>等，都是典型的行内级元素。</span></p> <p><span style="font-size:18px;">display属性等于“inline”的元素都是行内元素。几乎所有的可替换元素都是行内元素，例如<img>、<input>等等。</span></p> <p><span style="font-size:18px;">不过元素的类型也不是固定的，通过设定CSS的display属性，可以使行内元素变为块级元素，也可以让块级元素变为行内元素。</span></p> <p><span style="font-size:18px;"><span style="line-height:19px;"><strong>block元素的特点：</strong><span style="color:#f7f7f7;font-weight:100;">ww.52css.com]</span></span></span></p> <div> <div> <span style="font-size:18px;">总是在新行上开始；<br> 高度，行高以及顶和底边距都可控制；<br> 宽度缺省是它的容器的100%，除非设定一个宽度。</span> </div> </div> <span style="font-size:18px;"><br><strong>inline元素的特点：</strong></span> <span style="font-size:18px;color:#f7f7f7;font-weight:100;">2css.com]</span> <div> <div> <span style="font-size:18px;">和其他元素都在一行上；<br> 高，行高及顶和底边距不可改变；<br> 宽度就是它的文字或图片的宽度，不可改变。</span> </div> </div> <span style="font-size:18px;"><br> 我们来详细了解它们的情况。<br><strong>块元素(blockelement)</strong>一般是其他元素的容器元素，块元素一般都从新行开始，它可以容纳内联元素和其他块元素,常见块元素是段落标签'P"。“form"这个块元素比较特殊，它只能用来容纳其他块元素。<br><br> 如果没有css的作用，块元素会顺序以每次另起一行的方式一直往下排。而有了css以后，我们可以改变这种html的默认布局模式，</span> <span style="font-size:18px;">把块元素摆放到你想要的位置上去</span> <span style="font-size:18px;">。而不是每次都愚蠢的另起一行。需要指出的是，table标签也是块元素的一种，tablebased layout和 css basedlayout从一般使用者（不包括视力障碍者、盲人等）的角度来看这两种布局，除了页面载入速度的差别外，没有其他的差别。但是如果普通使用者不经意点了查看页面源代码按钮后，两者所表现出来的差异就非常大了。基于良好重构理念设计的css布局页面源码，至少也能让没有web开发经验的普通使用者把内容快速的读懂。从这个角度来说，css layout code应该有更好的美学体验。<br><br> 你能够把块容器元素div想象成一个个box，或者如果你玩过剪贴文载的话，那就更加容易理解了。我们先把需要的文章从各种报纸、杂志总剪下来。每块剪下来的内容就是一个block。然后我们把这些纸块按照自己的排版意图，用胶水重新贴到一张空白的新纸上。这样就形成了你自己独特的文摘快报了。作为一种技术的延伸，网页布局设计也遵循了同样的模式。<br><br><strong>内联元素(inlineelement)</strong>一般都是基于语义级(semantic)的基本元素。内联元素只能容纳文本或者其他内联元素，常见内联元素“a”。<br><br> 需要说明的是：inlineelement的中文叫法，有多种内联元素、内嵌元素、行内元素、直进式元素。基本上没有统一的翻译，爱怎么叫怎么叫吧。另外提到内联元素，我们会想到有个display的属性是display:inline;这个属性能够修复著名的IE双倍浮动边界问题。<br><br></span> <span style="font-size:18px;">用display: inline 或display:block命令</span> <span style="font-size:18px;">就可以改变一个元素的这一特性。什么时候需要改变这一属性呢？<br> 让一个inline元素从新行开始；<br> 让块元素和其他元素保持在一行上；<br> 控制inline元素的宽度（对导航条特别有用）；<br> 控制inline元素的高度；<br> 无须设定宽度即可为一个块元素设定与文字同宽的背景色。<br><br> 块元素(block element)和内联元素(inline element)都是html规范中的概念。</span> <span style="font-size:18px;">块元素和内联元素的基本差异是块元素一般都从新行开始。</span> <span style="font-size:18px;">而当加入了</span> <span style="font-size:18px;">css</span> <span style="font-size:18px;">控制以后，块元素和内联元素的这种属性差异就不成为差异了。比如，我们完全可以把内联元素cite加上</span> <span style="font-size:18px;">display:block</span> <span style="font-size:18px;">这样的属性，让他也有每次都从新行开始的属性。<br><br></span> <p><font><span><span style="color:#000000;font-size:16px;"><span style="color:#333333;font-size:10.5pt;"><strong><span style="font-size:16px;">display:inline-block</span>将对象呈递为内联对象，但是对象的内容作为块对象呈递。旁边的内联对象会被呈递在同一行内，允许空格。</strong></span></span></span></font></p> <p><span style="font-size:18px;"><span>inline-block的元素特点：</span></span></p> <p><span style="font-size:18px;color:#333333;line-height:150%;font-size:10.5pt;">将对象呈递为内联对象，但是对象的内容作为块对象呈递。旁边的内联对象会被呈递在同一行内，允许空格。<span>(</span>准确地说，应用此特性的元素呈现为内联对象，周围元素保持在同一行，但可以设置宽度和高度地块元素的属性<span>)</span></span></p> <p><span style="font-size:18px;color:#333333;line-height:150%;font-size:10.5pt;">并不是所有浏览器都支持此属性，目前支持的浏览器有：<span>Opera</span>、<span>Safari</span>在<span>IE</span>中对内联元素使用<span>display:inline-block</span>，<span>IE</span>是不识别的，但使用<span>display:inline-block</span>在<span>IE</span>下会触发<span>layout</span>，从而使内联元素拥有了<span>display:inline-block</span>属性的表症。从上面的这个分析，也不难理解为什么<span>IE</span>下，对块元素设置<span>display:inline-block</span>属性无法实现<span>inline-block</span>的效果。这时块元素仅仅是被<span>display:inline-block</span>触发了<span>layout</span>，而它本就是行布局，所以触发后，块元素依然还是行布局，而不会如<span>Opera</span>中块元素呈递为内联对象。</span></p> <p><span style="font-size:18px;"><strong><span style="color:#333333;font-size:10.5pt;">IE</span><span style="color:#333333;font-size:10.5pt;">下块元素如何实现<span>display:inline-block</span>的效果？</span></strong></span></p> <p><span style="font-size:18px;color:#333333;font-size:10.5pt;">有两种方法：<span><br> 1</span>、先使用<span>display:inline-block</span>属性触发块元素，然后再定义<span>display:inline</span>，让块元素呈递为内联对象（两个<span>display</span>要先后放在两个<span>CSS</span>声明中才有效果，这是<span>IE</span>的一个经典<span>bug</span>，如果先定义了<span>display:inline-block</span>，然后再将<span>display</span>设回<span>inline</span>或<span>block</span>，<span>layout</span>不会消失）。代码如下（<span>...</span>为省略的其他属性内容）：</span></p> <p><span style="font-size:18px;color:#333333;line-height:150%;font-size:10.5pt;">div{display:inline-block;...}<br> div {display:inline;}</span></p> <p><span style="font-size:18px;color:#333333;line-height:150%;font-size:10.5pt;"><br> 2</span><span style="font-size:18px;color:#333333;line-height:150%;font-size:10.5pt;">、直接让块元素设置为内联对象呈递（设置属性<span>display:inline</span>），然后触发块元素的<span>layout</span>（如：<span>zoom:1</span>等）。代码如下：</span></p> <p><span style="font-size:18px;color:#333333;line-height:150%;font-size:10.5pt;">div{display:inline; zoom:1;...}</span></p> <span style="font-size:18px;"><br><br><strong>可变元素</strong>是基于以上两者随环境而变化的，它的基本概念就是他需要根据上下文关系确定该元素是块元素或者内联元素。可变元素还是属于上述两种元素类别，一旦上下文关系确定了他的类别，他就要遵循块元素或者内联元素的规则限制。<br><br> html标签的block、inline分类明细：<br><br><strong>块元素(block element)</strong></span> <span style="font-size:18px;color:#f7f7f7;font-weight:100;">.52css.com]</span> <div> <div> <span style="font-size:18px;">◎ address - 地址<br> ◎ blockquote - 块引用<br> ◎ center - 举中对齐块<br> ◎ dir - 目录列表<br> ◎ div - 常用块级容易，也是css layout的主要标签<br> ◎ dl - 定义列表<br> ◎ fieldset - form控制组<br> ◎ form - 交互表单<br> ◎ h1 - 大标题<br> ◎ h2 - 副标题<br> ◎ h3 - 3级标题<br> ◎ h4 - 4级标题<br> ◎ h5 - 5级标题<br> ◎ h6 - 6级标题<br> ◎ hr - 水平分隔线<br> ◎ isindex - input prompt<br> ◎ menu - 菜单列表<br> ◎ noframes - frames可选内容，（对于不支持frame的浏览器显示此区块内容<br> ◎ noscript - 可选脚本内容（对于不支持script的浏览器显示此内容）<br> ◎ ol - 排序表单<br> ◎ p - 段落<br> ◎ pre - 格式化文本<br> ◎ table - 表格<br> ◎ ul - 非排序列表</span> </div> </div> <span style="font-size:18px;"><br><strong>内联元素(inline element)</strong></span> <span style="font-size:18px;color:#f7f7f7;font-weight:100;">52css.com]</span> <div> <div> <span style="font-size:18px;">◎ a - 锚点◎ abbr - 缩写<br> ◎ acronym - 首字<br> ◎ b - 粗体(不推荐)<br> ◎ bdo - bidi override<br> ◎ big - 大字体<br> ◎ br - 换行<br> ◎ cite - 引用<br> ◎ code - 计算机代码(在引用源码的时候需要)<br> ◎ dfn - 定义字段<br> ◎ em - 强调<br> ◎ font - 字体设定(不推荐)<br> ◎ i - 斜体<br> ◎ img - 图片<br> ◎ input - 输入框<br> ◎ kbd - 定义键盘文本<br> ◎ label - 表格标签<br> ◎ q - 短引用<br> ◎ s - 中划线(不推荐)<br> ◎ samp - 定义范例计算机代码<br> ◎ select - 项目选择<br> ◎ small - 小字体文本<br> ◎ span - 常用内联容器，定义文本内区块<br> ◎ strike - 中划线<br> ◎ strong - 粗体强调<br> ◎ sub - 下标<br> ◎ sup - 上标<br> ◎ textarea - 多行文本输入框<br> ◎ tt - 电传文本<br> ◎ u - 下划线<br> ◎ var - 定义变量</span> </div> </div> <span style="font-size:18px;"><br><strong>可变元素</strong></span> <span style="font-size:18px;color:#f7f7f7;font-weight:100;">52css.com]</span> <span style="font-size:18px;">可变元素为根据上下文语境决定该元素为块元素或者内联元素。<br> ◎ applet - java applet<br> ◎ button - 按钮<br> ◎ del - 删除文本<br> ◎ iframe - inline frame<br> ◎ ins - 插入的文本<br> ◎ map - 图片区块(map)<br> ◎ object - object对象<br> ◎ script - 客户端脚本</span> <br> </div> </div> </div> </div> </div>  <div id="SOHUCS" sid="1276650109727162368"></div> <script type="text/javascript" src="/views/front/js/chanyan.js"></script>  <div class="youdao-fixed-ad" id="detail_ad_bottom"></div> </div> <div class="col-md-3"> <div class="row" id="ad">  <div id="right-1" class="col-lg-12 col-md-12 col-sm-4 col-xs-4 ad"> <div class="youdao-fixed-ad" id="detail_ad_1"> </div> </div>  <div id="right-2" class="col-lg-12 col-md-12 col-sm-4 col-xs-4 ad"> <div class="youdao-fixed-ad" id="detail_ad_2"></div> </div>  <div id="right-3" class="col-lg-12 col-md-12 col-sm-4 col-xs-4 ad"> <div class="youdao-fixed-ad" id="detail_ad_3"></div> </div> </div> </div> </div> </div> </div> <div class="container"> <h4 class="pt20 mb15 mt0 border-top">你可能感兴趣的:(CSS)</h4> <div id="paradigm-article-related"> <div class="recommend-post mb30"> <ul class="widget-links"> <li><a href="/article/1939448030990233600.htm" title="家谱html源码,好看的族谱树状图效果代码" target="_blank">家谱html源码,好看的族谱树状图效果代码</a> <span class="text-muted">Illusion.H</span> <a class="tag" taget="_blank" href="/search/%E5%AE%B6%E8%B0%B1html%E6%BA%90%E7%A0%81/1.htm">家谱html源码</a> <div>家谱树状代码demobywww.webym.net/*NowtheCSS*/*{margin:0;padding:0;}.treeul{padding-top:20px;position:relative;transition:all0.5s;-webkit-transition:all0.5s;-moz-transition:all0.5s;}.treeli{float:left;text-al</div> </li> <li><a href="/article/1939431390332383232.htm" title="前端面试题" target="_blank">前端面试题</a> <span class="text-muted">被诅咒的猫</span> <a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF%E9%9D%A2%E8%AF%95%E9%A2%98/1.htm">前端面试题</a> <div>前端面试题：一个200*200的div在不同分辨率屏幕上下左右居中，用css实现div{position:absolute;width:200px;height:200px;top:50%;left:50%;margin-left:-100px;height:-100px;z-index:1000;}写一个左中右布局占满屏幕，其中左右两块是固定宽度200，中间自适应宽，要求先加载中间块，请写出结构</div> </li> <li><a href="/article/1939317568598765568.htm" title="iOS 26中的 Liquid Glass 设计理念与 CSS 的 UI 实现" target="_blank">iOS 26中的 Liquid Glass 设计理念与 CSS 的 UI 实现</a> <span class="text-muted">duxweb</span> <a class="tag" taget="_blank" href="/search/ios/1.htm">ios</a><a class="tag" taget="_blank" href="/search/css/1.htm">css</a><a class="tag" taget="_blank" href="/search/ui/1.htm">ui</a> <div>引言2025年6月，苹果在WWDC2025上发布了令人惊艳的iOS26，引入了全新的"LiquidGlass"（液态玻璃）设计语言。这被苹果称为"有史以来最广泛的软件设计更新"，不仅彻底重新定义了iOS的视觉语言，更是为整个移动界面设计领域带来了全新的思路。本文将深入探讨LiquidGlass设计理念的核心思想，并提供详细的CSS实现方案，帮助开发者在Web项目中实现类似的视觉效果。LiquidG</div> </li> <li><a href="/article/1939250113889234944.htm" title="Tailwind CSS自定义用法" target="_blank">Tailwind CSS自定义用法</a> <span class="text-muted">TE-茶叶蛋</span> <a class="tag" taget="_blank" href="/search/%E9%9D%A2%E8%AF%95%E5%A4%8D%E4%B9%A0%E7%B3%BB%E5%88%97/1.htm">面试复习系列</a><a class="tag" taget="_blank" href="/search/css/1.htm">css</a><a class="tag" taget="_blank" href="/search/css/1.htm">css</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a> <div>文章目录前言✅一、集成TailwindCSS到React项目1.安装依赖2.配置`tailwind.config.js`3.创建全局样式文件（如`src/index.css`）@tailwindbase;@tailwindcomponents;@tailwindutilities;4.在`main.tsx`或`main.jsx`中引入样式✅二、自定义样式方式汇总1.`theme.extend`自定</div> </li> <li><a href="/article/1939226528248295424.htm" title="JavaScript基础-常见网页特效案例" target="_blank">JavaScript基础-常见网页特效案例</a> <span class="text-muted">咖啡の猫</span> <a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a><a class="tag" taget="_blank" href="/search/%E5%BC%80%E5%8F%91%E8%AF%AD%E8%A8%80/1.htm">开发语言</a><a class="tag" taget="_blank" href="/search/ecmascript/1.htm">ecmascript</a> <div>一、前言在前端开发中，实现网页特效（如轮播图、下拉菜单、Tab切换、拖拽效果等）是提升用户体验和页面交互性的关键手段之一。这些特效不仅能增强用户对网站的粘性，也是衡量一个前端开发者能力的重要标准。JavaScript是实现网页特效的核心技术之一，结合HTML和CSS，可以轻松构建丰富的交互效果。本文将带你深入了解：常见网页特效的实现原理；如何使用原生JavaScript实现经典特效；每个案例附带完</div> </li> <li><a href="/article/1939196016884510720.htm" title="总结自适应网站的标准尺寸" target="_blank">总结自适应网站的标准尺寸</a> <span class="text-muted">scuter_yu</span> <a class="tag" taget="_blank" href="/search/web%E5%89%8D%E7%AB%AF/1.htm">web前端</a> <div>转载字自"深蓝的镰刀"偶然翻阅国外标准模板，总结一下在使用css3的mediaquery做自适应网站时究竟min-width和max-width设多少是最好的。PC机时：[css]viewplaincopy@mediaonlyscreenand(min-width:960px){*{color:red;}}平板横放时：[css]viewplaincopy@mediaonlyscreenand(mi</div> </li> <li><a href="/article/1939161986998792192.htm" title="vue中css使用data中的变量" target="_blank">vue中css使用data中的变量</a> <span class="text-muted">console.log( )</span> <a class="tag" taget="_blank" href="/search/%23/1.htm">#</a><a class="tag" taget="_blank" href="/search/vue/1.htm">vue</a><a class="tag" taget="_blank" href="/search/vue.js/1.htm">vue.js</a><a class="tag" taget="_blank" href="/search/css/1.htm">css</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a> <div>封装一个ui组件，组件的样式一般是多种多样的我们可以通过组件传值的方式将ui属性传递给组件，但是我们属性是在js中可以拿到，vue3之前css是无法直接获取的(vue3中已经可以直接获取，可以去学习一下)通过vars那么在vue2中，我们要借助setProperty函数写一个简单的例子helloworldexportdefault{data(){return{color:'red'}},mount</div> </li> <li><a href="/article/1939144719405740032.htm" title="视频云平台HTML5播放器使用文档(CuPlayer平台)" target="_blank">视频云平台HTML5播放器使用文档(CuPlayer平台)</a> <span class="text-muted">阿酷tony</span> <a class="tag" taget="_blank" href="/search/%E9%85%B7%E6%92%AD%E4%BA%91%EF%BC%88%E5%85%8D%E8%B4%B9%E4%BA%91%E5%AD%98%E5%82%A8%EF%BC%89/1.htm">酷播云（免费云存储）</a><a class="tag" taget="_blank" href="/search/%E9%9F%B3%E8%A7%86%E9%A2%91/1.htm">音视频</a><a class="tag" taget="_blank" href="/search/html5/1.htm">html5</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a> <div>视频云平台HTML5播放器使用文档(CuPlayer平台)varplayer=polyvPlayer({wrap:'#player',width:800,height:533,vid:'88083abbf5535a4d7b4d8614427559e0_8',});选项参数类型默认值说明wrapstring/HTMLElement-页面上存在需要载入播放器的DOM元素或css选择器widthnumb</div> </li> <li><a href="/article/1939100196524847104.htm" title="v-if、display、visibility、opacity隐藏元素的区别" target="_blank">v-if、display、visibility、opacity隐藏元素的区别</a> <span class="text-muted">甘露寺</span> <a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/vue/1.htm">vue</a><a class="tag" taget="_blank" href="/search/react/1.htm">react</a> <div>前端元素隐藏与条件渲染完全指南（Vuevs.Reactvs.CSS）本文对比v-if、v-show、display:none、opacity:0、visibility:hidden以及React条件渲染的差异，帮你彻底掌握它们的适用场景！核心概念1.DOM树vs.渲染树DOM树：完整的HTML节点结构（无论是否隐藏）。渲染树：浏览器实际绘制到屏幕上的内容（隐藏元素可能被跳过）。2.关键差异特性是否</div> </li> <li><a href="/article/1939097167696293888.htm" title="一个 CSS 属性如何彻底解决布局难题" target="_blank">一个 CSS 属性如何彻底解决布局难题</a> <span class="text-muted">@大迁世界</span> <a class="tag" taget="_blank" href="/search/css/1.htm">css</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a> <div>设计稿中的组件常常精致、规整，但一旦进入开发阶段，尤其是响应式场景中，部分UI就容易失控。例如：一个包含图片、视频或需保持固定比例的卡片网格组件。表面看似简单，实则暗藏大量布局陷阱。为了解决这些问题，许多项目中采用了监听resize事件、手动计算宽高比、动态注入style属性等方式。虽然功能实现了，但代码臃肿、可维护性差、兼容性问题频出。直到一个CSS属性出现：aspect-ratio。结果令人惊</div> </li> <li><a href="/article/1939093766602289152.htm" title="CSS 与 JavaScript 加载优化" target="_blank">CSS 与 JavaScript 加载优化</a> <span class="text-muted">甘露寺</span> <a class="tag" taget="_blank" href="/search/css/1.htm">css</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a> <div>CSS与JavaScript加载优化指南：位置、阻塞与性能让你的网页飞起来！本文详细解析CSS和JavaScript标签的放置位置如何影响页面性能，涵盖阻塞原理、浏览器机制和最佳实践。掌握这些知识可显著提升用户体验和SEO排名！一、核心问题：为什么位置很重要？浏览器渲染页面时需经历：解析HTML→2.下载资源→3.执行脚本→4.渲染页面错误的位置会阻塞关键路径，导致：⚠️长时间白屏（脚本阻塞）样式</div> </li> <li><a href="/article/1939092632563150848.htm" title="Tailwind CSS工作原理" target="_blank">Tailwind CSS工作原理</a> <span class="text-muted">TE-茶叶蛋</span> <a class="tag" taget="_blank" href="/search/css/1.htm">css</a><a class="tag" taget="_blank" href="/search/css/1.htm">css</a><a class="tag" taget="_blank" href="/search/tensorflow/1.htm">tensorflow</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a> <div>文章目录前言1.指令解析与AST操作**核心处理流程****具体流程说明**2.**配置驱动的样式生成**3.**JIT模式（Just-In-Time）的核心逻辑**4.**插件与自定义扩展**5.**与PostCSS管道的协同**6.**优化与TreeShaking**关键源码逻辑（简化）关键技术细节（底层机制总结）前言TailwindCSS本质上是一个PostCSS插件，其底层工作原理可以拆解</div> </li> <li><a href="/article/1939085319492136960.htm" title="react快速开始项目模板" target="_blank">react快速开始项目模板</a> <span class="text-muted">飞鸟malred</span> <a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/react.js/1.htm">react.js</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF%E6%A1%86%E6%9E%B6/1.htm">前端框架</a> <div>代码仓库gitee创建项目首先保证安装了node,然后使用vite创建项目vitenpmcreatevitereact-learncdreact-learnnpmi目录结构一个完整的前端项目需要:状态管理在全局维护共有的状态(数据),让页面组件之间共享数据,我们使用pinia路由路由让页面之间可以进行跳转,我们使用vue-router样式样式让页面更美观,我们使用tailwindcss网络请求前端</div> </li> <li><a href="/article/1939083932456775680.htm" title="2013年EI 新目录中新增的期刊" target="_blank">2013年EI 新目录中新增的期刊</a> <span class="text-muted">h_liuage</span> <a class="tag" taget="_blank" href="/search/%E6%8A%95%E7%A8%BF%E6%9C%9F%E5%88%8A/1.htm">投稿期刊</a><a class="tag" taget="_blank" href="/search/%E8%AE%BA%E6%96%87%E6%8A%95%E7%A8%BF/1.htm">论文投稿</a> <div>**【转载】2013年EI新目录中新增的期刊**斜体样式3DResearch2092673020926731ACSSustainableChemistryandEngineering21680485ActaInformatica0001590314320525AdvancesinOpticsandPhotonics19438206AdvancesinRadioScience168499651684</div> </li> <li><a href="/article/1939045354578178048.htm" title="Java web%10" target="_blank">Java web%10</a> <span class="text-muted">好学且牛逼的马</span> <a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/AI%E7%BC%96%E7%A8%8B/1.htm">AI编程</a> <div>%10新路线Javawebai笔记阶段时长内容Web前端基础2天HTML、CSS、JS、Vue3、AjaxWeb后端基础4天Maven、HTTP协议、SpringIOC、DI、MySQL、JDBC、MybatisWeb后端实战6天Tlias案例（基于案例讲解web开发的核心知识）Web后端进阶2天SpringAOP、SpringBoot原理、自定义Starter、Maven高级前端web实战4天V</div> </li> <li><a href="/article/1938950023286943744.htm" title="使用CSS @layer控制样式优先级的新方式" target="_blank">使用CSS @layer控制样式优先级的新方式</a> <span class="text-muted">海派程序猿</span> <a class="tag" taget="_blank" href="/search/css/1.htm">css</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a> <div>CSS@layer：拯救你的样式优先级，告别“!important”的焦虑各位前端同僚们，你们有没有经历过这样的噩梦？深夜，正当你准备结束一天的工作，舒舒服服地躺在床上刷手机时，测试突然甩来一个bug：一个看起来简单的样式问题，却怎么改都改不过来！你瞪大了眼睛，一行一行地检查CSS，发现优先级简直乱成了一锅粥。仿佛无数个小恶魔在你代码里跳舞，疯狂地嘲笑你的努力。最后，你无奈地祭出了“!import</div> </li> <li><a href="/article/1938920522834309120.htm" title="小程序 rich-text 标签解析图片过大的问题解决" target="_blank">小程序 rich-text 标签解析图片过大的问题解决</a> <span class="text-muted">無名356</span> <a class="tag" taget="_blank" href="/search/%E5%B0%8F%E7%A8%8B%E5%BA%8F/1.htm">小程序</a><a class="tag" taget="_blank" href="/search/css3/1.htm">css3</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/css/1.htm">css</a> <div>产生问题的原因就是通过此标签的样式不能使用css样式。因为数据直接解析，那么我们可以修改或者处理这个数据来解决问题解决方法，通过修改数据中的文本内容中的img标签的内联样式来实现formatGoodsData(data){letcontent=data.goods_contentcontent=content.replace(/\<img/gi,'<imgstyle="width:100%;hei</div> </li> <li><a href="/article/1938913206118445056.htm" title="uniapp vue3版本的一些小细节！" target="_blank">uniapp vue3版本的一些小细节！</a> <span class="text-muted">养乐多～ch</span> <a class="tag" taget="_blank" href="/search/uni/1.htm">uni</a><a class="tag" taget="_blank" href="/search/uni-app/1.htm">uni-app</a><a class="tag" taget="_blank" href="/search/vue.js/1.htm">vue.js</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a> <div>1,生命周期的引用import{onShow,onHide,onLoad}from"@dcloudio/uni-app"onShow(()=>{showLog('onShow')})onLoad((options)=>{showLog('onLoad')})需要引入，才可以调用2，全局引入css在main.js或者ts中，导入就可以//例如引入全局CSS文件import'./util/baseCs</div> </li> <li><a href="/article/1938819403973980160.htm" title="webpack和vite区别" target="_blank">webpack和vite区别</a> <span class="text-muted">PromptOnce</span> <a class="tag" taget="_blank" href="/search/webpack/1.htm">webpack</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/node.js/1.htm">node.js</a> <div>一、Webpack1.概述Webpack是一个模块打包工具，它会递归地构建依赖关系图，并将所有模块打包成一个或多个bundle（包）。2.特点配置灵活：Webpack提供了高度可定制的配置文件，可以根据项目需求进行各种优化。生态系统丰富：Webpack拥有庞大的插件和加载器生态系统，可以处理各种资源类型（JavaScript、CSS、图片等）。支持代码拆分：通过代码拆分和懒加载，Webpack可以</div> </li> <li><a href="/article/1938818019220320256.htm" title="实现网页中CSS图片3D旋转效果" target="_blank">实现网页中CSS图片3D旋转效果</a> <span class="text-muted">Kiki-2189</span> <div>本文还有配套的精品资源，点击获取简介：CSS是一种用于定义文档呈现方式的技术，通过CSS3的3D转换功能，能够在二维平面上展示三维对象，让网页元素具有立体感。本文详细介绍了实现CSS图片3D旋转效果所需的CSS属性，如transform,perspective,transition,以及:hover选择器，并提供了一个简单的代码示例。同时，文章也提到了兼容性问题以及提供回退方案的重要性。1.CSS</div> </li> <li><a href="/article/1938813729831448576.htm" title="将图片的base64编码直接嵌入到html文件的css中" target="_blank">将图片的base64编码直接嵌入到html文件的css中</a> <span class="text-muted">Kuo-Teng</span> <a class="tag" taget="_blank" href="/search/%E8%BD%AF%E4%BB%B6%E5%BC%80%E5%8F%91%E5%AE%9E%E6%88%98/1.htm">软件开发实战</a><a class="tag" taget="_blank" href="/search/html/1.htm">html</a><a class="tag" taget="_blank" href="/search/css/1.htm">css</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a> <div>将图片的base64编码直接嵌入到html文件的css中1.背景2.将图片进行base64编码3.将图片的base64编码写入到css1.背景如果你需要在html中引入一张外部图片，你可能会这样做：如果你将引用的图片保存到本地，你可能会这样做：但是，如果网络延迟较高，或者在jar包中运行Java项目时无法根据路径顺利找到图片呢？那么，将图片的base64编码直接写入html文件便是最好的选择！2.</div> </li> <li><a href="/article/1938810579296776192.htm" title="HTML页面设计——动态照片环" target="_blank">HTML页面设计——动态照片环</a> <span class="text-muted"></span> <div>#前端开发##html超文本标记语言结构学习他的标签##css美化页面其实一部分的网站首页应用了照片环的原理，使得页面看起来更加美观，这里为大家分享一个简单的照片环编写。一、准备好以下素材：二、新建一个HTML文件，这里就取名“01-照片环”好了。三、现在开始编写具体内容，照片环说白了就是几个照片构成的所以body只要写就可以了，编写的时候注意图片的格式是.jpg、.png还是.gif(动态图)。</div> </li> <li><a href="/article/1938809697964453888.htm" title="使用CSS和HTML实现3D图片环绕效果" target="_blank">使用CSS和HTML实现3D图片环绕效果</a> <span class="text-muted">码力无边-OEC</span> <a class="tag" taget="_blank" href="/search/css/1.htm">css</a><a class="tag" taget="_blank" href="/search/html/1.htm">html</a><a class="tag" taget="_blank" href="/search/3d/1.htm">3d</a><a class="tag" taget="_blank" href="/search/web/1.htm">web</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a> <div>使用CSS和HTML实现3D图片环绕效果在本篇博客中，将介绍如何使用HTML和CSS实现一个3D图片环绕效果。这个效果不仅具有视觉吸引力，而且具有高度的互动性，鼠标悬停时动画会暂停。接下来将一步步讲解这个效果的实现过程。1.效果2.页面结构与布局首先，我们来看一下HTML的基本结构。该效果的核心是一个元素，它包含了多个图片的，每个div中都设置了不同的背景图片。HTML代码：3D图片环绕效果</</div> </li> <li><a href="/article/1938807172985057280.htm" title="微信小程序 progress 进度条内部圆角及内部条渐变色" target="_blank">微信小程序 progress 进度条内部圆角及内部条渐变色</a> <span class="text-muted">Bonnie(大宝)</span> <a class="tag" taget="_blank" href="/search/%E6%8A%80%E6%9C%AF/1.htm">技术</a><a class="tag" taget="_blank" href="/search/%E5%B0%8F%E7%A8%8B%E5%BA%8F/1.htm">小程序</a> <div>微信小程序表格微信小程序progress进度条内部圆角及渐变色html:css:.wx-progress-inner-bar{border-radius:8rpx!important;background:linear-gradient(toright,rgb(71,187,254,1),rgba(254,86,77,1))!important;}</div> </li> <li><a href="/article/1938789142833983488.htm" title="小程序领域H5的CSS布局优化" target="_blank">小程序领域H5的CSS布局优化</a> <span class="text-muted">小程序开发2020</span> <a class="tag" taget="_blank" href="/search/CS/1.htm">CS</a><a class="tag" taget="_blank" href="/search/%E5%B0%8F%E7%A8%8B%E5%BA%8F/1.htm">小程序</a><a class="tag" taget="_blank" href="/search/css/1.htm">css</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/ai/1.htm">ai</a> <div>小程序领域H5的CSS布局优化：从“乱屏”到“丝滑”的实战指南关键词：小程序布局优化、CSSFlex、CSSGrid、rpx适配、重排重绘优化摘要：本文从开发者最头疼的“小程序页面布局错乱”问题出发，结合小程序特有的运行环境（如rpx单位、组件限制），用“装修房子”的生活化比喻拆解CSS布局核心概念，系统讲解Flex/Grid布局的实战技巧、多端适配策略及性能优化方法。通过真实代码案例（含wxml</div> </li> <li><a href="/article/1938784227617206272.htm" title="css同心圆扩散" target="_blank">css同心圆扩散</a> <span class="text-muted">weixin_43966308</span> <a class="tag" taget="_blank" href="/search/css%E5%B8%83%E5%B1%80/1.htm">css布局</a> <div>同心圆扩散要点：定位：每个圆形定位要相同，因为为了达到同心圆扩散的效果有一个定宽定高的圆形，剩下的圆形通过缩放和透明的改变而改变，因此必须保证定位的位置相同为了达到垂直居中的效果，可以通过transfrom(-50%,-50%),但是因为需要通过transfrom的缩放来达到扩散的效果，因此会发现之前水平垂直的效果没有达到，因为被动画中的trasnfrom缩放的语句覆盖了可以通过margin负值宽</div> </li> <li><a href="/article/1938779440171511808.htm" title="css3 圆形水波纹特效" target="_blank">css3 圆形水波纹特效</a> <span class="text-muted">程序媛之博客</span> <a class="tag" taget="_blank" href="/search/css3/1.htm">css3</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/css/1.htm">css</a> <div>需求描述：需要制作一个动画，特效从圆心开始往外扩散，然后又往回收。效果图：实现代码：.circle{width:100rpx;height:100rpx;background-color:#FF4C4C;border-radius:50%;/*圆形*/box-shadow:inset00010rpxrgba(255,255,255,0.5),/*内阴影，初始半透明圆*/inset00020rpxr</div> </li> <li><a href="/article/1938779061757210624.htm" title="css优化之提高代码拓展性" target="_blank">css优化之提高代码拓展性</a> <span class="text-muted">小小不吃香菜</span> <a class="tag" taget="_blank" href="/search/css/1.htm">css</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/css3/1.htm">css3</a><a class="tag" taget="_blank" href="/search/%E4%BB%A3%E7%A0%81%E8%A7%84%E8%8C%83/1.htm">代码规范</a> <div>css优化系列文章css优化系列：通过“使用CSS变量”和“整合重复样式”来优化代码的可维护性。文章目录css优化系列文章使用css变量整合重复样式总结使用css变量将重复使用的颜色、间距值等等定义为变量，提高代码的可维护性。对于使用函数获取值的情况，也可以降低重复计算的次数。例如：/**跟节点里设置变量**/.chat-window{--cw-z-index:1000;--cw-bg-gradi</div> </li> <li><a href="/article/1938778305721331712.htm" title="CSS实标题现同心圆的缩放" target="_blank">CSS实标题现同心圆的缩放</a> <span class="text-muted">做一个暴躁的开发</span> <a class="tag" taget="_blank" href="/search/css3/1.htm">css3</a><a class="tag" taget="_blank" href="/search/html/1.htm">html</a> <div>CSS实标题现同心圆的缩放最近学习了css动画效果，记录一下同心圆的缩放问题问题描述我先设置了两个div，外圈是class=“one”，内圈是class=“two”,代码如下：分别设置他们的div，给他们边框，并且设置成圆形.one{width:500px;height:500px;border:20pxsolidlightcoral;border-radius:50%;overflow:hidd</div> </li> <li><a href="/article/1938776162532651008.htm" title="java毕业设计房产中介系统mybatis+源码+调试部署+系统+数据库+lw" target="_blank">java毕业设计房产中介系统mybatis+源码+调试部署+系统+数据库+lw</a> <span class="text-muted">兮兮科技</span> <a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/mybatis/1.htm">mybatis</a><a class="tag" taget="_blank" href="/search/%E5%BC%80%E5%8F%91%E8%AF%AD%E8%A8%80/1.htm">开发语言</a> <div>java毕业设计房产中介系统mybatis+源码+调试部署+系统+数据库+lwjava毕业设计房产中介系统mybatis+源码+调试部署+系统+数据库+lw本源码技术栈：项目架构：B/S架构开发语言：Java语言开发软件：ideaeclipse前端技术：Layui、HTML、CSS、JS、JQuery等技术后端技术：JAVA运行环境：Win10、JDK1.8数据库：MySQL5.7/8.0源码地址</div> </li> <li><a href="/article/117.htm" title="Algorithm" target="_blank">Algorithm</a> <span class="text-muted">香水浓</span> <a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/Algorithm/1.htm">Algorithm</a> <div>冒泡排序 public static void sort(Integer[] param) { for (int i = param.length - 1; i > 0; i--) { for (int j = 0; j < i; j++) { int current = param[j]; int next = param[j + 1];</div> </li> <li><a href="/article/244.htm" title="mongoDB 复杂查询表达式" target="_blank">mongoDB 复杂查询表达式</a> <span class="text-muted">开窍的石头</span> <a class="tag" taget="_blank" href="/search/mongodb/1.htm">mongodb</a> <div>1:count Pg: db.user.find().count(); 统计多少条数据 2:不等于$ne Pg: db.user.find({_id:{$ne:3}},{name:1,sex:1,_id:0}); 查询id不等于3的数据。 3：大于$gt $gte(大于等于) &n</div> </li> <li><a href="/article/371.htm" title="Jboss Java heap space异常解决方法, jboss OutOfMemoryError : PermGen space" target="_blank">Jboss Java heap space异常解决方法, jboss OutOfMemoryError : PermGen space</a> <span class="text-muted">0624chenhong</span> <a class="tag" taget="_blank" href="/search/jvm/1.htm">jvm</a><a class="tag" taget="_blank" href="/search/jboss/1.htm">jboss</a> <div>转自 http://blog.csdn.net/zou274/article/details/5552630 解决办法： window->preferences->java->installed jres->edit jre 把default vm arguments 的参数设为-Xms64m -Xmx512m ----------------</div> </li> <li><a href="/article/498.htm" title="文件上传下载解析相对路径" target="_blank">文件上传下载解析相对路径</a> <span class="text-muted">不懂事的小屁孩</span> <a class="tag" taget="_blank" href="/search/%E6%96%87%E4%BB%B6%E4%B8%8A%E4%BC%A0/1.htm">文件上传</a> <div>有点坑吧，弄这么一个简单的东西弄了一天多，身边还有大神指导着，网上各种百度着。下面总结一下遇到的问题：文件上传，在页面上传的时候，不要想着去操作绝对路径，浏览器会对客户端的信息进行保护，避免用户信息收到攻击。在上传图片，或者文件时，使用form表单来操作。前台通过form表单传输一个流到后台，而不是ajax传递参数到后台，代码如下: <form action=&</div> </li> <li><a href="/article/625.htm" title="怎么实现qq空间批量点赞" target="_blank">怎么实现qq空间批量点赞</a> <span class="text-muted">换个号韩国红果果</span> <a class="tag" taget="_blank" href="/search/qq/1.htm">qq</a> <div>纯粹为了好玩！！逻辑很简单 1 打开浏览器console；输入以下代码。先上添加赞的代码 var tools={}; //添加所有赞 function init(){ document.body.scrollTop=10000; setTimeout(function(){document.body.scrollTop=0;},2000);//加</div> </li> <li><a href="/article/752.htm" title="判断是否为中文" target="_blank">判断是否为中文</a> <span class="text-muted">灵静志远</span> <a class="tag" taget="_blank" href="/search/%E4%B8%AD%E6%96%87/1.htm">中文</a> <div>方法一： public class Zhidao { public static void main(String args[]) { String s = "sdf灭礌 kjl d{';\fdsjlk是"; int n=0; for(int i=0; i<s.length(); i++) { n = (int)s.charAt(i); if((</div> </li> <li><a href="/article/879.htm" title="一个电话面试后总结" target="_blank">一个电话面试后总结</a> <span class="text-muted">a-john</span> <a class="tag" taget="_blank" href="/search/%E9%9D%A2%E8%AF%95/1.htm">面试</a> <div>今天，接了一个电话面试，对于还是初学者的我来说，紧张了半天。面试的问题分了层次，对于一类问题，由简到难。自己觉得回答不好的地方作了一下总结：在谈到集合类的时候，举几个常用的集合类，想都没想，直接说了list,map。然后对list和map分别举几个类型： list方面：ArrayList,LinkedList。在谈到他们的区别时，愣住了</div> </li> <li><a href="/article/1006.htm" title="MSSQL中Escape转义的使用" target="_blank">MSSQL中Escape转义的使用</a> <span class="text-muted">aijuans</span> <a class="tag" taget="_blank" href="/search/MSSQL/1.htm">MSSQL</a> <div>IF OBJECT_ID('tempdb..#ABC') is not null drop table tempdb..#ABC create table #ABC ( PATHNAME NVARCHAR(50) ) insert into #ABC SELECT N'/ABCDEFGHI' UNION ALL SELECT N'/ABCDGAFGASASSDFA' UNION ALL</div> </li> <li><a href="/article/1133.htm" title="一个简单的存储过程" target="_blank">一个简单的存储过程</a> <span class="text-muted">asialee</span> <a class="tag" taget="_blank" href="/search/mysql/1.htm">mysql</a><a class="tag" taget="_blank" href="/search/%E5%AD%98%E5%82%A8%E8%BF%87%E7%A8%8B/1.htm">存储过程</a><a class="tag" taget="_blank" href="/search/%E6%9E%84%E9%80%A0%E6%95%B0%E6%8D%AE/1.htm">构造数据</a><a class="tag" taget="_blank" href="/search/%E6%89%B9%E9%87%8F%E6%8F%92%E5%85%A5/1.htm">批量插入</a> <div> 今天要批量的生成一批测试数据，其中中间有部分数据是变化的，本来想写个程序来生成的，后来想到存储过程就可以搞定，所以随手写了一个，记录在此： DELIMITER $$ DROP PROCEDURE IF EXISTS inse</div> </li> <li><a href="/article/1260.htm" title="annot convert from HomeFragment_1 to Fragment" target="_blank">annot convert from HomeFragment_1 to Fragment</a> <span class="text-muted">百合不是茶</span> <a class="tag" taget="_blank" href="/search/android/1.htm">android</a><a class="tag" taget="_blank" href="/search/%E5%AF%BC%E5%8C%85%E9%94%99%E8%AF%AF/1.htm">导包错误</a> <div>创建了几个类继承Fragment, 需要将创建的类存储在ArrayList<Fragment>中; 出现不能将new 出来的对象放到队列中,原因很简单; 创建类时引入包是:import android.app.Fragment; 创建队列和对象时使用的包是:import android.support.v4.ap</div> </li> <li><a href="/article/1387.htm" title="Weblogic10两种修改端口的方法" target="_blank">Weblogic10两种修改端口的方法</a> <span class="text-muted">bijian1013</span> <a class="tag" taget="_blank" href="/search/weblogic/1.htm">weblogic</a><a class="tag" taget="_blank" href="/search/%E7%AB%AF%E5%8F%A3%E5%8F%B7/1.htm">端口号</a><a class="tag" taget="_blank" href="/search/%E9%85%8D%E7%BD%AE%E7%AE%A1%E7%90%86/1.htm">配置管理</a><a class="tag" taget="_blank" href="/search/config.xml/1.htm">config.xml</a> <div>一.进入控制台进行修改 1.进入控制台: http://127.0.0.1:7001/console 2.展开左边树菜单域结构->环境->服务器-->点击AdminServer(管理) &</div> </li> <li><a href="/article/1514.htm" title="mysql 操作指令" target="_blank">mysql 操作指令</a> <span class="text-muted">征客丶</span> <a class="tag" taget="_blank" href="/search/mysql/1.htm">mysql</a> <div>一、连接mysql 进入 mysql 的安装目录； $ bin/mysql -p [host IP 如果是登录本地的mysql 可以不写 -p 直接 -u] -u [userName] -p 输入密码，回车，接连；二、权限操作［如果你很了解mysql数据库后，你可以直接去修改系统表，然后用 mysql> flush privileges; 指令让权限生效］ 1、赋权 mys</div> </li> <li><a href="/article/1641.htm" title="【Hive一】Hive入门" target="_blank">【Hive一】Hive入门</a> <span class="text-muted">bit1129</span> <a class="tag" taget="_blank" href="/search/hive/1.htm">hive</a> <div>Hive安装与配置 Hive的运行需要依赖于Hadoop，因此需要首先安装Hadoop2.5.2，并且Hive的启动前需要首先启动Hadoop。 Hive安装和配置的步骤 1. 从如下地址下载Hive0.14.0 http://mirror.bit.edu.cn/apache/hive/ 2.解压hive，在系统变</div> </li> <li><a href="/article/1768.htm" title="ajax 三种提交请求的方法" target="_blank">ajax 三种提交请求的方法</a> <span class="text-muted">BlueSkator</span> <a class="tag" taget="_blank" href="/search/Ajax/1.htm">Ajax</a><a class="tag" taget="_blank" href="/search/jqery/1.htm">jqery</a> <div>1、ajax 提交请求 $.ajax({ type:"post", url : "${ctx}/front/Hotel/getAllHotelByAjax.do", dataType : "json", success : function(result) { try { for(v</div> </li> <li><a href="/article/1895.htm" title="mongodb开发环境下的搭建入门" target="_blank">mongodb开发环境下的搭建入门</a> <span class="text-muted">braveCS</span> <a class="tag" taget="_blank" href="/search/%E8%BF%90%E7%BB%B4/1.htm">运维</a> <div> linux下安装mongodb 1）官网下载mongodb-linux-x86_64-rhel62-3.0.4.gz 2）linux 解压 gzip -d mongodb-linux-x86_64-rhel62-3.0.4.gz; mv mongodb-linux-x86_64-rhel62-3.0.4 mongodb-linux-x86_64-rhel62-</div> </li> <li><a href="/article/2022.htm" title="编程之美-最短摘要的生成" target="_blank">编程之美-最短摘要的生成</a> <span class="text-muted">bylijinnan</span> <a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/%E6%95%B0%E6%8D%AE%E7%BB%93%E6%9E%84/1.htm">数据结构</a><a class="tag" taget="_blank" href="/search/%E7%AE%97%E6%B3%95/1.htm">算法</a><a class="tag" taget="_blank" href="/search/%E7%BC%96%E7%A8%8B%E4%B9%8B%E7%BE%8E/1.htm">编程之美</a> <div> import java.util.HashMap; import java.util.Map; import java.util.Map.Entry; public class ShortestAbstract { /** * 编程之美最短摘要的生成 * 扫描过程始终保持一个[pBegin,pEnd]的range,初始化确保[pBegin,pEnd]的ran</div> </li> <li><a href="/article/2149.htm" title="json数据解析及typeof" target="_blank">json数据解析及typeof</a> <span class="text-muted">chengxuyuancsdn</span> <a class="tag" taget="_blank" href="/search/js/1.htm">js</a><a class="tag" taget="_blank" href="/search/typeof/1.htm">typeof</a><a class="tag" taget="_blank" href="/search/json%E8%A7%A3%E6%9E%90/1.htm">json解析</a> <div> // json格式 var people='{"authors": [{"firstName": "AAA","lastName": "BBB"},' +' {"firstName": "CCC&</div> </li> <li><a href="/article/2276.htm" title="流程系统设计的层次和目标" target="_blank">流程系统设计的层次和目标</a> <span class="text-muted">comsci</span> <a class="tag" taget="_blank" href="/search/%E8%AE%BE%E8%AE%A1%E6%A8%A1%E5%BC%8F/1.htm">设计模式</a><a class="tag" taget="_blank" href="/search/%E6%95%B0%E6%8D%AE%E7%BB%93%E6%9E%84/1.htm">数据结构</a><a class="tag" taget="_blank" href="/search/sql/1.htm">sql</a><a class="tag" taget="_blank" href="/search/%E6%A1%86%E6%9E%B6/1.htm">框架</a><a class="tag" taget="_blank" href="/search/%E8%84%9A%E6%9C%AC/1.htm">脚本</a> <div> 流程系统设计的层次和目标 </div> </li> <li><a href="/article/2403.htm" title="RMAN List和report 命令" target="_blank">RMAN List和report 命令</a> <span class="text-muted">daizj</span> <a class="tag" taget="_blank" href="/search/oracle/1.htm">oracle</a><a class="tag" taget="_blank" href="/search/list/1.htm">list</a><a class="tag" taget="_blank" href="/search/report/1.htm">report</a><a class="tag" taget="_blank" href="/search/rman/1.htm">rman</a> <div>LIST 命令使用RMAN LIST 命令显示有关资料档案库中记录的备份集、代理副本和映像副本的信息。使用此命令可列出： • RMAN 资料档案库中状态不是AVAILABLE 的备份和副本 • 可用的且可以用于还原操作的数据文件备份和副本 • 备份集和副本，其中包含指定数据文件列表或指定表空间的备份 • 包含指定名称或范围的所有归档日志备份的备份集和副本 • 由标记、完成时间、可</div> </li> <li><a href="/article/2530.htm" title="二叉树:红黑树" target="_blank">二叉树:红黑树</a> <span class="text-muted">dieslrae</span> <a class="tag" taget="_blank" href="/search/%E4%BA%8C%E5%8F%89%E6%A0%91/1.htm">二叉树</a> <div> 红黑树是一种自平衡的二叉树,它的查找,插入,删除操作时间复杂度皆为O(logN),不会出现普通二叉搜索树在最差情况时时间复杂度会变为O(N)的问题. 红黑树必须遵循红黑规则,规则如下 1、每个节点不是红就是黑。 2、根总是黑的 &</div> </li> <li><a href="/article/2657.htm" title="C语言homework3，7个小题目的代码" target="_blank">C语言homework3，7个小题目的代码</a> <span class="text-muted">dcj3sjt126com</span> <a class="tag" taget="_blank" href="/search/c/1.htm">c</a> <div>1、打印100以内的所有奇数。 # include <stdio.h> int main(void) { int i; for (i=1; i<=100; i++) { if (i%2 != 0) printf("%d ", i); } return 0; } 2、从键盘上输入10个整数，</div> </li> <li><a href="/article/2784.htm" title="自定义按钮, 图片在上, 文字在下, 居中显示" target="_blank">自定义按钮, 图片在上, 文字在下, 居中显示</a> <span class="text-muted">dcj3sjt126com</span> <a class="tag" taget="_blank" href="/search/%E8%87%AA%E5%AE%9A%E4%B9%89/1.htm">自定义</a> <div>#import <UIKit/UIKit.h> @interface MyButton : UIButton -(void)setFrame:(CGRect)frame ImageName:(NSString*)imageName Target:(id)target Action:(SEL)action Title:(NSString*)title Font:(CGFloa</div> </li> <li><a href="/article/2911.htm" title="MySQL查询语句练习题，测试足够用了" target="_blank">MySQL查询语句练习题，测试足够用了</a> <span class="text-muted">flyvszhb</span> <a class="tag" taget="_blank" href="/search/sql/1.htm">sql</a><a class="tag" taget="_blank" href="/search/mysql/1.htm">mysql</a> <div>http://blog.sina.com.cn/s/blog_767d65530101861c.html 1.创建student和score表 CREATE TABLE student ( id INT(10) NOT NULL UNIQUE PRIMARY KEY , name VARCHAR</div> </li> <li><a href="/article/3038.htm" title="转：MyBatis Generator 详解" target="_blank">转：MyBatis Generator 详解</a> <span class="text-muted">happyqing</span> <a class="tag" taget="_blank" href="/search/mybatis/1.htm">mybatis</a> <div> MyBatis Generator 详解 http://blog.csdn.net/isea533/article/details/42102297 MyBatis Generator详解 http://git.oschina.net/free/Mybatis_Utils/blob/master/MybatisGeneator/MybatisGeneator.</div> </li> <li><a href="/article/3165.htm" title="让程序员少走弯路的14个忠告" target="_blank">让程序员少走弯路的14个忠告</a> <span class="text-muted">jingjing0907</span> <a class="tag" taget="_blank" href="/search/%E5%B7%A5%E4%BD%9C/1.htm">工作</a><a class="tag" taget="_blank" href="/search/%E8%AE%A1%E5%88%92/1.htm">计划</a><a class="tag" taget="_blank" href="/search/%E5%AD%A6%E4%B9%A0/1.htm">学习</a> <div> 无论是谁，在刚进入某个领域之时，有再大的雄心壮志也敌不过眼前的迷茫：不知道应该怎么做，不知道应该做什么。下面是一名软件开发人员所学到的经验，希望能对大家有所帮助 1.不要害怕在工作中学习。只要有电脑，就可以通过电子阅读器阅读报纸和大多数书籍。如果你只是做好自己的本职工作以及分配的任务，那是学不到很多东西的。如果你盲目地要求更多的工作，也是不可能提升自己的。放</div> </li> <li><a href="/article/3292.htm" title="nginx和NetScaler区别" target="_blank">nginx和NetScaler区别</a> <span class="text-muted">流浪鱼</span> <a class="tag" taget="_blank" href="/search/nginx/1.htm">nginx</a> <div>NetScaler是一个完整的包含操作系统和应用交付功能的产品，Nginx并不包含操作系统，在处理连接方面，需要依赖于操作系统，所以在并发连接数方面和防DoS攻击方面，Nginx不具备优势。 2.易用性方面差别也比较大。Nginx对管理员的水平要求比较高，参数比较多，不确定性给运营带来隐患。在NetScaler常见的配置如健康检查，HA等，在Nginx上的配置的实现相对复杂。 3.策略灵活度方</div> </li> <li><a href="/article/3419.htm" title="第11章动画效果（下）" target="_blank">第11章动画效果（下）</a> <span class="text-muted">onestopweb</span> <a class="tag" taget="_blank" href="/search/%E5%8A%A8%E7%94%BB/1.htm">动画</a> <div>index.html <!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/</div> </li> <li><a href="/article/3546.htm" title="FAQ - SAP BW BO roadmap" target="_blank">FAQ - SAP BW BO roadmap</a> <span class="text-muted">blueoxygen</span> <a class="tag" taget="_blank" href="/search/BO/1.htm">BO</a><a class="tag" taget="_blank" href="/search/BW/1.htm">BW</a> <div>http://www.sdn.sap.com/irj/boc/business-objects-for-sap-faq Besides, I care that how to integrate tightly. By the way, for BW consultants, please just focus on Query Designer which i</div> </li> <li><a href="/article/3673.htm" title="关于java堆内存溢出的几种情况" target="_blank">关于java堆内存溢出的几种情况</a> <span class="text-muted">tomcat_oracle</span> <a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/jvm/1.htm">jvm</a><a class="tag" taget="_blank" href="/search/jdk/1.htm">jdk</a><a class="tag" taget="_blank" href="/search/thread/1.htm">thread</a> <div>【情况一】：　　 java.lang.OutOfMemoryError: Java heap space：这种是java堆内存不够，一个原因是真不够，另一个原因是程序中有死循环；　　如果是java堆内存不够的话，可以通过调整JVM下面的配置来解决：　　<jvm-arg>-Xms3062m</jvm-arg> 　　<jvm-arg>-Xmx</div> </li> <li><a href="/article/3800.htm" title="Manifest.permission_group权限组" target="_blank">Manifest.permission_group权限组</a> <span class="text-muted">阿尔萨斯</span> <a class="tag" taget="_blank" href="/search/Permission/1.htm">Permission</a> <div>结构继承关系 public static final class Manifest.permission_group extends Object java.lang.Object android. Manifest.permission_group 常量 ACCOUNTS 直接通过统计管理器访问管理的统计 COST_MONEY可以用来让用户花钱但不需要通过与他们直接牵涉的权限 D</div> </li> </ul> </div> </div> </div> <div> <div class="container"> <div class="indexes"> <strong>按字母分类：</strong> <a href="/tags/A/1.htm" target="_blank">A</a><a href="/tags/B/1.htm" target="_blank">B</a><a href="/tags/C/1.htm" target="_blank">C</a><a href="/tags/D/1.htm" target="_blank">D</a><a href="/tags/E/1.htm" target="_blank">E</a><a href="/tags/F/1.htm" target="_blank">F</a><a href="/tags/G/1.htm" target="_blank">G</a><a href="/tags/H/1.htm" target="_blank">H</a><a href="/tags/I/1.htm" target="_blank">I</a><a href="/tags/J/1.htm" target="_blank">J</a><a href="/tags/K/1.htm" target="_blank">K</a><a href="/tags/L/1.htm" target="_blank">L</a><a href="/tags/M/1.htm" target="_blank">M</a><a href="/tags/N/1.htm" target="_blank">N</a><a href="/tags/O/1.htm" target="_blank">O</a><a href="/tags/P/1.htm" target="_blank">P</a><a href="/tags/Q/1.htm" target="_blank">Q</a><a href="/tags/R/1.htm" target="_blank">R</a><a href="/tags/S/1.htm" target="_blank">S</a><a href="/tags/T/1.htm" target="_blank">T</a><a href="/tags/U/1.htm" target="_blank">U</a><a href="/tags/V/1.htm" target="_blank">V</a><a href="/tags/W/1.htm" target="_blank">W</a><a href="/tags/X/1.htm" target="_blank">X</a><a href="/tags/Y/1.htm" target="_blank">Y</a><a href="/tags/Z/1.htm" target="_blank">Z</a><a href="/tags/0/1.htm" target="_blank">其他</a> </div> </div> </div> <footer id="footer" class="mb30 mt30"> <div class="container"> <div class="footBglm"> <a target="_blank" href="/">首页</a> - <a target="_blank" href="/custom/about.htm">关于我们</a> - <a target="_blank" href="/search/Java/1.htm">站内搜索</a> - <a target="_blank" href="/sitemap.txt">Sitemap</a> - <a target="_blank" href="/custom/delete.htm">侵权投诉</a> </div> <div class="copyright">版权所有 IT知识库 CopyRight © 2000-2050 E-COM-NET.COM , All Rights Reserved.  </div> </div> </footer>  <script type="text/javascript" src="/static/syntaxhighlighter/scripts/shCore.js"></script> <script type="text/javascript" src="/static/syntaxhighlighter/scripts/shLegacy.js"></script> <script type="text/javascript" src="/static/syntaxhighlighter/scripts/shAutoloader.js"></script> <link type="text/css" rel="stylesheet" href="/static/syntaxhighlighter/styles/shCoreDefault.css"/> <script type="text/javascript" src="/static/syntaxhighlighter/src/my_start_1.js"></script> </body> </html>