前端第二讲教材.docx

第二讲 盒子模型 网页设计中常听的属性名：内容(content)、填充(padding)、边框(border)、边界(margin)， CSS盒子模式都具备这些属性。 这些属性我们可以用日常生活中的常见事物——盒子作一个比喻来理解，所以叫它盒子模式。 和标准 w3c 盒子模型不同的是：ie 盒子模型的 content 部分包含了 border 和 pading。 定位 值描述absolute生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。 元素的位置通过 left, top, right 以及 bottom 属性进行规定。fixed生成绝对定位的元素，相对于浏览器窗口进行定位。 元素的位置通过 left, top, right 以及 bottom 属性进行规定。relative生成相对定位的元素，相对于其正常位置进行定位。 因此，left:20 会向元素的 LEFT 位置添加 20 像素。static默认值。没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）。inherit规定应该从父元素继承 position 属性的值。 当含有position属性的元素为最边缘元素时： ①absolute 和?relative ：含有此2个值的边缘元素，浏览器缩小到此元素不可见时，会出现滚动条。 ②fixed ：含有此值的边缘元素，浏览器缩小到此元素不可见时，不会出现滚动条。 position: absolute 绝对定位；脱离文档流的布局，遗留下来的空间由后面的元素填充。定位的起始位置为最近的父元素(postion不为static)，否则为Body文档本身。 ? position: relative 相对定位；不脱离文档流的布局，只改变自身的位置，在文档流原先的位置遗留空白区域。定位的起始位置为此元素原先在文档流的位置。 ?position: fixed 固定定位；类似于absolute，但不随着滚动条的移动而改变位置。 ①登录框覆盖层：如dz论坛的登录。 ②虚假QQ消息广告。 position: static 默认定位，表示此元素为默认定位方式。 伪类 CSS中存在一些比较特殊的属性，称之为伪类，它们之中最常用的就是定义链接的伪:link，:visited，:hover，:active等。 锚伪类 在支持 CSS 的浏览器中，链接的不同状态都可以不同的方式显示，这些状态包括：活动状态，已被访问状态，未被访问状态，和鼠标悬停状态。 伪类可以与 CSS 类配合使用： a.red : visited {color: #FF0000} a class=red href=css_syntax.aspCSS Syntax/a 伪元素 CSS里不光有伪类，还有伪元素，比如：:first-letter，:first-line，:before和:after。 after顾名思义是在元素后面的意思，实质是在元素之后添加内容。 这个伪元素允许制作人员在元素内容的最后面插入生成内容，需要和content属性一起使用，设置在对象后发生的内容。默认地，这个伪元素是inline行内元素，不过可以使用属性 display 改变这一点。 所有主流浏览器都支持 :after 伪元素，但对于IE来说，只有IE8以上版本支持。 下面举个例子，在CSS代码中插入： style type=text/css h1:after {content:url(logo.gif)} /style h1标题内容/h1 在显示时，标题内容后会插入一张图片。这就是伪元素:after的作用。 :after伪类的content还可以跟其它的参数，例如：字符串 style type=text/css .test:after{content:测试代码}; /style div class=test测试div：/div运行结果显示为：测试div：测试代码 :before 伪元素 :before 伪元素可以在元素的内容前面插入新内容。 下面的例子在每个 h1 元素前面插入一幅图片： h1:before { content:url(logo.gif); } attr(x)，attr是属性的意思，顾名思义，就是读取该类节点的属性 例如： style type=text/css .test:after{content:attr(id)}; /style div class=test id=aaa测试div的id为：/div运行结果显示为：测试div的id为：aaa 布局 display属性 display 是CSS中最重要的用于控制布局的属性。每个元素都有一个默认的 displ