常见样式问题八、对行内元素、line-height、vertical-align的理解

一、行内元素基本术语

匿名文本：所有未被包含在行内元素的字符串。

内容区：非替换元素中，内容区是元素中各字符的em框描述的；替换元素中，内容区是指元素的固有高度再加上可能有的外边距、边框、或内边距。

em框：em框在字体中定义，也称字符框。em框不一定指示字体中字符建立的任何边界。有可能小于或者大于字符。它指示如果没有额外行间距设置字体时基线间的距离。某种字体的字符有可能比默认的基线间距离要高（即字符比顶线和底线间距离要高）。出于这种原因，定义字体时可能要求所有字符都小于其em方框，很多字体就是这样做的。font-size的作用是为给定字体提供一个大小，而不能保证实际显示的字符就是这种大小。（详细可看《CSS权威指南》第五章的“字体大小”）。

行间距：line-height与font-size的差值。差值分两半，分别应用到内容区的顶部和底部。（疑问：这句话来自CSS权威指南，但实际应用中，行间距应该是等于line-height与内容区的高度的差值吧？内容区高度经常是大于字体的。）

行内框：行内框 = 内容区 + 行间距。非替换元素，行内框高度 = line-height；替换元素，行内框 = 内容区高度（固有高度+外边距、边框、内边距），因为行间距应用不到替换元素。

行框：包含该行中出现的行内框的最高点和最低点的最小框。 

em框、内容区、字体关系梳理：从上面可以看出非替换元素中，em框高度等于内容区的高度，但内容区宽度是由各字符的em框组成的。font-size可能大于或小于em框的高度，很多字体font-size是小于em框的高

二、基线、顶线、中线、底线等概念

基线是在英文字母中用到的一个概念，我们刚学英语的时使用的那个英语本子每行有四条线，其中底部蓝色的线就是基线。是小写英文字符x的下沿。

如下图所示，基线并不是汉字文字的下沿，而是字符x的下沿。

把基线、中线、顶线、底线抽离出来，如下图所示：

（此图来源于张鑫旭的博客）

基线：小写字符x的下沿；

中线：小写字符x的中心；

顶线：文字的上沿的最高位置（包括英文、汉字等）；

底线：文字的下沿的最低位置（包括英文、汉字等）。

em框的高度：等于底线和顶线之间的距离。

内容区高度：等于底线和顶线之间的距离。

行内框高度：等于line-height。line-height = 顶线和底线的距离 + 行间距。

三、line-height

line-height，行高，是用于设置行内元素的高度。行高定义为等于基线和基线之间的距离。虽然说行高定义上是基线到基线的距离，但实际应用有所不同。

实际应用中，行高 = 内容区高度  + 行间距 。行间距一分为2，将其一半分别应用到内容区的顶部和底部，如下图所示：

四、vertical-align

vertical-align语法：

vertical-align: baseline | sub | super | text-top | text-bottom | middle | top | bottom |  | 

1、行内元素

1）行内元素vertical-align的取值

对于行内元素来说，vertical-align大部分取值是针对父元素的：

1、baseline：
元素基线与父元素的基线对齐。
对于一些 可替换元素，比如  ， HTML标准没有说明它的基线，这意味着对其使用这个关键字，各浏览器表现可能不一样。
2、sub：
元素基线与父元素的下标基线对齐。（上标基线，下标基线都没有严格定义，只是基线上调或下调一定距离）
3、super：
元素基线与父元素的上标基线对齐。
4、text-top：
元素顶端与父元素字体的顶端对齐。
5、text-bottom：
元素底端与父元素字体的底端对齐。
6、middle：
元素中垂线与父元素的基线加上小写x一半的高度值对齐。（行框的多个行内元素如果有不同字号，会疑惑究竟指的是哪个字号的x。个人理解，x是元素本身的x。相当于元素中垂线与调整前元素x的一半高度应对齐）
7、<length>：
元素基线超过父元素的基线指定高度。可以取负值。
8、<percentage>：
同 <length> , 百分比相对于 line-height 。</code></pre> 
  <p>行内元素只有下面两个是对于整行来说。</p> 
  <pre><code class="language-plain">9、top：
 元素及其后代的顶端与整行的顶端对齐。
10、bottom：
元素及其后代的底端与整行的底端对齐。</code></pre> 
  <p>如果元素没有基线baseline，则以它的外边距的下边缘为基线。</p> 
  <p>如果同一行内的字体、字号都一样，行间距为0，vertical-align设置为text-top、text-bottom、bottom、top<span style="font-family:'Open Sans', arial, 'x-locale-body', sans-serif;">和baseline效果一样；</span></p> 
  <p style="font-family:'Open Sans', arial, 'x-locale-body', sans-serif;">如果同一行内的字体、字号、行间距都一样，但行间距不为0， vertical-align设置bottom、top和baseline效果一样。</p> 
  <p style="font-family:'Open Sans', arial, 'x-locale-body', sans-serif;"></p> 
  <p><span><strong><span style="color:#000000;">2）行内元素vertical-align使用案例</span></strong></span></p> 
  <p>代码如下：</p> 
  <pre><code class="language-html"><style>
span{font-size:14px;}
span + span{margin-left:-5px;}
.span1{line-height: 50px}
.span2{line-height: 40px}
.red{background:red;}
.pink{background:pink;}
.span1_1{vertical-align:text-bottom;}
.span1_2{vertical-align:bottom;}
</style>
1、行内元素1的vertical-align:text-bottom<br/>
<div>
<span class='span1 span1_1 red'>行内元素1</span>
<span class='span2 pink'>行内元素2</span>
</div>
2、行内元素1的vertical-align:text-bottom<br/>
<div>
<span class='span1 span1_2 red'>行内元素1</span>
<span class='span2 pink'>行内元素2</span>
</div></code></pre> 
  <p>效果如下图所示，图中的蓝框是元素的行内框。<br>当行内元素1设置为vertical-align:text-bottom，是它的行内框底部和行框的文字底部是对齐的。<br>当行内元素1设置为vertical-align:bottom，是它的行内框底部和行框的底部是对齐的。<br></p> 
  <p><a href="http://img.e-com-net.com/image/info8/e0c2557563d24811bc4cf43bb797fb2c.gif" target="_blank"><img src="http://img.e-com-net.com/image/info8/e0c2557563d24811bc4cf43bb797fb2c.gif" alt="常见样式问题八、对行内元素、line-height、vertical-align的理解_第4张图片" width="342" height="171" style="border:1px solid black;"></a><br></p> 
  <p><strong>3）行内元素vertical-align对行框及行内框影响的规律总结</strong></p> 
  <p>当一行有多个行内元素时：</p> 
  <p>首先，根据行内元素的行高和内容，确定行内框。将行内框按基线对齐后，根据最高的行内框和最低的行内框可以确定行框。行框的底部、顶部、文字底部、文字顶部等都可以确定。</p> 
  <p>然后，从左到右（按文本流方向）处理vertical-align不是baseline的元素。首先调整第一个行内元素。假设第一个行内元素是vertical-align是text-bottom，那么将移动第一个行内框的位置，直到行内框的位置与行框文字底部对齐。</p> 
  <p>若调整完的行内框超出行框，将会调整行框的大小和位置，以能容下行内框。如果超出行框上方Npx，那么行框上方增加Npx，并将行框往下移动Npx。这时候行框的基线、底部、顶部、文字底部、文字顶部的位置不会重新计算一遍，跟行框一样，下移Npx。如果是超出行框下方，行框的这些位置还是保持不变。</p> 
  <p>最后，按照调整第一个的方法调整第二个，第三个，...即可。</p> 
  <p>案例代码如下：</p> 
  <pre><code class="language-html"><style>
body{font-size:14px;}
span + span{margin-left:-5px;}
.span1{line-height: 50px; background:red;}
.span2{line-height: 30px; background:pink; }
.span3{line-height:1; background:orange;}
.align-text-top{vertical-align:text-top}
.align-text-bottom{vertical-align:text-bottom;}
</style>
<div>
<span class='span1'>行内元素1</span>
<span class='span2'>行内元素2</span>
<span class='span3'>行内元素3</span>
</div>
<div>
<span class='span1 align-text-bottom'>行内元素1</span>
<span class='span2 align-text-top'>行内元素2</span>
<span class='span3'>行内元素3</span>
</div></code></pre> 
  <p>显示效果如下图。图中蓝色框是各个行内元素的行内框。</p> 
  <p>第一行的元素是基线对齐，行框高是50px； </p> 
  <p>第二行的行框高是61px。首先“行内元素1”上移后超出行框高，导致行框位置和大小发生变化。行框上方增加11px，增加后，行框下移11px，基线、中线、底线、顶线也下移11px。接下来“行内元素2”设置对齐方式为text-top，是以下移后的顶线作为参照。</p> 
  <p><a href="http://img.e-com-net.com/image/info8/acc9b460a880487794752bca1b38872f.gif" target="_blank"><img src="http://img.e-com-net.com/image/info8/acc9b460a880487794752bca1b38872f.gif" alt="常见样式问题八、对行内元素、line-height、vertical-align的理解_第5张图片" width="297" height="154" style="border:1px solid black;"></a></p> 
  <p>上面提到设置vertical-align为baseline以外的值，行框可能会变大。其实也有可能调整后，行框高度比原来小。这种情况行框上方减少Npx，然后行框再向上移Npx（包括行框的基线等）。比如同一行元素行高都小于某个元素的字体，将该vertical-align改为middle后可能就会变小。</p> 
  <p>案例代码如下：</p> 
  <pre><code class="language-html"><style>
body{font-size:14px;padding:20px}
.container{border:1px solid black;}
span + span{margin-left:-5px;}
span{line-height:30px;}
.span1{background:red;}
.span3{background:orange;font-size:50px;vertical-align:middle}
</style>
<div class='container'>
<span class='span1'>行内元素1</span>
<span class='span3'>行内元素3</span>
</div></code></pre> 
  <p>显示效果如下图所示，其中“行内元素3”vertical-align是middle：</p> 
  <p><a href="http://img.e-com-net.com/image/info8/727637851e204117b30defaf914f3fd4.gif" target="_blank"><img src="http://img.e-com-net.com/image/info8/727637851e204117b30defaf914f3fd4.gif" alt="" width="633" height="87"></a></p> 
  <p>如果把“行内元素3”vertical-align恢复为baseline，效果如下：</p> 
  <p><a href="http://img.e-com-net.com/image/info8/eebe8758b6084452b62f204a71bea4b4.gif" target="_blank"><img src="http://img.e-com-net.com/image/info8/eebe8758b6084452b62f204a71bea4b4.gif" alt="常见样式问题八、对行内元素、line-height、vertical-align的理解_第6张图片" width="641" height="101" style="border:1px solid black;"></a></p> 
  <p>从上面两张图对比，可以设置vertical-align为middle后，行框被撑大了（行框会影响黑色边框大小）。</p> 
  <p><strong>4）学习过程中遇到的一点疑惑</strong></p> 
  <p>在写测试案例的过程中，碰到对某个元素设置vertical-align:middle。结果感觉元素本身没动，倒是其他没有设置的动了。</p> 
  <p>代码如下：</p> 
  <pre><code class="language-html"><style>
body{font-size:14px;padding:20px}
.container{border:1px solid black;}
span + span{margin-left:-5px;}
.span1{background:red;}
.span2{background:orange;font-size:40px;vertical-align:middle;line-height:60px;}
</style>
<div class='container'>
<span class='span1'>行内元素1</span>
<span class='span2'>行内元素2</span>
</div>
</code></pre> 
  <p>显示效果如下图所示，其中“行内元素2”vertical-align是middle：</p> 
  <p><a href="http://img.e-com-net.com/image/info8/9f7ad4a7386c49118a3e34a7985cd5bd.gif" target="_blank"><img src="http://img.e-com-net.com/image/info8/9f7ad4a7386c49118a3e34a7985cd5bd.gif" alt="" width="611" height="77"></a><br></p> 
  <p></p> 
  <p>如果把“行内元素2”vertical-align恢复为baseline，效果如下：</p> 
  <p><a href="http://img.e-com-net.com/image/info8/81ae3bf8f9ef4fccaabd079fda54cc7d.gif" target="_blank"><img src="http://img.e-com-net.com/image/info8/81ae3bf8f9ef4fccaabd079fda54cc7d.gif" alt="" width="625" height="76"></a></p> 
  <p>视觉上感觉是把“行内元素1“设置为vertical-align：middle，有点难以理解。后来仔细考虑下，是因为要将“行内元素2”的中点和调整前“行内元素2”的x字符中心对齐（x字符中心在元素中心下方）。相当于需要下移“行内元素2”Npx，下移会导致行框上方变低，因此需要再上移行框。所以“行内元素2”相当于没动，而其他元素相当与上调了Npx。</p> 
  <p><strong>2、表格<br>1）表格vertical-align取值</strong><br></p> 
  <pre><code class="language-plain">1、baseline (and sub, super, text-top, text-bottom, <length>, an。d <percentage>)：
与同行单元格的基线对齐。
2、top：
单元格的内边距的上边缘与行的顶端对齐。
3、middle：
单元格垂直居中。
4、bottom：
单元格的内边距的下边缘与行的底端对齐。</code></pre>表格的vertical-align可以取负值。 
  <p><strong>2）表格使用vertical-align案例</strong></p> 
  <p>代码如下：<br></p> 
  <pre><code class="language-html"><style>
table{table-layout:fixed; border-collapse:collapse; border:1px solid black;}
td{width:180px; border:1px solid black; padding:10px; word-break:break-all;}
.firstRow td{vertical-align:top}
.secondRow td{vertical-align:bottom}
.thirdRow td{vertical-align:middle}
.fourRow td{vertical-align:text-bottom}
.fiveRow td{vertical-align:baseline}
</style>
<table >
  <tr class='firstRow'>
    <td>Hi!这是表格第一行的数据。</th>
    <td>第一行</th>
  </tr>
  <tr class='secondRow'>
    <td>Hi!这是表格第二行的数据。</th>
    <td>第二行</th>
  </tr>
  <tr class='thirdRow'>
    <td>Hi!这是表格第三行的数据。</th>
    <td>第三行</th>
  </tr>
  <tr class='fourRow'>
    <td>Hi!这是表格第四行的数据。</th>
    <td>第四行</th>
  </tr>
  <tr class='fiveRow'>
    <td>Hi!这是表格第五行的数据。</th>
    <td>第五行</th>
  </tr>
</table></code></pre> 
  <p>效果如下图所示，从下图可以看出前三个会有不同的效果，text-bottom和baseline其实是一样的效果。</p> 
  <p><a href="http://img.e-com-net.com/image/info8/e47fefa3561a45a080f383e9af48c846.gif" target="_blank"><img src="http://img.e-com-net.com/image/info8/e47fefa3561a45a080f383e9af48c846.gif" alt="常见样式问题八、对行内元素、line-height、vertical-align的理解_第7张图片" width="534" height="323" style="border:1px solid black;"></a><br></p> 
  <p><br></p> 
 </div> 
</div>
                            </div>
                        </div>
                    </div>
                    <!--PC和WAP自适应版-->
                    <div id="SOHUCS" sid="1292635033177235456"></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">
                        <!-- 文章页-右侧1 动态广告位 -->
                        <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>
                        <!-- 文章页-右侧2 动态广告位 -->
                        <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>
                        <!-- 文章页-右侧3 动态广告位 -->
                        <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/1835498925755297792.htm"
                           title="DIV+CSS+JavaScript技术制作网页（旅游主题网页设计与制作）云南大理" target="_blank">DIV+CSS+JavaScript技术制作网页（旅游主题网页设计与制作）云南大理</a>
                        <span class="text-muted">STU学生网页设计</span>
<a class="tag" taget="_blank" href="/search/%E7%BD%91%E9%A1%B5%E8%AE%BE%E8%AE%A1/1.htm">网页设计</a><a class="tag" taget="_blank" href="/search/%E6%9C%9F%E6%9C%AB%E7%BD%91%E9%A1%B5%E4%BD%9C%E4%B8%9A/1.htm">期末网页作业</a><a class="tag" taget="_blank" href="/search/html%E9%9D%99%E6%80%81%E7%BD%91%E9%A1%B5/1.htm">html静态网页</a><a class="tag" taget="_blank" href="/search/html5%E6%9C%9F%E6%9C%AB%E5%A4%A7%E4%BD%9C%E4%B8%9A/1.htm">html5期末大作业</a><a class="tag" taget="_blank" href="/search/%E7%BD%91%E9%A1%B5%E8%AE%BE%E8%AE%A1/1.htm">网页设计</a><a class="tag" taget="_blank" href="/search/web%E5%A4%A7%E4%BD%9C%E4%B8%9A/1.htm">web大作业</a>
                        <div>️精彩专栏推荐作者主页:【进入主页—获取更多源码】web前端期末大作业：【HTML5网页期末作业(1000套)】程序员有趣的告白方式：【HTML七夕情人节表白网页制作(110套)】文章目录二、网站介绍三、网站效果▶️1.视频演示2.图片演示四、网站代码HTML结构代码CSS样式代码五、更多源码二、网站介绍网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。网站程</div>
                    </li>
                    <li><a href="/article/1835496149843275776.htm"
                           title="关于城市旅游的HTML网页设计——(旅游风景云南 5页)HTML+CSS+JavaScript" target="_blank">关于城市旅游的HTML网页设计——(旅游风景云南 5页)HTML+CSS+JavaScript</a>
                        <span class="text-muted">二挡起步</span>
<a class="tag" taget="_blank" href="/search/web%E5%89%8D%E7%AB%AF%E6%9C%9F%E6%9C%AB%E5%A4%A7%E4%BD%9C%E4%B8%9A/1.htm">web前端期末大作业</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</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/%E6%97%85%E6%B8%B8/1.htm">旅游</a><a class="tag" taget="_blank" href="/search/%E9%A3%8E%E6%99%AF/1.htm">风景</a>
                        <div>⛵源码获取文末联系✈Web前端开发技术描述网页设计题材，DIV+CSS布局制作,HTML+CSS网页设计期末课程大作业|游景点介绍|旅游风景区|家乡介绍|等网站的设计与制作|HTML期末大学生网页设计作业，Web大学生网页HTML：结构CSS：样式在操作方面上运用了html5和css3，采用了div+css结构、表单、超链接、浮动、绝对定位、相对定位、字体样式、引用视频等基础知识JavaScrip</div>
                    </li>
                    <li><a href="/article/1835496148601761792.htm"
                           title="HTML网页设计制作大作业（div+css） 云南我的家乡旅游景点 带文字滚动" target="_blank">HTML网页设计制作大作业（div+css） 云南我的家乡旅游景点 带文字滚动</a>
                        <span class="text-muted">二挡起步</span>
<a class="tag" taget="_blank" href="/search/web%E5%89%8D%E7%AB%AF%E6%9C%9F%E6%9C%AB%E5%A4%A7%E4%BD%9C%E4%B8%9A/1.htm">web前端期末大作业</a><a class="tag" taget="_blank" href="/search/web%E8%AE%BE%E8%AE%A1%E7%BD%91%E9%A1%B5%E8%A7%84%E5%88%92%E4%B8%8E%E8%AE%BE%E8%AE%A1/1.htm">web设计网页规划与设计</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><a class="tag" taget="_blank" href="/search/dreamweaver/1.htm">dreamweaver</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a>
                        <div>Web前端开发技术描述网页设计题材，DIV+CSS布局制作,HTML+CSS网页设计期末课程大作业游景点介绍|旅游风景区|家乡介绍|等网站的设计与制作HTML期末大学生网页设计作业HTML：结构CSS：样式在操作方面上运用了html5和css3，采用了div+css结构、表单、超链接、浮动、绝对定位、相对定位、字体样式、引用视频等基础知识JavaScript：做与用户的交互行为文章目录前端学习路线</div>
                    </li>
                    <li><a href="/article/1835493267907637248.htm"
                           title="webpack图片等资源的处理" target="_blank">webpack图片等资源的处理</a>
                        <span class="text-muted">dmengmeng</span>

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

                        <div>动画的基本原理定时器改变对象的属性根据新的属性重新渲染动画functionupdate(context){//更新属性}constticker=newTicker();ticker.tick(update,context);动画的种类1、JavaScript动画操作DOMCanvas2、CSS动画transitionanimation3、SVG动画SMILJS动画的优缺点优点：灵活度、可控性、性能</div>
                    </li>
                    <li><a href="/article/1835362025719558144.htm"
                           title="css2中的透明" target="_blank">css2中的透明</a>
                        <span class="text-muted">琪33</span>

                        <div>.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;}</div>
                    </li>
                    <li><a href="/article/1835359727924637696.htm"
                           title="Nginx从入门到实践(三)" target="_blank">Nginx从入门到实践(三)</a>
                        <span class="text-muted">听你讲故事啊</span>

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

                        <div>1、大家都知道vue是一种单页应用,单页应用就是仅在页面初始化的时候加载相应的html/css/js一单页面加载完成,不会因为用户的操作而进行页面的重新加载或者跳转,用javascript动态的变化html的内容优点:良好的交互体验,用户不需要刷新页面,页面显示流畅,良好的前后端工作分离模式,减轻服务器压力,缺点:不利于SEO,初次加载耗时比较多2、hash模式vue-router默认的是hash</div>
                    </li>
                    <li><a href="/article/1835221779212234752.htm"
                           title="清除 Conda 缓存" target="_blank">清除 Conda 缓存</a>
                        <span class="text-muted">Dmatteratall</span>
<a class="tag" taget="_blank" href="/search/conda/1.htm">conda</a><a class="tag" taget="_blank" href="/search/%E7%BC%93%E5%AD%98/1.htm">缓存</a>
                        <div>清除Conda缓存：cssCopycodecondaclean--allcondaclean--all命令将会清除Conda缓存和临时文件，而不会删除已经安装的软件包和环境。它主要用于清理不必要的缓存和临时文件以释放磁盘空间。</div>
                    </li>
                    <li><a href="/article/1835216109297561600.htm"
                           title="electron多标签页模式更像客户端" target="_blank">electron多标签页模式更像客户端</a>
                        <span class="text-muted">diygwcom</span>
<a class="tag" taget="_blank" href="/search/electron/1.htm">electron</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>Electron多标签页模式是指在Electron框架中实现的类似Web浏览器的多标签页功能。Electron是一个使用Web技术（HTML、CSS和JavaScript）来创建跨平台桌面应用程序的框架。在Electron中实现多标签页模式，通常需要借助一些特定的库或组件，如BrowserView或electron-tabs，或者通过自定义实现。实现方式1.使用BrowserViewBrowser</div>
                    </li>
                    <li><a href="/article/1835186351805394944.htm"
                           title="前端HTML+CSS+JS的入门学习" target="_blank">前端HTML+CSS+JS的入门学习</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/html/1.htm">html</a><a class="tag" taget="_blank" href="/search/css/1.htm">css</a>
                        <div>一.HTMLHTML（HyperTextMarkupLanguage）即超文本标记语言，是用于创建网页和网页应用程序的标准标记语言。它不是一种编程语言，而是一种标记语言，通过一系列的元素（elements）来告诉浏览器如何显示网页上的内容，如文本、图片、链接、表格、列表等。HTML文档由一系列的标签（tags）组成，这些标签告诉浏览器如何显示内容。标签通常成对出现，例如和，其中是开始标签，表示一个</div>
                    </li>
                    <li><a href="/article/1835151269904347136.htm"
                           title="10/24 每周学习总结5" target="_blank">10/24 每周学习总结5</a>
                        <span class="text-muted">木木ainiks</span>
<a class="tag" taget="_blank" href="/search/1024%E7%A8%8B%E5%BA%8F%E5%91%98%E8%8A%82/1.htm">1024程序员节</a>
                        <div>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</div>
                    </li>
                    <li><a href="/article/1835123524155568128.htm"
                           title="HTML5概述" target="_blank">HTML5概述</a>
                        <span class="text-muted">WFIT~SKY</span>
<a class="tag" taget="_blank" href="/search/Web%E5%89%8D%E7%AB%AF/1.htm">Web前端</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><a class="tag" taget="_blank" href="/search/html/1.htm">html</a>
                        <div>1.HTML概述1.1HTML定义HTML超文本标记语言，其中超文本是链接，标记也叫标签（即带尖括号的文本）。1.2HTML基本骨架HTML基本骨架是网页模板。网页的标题网页的内容html：整个网页head：网页头部，存放给浏览器看的代码，例如CSSbody：网页主体，存放给用户看的代码，例如文字、图片title：网页标题1.3HTML关系父子关系（嵌套）兄弟关系（并列）2.HTML开发环境2.1</div>
                    </li>
                    <li><a href="/article/1835109157406076928.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>在CSS中，您可以使用:hover伪类来实现鼠标悬停效果。:hover伪类会在用户将鼠标悬停在选择器所匹配的元素上时应用指定的样式。下面是一个简单的例子，展示了如何在鼠标悬停时改变文本颜色和背景颜色：MouseHoverExample.hover-effect{color:black;background-color:white;padding:10px;text-align:center;}.h</div>
                    </li>
                    <li><a href="/article/1835091010678517760.htm"
                           title="js的书写位置和css的书写位置的区别？为什么要这样写？" target="_blank">js的书写位置和css的书写位置的区别？为什么要这样写？</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/css/1.htm">css</a><a class="tag" taget="_blank" href="/search/%E5%BC%80%E5%8F%91%E8%AF%AD%E8%A8%80/1.htm">开发语言</a>
                        <div>JavaScript和CSS的书写位置有以下区别：CSS通常写在标签中，或者在外部样式表文件中（）。CSS主要用于控制页面的视觉样式和布局，通常在HTML文件的部分引入，以确保在页面渲染时样式已经加载完毕，从而避免样式闪烁。JavaScript通常写在标签中，或者在外部脚本文件中（）。JavaScript用于添加页面的动态行为和交互。一般建议将JavaScript放在HTML文件的末尾（标签之前）</div>
                    </li>
                    <li><a href="/article/1835048766864977920.htm"
                           title="【H2O2|全栈】关于CSS（3）CSS基础（三）" target="_blank">【H2O2|全栈】关于CSS（3）CSS基础（三）</a>
                        <span class="text-muted">过期的H2O2</span>
<a class="tag" taget="_blank" href="/search/%E3%80%90H2O2%E3%80%91CSS%E5%85%A5%E9%97%A8/1.htm">【H2O2】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>目录CSS基础知识前言准备工作盒模型概念内容的宽高displaypaddingborderborder-widthborder-styleborder-colormargin预告和回顾后话CSS基础知识前言本系列博客将分享层叠样式表（CSS）有关的知识点。作为本系列的第三篇，本博客将分享盒模型以及页面布局有关的知识点。不是专业的科普博主，主打一个分享知识，写的不好，多多包涵（哈哈）。准备工作软件：</div>
                    </li>
                    <li><a href="/article/1835010195202338816.htm"
                           title="css鼠标移上去向上移动,css3鼠标移动图片上移效果" target="_blank">css鼠标移上去向上移动,css3鼠标移动图片上移效果</a>
                        <span class="text-muted">yo xiba</span>
<a class="tag" taget="_blank" href="/search/css%E9%BC%A0%E6%A0%87%E7%A7%BB%E4%B8%8A%E5%8E%BB%E5%90%91%E4%B8%8A%E7%A7%BB%E5%8A%A8/1.htm">css鼠标移上去向上移动</a>
                        <div>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:</div>
                    </li>
                    <li><a href="/article/1835002124283506688.htm"
                           title="css3实现鼠标放到图标上自动切换图标" target="_blank">css3实现鼠标放到图标上自动切换图标</a>
                        <span class="text-muted">黄丫丫07</span>
<a class="tag" taget="_blank" href="/search/css/1.htm">css</a><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>作业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;}</div>
                    </li>
                    <li><a href="/article/1835001746208944128.htm"
                           title="CSS实现鼠标移动到购物车显示详情" target="_blank">CSS实现鼠标移动到购物车显示详情</a>
                        <span class="text-muted">AsiaFT.</span>
<a class="tag" taget="_blank" href="/search/css/1.htm">css</a><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>需求：鼠标滑动到购物车时，购物车下面显示购物车详情信息解析：清除所有默认样式：{margin:0;padding:0;}2.CSS3新增属性：box-sizing:border-box;这个属性基本盒子都增加该属性；代码：鼠标划过显示购物车详情/*清除所有默认样式*/*{margin:0;padding:0;}.shoppingcart{/*css3新增属性，控制WIDTH和HEIGHT属性是盒子</div>
                    </li>
                    <li><a href="/article/1834993298238959616.htm"
                           title="基于HTML+JS+CSS+Echarts实现的设备环境监测可视化平台前端整套模板" target="_blank">基于HTML+JS+CSS+Echarts实现的设备环境监测可视化平台前端整套模板</a>
                        <span class="text-muted">abments</span>
<a class="tag" taget="_blank" href="/search/%E5%AE%9E%E7%94%A8%E5%B0%8F%E5%B7%A5%E5%85%B7/1.htm">实用小工具</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><a class="tag" taget="_blank" href="/search/html/1.htm">html</a>
                        <div>效果图基于HTML+JS+CSS+Echarts实现的设备环境监测可视化平台前端整套模板。可用过修改源码快速完成需求。源码结构下载地址</div>
                    </li>
                    <li><a href="/article/1834962276646481920.htm"
                           title="unocss 一直热更新打印[vite] hot updated: /__uno.css" target="_blank">unocss 一直热更新打印[vite] hot updated: /__uno.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/css3/1.htm">css3</a><a class="tag" taget="_blank" href="/search/vue/1.htm">vue</a>
                        <div>控制台持续打印了几千条这条信息，页面逐渐卡死client.ts:450[vite]hotupdated:/__uno.css找出的原因是：依赖出问题了，重新安装unocss，执行命令npmiunocss后修复。但奇怪的是，删除node_modules重新全部安装依赖却不能修复，tmd。还有一种解决方法是切换分支，切去其它分支，再切回来，也不会再打印了。一开始还怀疑了是哪里的unocss类名一直在监</div>
                    </li>
                                <li><a href="/article/47.htm"
                                       title="jdk tomcat 环境变量配置" target="_blank">jdk tomcat 环境变量配置</a>
                                    <span class="text-muted">Array_06</span>
<a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/jdk/1.htm">jdk</a><a class="tag" taget="_blank" href="/search/tomcat/1.htm">tomcat</a>
                                    <div>Win7 下如何配置java环境变量 
 
1。准备jdk包，win7系统，tomcat安装包（均上网下载即可） 
2。进行对jdk的安装，尽量为默认路径（但要记住啊！！以防以后配置用。。。） 
3。分别配置高级环境变量。 
   电脑-->右击属性-->高级环境变量-->环境变量。 
 
 
分别配置 : 
 
path   
 &nbs</div>
                                </li>
                                <li><a href="/article/174.htm"
                                       title="Spring调SDK包报java.lang.NoSuchFieldError错误" target="_blank">Spring调SDK包报java.lang.NoSuchFieldError错误</a>
                                    <span class="text-muted">bijian1013</span>
<a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/spring/1.htm">spring</a>
                                    <div>        在工作中调另一个系统的SDK包，出现如下java.lang.NoSuchFieldError错误。 
org.springframework.web.util.NestedServletException: Handler processing failed; nested exception is java.l</div>
                                </li>
                                <li><a href="/article/301.htm"
                                       title="LeetCode[位运算] - #136 数组中的单一数" target="_blank">LeetCode[位运算] - #136 数组中的单一数</a>
                                    <span class="text-muted">Cwind</span>
<a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/%E9%A2%98%E8%A7%A3/1.htm">题解</a><a class="tag" taget="_blank" href="/search/%E4%BD%8D%E8%BF%90%E7%AE%97/1.htm">位运算</a><a class="tag" taget="_blank" href="/search/LeetCode/1.htm">LeetCode</a><a class="tag" taget="_blank" href="/search/Algorithm/1.htm">Algorithm</a>
                                    <div>原题链接：#136 Single Number 
要求： 
给定一个整型数组，其中除了一个元素之外，每个元素都出现两次。找出这个元素 
注意：算法的时间复杂度应为O(n)，最好不使用额外的内存空间 
难度：中等 
分析： 
题目限定了线性的时间复杂度，同时不使用额外的空间，即要求只遍历数组一遍得出结果。由于异或运算 n XOR n = 0, n XOR 0 = n，故将数组中的每个元素进</div>
                                </li>
                                <li><a href="/article/428.htm"
                                       title="qq登陆界面开发" target="_blank">qq登陆界面开发</a>
                                    <span class="text-muted">15700786134</span>
<a class="tag" taget="_blank" href="/search/qq/1.htm">qq</a>
                                    <div>今天我们来开发一个qq登陆界面，首先写一个界面程序，一个界面首先是一个Frame对象，即是一个窗体。然后在这个窗体上放置其他组件。代码如下： 
public class First {         public void initul(){        jf=ne</div>
                                </li>
                                <li><a href="/article/555.htm"
                                       title="Linux的程序包管理器RPM" target="_blank">Linux的程序包管理器RPM</a>
                                    <span class="text-muted">被触发</span>
<a class="tag" taget="_blank" href="/search/linux/1.htm">linux</a>
                                    <div>在早期我们使用源代码的方式来安装软件时，都需要先把源程序代码编译成可执行的二进制安装程序，然后进行安装。这就意味着每次安装软件都需要经过预处理-->编译-->汇编-->链接-->生成安装文件--> 安装，这个复杂而艰辛的过程。为简化安装步骤，便于广大用户的安装部署程序，程序提供商就在特定的系统上面编译好相关程序的安装文件并进行打包，提供给大家下载，我们只需要根据自己的</div>
                                </li>
                                <li><a href="/article/682.htm"
                                       title="socket通信遇到EOFException" target="_blank">socket通信遇到EOFException</a>
                                    <span class="text-muted">肆无忌惮_</span>
<a class="tag" taget="_blank" href="/search/EOFException/1.htm">EOFException</a>
                                    <div>java.io.EOFException 
at java.io.ObjectInputStream$PeekInputStream.readFully(ObjectInputStream.java:2281) 
at java.io.ObjectInputStream$BlockDataInputStream.readShort(ObjectInputStream.java:</div>
                                </li>
                                <li><a href="/article/809.htm"
                                       title="基于spring的web项目定时操作" target="_blank">基于spring的web项目定时操作</a>
                                    <span class="text-muted">知了ing</span>
<a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/Web/1.htm">Web</a>
                                    <div>废话不多说，直接上代码，很简单 配置一下项目启动就行 
1，web.xml 
 

<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
	xmlns="h</div>
                                </li>
                                <li><a href="/article/936.htm"
                                       title="树形结构的数据库表Schema设计" target="_blank">树形结构的数据库表Schema设计</a>
                                    <span class="text-muted">矮蛋蛋</span>
<a class="tag" taget="_blank" href="/search/schema/1.htm">schema</a>
                                    <div>原文地址： 
http://blog.csdn.net/MONKEY_D_MENG/article/details/6647488 
 
 
    程序设计过程中，我们常常用树形结构来表征某些数据的关联关系，如企业上下级部门、栏目结构、商品分类等等，通常而言，这些树状结构需要借助于数据库完成持久化。然而目前的各种基于关系的数据库，都是以二维表的形式记录存储数据信息，</div>
                                </li>
                                <li><a href="/article/1063.htm"
                                       title="maven将jar包和源码一起打包到本地仓库" target="_blank">maven将jar包和源码一起打包到本地仓库</a>
                                    <span class="text-muted">alleni123</span>
<a class="tag" taget="_blank" href="/search/maven/1.htm">maven</a>
                                    <div>http://stackoverflow.com/questions/4031987/how-to-upload-sources-to-local-maven-repository 
 
 
 
<project>
  ...
  <build>
    <plugins>
      <plugin>
        <groupI</div>
                                </li>
                                <li><a href="/article/1190.htm"
                                       title="java IO操作 与 File 获取文件或文件夹的大小，可读，等属性！！！" target="_blank">java IO操作 与 File 获取文件或文件夹的大小，可读，等属性！！！</a>
                                    <span class="text-muted">百合不是茶</span>

                                    <div>类 File 
File是指文件和目录路径名的抽象表示形式。 
1，何为文件： 
标准文件（txt doc mp3...） 
目录文件（文件夹） 
虚拟内存文件 
  
2，File类中有可以创建文件的 createNewFile（）方法,在创建新文件的时候需要try{} catch(）{}因为可能会抛出异常；也有可以判断文件是否是一个标准文件的方法isFile();这些防抖都</div>
                                </li>
                                <li><a href="/article/1317.htm"
                                       title="Spring注入有继承关系的类（2）" target="_blank">Spring注入有继承关系的类（2）</a>
                                    <span class="text-muted">bijian1013</span>
<a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/spring/1.htm">spring</a>
                                    <div>被注入类的父类有相应的属性，Spring可以直接注入相应的属性，如下所例：1.AClass类 
package com.bijian.spring.test4;

public class AClass {

    private String a;
    private String b;
   
    public String getA() {
        retu</div>
                                </li>
                                <li><a href="/article/1444.htm"
                                       title="30岁转型期你能否成为成功人士" target="_blank">30岁转型期你能否成为成功人士</a>
                                    <span class="text-muted">bijian1013</span>
<a class="tag" taget="_blank" href="/search/%E6%88%90%E9%95%BF/1.htm">成长</a><a class="tag" taget="_blank" href="/search/%E5%8A%B1%E5%BF%97/1.htm">励志</a>
                                    <div>        很多人由于年轻时走了弯路，到了30岁一事无成，这样的例子大有人在。但同样也有一些人，整个职业生涯都发展得很优秀，到了30岁已经成为职场的精英阶层。由于做猎头的原因，我们接触很多30岁左右的经理人，发现他们在职业发展道路上往往有很多致命的问题。在30岁之前，他们的职业生涯表现很优秀，但从30岁到40岁这一段，很多人</div>
                                </li>
                                <li><a href="/article/1571.htm"
                                       title="【Velocity四】Velocity与Java互操作" target="_blank">【Velocity四】Velocity与Java互操作</a>
                                    <span class="text-muted">bit1129</span>
<a class="tag" taget="_blank" href="/search/velocity/1.htm">velocity</a>
                                    <div>Velocity出现的目的用于简化基于MVC的web应用开发，用于替代JSP标签技术，那么Velocity如何访问Java代码.本篇继续以Velocity三http://bit1129.iteye.com/blog/2106142中的例子为基础， 
     POJO 
   
package com.tom.servlets;

public</div>
                                </li>
                                <li><a href="/article/1698.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数据倾斜问题 
  
 
 操作：join,group by,count distinct 
 现象：任务进度长时间维持在99%（或100%），查看任务监控页面，发现只有少量（1个或几个）reduce子任务未完成；查看未完成的子任务，可以看到本地读写数据量积累非常大，通常超过10GB可以认定为发生数据倾斜。 
 原因：key分布不均匀 
 倾斜度衡量：平均记录数超过50w且</div>
                                </li>
                                <li><a href="/article/1825.htm"
                                       title="在nginx中集成lua脚本：添加自定义Http头，封IP等" target="_blank">在nginx中集成lua脚本：添加自定义Http头，封IP等</a>
                                    <span class="text-muted">ronin47</span>
<a class="tag" taget="_blank" href="/search/nginx+lua+csrf/1.htm">nginx lua csrf</a>
                                    <div>Lua是一个可以嵌入到Nginx配置文件中的动态脚本语言，从而可以在Nginx请求处理的任何阶段执行各种Lua代码。刚开始我们只是用Lua 把请求路由到后端服务器，但是它对我们架构的作用超出了我们的预期。下面就讲讲我们所做的工作。 强制搜索引擎只索引mixlr.com 
Google把子域名当作完全独立的网站，我们不希望爬虫抓取子域名的页面，降低我们的Page rank。 
location /{</div>
                                </li>
                                <li><a href="/article/1952.htm"
                                       title="java-3.求子数组的最大和" target="_blank">java-3.求子数组的最大和</a>
                                    <span class="text-muted">bylijinnan</span>
<a class="tag" taget="_blank" href="/search/java/1.htm">java</a>
                                    <div>package beautyOfCoding;


public class MaxSubArraySum {

	/**
	 * 3.求子数组的最大和
题目描述：
输入一个整形数组，数组里有正数也有负数。
数组中连续的一个或多个整数组成一个子数组，每个子数组都有一个和。
求所有子数组的和的最大值。要求时间复杂度为O(n)。
例如输入的数组为1, -2, 3, 10, -4,</div>
                                </li>
                                <li><a href="/article/2079.htm"
                                       title="Netty源码学习-FileRegion" target="_blank">Netty源码学习-FileRegion</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/netty/1.htm">netty</a>
                                    <div>今天看org.jboss.netty.example.http.file.HttpStaticFileServerHandler.java 
可以直接往channel里面写入一个FileRegion对象，而不需要相应的encoder： 
 


		//pipeline（没有诸如“FileRegionEncoder”的handler）：
		public ChannelPipeline ge</div>
                                </li>
                                <li><a href="/article/2206.htm"
                                       title="使用ZeroClipboard解决跨浏览器复制到剪贴板的问题" target="_blank">使用ZeroClipboard解决跨浏览器复制到剪贴板的问题</a>
                                    <span class="text-muted">cngolon</span>
<a class="tag" taget="_blank" href="/search/%E8%B7%A8%E6%B5%8F%E8%A7%88%E5%99%A8/1.htm">跨浏览器</a><a class="tag" taget="_blank" href="/search/%E5%A4%8D%E5%88%B6%E5%88%B0%E7%B2%98%E8%B4%B4%E6%9D%BF/1.htm">复制到粘贴板</a><a class="tag" taget="_blank" href="/search/Zero+Clipboard/1.htm">Zero Clipboard</a>
                                    <div>Zero Clipboard的实现原理 
Zero Clipboard 利用透明的Flash让其漂浮在复制按钮之上，这样其实点击的不是按钮而是 Flash ，这样将需要的内容传入Flash，再通过Flash的复制功能把传入的内容复制到剪贴板。 
Zero Clipboard的安装方法 
首先需要下载 Zero Clipboard的压缩包，解压后把文件夹中两个文件：ZeroClipboard.js </div>
                                </li>
                                <li><a href="/article/2333.htm"
                                       title="单例模式" target="_blank">单例模式</a>
                                    <span class="text-muted">cuishikuan</span>
<a class="tag" taget="_blank" href="/search/%E5%8D%95%E4%BE%8B%E6%A8%A1%E5%BC%8F/1.htm">单例模式</a>
                                    <div>第一种（懒汉，线程不安全）： 
public class Singleton {   2     private static Singleton instance;   3     pri</div>
                                </li>
                                <li><a href="/article/2460.htm"
                                       title="spring+websocket的使用" target="_blank">spring+websocket的使用</a>
                                    <span class="text-muted">dalan_123</span>

                                    <div>一、spring配置文件 
<?xml version="1.0" encoding="UTF-8"?><beans xmlns="http://www.springframework.org/schema/beans"    xmlns:xsi="http://www.w3.or</div>
                                </li>
                                <li><a href="/article/2587.htm"
                                       title="细节问题：ZEROFILL的用法范围。" target="_blank">细节问题：ZEROFILL的用法范围。</a>
                                    <span class="text-muted">dcj3sjt126com</span>
<a class="tag" taget="_blank" href="/search/mysql/1.htm">mysql</a>
                                    <div>   1、zerofill把月份中的一位数字比如1，2，3等加前导0 
 
      
mysql> CREATE TABLE t1 (year YEAR(4), month INT(2) UNSIGNED ZEROFILL,    -> day</div>
                                </li>
                                <li><a href="/article/2714.htm"
                                       title="Android开发10——Activity的跳转与传值" target="_blank">Android开发10——Activity的跳转与传值</a>
                                    <span class="text-muted">dcj3sjt126com</span>
<a class="tag" taget="_blank" href="/search/Android%E5%BC%80%E5%8F%91/1.htm">Android开发</a>
                                    <div>Activity跳转与传值，主要是通过Intent类，Intent的作用是激活组件和附带数据。 
  
一、Activity跳转 
方法一Intent intent = new Intent(A.this, B.class); startActivity(intent) 
  
方法二Intent intent = new Intent();intent.setCla</div>
                                </li>
                                <li><a href="/article/2841.htm"
                                       title="jdbc 得到表结构、主键" target="_blank">jdbc 得到表结构、主键</a>
                                    <span class="text-muted">eksliang</span>
<a class="tag" taget="_blank" href="/search/jdbc+%E5%BE%97%E5%88%B0%E8%A1%A8%E7%BB%93%E6%9E%84%E3%80%81%E4%B8%BB%E9%94%AE/1.htm">jdbc 得到表结构、主键</a>
                                    <div>转自博客：http://blog.csdn.net/ocean1010/article/details/7266042 
假设有个con DatabaseMetaData dbmd = con.getMetaData(); rs = dbmd.getColumns(con.getCatalog(), schema, tableName, null); rs.getSt</div>
                                </li>
                                <li><a href="/article/2968.htm"
                                       title="Android 应用程序开关GPS" target="_blank">Android 应用程序开关GPS</a>
                                    <span class="text-muted">gqdy365</span>
<a class="tag" taget="_blank" href="/search/android/1.htm">android</a>
                                    <div>要在应用程序中操作GPS开关需要权限： 
 

<uses-permission android:name="android.permission.WRITE_SECURE_SETTINGS" />
 
但在配置文件中添加此权限之后会报错，无法再eclipse里面正常编译，怎么办？ 
1、方法一：将项目放到Android源码中编译； 
2、方法二：网上有人说cl</div>
                                </li>
                                <li><a href="/article/3095.htm"
                                       title="Windows上调试MapReduce" target="_blank">Windows上调试MapReduce</a>
                                    <span class="text-muted">zhiquanliu</span>
<a class="tag" taget="_blank" href="/search/mapreduce/1.htm">mapreduce</a>
                                    <div>1.下载hadoop2x-eclipse-plugin https://github.com/winghc/hadoop2x-eclipse-plugin.git 把 hadoop2.6.0-eclipse-plugin.jar 放到eclipse plugin 目录中。 2.下载 hadoop2.6_x64_.zip http://dl.iteye.com/topics/download/d2b</div>
                                </li>
                                <li><a href="/article/3222.htm"
                                       title="如何看待一些知名博客推广软文的行为？" target="_blank">如何看待一些知名博客推广软文的行为？</a>
                                    <span class="text-muted">justjavac</span>
<a class="tag" taget="_blank" href="/search/%E5%8D%9A%E5%AE%A2/1.htm">博客</a>
                                    <div>本文来自我在知乎上的一个回答：http://www.zhihu.com/question/23431810/answer/24588621 
互联网上的两种典型心态： 
 
  当初求种像条狗，如今撸完嫌人丑  
  当初搜贴像条犬，如今读完嫌人软  
 
你为啥感觉不舒服呢？ 
难道非得要作者把自己的劳动成果免费给你用，你才舒服？ 
就如同 Google 关闭了 Gooled Reader，那是</div>
                                </li>
                                <li><a href="/article/3349.htm"
                                       title="sql优化总结" target="_blank">sql优化总结</a>
                                    <span class="text-muted">macroli</span>
<a class="tag" taget="_blank" href="/search/sql/1.htm">sql</a>
                                    <div>为了是自己对sql优化有更好的原则性，在这里做一下总结，个人原则如有不对请多多指教。谢谢！ 
  
要知道一个简单的sql语句执行效率，就要有查看方式，一遍更好的进行优化。 
  
一、简单的统计语句执行时间 
declare @d datetime ---定义一个datetime的变量set @d=getdate() ---获取查询语句开始前的时间select user_id</div>
                                </li>
                                <li><a href="/article/3476.htm"
                                       title="Linux Oracle中常遇到的一些问题及命令总结" target="_blank">Linux Oracle中常遇到的一些问题及命令总结</a>
                                    <span class="text-muted">超声波</span>
<a class="tag" taget="_blank" href="/search/oracle/1.htm">oracle</a><a class="tag" taget="_blank" href="/search/linux/1.htm">linux</a>
                                    <div>1.linux更改主机名 
  
(1)#hostname oracledb　　　　临时修改主机名 
(2) vi /etc/sysconfig/network 　　修改hostname 
(3) vi /etc/hosts　　　　　　　　修改IP对应的主机名 
  
2.linux重启oracle实例及监听的各种方法 
（注意操作的顺序应该是先监听，后数据库实例） 
&nbs</div>
                                </li>
                                <li><a href="/article/3603.htm"
                                       title="hive函数大全及使用示例" target="_blank">hive函数大全及使用示例</a>
                                    <span class="text-muted">superlxw1234</span>
<a class="tag" taget="_blank" href="/search/hadoop/1.htm">hadoop</a><a class="tag" taget="_blank" href="/search/hive%E5%87%BD%E6%95%B0/1.htm">hive函数</a>
                                    <div>  
具体说明及示例参 见附件文档。  
  
  
文档目录： 
  
目录 
一、关系运算： 4 
1. 等值比较: = 4 
2. 不等值比较: <> 4 
3. 小于比较: < 4 
4. 小于等于比较: <= 4 
5. 大于比较: > 5 
6. 大于等于比较: >= 5 
7. 空值判断: IS NULL 5</div>
                                </li>
                                <li><a href="/article/3730.htm"
                                       title="Spring 4.2新特性-使用@Order调整配置类加载顺序" target="_blank">Spring 4.2新特性-使用@Order调整配置类加载顺序</a>
                                    <span class="text-muted">wiselyman</span>
<a class="tag" taget="_blank" href="/search/spring+4/1.htm">spring 4</a>
                                    <div>4.1 @Order 
 
 Spring 4.2 利用@Order控制配置类的加载顺序 
  
4.2 演示 
 
 两个演示bean 
 
package com.wisely.spring4_2.order;

public class Demo1Service {

}

 
package com.wisely.spring4_2.order;

public class</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.
<!--            <a href="https://beian.miit.gov.cn/" rel="nofollow" target="_blank">京ICP备09083238号</a><br>-->
        </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>