css有3种定位机制:普通流,浮动和绝对定位.

除非专门指定,否则所有框都在普通流中定位,即普通流中的元素位置由元素在(x)html中的位置决定.

通过使用position属性,可以选择4种不同类型的定位:

static 元素框正常生成

relative 元素框偏移某个距离:正常元素可以通过设置垂直或水平位置,让这个元素"相对于"它的起点进行移动.若将相对定位中的top设为20px,则框将在原位置下面20像素地方,类似如果left设为30像素,则会在元素左边创建30像素的空间,即元素会向右移动.

absolute 元素框从文档完全删除,并相对于其包含块定位:绝对定位使元素位置和文档流无关,因此不占据空间.绝对定位位置相对于最近的已定位祖先元素,如果没有,则位置相对于最初的包含块.因为绝对定位框与文本流无关,所以可以覆盖页面上的其他元素,通过设置z-index属性来控制这些框的堆放次序.

fixed 元素框表现类似于将position设置为absolute,不过包含块是视窗本身

浮动的框可以向左或向右移动,直到其外边缘碰到另一个元素框为止,浮动框不在文档的普通流中,所以文档的普通流中的块框表现的就像浮动框不存在一样.

css中通过float属性实现元素的浮动

css2中引入一种新的简单选择器-统配选择器,显示为*,该选择器可以与任何元素匹配: * {color:red;}

在html中class值可能包含多个类名,比如:<p class="aaa bbb">,多个类名顺序无关紧要.假设aaa元素都是粗体,bbb元素都为斜体,而同时包含aaa和bbb的所有元素还有一个银色的背景,则可以写作:

.aaa {font-weight:bold;}

.bbb {font-style:italic;}

.aaa.bbb {background:silver;}

通过把2个类选择器链接在一起,仅可以选择同时包含这些类名的元素.

类选择器和id选择器可能区分大小写,这取决于文档的语言.html和xhtml将类和id值定义为区分大小写.

ccs2引入了属性选择器,属性选择器根据元素的属性及属性值来选择元素.

把含有title属性的所有元素变为红色: *[title] {color:red;}

对拥有href属性且仅仅位锚a元素应用样式:a[href] {color:red;}

对带有alt属性的img元素应用样式: img[alt] {border:5px solid red;} 注意属性值是可以虚构的.

选择特定属性值的元素: a[href=www.abc.com/index.asp] {color:red;}

多条件匹配:a[href="xxx"][title="zzz"] {color:red;}

根据部分属性值进行匹配:p[class~="imp"] {color:red;}

下表是对这些选择器的简单总结:

类型 描述
[abc^="def"] 选择 abc 属性值以 "def" 开头的所有元素
[abc$="def"] 选择 abc 属性值以 "def" 结尾的所有元素
[abc*="def"] 选择 abc 属性值中包含子串 "def" 的所有元素

下面代码只会选择lang属性值等于en或以en-开头的所有元素.

*[lang|="en"] {color:red;}

后代选择器可以作为某元素后代的元素.

只对h1元素中的em元素应用样式:h1 em {color:red;}

有关后代选择器一个易忽视的方面是2个元素间层次间隔可以是无限的.比如ul em,则会选择ul中的em元素,而不管em嵌套的层次多深.

如果不希望选择任意的后代,只选择某个元素的子元素,可以使用子元素选择器.例如,如果希望选择只作为h1元素子元素的strong元素:h1 > strong {color:red;}

下面代码会选择td元素子元素的所有p元素,该td元素从table继承,该table元素有一个包含company的类属性.

相邻兄弟选择器可选择紧接在另一元素后的元素,且二者有相同的父元素.如要增加紧接在h1元素后面出现的p元素的上边距:h1 + p {margin-top:50px;}.注意h1和p不是包含关系,二是接壤关系.该选择器选择紧接在h1元素后出现的p元素,h1和p拥有共同的父元素.

css伪类用于向某些选择器添加特殊的效果.

伪类可以和css类配合使用:a.red : visited {color:#ff0000}

css2的first-child伪类可以来选择元素的第一个子元素:

p:first-child {font-weight:bold;}

上行代码将作为某个元素第一个子元素的所有p元素设置位粗体.必须声明<!DOCTYPE>,first-child才能在ie中生效.

css2的lang伪类使你有能力为不同语言定义特殊规则,以下代码为属性值为no的q元素定义引号的类型:

q:lang(no){quotes: "~" "~"}

first-line伪元素用于向文本首行设置特殊样式,只能用于块级元素.

first-letter伪元素用于向文本首字母设置特殊样式

before伪元素在元素内容前面插入新内容:h1:before {content:url(logo.gif);} 在每个<h1>前插入一幅图片

after伪元素在元素内容后插入新内容

使用/* */可以在css文件中插入注释

恶补web之二:css知识(3)的更多相关文章

  1. 恶补web之二:css知识(2)

    css字体属性定义文本的字体系列,大小,加粗,风格和变形等. css中包含两种字体系列:通用字体系列和特定字体系列. font-family属性定义文本的字体系列: body {font-family ...

  2. 恶补web之二:css知识(1)

    css指层叠样式表(Cascading Style Sheets)     样式定义如何显示html元素,样式通常存储在样式表里.把样式添加到html4.0中,是为了解决内容与表现分离的问题.外部样式 ...

  3. 恶补web之七:html DOM知识

    html DOM定义了访问和操作html文档的标准;dom是w3c的标准,dom定义了访问html和xml文档的标准: w3c文档对象模型(dom)是中立平台和语言的接口,它允许程序和脚本动态访问和更 ...

  4. 恶补web之一:html学习(1)

    发现以前欠下的web知识太多鸟,只有重头开始好好学吧,恶补第一站就是html知识啦! html指的是超文本标记语言,它不是编程语言,而是一种标记语言;标记语言是一套标记标签(markup tag),h ...

  5. 恶补web之六:javascript知识(2)

    若要向html添加新元素,必须首先创建该元素,然后向一个已存在的元素追加该元素 <div id="div1"> <p id="p1">这 ...

  6. 恶补web之六:javascript知识(1)

    javascript(下称js)是一种轻量级编程语言,它可以插入html页面然后由浏览器执行. document.write("<h1>...</h1>") ...

  7. 恶补web之一:html学习(2)

    iframe用于在网页内显示网页:<iframe src="URL"></iframe>,iframe可用作链接的目标: <!DOCTYPE html ...

  8. 恶补web之八:jQuery(3)

    jquery和其他js框架.jQuery使用$作为jQuery的简写,但是还有很多js框架,比如: MooTools,Backbone,Sammy,Cappuccino,Knockout,JavaSc ...

  9. 恶补web之八:jQuery(2)

    jquery中非常重要的部分,就是操作dom的能力: text() - 设置或返回所选元素的文本内容 html() - 设置或返回所选元素的内容(包括html标记) val() - 设置或返回表单字段 ...

随机推荐

  1. 5.Qt自定义Button按钮的实现

     1.编写自定义按钮 MyButton.h #ifndef MYBUTTON_H #define MYBUTTON_H #include <QWidget> /** * @brief ...

  2. Android源码分析—深入认识AsyncTask内部机制

    本文转载http://blog.csdn.net/singwhatiwanna/article/details/17596225该博主博文,谢谢该博主提供的好文章! 前言 什么是AsyncTask,相 ...

  3. 【并发编程】Binder运行机制的流程图

    Binder工作在Linux层面,属于一个驱动,只是这个驱动不需要硬件,或者说其操作的硬件是基于一小段内存.从线程的角度来讲,Binder驱动代码运行在内核态,客户端程序调用Binder是通过系统调用 ...

  4. 仿淘宝购物车demo---增加和减少商品数量

    在上一篇博客中,小编简单的介绍了如何使用listview来实现购物车,但是仅仅是简单的实现了列表的功能,随之而来一个新的问题,买商品的时候,我们可能不止想买一件商品,想买多个,或许有因为某种原因点错了 ...

  5. 安卓仿QQ红包领取详情界面动画

    为了能清楚的看到这个效果,本人不惜几次花费重金给众群叼发放红包,来查看红包领取详情界面的动画效果,QQ效果如图: 图中我们可以看到,动画处的头像和文字是一起的,即同时并且是整体,注意,是整体进行缩放的 ...

  6. Mybatis插件原理分析(二)

    在上一篇中Mybatis插件原理分析(一)中我们主要介绍了一下Mybatis插件相关的几个类的源码,并对源码进行了一些解释,接下来我们通过一个简单的插件实现来对Mybatis插件的运行流程进行分析. ...

  7. ArrayList与Vector的区别

    ArrayList与Vector的区别 相同 这两个类都实现了List接口. 他们都是有序集合. 不同 ArrayList实现不是同步的,Vector实现是同步的. ArrayList与Vector都 ...

  8. Android启动过程分析

    Android系统启动过程 首先看一张Android框架结构图 Linux内核启动之后就到Android Init进程,进而启动Android相关的服务和应用. 启动的过程如下图所示:(图片来自网上, ...

  9. (三十四)NavigationController初步

    为了了解底层,首先不基于UIWindow而基于UIWindow来创建App. 由于Xcode6没有以前的基于UIWindow的空项目,所以选择SingleView,然后删除storyboard,移除B ...

  10. E-JSON数据传输标准

    简介 E-JSON的设计目标是使业务系统向浏览器端传递的JSON数据保持一致,容易被理解和处理,并兼顾传输的数据量.E-JSON依托于http协议(rfc2616)与JSON数据交换格式(rfc462 ...