xhtml+css学习二：必须掌握的

－块状元素和内联元素

－盒子模型

－CSS控制页面方法

－CSS选择器

－文本流（文档流）

－命名方法及规则

一、块状元素与内联元素

块状元素（block element）一般是其他元素的容器元素，块元素一般都从新行开始（非常霸道的独自占用一行），它可以容纳文本、内联元素和其他元素，通过width和height属性可以设置其大小，常见的块状元素如段落p

有种特殊的情况：from标签只容纳块状元素

常见的块状元素有：div p table h1-h6 ul ol li dt dl dd center form

内联元素（inline element），不会独占一行，width与height不起作用，可以包含内联元素和文本

常见的内联元素有：a span

问题：多个块状元素真的不能在一行吗？内联元素是否真的无法设置高度和宽度？

多个块状元素可以在一行，使用float:left/float:right浮动就可以了

内联元素也可以设置高度和宽度，有两种方法：一是设置浮动，float:left;二是将内联元素设置为块状元素display:block］

二、盒子模型

理解四要素

内容（content）

边框（border）

内边距（padding）

外边距（margin）

问题：盒子模型宽度高度如何计算，有边框的时候如何计算？

<div style="width:200px; height:200px;padding:50px; border:10px #00 solid;">I</div>
<!-- 实际宽度为200+50+50+10+10 高度为200+50+50+10+10-->

内边距的用法：是在不改版盒子的大小，定义盒子内元素的位置

怎么样使的两个盒子平行，一使用margin和浮动float:left(水平相加，垂直设置一个）

三、CSS控制页面的方法

四种页面控制样式

－行内式 写在标签里面

－内联式 写在页面头部的style标签中

－链接式 使用link方式，强烈建议，这里实现了样式与结构的分离

－导入式 可以抛弃了（针对老的浏览器）

优先级

－就近原则

－理论上：行内、内联、链接、导入

－实际上：内联、链接和导入在同一个文件的头部，谁与相应的代码近谁的优先级就高

四、CSS选择器

常用选择器

－标签选择器（div、p）

－ID选择器（＃）

－类选择器（.）

－通用选择器（*） 重置所有的标签，主要是重置内外边距（每个浏览器内外边距的设置是不一样的）

－伪类选择器(:link :visited :hover :active)

优先级

－ID->类->标签->通用

需要了解并掌握

－选择器集体声明

－选择器嵌套

这里需要区分指定选择器和嵌套选择器

p.content  指定选择器

边距 margin:顺时针 上右下左

边框 border:颜色 大小 框的类型    border:10px #000 solid   

border-width:10px

border-color:#000

border-style:solid

margin:0 auto;   auto的意思是让浏览器自己计算左右边距,IE6也是可以执行的

上面是css的五种主要缩写方式的两种

（1）色彩   #RRGGBB=#RGB   #336699=369

（2）padding，margin   上右下左   10px 10px 10px 10px => 10px 10px =>10px

10px 20px 10px 20px => 10px 20px

10px 20px 30px => 10px 20px 30px 20px

（3）边框  border:#000 1px solid

边框的宽度 上右下左 border-width:1px 2px =>1px 2px 1px 2px

（4）background缩写

background:背景图片 背景色 平铺类型 水平定位 垂直定位

background: url(test.png) #ccc no-repeat 10px 5px

定义盒子背景色为＃ccc，背景图片为test.png 不平铺且距离盒子左侧10像素，距离上侧为5像素

（5）文本（font）的缩写

font：样式 粗体 字体大小／行距 字体

font:italic bold 15px/1.5 Verdana,Geneva, sans-serif.