张文靖同学
张文靖同学

HTML+CSS基础（CSS篇下）

CSS格式化排版

1、字体

我们可以使用css样式为网页中的文字设置字体、字号、颜色等样式属性。下面我们来看一个例子，下面代码实现：为网页中的文字设置字体为宋体。

body{font-family:"宋体";}

这里注意不要设置不常用的字体，因为如果用户本地电脑上如果没有安装你设置的字体，就会显示浏览器默认的字体。（因为用户是否可以看到你设置的字体样式取决于用户本地电脑上是否安装你设置的字体。）
现在一般网页喜欢设置“微软雅黑”，如下代码：
body{font-family:"Microsoft Yahei";}
或
body{font-family:"微软雅黑";}
注意：第一种方法比第二种方法兼容性更好一些。
因为这种字体即美观又可以在客户端安全的显示出来（用户本地一般都是默认安装的）。

2、字号、颜色

可以使用下面代码设置网页中文字的字号为12像素，并把字体颜色设置为#666(灰色)：
body{font-size:12px;color:#666}
拓展：
font-family:设置字体；
font-size:字体大小；
font-weight:bold：设置为粗体样式；
font-style:italic：设置为斜体样式；
text-decoration:underline：文字设置下划线；
text-decoration:line-through：删除线；
text-indent:2em：缩进；（注意：2em的意思就是文字的2倍大小。）
line-height:2em：行高；
word-spacing:50px：单词间距；
letter-spacing:20px:字母间距；
text-align:center：水平居中对齐；

3、粗体

我们还可以使用css样式来改变文字的样式：粗体、斜体、下划线、删除线，可以使用下面代码实现设置文字以粗体样式显示出来。
p span{font-weight:bold;}
在这里大家可以看到，如果想为文字设置粗体是有单独的css样式来实现的，再不用为了实现粗体样式而使用h1-h6或strong标签了。

4、斜体

以下代码可以实现文字以斜体样式在浏览器中显示：
p a{font-style:italic;}

三年级时，我还是一个胆小如鼠的小女孩。

5、下划线

有些情况下想为文字设置为下划线样式，这样可以在视觉上强调文字，可以使用下面代码来实现：
p a{text-decoration:underline;}

三年级时，我还是一个胆小如鼠的小女孩。

6、删除线

如果想在网页上设置删除线怎么办，这个样式在电商网站上常会见到：

HTML+CSS基础（CSS篇下）_第1张图片

上图中的原价上的删除线使用下面代码就可以实现：
.oldPrice{text-decoration:line-through;}

文本修饰拓展：
h1{text-decoration:overline}
underline 定义文本下的一条线。
overline 定义文本上的一条线。
line-through 定义穿过文本下的一条线。
blink 定义闪烁的文本。

7、段落排版--缩进

中文文字中的段前习惯空两个文字的空白，这个特殊的样式可以用下面代码来实现p标签的缩进：
p{text-indent:2em;}
注意：2em的意思就是文字的2倍大小。

8、行间距（行高）

学习一下另一个在段落排版中起重要作用的行间距（行高）属性（line-height），如下代码实现设置段落行间距为1.5倍。
p{line-height:1.5em;}

9、中文字间距、字母间距

中文字间隔、字母间隔设置：
如果想在网页排版中设置文字间隔或者字母间隔就可以使用 letter-spacing 来实现，如下面代码：

h1{
    letter-spacing:50px;
}

注意：这个样式使用在英文单词时，是设置字母与字母之间的间距。

单词间距设置：
如果我想设置英文单词之间的间距呢？可以使用 word-spacing 来实现。如下代码：

h1{
    word-spacing:50px;
}

10 -对齐

想为块状元素中的文本、图片设置居中样式吗？可以使用text-align样式代码，如下代码可实现文本居中显示。

h1{
    text-align:center;
}

CSS盒模型

1、元素分类

在讲解CSS布局之前，我们需要提前知道一些知识，在CSS中，html中的标签元素大体被分为三种不同的类型：块状元素、内联元素(又叫行内元素)和内联块状元素。
常用的块状元素有：

、
、
...
、
    、
      、
      、
、
      、
       、
      
 
 
      常用的内联元素有：
       
 
      、、
      、、、、
       
 
      常用的内联块状元素有：
       、
       
 
      2、块级元素
       
 
      什么是块级元素？在html中
      、 
      、
      、、
         和 
      • 就是块级元素。设置display:block就是将元素显示为块级元素。如下代码就是将内联元素a转换为块状元素，从而使a元素具有块状元素特点。
         a{display:block;}
         块级元素特点：
         1、每个块级元素都从新的一行开始，并且其后的元素也另起一行。（真霸道，一个块级元素独占一行）
         2、元素的高度、宽度、行高以及顶和底边距都可设置。
         3、元素宽度在不设置的情况下，是它本身父容器的100%（和父元素的宽度一致），除非设定一个宽度。
         
 
        3.内联元素
         
 
        在html中，、、就是典型的内联元素（行内元素）（inline）元素。当然块状元素也可以通过代码display:inline将元素设置为内联元素。如下代码就是将块状元素div转换为内联元素，从而使 div 元素具有内联元素特点。
         
 
         div{
     display:inline;
 }

         
 
        内联元素特点：
         1、和其他元素都在一行上；
         2、元素的高度、宽度及顶部和底部边距不可设置；
         3、元素的宽度就是它包含的文字或图片的宽度，不可改变。
         
 
        4.内联块状元素
         
 
        内联块状元素（inline-block）就是同时具备内联元素、块状元素的特点，代码display:inline-block就是将元素设置为内联块状元素。(css2.1新增)，、标签就是这种内联块状标签。
         inline-block 元素特点：
         1、和其他元素都在一行上；
         2、元素的高度、宽度、行高以及顶和底边距都可设置。
         
 
        5、盒模型中的边框
         
 
        盒子模型的边框就是围绕着内容及补白的线，这条线你可以设置它的粗细、样式和颜色(边框三个属性)。
         
 
        如下面代码为 div 来设置边框粗细为 2px、样式为实心的、颜色为红色的边框：
         
 
        div{
    border:2px  solid  red;
}

         
 
        上面是 border 代码的缩写形式，可以分开写：
         
 
        div{
    border-width:2px;
    border-style:solid;
    border-color:red;
}

         
 
        注意：
         1、border-style（边框样式）常见样式有：
         dashed（虚线）| dotted（点线）| solid（实线）。
         2、border-color（边框颜色）中的颜色可设置为十六进制颜色，如:
         border-color:#888;//前面的井号不要忘掉。
         3、border-width（边框宽度）中的宽度也可以设置为：
         thin | medium | thick（但不是很常用），最常还是用象素（px）。
         
 
        现在有一个问题，如果有想为 p 标签单独设置下边框，而其它三边都不设置边框样式怎么办呢？css 样式中允许只为一个方向的边框设置样式：
         div{border-bottom:1px solid red;}
         同样可以使用下面代码实现其它三边(上、右、左)边框的设置：
         border-top:1px solid red;
         border-right:1px solid red;
         border-left:1px solid red;
         
 
        6盒模型--宽度和高度
         
 
        盒模型宽度和高度和我们平常所说的物体的宽度和高度理解是不一样的，css内定义的宽（width）和高（height），指的是填充以里的内容范围。
         因此一个元素实际宽度（盒子的宽度）=左边界+左边框+左填充+内容宽度+右填充+右边框+右边界。
         
         
 
         
  
         
   
         
    HTML+CSS基础（CSS篇下）_第2张图片 
   
         
  
         
  
         
 
         
 
         元素的高度也是同理。 
 
         
 
        7、盒模型--填充(padding)
         
 
        元素内容与边框之间是可以设置距离的，称之为“填充”。填充也可分为上、右、下、左(顺时针)。如下代码：
         div{padding:20px 10px 15px 30px;}
         如果上、右、下、左的填充都为10px;可以这么写
         div{padding:10px;}
         如果上下填充一样为10px，左右一样为20px，可以这么写：
         div{padding:10px 20px;}
         
 
        8、盒模型--边界（margin）
         
 
        元素与其它元素之间的距离可以使用边界（margin）来设置。边界也是可分为上、右、下、左。如下代码：
         div{margin:20px 10px 15px 30px;}
         
 
        css布局模型
         
 
        清楚了CSS 盒模型的基本概念、 盒模型类型， 我们就可以深入探讨网页布局的基本模型了。布局模型与盒模型一样都是 CSS 最基本、 最核心的概念。 但布局模型是建立在盒模型基础之上，又不同于我们常说的 CSS 布局样式或 CSS 布局模板。如果说布局模型是本，那么 CSS 布局模板就是末了，是外在的表现形式。
         CSS包含3种基本的布局模型，用英文概括为：Flow、Layer 和 Float。
         在网页中，元素有三种布局模型：
         1、流动模型（Flow）
         2、浮动模型 (Float)
         3、层模型（Layer）
         
 
        1.流动模型
         
 
        先来说一说流动模型，流动（Flow）是默认的网页布局模式。也就是说网页在默认状态下的 HTML 网页元素都是根据流动模型来分布网页内容的。
         流动布局模型具有2个比较典型的特征：
         第一点，块状元素都会在所处的包含元素内自上而下按顺序垂直延伸分布，因为在默认状态下，块状元素的宽度都为100%。实际上，块状元素都会以行的形式占据位置。
         第二点，在流动模型下，内联元素都会在所处的包含元素内从左到右水平分布显示。（内联元素可不像块状元素这么霸道独占一行）
         右侧代码编辑器中内联元素标签a、span、em、strong都是内联元素。
         
 
        2.浮动模型
         
 
        块状元素这么霸道都是独占一行，如果现在我们想让两个块状元素并排显示，怎么办呢？不要着急，设置元素浮动就可以实现这一愿望。
         任何元素在默认情况下是不能浮动的，但可以用 CSS 定义为浮动，如 div、p、table、img 等元素都可以被定义为浮动。如下代码可以实现两个 div 元素一行显示。
         div{ width:200px; height:200px; border:2px red solid; float:left;}

         效果图
         
         
 
         
  
         
   
         
    HTML+CSS基础（CSS篇下）_第3张图片 
   
         
  
         
  
         
 
         
 
         当然你也可以同时设置两个元素右浮动也可以实现一行显示。 
 
         
 div{ width:200px; height:200px; border:2px red solid; float:right;} 
 
         效果图 
 
         
 
         
  
         
   
         
    HTML+CSS基础（CSS篇下）_第4张图片 
   
         
  
         
  
         
 
         
 
         又有小伙伴问了，设置两个元素一左一右可以实现一行显示吗？当然可以： 
 
         
 
        div{ width:200px; 
  height:200px; 
  border:2px red solid;}
  #div1{float:left;}
  #div2{float:right;}

         
 
        3.层模型
         
 
        如何让html元素在网页中精确定位，就像图像软件PhotoShop中的图层一样可以对每个图层能够精确定位操作。CSS定义了一组定位（positioning）属性来支持层布局模型。
         
 
        层模型有三种形式：
         1、绝对定位(position: absolute)
         2、相对定位(position: relative)
         3、固定定位(position: fixed)
         
 
        绝对定位
         如果想为元素设置层模型中的绝对定位，需要设置position:absolute(表示绝对定位)，这条语句的作用将元素从文档流中拖出来，然后使用left、right、top、bottom属性相对于其最接近的一个具有定位属性的父包含块进行绝对定位。如果不存在这样的包含块，则相对于body元素，即相对于浏览器窗口。
         如下面代码可以实现div元素相对于浏览器窗口向右移动100px，向下移动50px。
         div{ width:200px; height:200px; border:2px red solid; position:absolute; left:100px; top:50px;}

         效果如下：
         
         
 
         
  
         
   
         
    HTML+CSS基础（CSS篇下）_第5张图片 
   
         
  
         
  
         
 
         
 
         
 相对定位 
 
         如果想为元素设置层模型中的相对定位，需要设置position:relative（表示相对定位），它通过left、right、top、bottom属性确定元素在正常文档流中的偏移位置。相对定位完成的过程是首先按static(float)方式生成一个元素(并且元素像层一样浮动了起来)，然后相对于以前的位置移动，移动的方向和幅度由left、right、top、bottom属性确定，偏移前的位置保留不动。 
 
         如下代码实现相对于以前位置向下移动50px，向右移动100px; 
 
         
 
        #div1{
    width:200px;
    height:200px;
    border:2px red solid;
    position:relative;
    left:100px;
    top:50px;
}

        

         
 
        效果图：
         
 
         
 
         
  
         
   
         
    HTML+CSS基础（CSS篇下）_第6张图片 
   
         
  
         
  
         
 
         
 
         
 
        什么叫做“偏移前的位置保留不动”呢？
         大家可以做一个实验，在右侧代码编辑器的19行div标签的后面加入一个span标签，在标并在span标签中写入一些文字。如下代码：
         
 
         
        
偏移前的位置还保留不动，覆盖不了前面的div没有偏移前的位置

         
 
        效果图：
         
         
 
         
  
         
   
         
    HTML+CSS基础（CSS篇下）_第7张图片 
   
         
  
         
  
         
 
         
 
         从效果图中可以明显的看出，虽然div元素相对于以前的位置产生了偏移，但是div元素以前的位置还是保留着，所以后面的span元素是显示在了div元素以前位置的后面。 
 
         
 
        固定定位
         fixed：表示固定定位，与absolute定位类型类似，但它的相对移动的坐标是视图（屏幕内的网页窗口）本身。由于视图本身是固定的，它不会随浏览器窗口的滚动条滚动而变化，除非你在屏幕中移动浏览器窗口的屏幕位置，或改变浏览器窗口的显示大小，因此固定定位的元素会始终位于浏览器窗口内视图的某个位置，不会受文档流动影响，这与background-attachment:fixed;属性功能相同。以下代码可以实现相对于浏览器视图向右移动100px，向下移动50px。并且拖动滚动条时位置固定不变。
         
 
        #div1{
    width:200px;
    height:200px;
    border:2px red solid;
    position:fixed;
    left:100px;
    top:50px;
}

        
文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本。

        

         
 
        Relative与Absolute组合使用
         小伙伴们学习了12-6小节的绝对定位的方法：使用position:absolute可以实现被设置元素相对于浏览器（body）设置定位以后，大家有没有想过可不可以相对于其它元素进行定位呢？答案是肯定的，当然可以。使用position:relative来帮忙，但是必须遵守下面规范：
         1、参照定位的元素必须是相对定位元素的前辈元素：
         
 
        
    
        相对参照元素进行定位
        

        

         
 
        从上面代码可以看出box1是box2的父元素（父元素当然也是前辈元素了）。
         2、参照定位的元素必须加入position:relative;
         
 
        #box1{
    width:200px;
    height:200px;
    position:relative;        
}

         
 
        3、定位元素加入position:absolute，便可以使用top、bottom、left、right来进行偏移定位了。
         
 
        #box2{
    position:absolute;
    top:20px;
    left:30px;         
}

         
 
        这样box2就可以相对于父元素box1定位了（这里注意参照物就可以不是浏览器了，而可以自由设置了）。
         
 
        CSS代码缩写，占用更少的带宽
         
 
        1.盒模型代码简写
         
 
        还记得在讲盒模型时外边距(margin)、内边距(padding)和边框(border)设置上下左右四个方向的边距是按照顺时针方向设置的：上右下左。具体应用在margin和padding的例子如下：
         
 
        margin:10px 15px 12px 14px;
/*上设置为10px、右设置为15px、下设置为12px、左设置为14px*/

         
 
        通常有下面三种缩写方法:
         1、如果top、right、bottom、left的值相同，如下面代码：
         margin:10px 10px 10px 10px;
         可缩写为：
         margin:10px;
         2、如果top和bottom值相同、left和 right的值相同，如下面代码：
         margin:10px 20px 10px 20px;
         可缩写为：
         margin:10px 20px;
         3、如果left和right的值相同，如下面代码：
         margin:10px 20px 30px 20px;
         可缩写为：
         margin:10px 20px 30px;
         注意：padding、border的缩写方法和margin是一致的。
         
 
        2.颜色值缩写
         
 
        关于颜色的css样式也是可以缩写的，当你设置的颜色是16进制的色彩值时，如果每两位的值相同，可以缩写一半。
         例子1：
         p{color:#000000;}
         可以缩写为：
         p{color: #000;}
         例子2：
         p{color: #336699;}
         可以缩写为：
         p{color: #369;}
         
 
        3.字体缩写
         
 
        网页中的字体css样式代码也有他自己的缩写方式，下面是给网页设置字体的代码：
         
 
        body{

   font-style:italic;  //设置字体为斜体
   font-variant:small-caps; //区分大小写，浏览器会显示小型大写字母的字体
   font-weight:bold; //设置粗体
   font-size:12px;  //字号是12像素
   line-height:1.5em;  //行间距（行高）1.5个行倍
   font-family:"宋体",sans-serif;//设置中文字体为宋体，英文字体为sans-serif}
}

         
 
        这么多行的代码其实可以缩写为一句：
         
 
        body{
    font:italic  small-caps  bold  12px/1.5em  "宋体",sans-serif;
    /*前三个顺序没影响可无，后两个顺序固定且必须有*/
}

         
 
        注意：
         1、使用这一简写方式你至少要指定 font-size 和 font-family 属性，其他的属性(如 font-weight、font-style、font-variant、line-height)如未指定将自动使用默认值。
         2、在缩写时 font-size 与 line-height 中间要加入“/”斜扛。
         一般情况下因为对于中文网站，英文还是比较少的，所以下面缩写代码比较常用：
         
 
        body{
    font:12px/1.5em  "宋体",sans-serif;
}

         
 
        只是有字号、行间距、中文字体、英文字体设置。
         
 
        单位和值
         
 
        1.颜色值
         
 
        在网页中的颜色设置是非常重要，有字体颜色（color）、背景颜色（background-color）、边框颜色（border）等，设置颜色的方法也有很多种：
         1、英文命令颜色
         前面几个小节中经常用到的就是这种设置方法：
         p{color:red;}
         2、RGB颜色
         这个与 photoshop 中的 RGB 颜色是一致的，由 R(red)、G(green)、B(blue) 三种颜色的比例来配色。
         p{color:rgb(133,45,200);}
         每一项的值可以是 0~255 之间的整数，也可以是 0%~100% 的百分数。如：
         p{color:rgb(20%,33%,25%);}
         3、十六进制颜色
         这种颜色设置方法是现在比较普遍使用的方法，其原理其实也是 RGB 设置，但是其每一项的值由 0-255 变成了十六进制 00-ff。
         p{color:#00ffff;}
         配色表：
         
         
 
         
  
         
   
         
    HTML+CSS基础（CSS篇下）_第8张图片 
   
         
  
         
  
         
 
         
 
         
 
        2.长度值
         
 
        长度单位总结一下，目前比较常用到px（像素）、em、% 百分比，要注意其实这三种单位都是相对单位。
         1、像素
         像素为什么是相对单位呢？因为像素指的是显示器上的小点（CSS规范中假设“90像素=1英寸”）。实际情况是浏览器会使用显示器的实际像素值有关，在目前大多数的设计者都倾向于使用像素（px）作为单位。
         2、em
         就是本元素给定字体的 font-size 值，如果元素的 font-size 为 14px ，那么 1em = 14px；如果 font-size 为 18px，那么 1em = 18px。如下代码：
         p{font-size:12px;text-indent:2em;}
         上面代码就是可以实现段落首行缩进 24px（也就是两个字体大小的距离）。
         下面注意一个特殊情况：
         但当给 font-size 设置单位为 em 时，此时计算的标准以 p 的父元素的 font-size 为基础。如下代码：
         html:
         
        以这个例子为例。

         css:
         
 
        p{font-size:14px}
span{font-size:0.8em;}

         
 
        结果 span 中的字体“例子”字体大小就为 11.2px（14 * 0.8 = 11.2px）。
         3、百分比
         p{font-size:12px;line-height:130%}
         设置行高（行间距）为字体的130%（12 * 1.3 = 15.6px）。
         
 
        css样式设置小技巧
         
 
        1.水平居中设置-行内元素
         
 
        我们在实际工作中常会遇到需要设置水平居中的场景，比如为了美观，文章的标题一般都是水平居中显示的。
         这里我们又得分两种情况：行内元素 还是 块状元素 ，块状元素里面又分为定宽块状元素，以及不定宽块状元素。今天我们先来了解一下行内元素怎么进行水平居中？
         如果被设置元素为文本、图片等行内元素时，水平居中是通过给父元素设置text-align:center来实现的。(父元素和子元素：如下面的html代码中，div是“我想要在父容器中水平居中显示”这个文本的父元素。反之这个文本是div的子元素 )如下代码：
         html代码：
          
        我想要在父容器中水平居中显示。

         css代码：
         
         
 
        2.水平居中设置-定宽块状元素
         
 
        当被设置元素为 块状元素 时用 text-align：center 就不起作用了，这时也分两种情况：定宽块状元素和不定宽块状元素。
         满足定宽和块状两个条件的元素是可以通过设置“左右margin”值为“auto”来实现居中的。我们来看个例子就是设置 div 这个块状元素水平居中：
         html代码：
         
 
        
  
        我是定宽块状元素，哈哈，我要水平居中显示。
        


         
 
        css代码：
         
 
        

         
 
        也可以写成：
         margin-left:auto;
         margin-right:auto;
         注意：元素的“上下 margin” 是可以随意设置的。
         
 
        3 不定宽块状元素方法
         
 
        不定宽度的块状元素有三种方法居中（这三种方法目前使用的都很多）：
         
 
        1.加入 table 标签
         2.设置 display: inline 方法：与第一种类似，显示类型设为 行内元素，进行不定宽元素的属性设置
         3.设置 position:relative 和 left:50%：利用 相对定位 的方式，将元素向左偏移 50% ，即达到居中的目的
         
 
        3.1不定宽块状元素方法（一）
         
 
        为什么选择方法一加入table标签? 是利用table标签的长度自适应性---即不定义其长度也不默认父元素body的长度（table其长度根据其内文本长度决定），因此可以看做一个定宽度块元素，然后再利用定宽度块状居中的margin的方法，使其水平居中。
         第一步：为需要设置的居中的元素外面加入一个 table 标签 ( 包括 
      、、
       )。
       第二步：为这个 table 设置“左右 margin 居中”（这个和定宽块状元素的方法一样）。
       举例如下：
       html代码：
       
 
      
 
      
  
    
      
    
        
        
      • 我是第一行文本
        • 
        
      • 我是第二行文本
        • 
        
      • 我是第三行文本
        • 
    
      
    
      
        
 
      

      

       
 
      css代码：
       
 
      

       
 
      3.2不定宽块状元素方法（二）
       
 
      除了上一节讲到的插入table标签，可以使不定宽块状元素水平居中之外，本节介绍第2种实现这种效果的方法，改变元素的display类型为行内元素，利用其属性直接设置。
       第二种方法：改变块级元素的 display 为 inline 类型（设置为 行内元素 显示），然后使用 text-align:center
       来实现居中效果。如下例子：
       html代码：
       
 
      

      
    

      


       
 
      css代码：
       
 
      

       
 
      这种方法相比第一种方法的优势是不用增加无语义标签，但也存在着一些问题：它将块状元素的 display 类型改为 inline，变成了行内元素，所以少了一些功能，比如设定长度值。
       
 
      3.3不定宽块状元素方法（三）
       
 
      除了前两节讲到的插入table标签，以及改变元素的display类型，可以使不定宽块状元素水平居中之外，本节介绍第3种实现这种效果的方法，设置浮动和相对定位来实现。
       
 
      方法三：通过给父元素设置 float，然后给父元素设置 position:relative 和 left:50%，子元素设置 position:relative 和 left: -50% 来实现水平居中。
       
 
      我们可以这样理解：假想ul层的父层（即下面例子中的div层）中间有条平分线将ul层的父层（div层）平均分为两份，ul层的css代码是将ul层的最左端与ul层的父层（div层）的平分线对齐；而li层的css代码则是将li层的平分线与ul层的最左端（也是div层的平分线）对齐，从而实现li层的居中。
       
 
      代码如下：
       
 
      

      
    

      


       
 
      css代码：
       
 
      

       
 
      这三种方法使用得都非常广泛，各有优缺点，具体选用哪种方法，可以视具体情况而定。
       
 
      4 垂直居中-父元素高度确定的单行文本
       
 
      我们在实际工作中也会遇到需要设置垂直居中的场景，比如好多报纸的文章标题在左右一侧时，常常会设置为垂直居中，为了用户体验性好。
       这里我们又得分两种情况：父元素高度确定的单行文本，以及父元素高度确定的多行文本。
       本节我们先来看第一种父元素高度确定的单行文本, 怎么设置它为垂直居中呢？
       父元素高度确定的单行文本的竖直居中的方法是通过设置父元素的 height 和 line-height 高度一致来实现的。(height: 该元素的高度，line-height: 顾名思义，行高（行间距），指在文本中，行与行之间的 基线间的距离 )。
       line-height 与 font-size 的计算值之差，在 CSS 中成为“行间距”。分为两半，分别加到一个文本行内容的顶部和底部。
       
 
      这种文字行高与块高一致带来了一个弊端：当文字内容的长度大于块的宽时，就有内容脱离了块。
       如下代码：
       
 
      
    hi,imooc!

      

       
 
      css代码：
       
 
      

       
 
      5父元素高度确定的多行文本（方法一）
       
 
      父元素高度确定的多行文本、图片等的竖直居中的方法有两种：
       
 
      方法一：使用插入 table (包括tbody、tr、td)标签，同时设置 vertical-align：middle。
       
 
      css 中有一个用于竖直居中的属性 vertical-align，在父元素设置此样式时，会对inline-block类型的子元素都有用。下面看一下例子：
       
 
      html代码：
       
 
      

      

      
    
      看我是否可以居中。
      

      

      


       
 
      css代码：
       
 
      table td{height:500px;background:#ccc}

       
 
      因为 td 标签默认情况下就默认设置了 vertical-align 为 middle，所以我们不需要显式地设置了。
       
 
      6父元素高度确定的多行文本（方法二）
       
 
      除了上一节讲到的插入table标签，可以使父元素高度确定的多行文本垂直居中之外，本节介绍另外一种实现这种效果的方法。但这种方法兼容性比较差，只是提供大家学习参考。
       
 
      在 chrome、firefox 及 IE8 以上的浏览器下可以设置块级元素的 display 为 table-cell（设置为表格单元显示），激活 vertical-align 属性，但注意 IE6、7 并不支持这个样式, 兼容性比较差。
       html代码：
       
 
      
    
      
        
      看我是否可以居中。
      
        
      看我是否可以居中。
      
        
      看我是否可以居中。
      
    
      

      

       
 
      css代码：
       
 
      

       
 
      这种方法的好处是不用添加多余的无意义的标签，但缺点也很明显，它的兼容性不是很好，不兼容 IE6、7而且这样修改display的block变成了table-cell，破坏了原有的块状元素的性质。
       
 
      7 .隐性改变display类型
       
 
      有一个有趣的现象就是当为元素（不论之前是什么类型元素，display:none 除外）设置以下 2 个句之一：
       
 
         
  
      1. position : absolute
        2.  
  
      2. float : left 或 float:right
         简单来说，只要html代码中出现以上两句之一，元素的display显示类型就会自动变为以 display:inline-block（块状元素）的方式显示，当然就可以设置元素的 width 和 height 了，且默认宽度不占满父元素。
        3.  
 
       
 
      如下面的代码，小伙伴们都知道 a 标签是 行内元素 ，所以设置它的 width 是 没有效果的，但是设置为 position:absolute 以后，就可以了。
       
 
       进入课程请单击这里
      

       
 
      css代码
       
 
      

       
 
      想不起 display:inline-block 是做什么的小伙伴们，单击“元素分类--内联块状元素”可返回到前面小节进行复习。
       

                            
                        
                    
                    
                    
      
                    
                    
                    
      
                
                
      
                    
                
      
            
        
    
    
      
        
      你可能感兴趣的:(HTML+CSS基础（CSS篇下）)
      
        
      
            
      
                
        
                    
      • python 读excel每行替换_Python脚本操作Excel实现批量替换功能
                        weixin_39646695
python读excel每行替换
                        
        Python脚本操作Excel实现批量替换功能大家好，给大家分享下如何使用Python脚本操作Excel实现批量替换。使用的工具Openpyxl，一个处理excel的python库，处理excel，其实针对的就是WorkBook，Sheet，Cell这三个最根本的元素~明确需求原始excel如下我们的目标是把下面excel工作表的sheet1表页A列的内容“替换我吧”批量替换为B列的“我用来替换的
        
                    
        • 
                    
      • 男士护肤品哪个牌子好？十大男士护肤品排行榜
                        高省APP珊珊

                        
        很多男生意识到护肤的必要性，开始着手护肤，但不知道该选哪个男士护肤品品牌使用好。目前市面上很多男士护肤品品牌，可谓琳琅满目，让人眼花缭乱。男士挑选护肤品时，根据自己皮肤需求去正规渠道挑选合适的知名护肤品比较放心靠谱。高省APP，是2021年推出的平台，0投资，0风险、高省APP佣金更高，模式更好，终端用户不流失。【高省】是一个自用省钱佣金高，分享推广赚钱多的平台，百度有几百万篇报道，也期待你的加入
        
                    
        • 
                    
      • 三菱PLC全套学习资料及应用手册
                        good2know

                        
        本文还有配套的精品资源，点击获取简介：三菱PLC作为工业自动化领域的核心设备，其系列产品的学习和应用需要全面深入的知识。本次资料包为学习者提供从基础到进阶的全方位学习资源，包括各种型号PLC的操作手册、编程指南、软件操作教程以及实际案例分析，旨在帮助用户系统掌握PLC的编程语言、指令系统及在各类工业应用中的实施。1.三菱PLC基础知识入门1.1PLC的基本概念可编程逻辑控制器（PLC）是工业自动化
        
                    
        • 
                    
      • 程翔授《评价一篇记叙文》
                        行吟斯基

                        
        桂林十一中高一2中学生自读程老师学生文章板书课题师巡看。看完举手。问：它是记叙文。不商量。独立打分。学生评价打分。师：高低都正常，不受干扰。师巡，略评。打完举手。调查：分层次举手——高分先举手。最低分。最高95分。最低45分。女：差距太大！师：同一篇，相差55分。若是你的文章，愿落谁手？男：身临其境感觉。师：你有此经历？没也没关系。女：不优美……，结尾无升华……无感悟……师：辞藻不美？(师追问)男
        
                    
        • 
                    
      • 移动端城市区县二级联动选择功能实现包
                        good2know

                        
        本文还有配套的精品资源，点击获取简介：本项目是一套为移动端设计的jQuery实现方案，用于简化用户在选择城市和区县时的流程。它包括所有必需文件：HTML、JavaScript、CSS及图片资源。通过动态更新下拉菜单选项，实现城市到区县的联动效果，支持数据异步加载。开发者可以轻松集成此功能到移动网站或应用，并可基于需求进行扩展和优化。1.jQuery移动端解决方案概述jQuery技术简介jQuery
        
                    
        • 
                    
      • 自律打卡第四天：比昨天进步一点点
                        花儿的念想

                        
        今天新闻我们县城又确诊了一例，截止目前已经确诊的三例了，打开，看了一篇简友写的武汉的真实情况，有病住不了院，还没等到床位已经去世的消息，心里更加的难受，武汉尚且这样，如果是我们这没有高速没有火车的十八线的小县城发生这种情况，那情况将是更加的不堪设想，不敢想，唯有祈求灾难早点快去，平安才是最大的福气。突然觉得我的自律打卡，比昨天进步一点点。更希望疫情战争每一天都要比昨天好一点，希望一觉醒来听到的是好
        
                    
        • 
                    
      • 15个小技巧，让我的Windows电脑更好用了！
                        曹元_

                        
        01.桌面及文档处理第一部分的技巧，主要是围绕桌面的一些基本操作，包括主题设置、常用文档文件快捷打开的多种方式等等。主题换色默认情况下，我们的Win界面可能就是白色的文档界面，天蓝色的图表背景，说不出哪里不好看，但是就是觉得不够高级。imageimage说到高级感，本能第一反应就会和暗色模式联想起来，如果我们将整个界面换成黑夜模式的话，它会是这样的。imageimage更改主题颜色及暗色模式，我们
        
                    
        • 
                    
      • day15｜前端框架学习和算法
                        universe_01
前端算法笔记
                        
        T22括号生成先把所有情况都画出来，然后（在满足什么情况下）把不符合条件的删除。T78子集要画树状图，把思路清晰。可以用暴力法、回溯法和DFS做这个题DFS深度搜索：每个边都走完，再回溯应用：二叉树搜索，图搜索回溯算法=DFS+剪枝T200岛屿数量（非常经典BFS宽度把树状转化成队列形式，lambda匿名函数“一次性的小函数，没有名字”setup语法糖：让代码更简洁好写的语法ref创建：基本类型的
        
                    
        • 
                    
      • 25-1-2019
                        树藤与海岛呢

                        
        hello八月来报道了今天看到了一篇文章就只想记下那两句话：良田千顷不过一日三餐广夏万间只睡卧榻三尺大概的意思就是要珍惜当下不要等来不及的时候才珍惜分享今天的两餐最近没有时间运动呢下个月补回好了说完了哈哈goodnight图片发自App图片发自App
        
                    
        • 
                    
      • 《极简思维》第三部分
                        小洋苏兮

                        
        整理你的人际关系如何改善人际关系？摘录：因为人际关系问题是人们生活中不快乐的主要原因。感想：感觉这个说的挺对，之前我总是埋头学习，不管舍友不管自己的合作伙伴的一些事情，但实际上，这学期关注了之后好多了摘录：“亲密关系与社交会让你健康而快乐。这是基础。太过于关注成就或不太关心人际关系的人都不怎么快乐。基本上来说，人类就是建立在人脉关系上的。”感想：但是如果有时想的太多就不太好，要以一个开放的心态跟别
        
                    
        • 
                    
      • 日更50天有什么收益？
                        星湾二宝

                        
        坚持在平台上日更50天了，平台也为我生成了日更50天徽章，小开心一下这份坚持。日更50天徽章那坚持50天都有哪些收益呢？收益一，就是最直观的那些钻和贝，我这边确实不太高，但是这些贝足够支撑我保持会员的资格，能够在发文的时候帮助友友们去除广告，方便阅读。钻和贝收益二，文章的收获，日更50天，坚持写作3.7万文字，书写的文字也从开始的流水账/碎碎念逐渐加入自己的思考和观点。以前，一个念头会一晃而过，如
        
                    
        • 
                    
      • 别再讲道理啦，对方听不进去的
                        方所

                        
        我之前写过一篇叫做《你总妄想改变他人》，然后就有朋友跟我说，有一些方法可以改变他人之类的。嗯，是这样，但是任何具体的问题，都要限定好语境，描述清楚前提条件，然后再表达观点，我的这位朋友的说法就犯了一刀切的错误，这样并不能让讨论正常展开（这篇我得先给她看看，不然可能会挨揍）。好了，hhhh，谁让她不能写文章呢，我就来再说一说吧。我前面说过，我们在学到一个道理、学会一种方法之后，总是迫不及待地想要去与
        
                    
        • 
                    
      • Spring进阶 - SpringMVC实现原理之DispatcherServlet处理请求的过程
                        倾听铃的声
后端springjavamvc开发语言分布式
                        
        前文我们有了IOC的源码基础以及SpringMVC的基础，我们便可以进一步深入理解SpringMVC主要实现原理，包含DispatcherServlet的初始化过程和DispatcherServlet处理请求的过程的源码解析。本文是第二篇：DispatcherServlet处理请求的过程的源码解析。@pdaiSpring进阶-SpringMVC实现原理之DispatcherServlet处理请求的
        
                    
        • 
                    
      • 【C++算法】76.优先级队列_前 K 个高频单词
                        流星白龙
优选算法C++c++算法开发语言
                        
        文章目录题目链接：题目描述：解法C++算法代码：题目链接：692.前K个高频单词题目描述：解法利用堆来解决TopK问题预处理一下原始的字符串数组，用一个哈希表统计一下每一个单词出现的频次。创建一个大小为k的堆频次：小根堆字典序（频次相同的时候）：大根堆循环让元素依次进堆判断提取结果C++算法代码：classSolution{//定义类型别名，PSI表示对typedefpairPSI;//自定义比较
        
                    
        • 
                    
      • JVM 内存模型深度解析：原子性、可见性与有序性的实现
                        练习时长两年半的程序员小胡
JVM深度剖析：从面试考点到生产实践jvmjava内存模型
                        
        在了解了JVM的基础架构和类加载机制后，我们需要进一步探索Java程序在多线程环境下的内存交互规则。JVM内存模型（JavaMemoryModel，JMM）定义了线程和主内存之间的抽象关系，它通过规范共享变量的访问方式，解决了多线程并发时的数据一致性问题。本文将从内存模型的核心目标出发，详解原子性、可见性、有序性的实现机制，以及volatile、synchronized等关键字在其中的作用。一、J
        
                    
        • 
                    
      • Flowable 高级扩展：自定义元素与性能优化实战
                        练习时长两年半的程序员小胡
Flowable流程引擎实战指南流程图flowableBPMN流程引擎java
                        
        在前五篇文章中，我们从基础概念、流程设计、API实战、SpringBoot集成，到外部系统协同，逐步构建了Flowable的应用体系。但企业级复杂场景中，原生功能往往难以满足定制化需求——比如需要特殊的审批规则网关、与决策引擎联动实现动态路由，或是在高并发场景下优化流程引擎性能。本文将聚焦Flowable的高级扩展能力，详解如何自定义流程元素、集成规则引擎，并掌握大型系统中的性能调优策略。一、自定
        
                    
        • 
                    
      • 2022-04-07
                        上善若水1979527

                        
        昨天苏阿姨来给我送普门品！和她一块来的还有另外一个阿姨！我下去拿时！那阿姨说你不是干房产的小赵！帮我租房的！我说你认识我？对啊！你帮我租的房子！我没印象了！我和保红一块！我说我想起来了阿姨！你这运动服一换！小电车一骑！一下年轻十岁我早记不得了！我只记得一九年五一带看了河滨美航还有德胜的好多套房子！你都不当意！你告诉我你每晚拜观音菩萨说快让小赵普萨帮我找套合适的房子吧！我把本子上记得半年内的德胜房源
        
                    
        • 
                    
      • 互信息：理论框架、跨学科应用与前沿进展
                        大千AI助手
人工智能Python#OTHER人工智能深度学习算法互信息香农通信随机变量
                        
        1.起源与核心定义互信息（MutualInformation,MI）由克劳德·香农（ClaudeShannon）在1948年开创性论文《AMathematicalTheoryofCommunication》中首次提出，该论文奠定了现代信息论的基础。互信息用于量化两个随机变量之间的统计依赖关系，定义为：若已知一个随机变量的取值，能为另一个随机变量提供的信息量。数学上，对于离散随机变量XXX和YYY，
        
                    
        • 
                    
      • 车载刷写架构 --- 刷写思考扩展
                        汽车电子实验室
电子电器架构——刷写方案架构开发语言关于网关转发性能引起的思考汽车中央控制单元HPC软件架构车载诊断进阶篇
                        
        我是穿拖鞋的汉子，魔都中坚持长期主义的汽车电子工程师。老规矩，分享一段喜欢的文字，避免自己成为高知识低文化的工程师：做到欲望极简，了解自己的真实欲望，不受外在潮流的影响，不盲从，不跟风。把自己的精力全部用在自己。一是去掉多余，凡事找规律，基础是诚信；二是系统思考、大胆设计、小心求证；三是“一张纸制度”，也就是无论多么复杂的工作内容，要在一张纸上描述清楚；四是要坚决反对虎头蛇尾，反对繁文缛节，反对老
        
                    
        • 
                    
      • 在线人数统计业务设计（场景八股文）
                        

                        
        业务问题在当经的网站中，在线人数的实时统计已经是一个必不可少的模块了，并且该统计功能最好能够按不同的时间间隔做的统计，现在需要你设计一个在线人数统计的模块，你应该怎么进行设计的呢？背景一个网校下会有多个学员。目前平台大概有十个，平台对应的网校大概五十几个，平均一个网校会有5w个用户，预计总人数为200w，最该学员的在线人数在10w左右。设计思路最开始的时候，想到的就是使用mysql直接实现，但是明
        
                    
        • 
                    
      • 免费排版助手：智能修正段落 + 删除干扰符，杂乱文本一键变规范
                        

                        
        各位文字工作者们！你们有没有被排版折磨到崩溃的时候？我跟你们说，我之前排版一篇文章，那简直就像在走迷宫，头晕眼花的！不过后来我发现了一款软件——排版助手！软件下载地址安装包这玩意儿是个文章智能排版工具，专门给新闻编辑、文摘网站这些文字工作者用的。它功能老多了，能修正段落，把那些乱七八糟的段落变得规规矩矩；还能删除干扰符，就像给文章做了个大扫除，把没用的东西都清理掉；简繁转换也不在话下，不管是简体还
        
                    
        • 
                    
      • 模拟退火(SA)：如何“故意走错路”，才能找到最优解？
                        小瑞瑞acd
小瑞瑞学数模模拟退火算法python启发式算法算法
                        
        模拟退火(SA)：如何“故意走错路”，才能找到最优解？图示模拟退火算法如何通过接受较差解（橙色虚线标注）从局部最优（绿色点）逃逸，最终找到全局最优解（紫色点），展示其跳出局部极小值的能力。大家好，我是小瑞瑞！欢迎回到我的专栏！想象一下，你站在一座连绵不绝的山脉中，目标是找到海拔最低的那个山谷。你手上只有一个高度计，视野被浓雾笼罩，只能看清脚下的一小片区域。如果你是一个“贪心”的登山者，你的策略会非
        
                    
        • 
                    
      • 今晚吃太饱了
                        爱伤心的蚂蚁

                        
        今晚吃太饱了，两碗干饭，两碗肉汤，一碗牛奶银耳汤，感觉肚子都顶出来了，圆滚滚的！明早要早起，出发去小蚂蚁家！看着剩下的肉汤，倒掉多可惜，干掉了！看着小蚂蚁熬的银耳汤，倒掉多可惜，于是热了一下，顺便热袋牛奶倒进去，大娃喝点，小蚂蚁喝点，还剩下一大碗，继续干掉！吃的太饱，人也懒洋洋的，躺床上不想动，感受的肚子撑撑的感觉，好久没吃这么饱了！这一晚灌的都是汤汤水水的，天冷的晚上，半夜要睡不安稳咯！哈哈！小
        
                    
        • 
                    
      • 小白买保险科普篇-意外险
                        手牵手走

                        
        意外险顾名思义，就是️对因意外导致的损失进行经济补偿的保险产品。我们看保险产品一定要看包含的责任。意外险通常包含：意外身故理赔金，额度10万-几百万不等。意外残疾理赔金，额度10万-几百万不等。意外医疗理赔金，额度通常在1-5万之间。这里的意外到底包含哪些意外事件，不能一概而论。综合意外险，我们重点看免责条款里的除外责任。比如：酒驾、违法不属于赔偿范围。这类产品小朋友和老人家往往有专属产品。年轻人
        
                    
        • 
                    
      • 人物系列首篇｜总会有人陪你走一段路
                        诗小蛮5786400

                        
        主题纲要：1.总会有人陪你走一段路2.不打扰也是一种幸福3.留在身边的，哪怕瞎逼逼一番也是珍贵一、总会有人陪你走一段路在综艺《向往的生活》，任嘉伦曾问过这样一个问题：“你们有没有过那样一种朋友：你们小时候关系很好，但因为你事业越来越好；他觉得你们之间的距离越来越远，然后他就自己疏远你的那种。”何炅说：我们要接受这是常态，我们每个人都有在乎的、喜欢的人，但我从来没有奢望，要把谁留在身边一辈子，因为这
        
                    
        • 
                    
      • 营销活动-大转盘
                        無缺520

                        
        写在前面最近，首先营销活动工具这块我是再熟悉不过了。曾经做了不下20个活动工具，然后通过监控活动数据反推活动的好坏。文中主要讲解幸运大转盘营销工具一.大转盘定义大转盘是比较常见的营销活动工具，它是通过消费者用户控制【开始/停止】操作获得奖品物品。用户在不知道自己能获得什么奖品的条件下，然后通过抽奖，大概率的获得未知的奖品。类似最近流行的盲盒玩法。二.为什么做大转盘大转盘是最常用的抽奖类的活动工具之
        
                    
        • 
                    
      • Java并发核心：线程池使用技巧与最佳实践！ | 多线程篇(五)
                        bug菌¹
Java实战(进阶版)javaJava零基础入门Java并发线程池多线程篇
                        
        本文收录于「Java进阶实战」专栏，专业攻坚指数级提升，希望能够助你一臂之力，帮你早日登顶实现财富自由；同时，欢迎大家关注&&收藏&&订阅！持续更新中，up！up！up！！环境说明：Windows10+IntelliJIDEA2021.3.2+Jdk1.8本文目录前言摘要正文何为线程池？为什么需要线程池？线程池的好处线程池使用场景如何创建线程池？线程池的常见配置源码解析案例分享案例代码演示案例运行
        
                    
        • 
                    
      • 分支和循环（下）
                        tryxr
服务器运维
                        
        写⼀个猜数字游戏游戏要求：1.电脑⾃动⽣成1~100的随机数2.玩家猜数字，猜数字的过程中，根据猜测数据的⼤⼩给出⼤了或⼩了的反馈，直到猜对，游戏结束1.随机数生成要想完成猜数字游戏，⾸先得产⽣随机数，那怎么产⽣随机数呢？randC语⾔提供了⼀个函数叫rand，这函数是可以⽣成随机数的，函数原型如下所⽰：intrand(void);rand函数会返回⼀个伪随机数，这个随机数的范围是在0~RAND_
        
                    
        • 
                    
      • Matrix-Breakout 2 Morpheus靶场解题过程
                        

                        
        信息收集目标探测靶机目标很明显就是61.139.2.141了扫描开放端口发现22、80、81访问端口主机访问80翻译一下，并没有发现什么审查源代码发现里面有一张图片，下载下来看看是否有图片的隐写wgethttp://61.139.2.141/trinity.jpegstegoveritas-itrinity.jpeg-o/home/kali/Desktop/11分解后发现什么都没有，里面的keep
        
                    
        • 
                    
      • 假如你变成了毛毛虫（2）
                        琵琶行难背啊

                        
        假如你变成了一只毛毛虫，你会怎样面对人生呢？难道还是和平常的态度一样吗？不，这或许会让你有一个改变。首先你要以毛毛虫的视角去观看这个世界，平时你觉得很小的草，但在你眼里就像是一颗颗挺拔的大树；平常微微的风在你眼里，那就是“怒号”！平常下雨的小雨点，在人眼里不足为惧，可以尽情的玩耍，也有大大的房子足以避雨。可在你眼里呢？小小的雨点就像无敌的冰雹砸向你，每砸一下都会让你痛不欲生，你不得已去找避难所，而
        
                    
        • 
                                
      • Java序列化进阶篇
                                    g21121
java序列化
                                    
                1.transient 
        类一旦实现了Serializable 接口即被声明为可序列化，然而某些情况下并不是所有的属性都需要序列化，想要人为的去阻止这些属性被序列化，就需要用到transient 关键字。 

        
                                
        • 
                                
      • escape()、encodeURI()、encodeURIComponent()区别详解 
                                    aigo
JavaScriptWeb
                                    
        原文：http://blog.sina.com.cn/s/blog_4586764e0101khi0.html 
  
JavaScript中有三个可以对字符串编码的函数，分别是： escape,encodeURI,encodeURIComponent，相应3个解码函数：,decodeURI,decodeURIComponent 。 
下面简单介绍一下它们的区别 
1 escape()函
        
                                
        • 
                                
      • ArcgisEngine实现对地图的放大、缩小和平移
                                    Cb123456
添加矢量数据对地图的放大、缩小和平移Engine
                                    
        ArcgisEngine实现对地图的放大、缩小和平移: 
 个人觉得是平移，不过网上的都是漫游，通俗的说就是把一个地图对象从一边拉到另一边而已。就看人说话吧. 
 具体实现: 
一、引入命名空间 
   using ESRI.ArcGIS.Geometry; 
   using ESRI.ArcGIS.Controls; 
二、代码实现.
        
                                
        • 
                                
      • Java集合框架概述
                                    天子之骄
Java集合框架概述
                                    
           集合框架 
集合框架可以理解为一个容器，该容器主要指映射(map)、集合(set)、数组(array)和列表(list)等抽象数据结构。 
从本质上来说，Java集合框架的主要组成是用来操作对象的接口。不同接口描述不同的数据类型。 
  
简单介绍： 
  
Collection接口是最基本的接口，它定义了List和Set，List又定义了LinkLi
        
                                
        • 
                                
      • 旗正4.0页面跳转传值问题
                                    何必如此
javajsp
                                    
        跳转和成功提示 
a)        成功字段非空forward 
成功字段非空forward，不会弹出成功字段，为jsp转发，页面能超链接传值,传输变量时需要拼接。接拼接方式list.jsp?test="+strweightUnit+"或list.jsp?test="+weightUnit+&qu
        
                                
        • 
                                
      • 全网唯一:移动互联网服务器端开发课程
                                    cocos2d-x小菜
web开发移动开发移动端开发移动互联程序员
                                    
            移动互联网时代来了！     App市场爆发式增长为Web开发程序员带来新一轮机遇，近两年新增创业者，几乎全部选择了移动互联网项目！传统互联网企业中超过98%的门户网站已经或者正在从单一的网站入口转向PC、手机、Pad、智能电视等多端全平台兼容体系。据统计，AppStore中超过85%的App项目都选择了PHP作为后端程
        
                                
        • 
                                
      • Log4J通用配置|注意问题 笔记
                                    7454103
DAOapachetomcatlog4jWeb
                                    
        关于日志的等级 那些去 百度就知道了！ 
这几天 要搭个新框架  配置了 日志 记下来 ！做个备忘！ 
 

 #这里定义能显示到的最低级别,若定义到INFO级别,则看不到DEBUG级别的信息了~!
log4j.rootLogger=INFO,allLog

# DAO层 log记录到dao.log 控制台 和 总日志文件
log4j.logger.DAO=INFO,dao,C
        
                                
        • 
                                
      • SQLServer TCP/IP 连接失败问题 ---SQL Server Configuration Manager
                                    darkranger
sqlcwindowsSQL ServerXP
                                    
        当你安装完之后,连接数据库的时候可能会发现你的TCP/IP 没有启动.. 
发现需要启动客户端协议 : TCP/IP  
需要打开 SQL Server Configuration Manager... 
却发现无法打开 SQL Server Configuration Manager..?? 
 
解决方法:  C:\WINDOWS\system32目录搜索framedyn.
        
                                
        • 
                                
      • [置顶] 做有中国特色的程序员
                                    aijuans
程序员
                                    
        从出版业说起   网络作品排到靠前的，都不会太难看，一般人不爱看某部作品也是因为不喜欢这个类型，而此人也不会全不喜欢这些网络作品。究其原因，是因为网络作品都是让人先白看的，看的好了才出了头。而纸质作品就不一定了，排行榜靠前的，有好作品，也有垃圾。   许多大牛都是写了博客，后来出了书。这些书也都不次，可能有人让为不好，是因为技术书不像小说，小说在读故事，技术书是在学知识或温习知识，有些技术书读得可
        
                                
        • 
                                
      • document.domain 跨域问题
                                    avords
document
                                    
        document.domain用来得到当前网页的域名。比如在地址栏里输入：javascript:alert(document.domain); //www.315ta.com我们也可以给document.domain属性赋值，不过是有限制的，你只能赋成当前的域名或者基础域名。比如：javascript:alert(document.domain = "315ta.com"); 
        
                                
        • 
                                
      • 关于管理软件的一些思考
                                    houxinyou
管理
                                    
          
工作好多看年了,一直在做管理软件,不知道是我最开始做的时候产生了一些惯性的思维,还是现在接触的管理软件水平有所下降.换过好多年公司,越来越感觉现在的管理软件做的越来越乱. 
在我看来,管理软件不论是以前的结构化编程,还是现在的面向对象编程,不管是CS模式,还是BS模式.模块的划分是很重要的.当然,模块的划分有很多种方式.我只是以我自己的划分方式来说一下. 
做为管理软件,就像现在讲究MVC这
        
                                
        • 
                                
      • NoSQL数据库之Redis数据库管理(String类型和hash类型)
                                    bijian1013
redis数据库NoSQL
                                    
        一.Redis的数据类型 
1.String类型及操作 
        String是最简单的类型，一个key对应一个value，string类型是二进制安全的。Redis的string可以包含任何数据，比如jpg图片或者序列化的对象。 
        Set方法：设置key对应的值为string类型的value 
        
                                
        • 
                                
      • Tomcat 一些技巧
                                    征客丶
javatomcatdos
                                    
        以下操作都是在windows 环境下 
 
一、Tomcat 启动时配置 JAVA_HOME 
在 tomcat 安装目录，bin 文件夹下的 catalina.bat 或 setclasspath.bat 中添加 
 
set JAVA_HOME=JAVA 安装目录 
set JRE_HOME=JAVA 安装目录/jre 
 
即可； 
 
二、查看Tomcat 版本 
在 tomcat 安装目
        
                                
        • 
                                
      • 【Spark七十二】Spark的日志配置
                                    bit1129
spark
                                    
        在测试Spark Streaming时，大量的日志显示到控制台，影响了Spark Streaming程序代码的输出结果的查看(代码中通过println将输出打印到控制台上)，可以通过修改Spark的日志配置的方式，不让Spark Streaming把它的日志显示在console 
  
在Spark的conf目录下，把log4j.properties.template修改为log4j.p
        
                                
        • 
                                
      • Haskell版冒泡排序
                                    bookjovi
冒泡排序haskell
                                    
        面试的时候问的比较多的算法题要么是binary search，要么是冒泡排序，真的不想用写C写冒泡排序了，贴上个Haskell版的，思维简单，代码简单，下次谁要是再要我用C写冒泡排序，直接上个haskell版的，让他自己去理解吧。 
  
  
sort [] = []
sort [x] = [x]
sort (x:x1:xs)
    | x>x1 = x1:so
        
                                
        • 
                                
      • java 路径 配置文件读取
                                    bro_feng
java
                                    
        这几天做一个项目，关于路径做如下笔记，有需要供参考。 
 
取工程内的文件，一般都要用相对路径，这个自然不用多说。 
 
在src统计目录建配置文件目录res,在res中放入配置文件。 
读取文件使用方式： 
1. MyTest.class.getResourceAsStream("/res/xx.properties") 
2. properties.load(MyTest.
        
                                
        • 
                                
      • 读《研磨设计模式》-代码笔记-简单工厂模式
                                    bylijinnan
java设计模式
                                    
        声明： 本文只为方便我个人查阅和理解，详细的分析以及源代码请移步 原作者的博客http://chjavach.iteye.com/ 
 
 


package design.pattern;

/*
 * 个人理解：简单工厂模式就是IOC;
 * 客户端要用到某一对象，本来是由客户创建的，现在改成由工厂创建，客户直接取就好了
 */
interface IProduct {
	
        
                                
        • 
                                
      • SVN与JIRA的关联
                                    chenyu19891124
SVN
                                    
        SVN与JIRA的关联一直都没能装成功，今天凝聚心思花了一天时间整合好了。下面是自己整理的步骤： 
一、搭建好SVN环境，尤其是要把SVN的服务注册成系统服务 
二、装好JIRA，自己用是jira-4.3.4破解版 
三、下载SVN与JIRA的插件并解压，然后拷贝插件包下lib包里的三个jar，放到Atlassian\JIRA 4.3.4\atlassian-jira\WEB-INF\lib下，再
        
                                
        • 
                                
      • JWFDv0.96 最新设计思路
                                    comsci
数据结构算法工作企业应用公告
                                    
                           
 
 
随着工作流技术的发展，工作流产品的应用范围也不断的在扩展，开始进入了像金融行业(我已经看到国有四大商业银行的工作流产品招标公告了)，实时生产控制和其它比较重要的工程领域，而
        
                                
        • 
                                
      • vi 保存复制内容格式粘贴
                                    daizj
vi粘贴复制保存原格式不变形
                                    
            vi是linux中非常好用的文本编辑工具，功能强大无比，但对于复制带有缩进格式的内容时，粘贴的时候内容错位很严重，不会按照复制时的格式排版，vi能不能在粘贴时，按复制进的格式进行粘贴呢？ 答案是肯定的，vi有一个很强大的命令可以实现此功能 。 
 
    在命令模式输入:set paste，则进入paste模式，这样再进行粘贴时
        
                                
        • 
                                
      • shell脚本运行时报错误：/bin/bash^M: bad interpreter 的解决办法
                                    dongwei_6688
shell脚本
                                    
        出现原因：windows上写的脚本，直接拷贝到linux系统上运行由于格式不兼容导致 
解决办法： 
 1. 比如文件名为myshell.sh，vim myshell.sh 
 2. 执行vim中的命令 : set ff?查看文件格式，如果显示fileformat=dos，证明文件格式有问题 
 3. 执行vim中的命令 :set fileformat=unix 将文件格式改过来就可以了，然后:w
        
                                
        • 
                                
      • 高一上学期难记忆单词
                                    dcj3sjt126com
wordenglish
                                    
        honest 诚实的；正直的 
argue 争论 
classical 古典的 
hammer 锤子 
share  分享；共有 
sorrow 悲哀；悲痛 
adventure 冒险 
error 错误；差错 
closet 壁橱；储藏室 
pronounce 发音；宣告 
repeat 重做；重复 
majority 大多数；大半 
  
native 本国的，本地的，本国
        
                                
        • 
                                
      • hibernate查询返回DTO对象，DTO封装了多个pojo对象的属性
                                    frankco
POJOhibernate查询DTO
                                    
              DTO-数据传输对象；pojo-最纯粹的java对象与数据库中的表一一对应。 
      简单讲：DTO起到业务数据的传递作用，pojo则与持久层数据库打交道。 
  
      有时候我们需要查询返回DTO对象，因为DTO
        
                                
        • 
                                
      • Partition List
                                    hcx2013
partition
                                    
        Given a linked list and a value x, partition it such that all nodes less than x come before nodes greater than or equal to x. 
You should preserve the original relative order of th
        
                                
        • 
                                
      • Spring MVC测试框架详解——客户端测试
                                    jinnianshilongnian

                                    
        上一篇《Spring MVC测试框架详解——服务端测试》已经介绍了服务端测试，接下来再看看如果测试Rest客户端，对于客户端测试以前经常使用的方法是启动一个内嵌的jetty/tomcat容器，然后发送真实的请求到相应的控制器；这种方式的缺点就是速度慢；自Spring 3.2开始提供了对RestTemplate的模拟服务器测试方式，也就是说使用RestTemplate测试时无须启动服务器，而是模拟一
        
                                
        • 
                                
      • 关于推荐个人观点
                                    liyonghui160com
推荐系统关于推荐个人观点
                                    
            回想起来，我也做推荐了3年多了，最近公司做了调整招聘了很多算法工程师，以为需要多么高大上的算法才能搭建起来的，从实践中走过来，我只想说【不是这样的】 
 
    第一次接触推荐系统是在四年前入职的时候，那时候，机器学习和大数据都是没有的概念，什么大数据处理开源软件根本不存在，我们用多台计算机web程序记录用户行为，用.net的w
        
                                
        • 
                                
      • 不间断旋转的动画
                                    pangyulei
动画
                                    
        
CABasicAnimation* rotationAnimation;
    rotationAnimation = [CABasicAnimation animationWithKeyPath:@"transform.rotation.z"];
    rotationAnimation.toValue = [NSNumber numberWithFloat: M
        
                                
        • 
                                
      • 自定义annotation
                                    sha1064616837
javaenumannotationreflect
                                    
        对象有的属性在页面上可编辑，有的属性在页面只可读，以前都是我们在页面上写死的，时间一久有时候会混乱，此处通过自定义annotation在类属性中定义。越来越发现Java的Annotation真心很强大，可以帮我们省去很多代码，让代码看上去简洁。 
下面这个例子 主要用到了 
1.自定义annotation：@interface，以及几个配合着自定义注解使用的几个注解 
2.简单的反射 
3.枚举 
        
                                
        • 
                                
      • Spring 源码
                                    up2pu
spring
                                    
        1.Spring源代码 
https://github.com/SpringSource/spring-framework/branches/3.2.x 
注：兼容svn检出 
 
2.运行脚本 
import-into-eclipse.bat 
注：需要设置JAVA_HOME为jdk 1.7 
 
build.gradle 
 compileJava { 
 sourceCompatibilit
        
                                
        • 
                                
      • 利用word分词来计算文本相似度
                                    yangshangchuan
wordword分词文本相似度余弦相似度简单共有词
                                    
        word分词提供了多种文本相似度计算方式： 
方式一：余弦相似度，通过计算两个向量的夹角余弦值来评估他们的相似度 
实现类：org.apdplat.word.analysis.CosineTextSimilarity 
用法如下： 
String text1 = "我爱购物";
String text2 = "我爱读书";
String text3 = 
        
                                
        •