CSS笔记

元素分类

  常用的块状元素有:

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

  常用的内联元素有:

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

  常用的内联块状元素有:

    <img>、<input>

  块级元素:

    在html中<div>、 <p>、<h1>、<form>、<ul> 和 <li>就是块级元素。设置display:block就是将元素显示为块级元素。如下代码就是将内联元素a转换为块状元素,从而使a元素具有块状元素特点。a{display:block;}

    特点:      

      1、每个块级元素都从新的一行开始,并且其后的元素也另起一行。(真霸道,一个块级元素独占一行)

      2、元素的高度、宽度、行高以及顶和底边距都可设置。

      3、元素宽度在不设置的情况下,是它本身父容器的100%(和父元素的宽度一致),除非设定一个宽度。

  内联元素:

    特点:

      1、和其他元素都在一行上;

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

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

  内联块状元素:

      1、和其他元素都在一行上;

      2、元素的高度、宽度、行高以及顶和底边距都可设置。

盒模型:

  边框:

    盒子模型的边框就是围绕着内容及补白的线,这条线你可以设置它的粗细、样式和颜色(边框三个属性)。

    1、border-style(边框样式)常见样式有:

        dashed(虚线)| dotted(点线)| solid(实线)。


    2、border-color(边框颜色)中的颜色可设置为十六进制颜色,如:

        border-color:#888;//前面的井号不要忘掉。


    3、border-width(边框宽度)中的宽度也可以设置为:

        thin | medium | thick(但不是很常用),最常还是用象素(px)。

  高度和宽度:

    一个元素实际宽度(盒子的宽度)=左边界+左边框+左填充+内容宽度+右填充+右边框+右边界。

  边界:

    元素与其它元素之间的距离可以使用边界(margin)来设置。边界也是可分为上、右、下、左。

    padding和margin的区别,padding在边框里,margin在边框外。

CSS布局模型

  流动模型:

    特征:

      1、块状元素都会在所处的包含元素内自上而下按顺序垂直延伸分布,因为在默认状态下,块状元素的宽度为  100%。实际上块状元素都会以行的形式占据位置。2、在流动模型下,内联元素都会在所处的包含元素内从左到右水平分布显示。

  浮动模型:

    块状元素独占一行,怎么让两个块状元素并排显示?

    float。

  层模型:

    如何让html元素在网页中精确定位,就像图像软件PhotoShop中的图层一样可以对每个图层能够精确定位操作。

    绝对定位:

      如果想为元素设置层模型中的绝对定位,需要设置position:absolute(表示绝对定位),这条语句的作用将元素从文档流中拖出来,然后使用left、right、top、bottom属性相对于其最接近的一个具有定位属性的父包含块进行绝对定位。如果不存在这样的包含块,则相对于body元素,即相对于浏览器窗口

    相对定位:

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

    固定定位:

      fixed:表示固定定位,与absolute定位类型类似,但它的相对移动的坐标是视图(屏幕内的网页窗口)本身。由于视图本身是固定的,它不会随浏览器窗口的滚动条滚动而变化,除非你在屏幕中移动浏览器窗口的屏幕位置,或改变浏览器窗口的显示大小,因此固定定位的元素会始终位于浏览器窗口内视图的某个位置,不会受文档流动影响,这与background-attachment:fixed;属性功能相同

长度值:

  像素:

    像素为什么是相对单位呢?因为像素指的是显示器上的小点(CSS规范中假设“90像素=1英寸”)。实际情况是浏览器会使用显示器的实际像素值有关,在目前大多数的设计者都倾向于使用像素(px)作为单位。

  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)。

文本居中:text-align : center;

水平居中:定宽块状元素居中方法;不定宽块状元素居中方法。

  不定宽:

     1、加入table标签。2、设置display;inline方法。这种方法相比第一种方法的优势是不用增加无语义标签,简化了标签的嵌套深度,但也存在着一些问题:它将块状元素的 display 类型改为 inline,变成了行内元素,所以少了一些功能,比如设定长度值。3、设置position:relative和left:50%。

垂直居中:父元素高度确定的单行文本的竖直居中的方法是通过设置父元素的height和line-height高度一直来实现的。

  1、使用插入table(包括tbody/tr/td)标签,同时设置vertical-align : middle。2、在 chrome、firefox 及 IE8 以上的浏览器下可以设置块级元素的 display 为 table-cell,激活 vertical-align 属性,但注意 IE6、7 并不支持这个样式。

  

  

      

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

posted @ 2015-12-04 15:54  走在大牛的路上  阅读(185)  评论(0编辑  收藏  举报