• CSS学习笔记之长度单位(七)

    长度单位总结一下,目前比较常用到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:

    <p>以这个<span>例子</span>为例。</p>
    

    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学习笔记之代码简写(六)

    盒模型代码简写

    还记得在讲盒模型时外边距(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;
    

    [Read More…]

  • CSS学习笔记之布局模型(五)

    清楚了CSS 盒模型的基本概念、 盒模型类型, 我们就可以深入探讨网页布局的基本模型了。布局模型与盒模型一样都是 CSS 最基本、 最核心的概念。 但布局模型是建立在盒模型基础之上,又不同于我们常说的 CSS 布局样式或 CSS 布局模板。如果说布局模型是本,那么 CSS 布局模板就是末了,是外在的表现形式。
    CSS包含3种基本的布局模型,用英文概括为:Flow、Layer 和 Float。
    在网页中,元素有三种布局模型:
    1、流动模型(Flow)
    2、浮动模型 (Float)
    3、层模型(Layer)
    [Read More…]

  • CSS学习笔记之盒模型(四)

    盒模型–边框

    盒子模型的边框就是围绕着内容及补白的线,这条线你可以设置它的粗细、样式和颜色(边框三个属性)。
    如下面代码为 div 来设置边框粗细为 2px、样式为实心的、颜色为红色的边框:

    div{
        border:2px  solid  red;
    }
    

    上面是 border 代码的缩写形式,可以分开写:

    div{
        border-width:2px;
        border-style:solid;
        border-color:red;
    }
    

    [Read More…]

  • CSS学习笔记之元素分类(三)

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

    <div>、<p>、<h1>...<h6>、<ol>、<ul>、<dl>、<table>、<address>、<blockquote> 、<form>
    

    常用的内联元素有:

    <a>、<span>、<br>、<i>、<em>、<strong>、<label>、<q>、<var>、<cite>、<code>
    

    常用的内联块状元素有:

    <img>、<input>
    

    [Read More…]

  • CSS学习笔记之文字排版(二)

    文字排版

    font-weight:bold; 粗体
    font-style:italic; 斜体
    text-decoration:underline;下划线
    text-decoration:line-through;删除线
    

    [Read More…]

  • CSS学习笔记之权值(一)

    权值的规则
    标签的权值为1,类选择符的权值为10,ID选择符的权值最高为100。例如下面的代码:

    p{color:red;} /*权值为1*/
    p span{color:green;} /*权值为1+1=2*/
    .warning{color:white;} /*权值为10*/
    p span.warning{color:purple;} /*权值为1+1+10=12*/
    #footer .note p{color:yellow;} /*权值为100+10+1=111*/
    

    注意:还有一个权值比较特殊–继承也有权值但很低,有的文献提出它只有0.1,所以可以理解为继承的权值最低。

    内联样式表(标签内部)> 嵌入样式表(当前文件中)> 外部样式表(外部文件中)。

    [Read More…]

  • 【转载】IBM知识库

    Java 语言中 Enum 类型的使用介绍
    Java 日志缓存机制的实现
    JVM 垃圾回收器工作原理及使用实例介绍
    深入分析 Java I/O 的工作机制
    Java I/O 操作及优化建议
    Java 线程简介
    Java 中的进程与线程
    Java 多线程与并发编程专题

    Spring 系列: Spring 框架简介
    使用 Spring 2.5基于注解驱动的 Spring MVC
    使用 Spring 2.5 注释驱动的 IoC 功能
    详解 Spring 3.0 基于 Annotation 的依赖注入实现
    Spring Framework 5 中的新特性

    [Read More…]