css样式表基础学习课件

1、本章要点本章要点nCSS基础nCSS样式n盒模型n定位与浮动n列表n网页布局与排版css为什么出现？HTML 标签原本被设计为用于定义文档内容,然而随着互联网的发展，用户对网页的展现要求越来越高。新的 HTML 标签和属性大量涌现，在一个页面中用于修饰页面的标签大大增多，因此创建文档内容清晰地独立于文档表现层变得越来越困难。为了解决这个问题，万维网联盟（W3C），这个非营利的标准化联盟，肩负起了 HTML 标准化的使命，并在 HTML 4.0 之外创造出 STYLES（样式）。2.1 CSS基础基础2.1.1 CSS简介2.1 CSS基础基础2.1.1 CSS简介 CSS的全称是“Cascad

2、ing Styles Sheets”，中文称层叠样式表，简称样式表。用于控制网页样式并允许将样式与网页内容分离的一种标记性语言。CSS是1996年由W3C审核通过，并且推荐使用的。CSS可将网页的内容与表现形式分开，使网页的外观设计从网页内容中独立出来单独管理。要改变网页的外观时，只需更改CSS样式。css版本目前的最新版本是3.0，主流是css2.0，有部分浏览器如IE9提供了很好的css3.0的支持。2.1.2 在HTML中引入CSS的方法在HTML中有四种引入CSS样式的方式：内嵌样式、内部样式表、链入外部样式表、导入外表样式表。（1）内嵌样式这是一个段落内嵌样式的使用是直接将在HTML

3、标记里加入style参数。而style参数的内容就是CSS的属性和值，如下所示：（2）内部样式表是在标签中插入 标签，用法：pcolor:red;font-size:60;font-family:隶书 （3）链入外部样式表是把样式表保存为一个样式表.css文件中，然后在页面中用标记链接到这个样式表文件，标签必须放到页面的区内，如下所示： 在p.css文件中：在标签中pcolor:red;font-size:60;font-family:隶书 （4）导入式导入时与链入式都是讲一个外部的css文件引入到html文件中。导入外部样式表是指在内部样式表的里导入一个外部样式表，导入时用import，如下

4、所示：css样式表如前所示在标签中 import url(p.css“); 注意：注意：导入外部样式表必须在样式表的开始部分，在其他内部样式表上面。 二者的区别：（1）链入式先引入样式在加载内容，导入时先加载内如，后引入样式。（2）在一个页面中如仅需要引入一个css样式，则采用 链入式；如果需要引入多个，则先使用链入式引入一个总 目录，再采用导入时引入各个样式；如果采用javascript来动态决定引入的目录，则采 用链入式。想一想？想一想？当同时使用多种样式引入方式，html页面元素如何决定取哪个效果？ CSSCSS选择器：选择器：CSS 选择器由三部分构成：选择器、属性和值：selecto

5、r property: value例如：p color: #ff0000; 选择器的作用：选择器的作用：在HTML语言中，通过选择器来控制HTML标签样式。2.2 CSS基础语法基础语法声明 使用规范：使用规范：每条声明由一个属性和其值组成。属性和值被冒号分开。如果要定义不止一个声明，则需要用分号将每个声明分开。例如：p text-align:center; color:red; 注意： CSS语言对所有属性和值都有相对严格的要求，如果声明的属性在CSS规范中不存在，或者某个属性的值不符合改属性的要求，都不能使该语句生效。2.2.1标记选择器：整体控制 标记选择器是最常见的CSS选择器。一个H

6、TML页面有很多不同的标签组成，而标签选择器，则是决定哪些标签采用相应的CSS样式。因此，每一种HTML标签的名称都可以作为相应的标记选择器的名称。2.2.2类选择器：精确控制 类选择器就是使页面中的某些标签（可以是不同的标签）具有相同的样式。类选择器的名称可以是任意英文单词或者英文开头与数字的组合，一般根据其功能和效果命名。class选择器将匹配所有class=“”的元素。 注：注： 1、类选择器经常配合标记选择器使用；例如：样式： pcolor:red; .onecolor:blue; 使用：2、可以同时使用两种类选择器， 中间以空格隔开：class=“one two”2.2.3 id选择

7、器：控制特殊的网页元素可以在HTML页面中id参数指定某个单一元素，id选择符是用来对这个单一元素定义单独的样式，具有唯一性。定义id选择符时在id名称前加“#”， 定义语法如下：id选择器将匹配所有id=“”的元素。 注意： id 属性只能在每个 HTML文档中出现一次。 id 选择器不能结合使用，因为 id 属性不允许有以空格分隔的词列表。如这样的写法是完全错误的。2.2.42.2.4群选择器群选择器当几个选择器样式属性一样时，可以共同调用一个声明，选择器之间用逗号分隔，这样可以精简代码。可以把群选择器看成是几个选择器的并集。只要选择器属于并集都可以运用该样式。h1,h2,h2,h3,h5

8、,h6 color: green p,h2,h5 font-weight: bold; color: red;复合选择器复合选择器2.2.52.2.5交集选择器交集选择器 交集选择器是由两个选择器直接连接构成，其结果是选中两者各自元素范围的交集。其中，第一个选择器必须是标记选择器，第二个必须是类选择器或id选择器，而且必须连续书写。例如：p.special color: red;/* 红色 */font-size:30; /* 字体大小：30 */注意：交集选择器必须是对此标签中，具有某种id或class样式的规定，不针对其子标签。代码： 感遇其一 作者：张九龄兰叶春葳蕤，桂华秋皎洁 样式：s

9、pan#p2color:yellow;/*正确*/ /*错误p#p2color:yellow;*/2.2.6伪类选择器伪类选择器可以看做是一种特殊的类选择器，伪类用于向某些选择器添加特殊的效果。它的最大的用处就是可以对链接在不同状态下定义不同的样式效果。伪类和类不同，是CSS已经定义好的，不能象类选择器一样随意用别的名字，根据上面的语法可以解释为对象（选择器）在某个特殊状态下（伪类）的样式。这里的选择器可以是标记选择器，也可以是交集选择器。2.2.7派生选择器派生选择器派生选择器（派生选择器（descendant selectordescendant selector）又称为后代选择器。）又称

10、为后代选择器。派生选择器可以控制某元素后代的元素样式。一般写法是派生选择器可以控制某元素后代的元素样式。一般写法是把外层标签写在前面，内层标签写在后面，之间用空格分把外层标签写在前面，内层标签写在后面，之间用空格分隔。当标签发生嵌套时，内层标签就成为外层标签的后代。隔。当标签发生嵌套时，内层标签就成为外层标签的后代。p strongfont-style:italic;font-weight:normal;color:red;派生选择器加强的部分派生选择器派生选择器的使用非常广泛，不仅标记选择器可以以这种方式组合，类选择器和id选择器也可以采用这种方式进行多层嵌套。.special strong

11、 font-style: italic; color: red; #one strongcolor: blue;td .one strongcolor: yellow;font-size:30px; 派生选择器有一个易被忽视的方面，即派生选择器所产生的影响不仅限于元素的“直接后代”，会影响到它的所有后代。例如：派生选择器加强最内层的部分派生选择器2.2.8子选择器 如果不希望任意的后代元素都被选择，而只选择某个元素的子元素，可以使用子选择器（Child selector）。子元素选择器使用大于号连接，只选择某元素的“直接”后代。p spanfont-style:italic;color:red

12、;2.2.9属性选择器CSS2引入了属性选择器，属性选择器可以为拥有指定属性的 HTML 元素设置样式。titlecolor:red;ahref color:blue;ahreftitle color:yellow;【例例2-92-9】属性选择器属性选择器-title -title attribute_selector.htmlattribute_selector.html上例中属性选择器只是选择了具有某种属性的元素，而不论属性值为多少。接下来介绍只选择有特定属性值的元素。 【例2-10】属性选择器匹配 attribute_selector_match.htmlEattr=value：指定属性

13、名，并且具有属性值，此属性值是一个词列表，并且以空格隔开，其中词列表中包含了一个value词，而且等号前面的“”不能不写；Eattr=“value”：指定了属性名，并且有属性值，属性值是以value开头的。2.2.10 CSS2.2.10 CSS继承继承如果将各个HTML标签看作是一个个容器，其中被包含的小容器会继承包含它的大容器的风格。如果将大容器看成是父标签，小容器是子标签的话，CSS继承是指父元素的样式同样适合于子元素，而且子标签可以增加自己的样式。代码：代码：css的继承属性样式：样式：pcolor:red;font-size:30;strongfont-size:50;继承的局限性：

14、并非所有的CSS属性都可以继承。文本相关属性、列表相关属性、颜色相关属性是可以继承的。但是，border属性是用来设置元素边框的，不能被继承。边框类属性如border，margin，padding之类都是不能被继承的。继承有时也会引起错误。例如定义bodycolor: red;，有些浏览器会使表格之外的颜色变成红色，表格却不会改变，这时，可以定义为body, table, th, tdcolor:red;使表格内的文字都会变成红色。2.2.11层叠层叠 CSS全称叫做“层叠样式表”，层叠是CSS中很重要的性质。可以将层叠理解成遇到样式“冲突”时如何采用何种样式。注意：注意： 样式优先级规则：行

15、内样式id样式类型样式标记样式标记样式是做整体控制的，类型样式是某种元素做精准控制的，id样式是对某一个特定元素做特殊控制的，行内样式仅对它所指定的一个元素产生影响。简单的说，越特殊的样式优先级越高。 【例2-11】层叠 cascading_style.html2.3 CSS样式样式属性属性描述描述background-color设置背景颜色background-image设置为背景图像background-position设置背景图像的起始位置background-repeat 设置背景图像是否重复以及如何重复background-attachment 设置背景图像是否固定或者随着页面的其余

16、部分滚动2.3.1 背景 CSS2中背景有5个主要属性：1 1、背景色（、背景色（background-colorbackground-color）background-color: red; background-color: rgb(255, 0, 0); background-color: #ff0000; 该属性被默认设置为“transparent”，即透明2 2、背景图片（、背景图片（background-imagebackground-image） background-image属性设置背景图片。 该属性被默认设置为“none”，表示无背景图。若想引入背景图片则使用URL（图片文

17、件的地址），地址可以使用相对路径，也可以使用绝对路径。如：background-image: url(bg_01.jpg); /*图片和样式表位于相同目录下*/ background-image: url(./image/bg_02.jpg); /*图片位于上级目录的image目录下*/ 3 3、背景重复（、背景重复（background-repeatbackground-repeat） background-repeat: repeat; /*图片在横向和纵向上平铺*/ background-repeat: no-repeat; /*图片不重复平铺*/ background-repeat:

18、repeat-x; /*图片在横向上平铺*/ background-repeat: repeat-y; /*图片在纵向上平铺*/ 该属性被默认设置为repeat，在使用该属性前必须先设置好背景图片。4 4、背景定位（、背景定位（background- positionbackground- position） 该属性值有三类选择。一种是用关键词表示，x轴上的关键词有left，right，center，y轴上的关键词有top，bottom，center。如： background-position: top right; /*图像放置在元素的右上角*/ 第二种方式是由数字和单位标识符组成的长度值

19、。长度值指的是距元素左上角的偏移。 background-position:50px 50px; /*图像放置在元素左上角向右50px，向下50px的位置*/第三种方式是百分数表示。如： background-position:50% 50%; 指的是中心位置，也就是将图片的中心位置和元素的中心位置对齐。思考？若百分比为100% 100%？若百分比为60% 20%？5 5、背景滚动（、背景滚动（background- attachmentbackground- attachment）设置背景图片是否跟着页面内容进行滚动。该属性有三个值，scroll（滚动），fixed（固定） 和 inheri

20、t（继承）。6 6、背景简写属性（、背景简写属性（backgroundbackground）background： background-color属性值 background-image属性值 background-repeat属性值 background-attachment属性值 background-position属性值一种综合的写法：background: color image repeat attachment position如果不设置其中的某个值，也不会出问题，如果省略值的话，就使用属性的默认值。默认值为：background:transparent none repeat

21、 scroll 0% 0%。 2.3.2 2.3.2 字体字体属性属性描述描述font 简写属性，作用是把所有针对字体的属性设置在一个声明中 font-family 设置字体系列 font-size 设置字体的尺寸 font-style 设置字体风格 font-variant 以小写 大写字体或者正常字体显示文本 font-weight 设置字体的粗细 CSS2中字体有6个主要属性：1 1、字体系列（、字体系列（font-familyfont-family） font-family 属性用来设置文本使用哪种类型的字体。基本语法为：在 CSS 中，有两种不同类型的字体系列名称： l通用字体系列

22、- 拥有相似外观的字体系统组合（比如 “Serif” 或 “Monospace”） ；l特定字体系列 - 具体的字体系列（比如 Times 或 Courier） font-family : 黑体, 隶书;（1 1）使用通用字体系列）使用通用字体系列 如果希望文档使用一种 sans-serif 字体，但是并不关心是哪一种字体，以下就是一个合适的声明： body font-family: sans-serif; （2 2）指定字体系列）指定字体系列 h2font-family:宋体; h4font-family:隶书, Times New Roman;/*按顺序匹配*/注意： 当指定多种字体时，用

23、“，”分隔每种字体名称。 当字体的名称之间有空格或超过一个单词时，应该使用 把该字体名称括起来，如Times New Roman。 2、字体大小（、字体大小（font-size） 用具体字号表定义字体大小，可以取下列数值之一：xx-small, x-small, small, medium, large, x-large, xx-large。使用长度单位来设置字体大小，常用px和ptp font-size:14px; p font-size:14pt; pxpx是一个点，是一个点，它不是自然界的长度单位，谁能说出一个“点”有多长多大么？可以画的很小，也可以很大。如果点很小，那画面就清晰，我们称

24、它为“分辨率高”，反之，就是“分辨率低”。所以，“点”的大小是会“变”的，也称为“相对长度”。默认的显示设置中，把文字定义为96DPI，这样的定义，说明了：1px1/96英寸。 ptpt全称为全称为pointpoint，但中文不叫“点”，确切的说法是一个专用的印刷单位“磅”，大小为1/72英寸。所以它是一个自然界标准的长度单位，也称为“绝对长度”。 因此就有这样的说法，pixel是相对大小，而point是绝对大小。 浏览器默认的字体大小为：浏览器默认的字体大小为：12px(12px(中文中文),16(),16(英文英文) ) 使用em来设置字体大小 p font-size:1em /*1em=

25、16px*/“em”是一个相对的大小，我们可以设置1em1em，0.5em0.5em等， “em”还可以指定到小数点后三位，比如“1.365em”。这里相对指的是相对于父元素的相对于父元素的font-sizefont-size。例如：如果在一个设置字体大小为“16px”，那么的后代元素将继承它的字体大小，除非重新在后代元素中进行显式设置。如果将其子元素的字体大小设置为“0.75em”，那么其字体大小计算出来后就相当于“0.75 X 16px = 12px”； 使用百分比来设置字体大小 h1 font-size: 300%; h2 font-size: 200%; 3 3、字体风格（、字体风格（

26、font-stylefont-style） font-style:normal; /*设置使用正常字*/ font-style:italic; /*设置使用斜体字*/ font-style:oblique; /*设置使用倾斜字*/ 斜体（italic）是一种意大利字体风格，而倾斜（oblique）文本则是真正的倾斜字体，由于中文倾斜不好看，所以不常用倾斜显示。 4 4、字体粗细（、字体粗细（font-weightfont-weight） font- weight:normal; /*设置使用正常字*/ font- weight:bold; /*设置使用粗体字*/ 注意：1、其值lighter可

27、以使字体变得细一个级别，boder可以粗一个级别。2、粗细可以指定范围：100-900。3、normal的值为400，bold的值为700。5 5、字体转为大写属性（、字体转为大写属性（font-variantfont-variant） font-variant:normal; /*大小写正常不转换*/ font-variant:small-caps; /*小写转成大写*/font-variant:inherit ; /*规定应该从父元素继承 font-variant 属性的值*/ 6 6、字体简写属性（、字体简写属性（fontfont） font 简写属性将所有字体属性合写为一行。font:

28、font-style属性值 font-variant属性值 font-weight属性值 font-size属性值 line-height属性值 font-family属性值font: style variant weight font-size line-height family 知识回顾：1、背景属性属性描述描述background-color设置背景颜色background-image设置为背景图像background-position设置背景图像的起始位置background-repeat 设置背景图像是否重复以及如何重复background-attachment 设置背景图像是否固

29、定或者随着页面的其余部分滚动2、文字、文字属性属性描述描述font 简写属性，作用是把所有针对字体的属性设置在一个声明中 font-family 设置字体系列 font-size 设置字体的尺寸 font-style 设置字体风格 font-variant 以小写 大写字体或者正常字体显示文本 font-weight 设置字体的粗细 2.3.3 2.3.3 文本文本 通过文本属性，可以改变文本的颜色、字符间距，对齐文本，装饰文本，对文本进行缩进等。1 1、文本颜色（、文本颜色（colorcolor）2 2、字体对齐（、字体对齐（text-aligntext-align）该属性有四种取值，默认为

30、lefttext-align:left; /*左对齐*/text-align:right; /*右对齐*/text-align:center; /*居中*/text-align:justify; /*两端对齐*/3、文本缩进（、文本缩进（text-indent）text-indent:1cm; /*文本缩进1cm*/text-indent:20px; /*文本缩进20像素*/text-indent: -2em; /* text-indent 设置负值时要当心，如果对一个段落设置了负值，那么首行的某些文本可能会超出浏览器窗口的左边界。*/ text-indent 属性文本段落首行缩进距离。该属性

31、最常见的用途是将段落的首行缩进。该属性值可以是百分比数字或者长度值，该长度可以为负值。如：4、文本修饰（、文本修饰（text-decoration）text-decoration :none; /*没有任何画线*/text-decoration :underline; /*下画线*/ text-decoration :overline; /*上画线*/ text-decoration :line-through; /*删除线*/ text-decoration :blink; /*闪烁（需要特定的浏览器支持）*/ text-decoration 属性设置文本的装饰方式，即文本的画线方式。该属性

32、有5个值，其中默认值为none。例如：a text-decoration: none;5、字体转换（、字体转换（text-transform）text-transform: none; /*文本不做任何改动*/text-transform: uppercase; /*文本全部为大写字母*/text-transform: lowercase; /*文本全部为小写字母*/text-transform: capitalize; /*文本中的每个单词以大写字母开头*/该属性值值有4个，默认的属性值为none。6、文本方向（、文本方向（direction）direction: ltr; /*从左到右显示

33、文本*/direction: rtl; /*从右到左显示文本*/该属性值有2个，默认值为ltr，表示从左到右显示文本。如果想显示为我国古代文字的书写方式，需要使用writing-mode属性。书写次序属性书写次序属性 语法：writing-mode：书写模式属性值该属性值有2个：tb-rl（从上到下，从右到左显示文本）；lr-tb（从上到下，从左到右显示文本）7、文本行高（、文本行高（line-height）line-height:16px; /*行高为16像素*/line-height:2; /*行高为当前字号乘以2*/line-height:200%; /*行高为当前字号的200%*/该属

34、性值默认为normal，属性值可以使用数字，也可以使用长度值，还可以使用百分比。8、字间距（、字间距（letter-spacing）letter-spacing:16px; /*字符间隔为16像素*/letter-spacing:-3px; /*字符间隔减少3px*/ letter-spacing属性设置字符间的间隔。该属性定义了在文本字符框之间插入多少空间。该属性值默认为normal，值为 0，属性值也可以使用长度值，当长度值为负值时表示减少字符间隔。9 9、单词间距（、单词间距（word-spacingword-spacing） word-spacing属性与letter-spacing属

35、性非常相似，word-spacing属性设置单词之间的间隔，而letter-spacing属性设置的是字母间的间隔。该属性值默认为normal(相当于值为 0)，属性值也可以使用长度值，当长度值为负值时表示减少单词间隔。对于中文来说，汉字间没有word-spacing ，只有letter-spacing。10、空白处理（、空白处理（white-space） white-space 属性设置应该如何处理在元素内的空隙。该属性影响浏览器处理字之间和文本行之间的空白符的方式。该属性值有5个，默认值为normal。注意：经测试，IE 8 以及更早版本的浏览器不支持pre，pre-wrap和pre-li

36、ne属性。vertical-align :baseline; /*默认，元素放置在父元素的基线上；*/ vertical-align :top; /*元素的顶端与行中最高元素的顶端对齐；*/ vertical-align :middle; /*元素在垂直方向上居中对齐； */vertical-align :bottom; /*元素的顶端与行中最低的元素的顶端对齐； */2.3.2.11 垂直对齐（垂直对齐（vertical-align）vertical-align 属性设置元素的垂直对齐方式。该属性定义行内元素的基线相对于该元素所在行的基线在垂直方向上进行对齐。允许指定负长度值和百分比值。在表

37、单元格中，这个属性会设置单元格框中的单元格内容的对齐方式。该属性值有10个，默认值为baseline。vertical-align :text-top; /*元素的底端与父元素字体的顶端对齐； */vertical-align :text-bottom; /*元素的底端与父元素字体的底端对齐； */vertical-align :sub; /*垂直对齐文本的下标； */vertical-align :super; /*垂直对齐文本的上标； */vertical-align :length; /*当前位置与顶部的距离；*/ vertical-align :%; /*使用 line-height

38、属性的百分比值来排列此元素，允许使用负值*/ css之之border CSS 边框属性允许你规定元素边框的样式和颜色,CSS 边框属性可以被应用于任何元素。border简写属性。作用是在一个声明中用来设置四个边框的所有属性。border-width border-style border-color border-style:设置四个边框的样式，可以设置一到四个样式。none hidden dotted dashed solid double groove ridge inset outset border-color:设置四个边框的颜色，可以设置一到四个颜色。colorborder-righ

39、t简写属性。将所有用于右边框的属性设置于一个声明中。border-right-width border-style border-color border-right-color设置右边框的颜色border-colorborder-right-style设置右边框的样式border-styleborder-right-width设置右边框的宽度。thin medium thick length csscss之表格之表格tdtrtable优先文字font, color, 对齐方式text-align, vertical-align背景background边框border 只可於table, td

40、, th设定间距margin 只可於table, caption设定內距padding 只可於td,th设定单元格距离border-spacing 只可於table设定, Firefox宽度高度width與height 只可於table, td, th设定caption-side: bottomtop | right | bottom | leftbody background-image: url(rule2.png); margin:0px;table border: 2px solid red; color: #030; font-size: 18px; margin: 10px;cap

41、tion border: 2px solid green; caption-side: bottom; margin: 20px;td border: 2px solid blue; padding: 15px; text-align: center;span background-color: #F0F0F0;分开border-collapse: separate;合并border-collapse: collaspe;table color: red; font-size: 24px; border: 10px inset green;td border: 10px inset gray;

42、 padding: 10px;border-spacing: hlength vlength* I.E. 8不支持(使用HTML table之cellspacing属性)显示empty-cells:show;隐藏empty-cells: hide;I.E. 7FirefoxXOhideshowtable color: red; font-size: 24px; border: 1px solid blue;td border: 1px solid blue; padding: 10px; background-color: #F0F0F0;练习：练习：1表格嵌套表格嵌套 练习：练习：2 歌曲下

43、载歌曲下载2.3.4 实例：实例： 论坛论坛2.4盒模型盒模型 CSS盒模型（Box Model）的学习和理解一直是学习Div+CSS网页布局的基础内容。 每个HTML元素都可以看作一个装了东西的盒子，占据一定的页面空间，一个页面可以看做是由很多这样的盒子组成，这些盒子之间会相互影响。要想掌握盒模型需要从两方面来理解，一是理解盒模型的内部结构，二是理解盒子之间的关系。2.4.1盒的内部结构盒的内部结构什么是什么是csscss盒模型？盒模型？ W3C组织建议把所有网页上的对象都放在一个盒(box)中，设计者可以通过创建定义来控制这个盒的属性，这些对像包括段落、列表、标题、图片以及层。 盒模型主要

44、定义四个区域：内容(content)、边框距(padding)、边界(border)和边距(margin)。margin，background-color，background-image，padding，content，border之间的层次、关系如下：W3C定义的平面盒模式如下：整个盒模型在页面中实际所占的宽度和高度分别为：宽度 = 左边界 + 左边框 + 左填充 + 内容宽 + 右填充 + 右边框 + 右边界高度 = 上边界 + 上边框 + 上填充 + 内容高 + 下填充 + 下边框 + 下边界注意：1、width和height定义的是content部分的宽度和高度而不是整个盒子的高度，

45、这个是初学者常犯的一个错误，padding border margin的宽度依次加在外面。背景会填充padding和content部分。2、如果页面没有做 DOCTYPE 声明，标准浏览器将使用标准盒模型解析元素盒子，而 IE 浏览器将使用 IE 的盒模型解析元素盒子，两种盒模型对于盒子 width 和 height 的属性值定义不同。为了使页面代码能足够强壮，最好在网页源码中标签之前加入 DOCTYPE 声明。2.4.2内边距内边距(padding)padding 属性定义元素边框与元素内容之间的空白区域。padding 属性值可以是长度值或百分比值，但不允许使用负值。padding-top

46、: /*设置元素的上内边距*/padding-right: /*设置元素的右内边距*/padding-bottom: /*设置元素的下内边距*/padding-left: /*设置元素的左内边距*/padding有四个单独的属性，分别设置上、右、下、左内边距：为padding设置值：1、设置1个属性值表示上下左右四个内边距均为该值。2、设置2个属性值时，第一个值为上下内边距的值，第二个值为左右内边距的值。3、设置3个属性值时，第一个值为上内边距的值，第二个值为左右内边距的值，第三个值为下内边距的值。4、设置4个属性值时，依次表示上、右、下、左四个内边距的值，即从上边距开始逆时针设置各值。元素的

47、内边距也可以设置为百分比值。百分比值是相对于其父元素的 width 计算的。2.4.3外边距外边距(margin) CSS 外边距 (margin) 属性定义元素周围的空间，也就是该盒模型和其他元素的空白区域。 和内边距设置相同，可以使用单独的属性对上、右、下、左的外边距进行设置，也可以直接使用margin属性同时改变所有的外边距。margin 的默认值是 0，所有如果没有为 margin 声明一个值，就不会出现外边距。2.2.4边框边框(border)1、边框宽度2、边框颜色3、边框样式2.2.5块级元素与内联元素 在不使用特定的定位和布局手段时，网页中各元素会有自己的排列布局方式，这就是标

48、准文档流形成的效果。 在标准文档流里将元素分为块级元素和内联元素。1、块级元素、块级元素(block element) 以块显示的元素，高度宽度都是可以设置的。块级元素默认状态下每次都占据一整行，后面的内容也必须再新起一行显示。也就是块级元素的宽度始终与浏览器宽度一样，与内容无关。 主要的块级元素有：2、内联元素、内联元素(inline element) 内联元素也叫行内元素，其文本的显示方式，与块级元素相反，内联元素的高度宽度都是不可以设置的，其宽度就是自身文字或者图片的宽度。内联元素的显示特点就是像文本一样的显示，不会独自占据一个行。 主要的内联元素有： 当加入了css控制以后，块元素和内

49、联元素的这种属性差异就不成为差异了。比如，可以把内联元素设置display:block。标签和标签和 标签早在HTML3.0时代已经出现，但那时并不常用，直到css的普及，才逐渐发挥出它的优势。标签在HTML4.0时才被引入，它是专门针对样式表而设计的标签。关于关于divdiv 简单而言是一个区块容器标签，在之间相当于一个容器，可以容纳段落，标题，表格，图片等各种HTML元素。可以把与中的内容视为一个独立的对象，用于CSS控制。关于关于spanspan 仅仅是一个行内元素，在它的前后不会换行。没有结构上的意义，纯粹是应用样式，当其他行内元素都不合适时，就可以使用元素。2.2.62.2.6边距合

50、并边距合并1、内联元素之间的水平margin 当两个内联元素紧邻时，它们之间的距离为第一个元素的margin-right加上第二个元素的margin-left。当两个块级元素垂直排列时，外边距会出现“合并”，也叫做“塌陷”。外边距合并指的是，当两个垂直外边距相遇时，它们将形成一个外边距。合合并后的外边距的高度等于两个发生合并的外边距的并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。高度中的较大者。2、块级元素之间的垂直、块级元素之间的垂直margin注意：只有普通文档流中块框的垂直外边距才会发生外边距合并。2.2.72.2.7实例：实例： div div 文字文字2.5浮动与定位浮

51、动与定位2.5.1浮动(float) 在标准流里块级元素占据整行空间，而内联元素则是像文本一样的一个接着一个的排列。 浮动属性的定义是通过float来声明的。在CSS 中，任何元素都可以浮动，浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。 float属性有3个值：none（默认，不浮动）、left（靠左浮动）、right（靠右浮动）。例一：例一：1、增加一个左浮动块2和一个右浮动块3，观察文字的显示区域。2、全部左浮动，并增加块1的高度。当变化浏览器的窗口大小时观察块三的位置，例二：实现如下浮动效果：例三：例三：例四：2.5.2定位(position)posit

52、ion 属性值：static （静态定位）（静态定位）默认的属性值，表示保持在应该在的位置，前面的例子都是这种结构。 relative （相对定位）（相对定位）元素框偏移某个距离。元素仍保持其未定位前的形状，它原本所占的空间仍保留。 absolute （绝对定位）（绝对定位）元素框从文档流完全删除，并相对于其包含块定位。包含块可能是文档中的另一个已定位的父元素或者是浏览器窗口。fixed （固定定位）（固定定位）元素框的表现类似于将 position 设置为 absolute，不过其包含块是浏览器窗口本身。 1、相对定位、相对定位(relative) 相对定位有四个属性left、right、t

53、op、bottom，通过设置这四个属性值，让这个元素“相对于”它的原来所在的位置进行移动。注意：注意： 相对定位是以盒子本身在标准流中或浮动时原本相对定位是以盒子本身在标准流中或浮动时原本的位置作为偏移基准。的位置作为偏移基准。.box2_relative position: relative; left: 30px; top: 20px;例如：例如：内部块结论：1、使用相对定位的盒子，会根据它本来的位置，通过偏移指定的距离，到达新的位置。2、使用相对定位的盒子仍在标准流中，它对父块没有影响。再增加块2发现它对兄弟块也无影响，就好像它仍然在原来的位置上一样。浮动块的相对偏移对浮动的盒子实行相对

54、定位和标准流一样，它也是相对于原本的位置，其它盒子也以为它还在那里。2 2、绝对定位、绝对定位(absolute)(absolute)设置为绝对定位的元素框从标准文档流完全删除。例如：块1块2块3块2会彻底脱离标准流，块3会紧贴块1，就好像没有块2一样。而且我们会发现，块2以浏览器窗口作为定位基准。是否所有的绝对对位都以浏览器窗口来定位呢？答案是否定的。.ddwidth:600px;height:400px;background-color:yellow;position:absolute;结论： 绝对定位的盒子以它最近的已经定位了的祖先元素为基准进行偏移。已经定位是指position的值被设置。2.5.3 display2.5.3 display属性属性 在标准文档流中，块级元素占据一行空间，内联元素则在一排中一个接一个的排列。但是，块级元素也可以通过display属性设置为内联元素，同样内联元素也