css基础什锦

字体的样式

    font-size:20px
    font-family:""
    color:red；
    font-style:italic;斜体
    text-decoration:underline;下划线
                    line-through;删除线                    

段落排版

   text-indent:2em;缩进
    line-height：2em;行高
    letter-spacing：50px;文字间隔或字幕行距。
    我想设置英文单词之间的间距呢？可以使用 word-spacing 来实现。
    text-align：center|left|right
        为块状元素中内联元素的文本、图片设置居中样式。

元素的分类

块状元素

转换     
        设置display:block就是将元素显示为块级元素。如下代码就是将内联元素a转换为块状元素，a{display:block;}
        特点：
            1、每个块级元素都从新的一行开始，并且其后的元素也另起一行。
            2、元素的高度、宽度、行高以及顶和底边距都可设置。
            3、元素宽度在不设置的情况下，是它本身父容器的100%（和父元素的宽度一致），除非设定一个宽度。

内联元素

转换：
        当然块状元素也可以通过代码display:inline将元素设置为内联元素。
        特点：
            1、和其他元素都在一行上；

            2、元素的高度、宽度及顶部和底部边距不可设置；

            3、元素的宽度就是它包含的文字或图片的宽度，不可改变。

    }

内联块状元素

    释义：
        就是同时具备内联元素、块状元素的特点，代码display:inline-block就是将元素设置为内联块状元素。
    特点：
        1、和其他元素都在一行上；
        2、元素的高度、宽度、行高以及顶和底边距都可设置。

所有的块级元素和内联元素都具备盒子模型

盒子模型

border：边框
    div
        border:2px  solid  red;

    分开写
    div
        border-width:2px;
        border-style:solid;
        border-color:red;

    边框的style样式：dashed（虚线）| dotted（点线）| solid（实线）。
    边框的颜色：border-color（边框颜色）中的颜色可设置为十六进制颜色。
    边框的宽度：thin | medium | thick（但不是很常用），最常还是用象素（px）。

    填充，边距
        填充，边距也可分为上、右、下、左(顺时针)。
        div{padding:20px 10px 15px 30px;}
        如果上、右、下、左的填充都为10px;    
        div{padding:10px;}
        如果上下填充一样为10px，左右一样为20px。
        div{padding:10px 20px;}

    一个元素实际宽度（盒子的宽度）=左边界margin+左边框+左填充padding+内容宽度+右填充+右边框+右边界

css布局模型

默认：流动模型

    默认的网页布局模式：
    第一点，块状元素都会在所处的包含元素内自上而下按顺序垂直延伸分布，因为在默认状态下，块状元素的宽度都为100%。实际上，块状元素都会以行的形式占据位置。如右侧代码编辑器中三个块状元素标签(div，h1，p)宽度显示为100%。

    第二点，在流动模型下，内联元素都会在所处的包含元素内从左到右水平分布显示。

Float：浮动模型
    使块状元素能像内联元素一样。

Layer：层模型
    层模型：
        CSS定义了一组定位（position）属性来支持层布局模型。
    层模型有三种形式：
        1、绝对定位(position: absolute)
            将元素从文档流中拖出来，然后使用left、right、top、bottom属性相对于其最接近的一个具有定位属性的父包含块进行绝对定位。如果不存在这样的包含块，则相对于html元素，即相对于浏览器窗口。

        2、相对定位(position: relative)
            它通过left、right、top、bottom属性确定元素在正常文档流中的偏移位置。相对定位完成的过程是首先按static(float)方式生成一个元素(并且元素像层一样浮动了起来)，然后相对于以前的位置移动，移动的方向和幅度由left、right、top、bottom属性确定，偏移前的位置保留不动。

            div元素相对于以前的位置产生了偏移，但是div元素以前的位置还是保留着，所以后面的span元素是显示在了div元素以前位置的后面。会出现层叠。

        3、固定定位(position: fixed)

           表示固定定位，与absolute定位类型类似，但它的相对移动的坐标是视图（屏幕内的网页窗口）本身。由于视图本身是固定的，它不会随浏览器窗口的滚动条滚动而变化，除非你在屏幕中移动浏览器窗口的屏幕位置，或改变浏览器窗口的显示大小，因此固定定位的元素会始终位于浏览器窗口内视图的某个位置，不会受文档流动影响， 

        4.relative与absolute的组合使用

            可以实现被设置元素相对于浏览器（html）设置定位以后，大家有没有想过可不可以相对于其它元素进行定位呢？答案是肯定的，当然可以。但必须是其祖先元素。

缩写

    padding和margin

        如果top和bottom值相同、left和 right的值相同，如下面代码：
            margin:10px 20px 10px 20px;
            可缩写为
            margin:10px 20px 30px;
            成对的属性值有一个：另一个若相同，则这个即可省略。     

    颜色值的缩写

        关于颜色的css样式也是可以缩写的，当你设置的颜色是16进制的色彩值时，如果每两位的值相同，可以缩写一半。
            p{color: #336699;}
            p{color: #369;}

    字体的缩写
        font-style:italic;
        font-variant:small-caps; 
        font-weight:bold; 
        font-size:12px; 
        line-height:1.5em; 
        font-family:"宋体",sans-serif;
        可简写为
                font:italic  small-caps  bold  12px/1.5em  "宋体",sans-serif

单位

颜色值

    1. 英文命令颜色
    2、RGB颜色：p{color:rgb(133,45,200);}
    每一项的值可以是 0~255 之间的整数，也可以是 0%~100% 的百分数。如：

    p{color:rgb(20%,33%,25%);}
    3. 十六进制颜色

长度值
    1、像素
    2、em 就是本元素给定字体的 font-size 值，如果元素的 font-size 为 14px ，那么 1em = 14px；如果 font-size 为 18px，那么 1em = 18px。如下代码  p{font-size:12px;text-indent:2em;}
        特殊情况：
        下面注意一个特殊情况：
        但当给 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）

百分比         
    p{font-size:12px;line-height:130%}
    设置行高（行间距）为字体的130%（12 * 1.3 = 15.6px）。

精华问题

1.float:left/right 的区别？是左对齐和右对齐吗？

“设置浮动的同时一定要先设置块状元素的宽度，且需要浮动的几个元素宽度加起来一定要小于容器元素的宽度。”

这句话里涉及的块状元素的宽度和容器元素的宽度，在本例中具体是什么呢？

答案：

    第一个问题：你的相法是对的，这个float:left/right ，可以理解为word中的左对齐和右对齐。

    第二个问题：(1)“需要浮动的几个元素宽度”指的是两个div，之和就为200+200=400px。

    （2）“容器的宽度”这里因为两个div外面一层是body，body你可以理解为浏览器，所以是指浏览器的宽度。所以，你会看到，如果浏览器宽度大于400px,两个div就可以一行显示，而小于400px时，第二个div就被挤下来了。

2.line和line-height的区别

    line-height呢，你可以理解为每行文字所占的高度。（但不同font-size）
    比如说，有一行20px大小的文字，如果设置为line-height:50px，那就是说，这行文字的高度会占50px。
    显然，每个字的大小只有20px，那怎么边呢？于是呢，浏览器就把多出来的30px（50px-20px）在这行文字的上面加上了15px，下面加上了15px。
    这样的话，那文字就在这50px的空间内是居中的了（这个就是浏览器规定的，它就这个分配空间）。
    这样的话，如果你的DIV是50px，那么巧了，正好这行文字也就相对于DIV居中了。
    所以，这样一来呢，就有了“把line-height设置为容器div的高度就能使文字垂直居中”。