csshtml基础培训盒子模型定位模型.ppt

HTML基础介绍,HTML 与 CSS,CSS样式应用,盒子模型,定位模型,表格解析,附加,HTML简介,HTML（Hyper Text Markup Language）是建立发表联机文档采用的语言， 称为超文本标识语言。 HTML被用来结构化信息例如标题、段落和列表等等，也可用来在一定程度上描述文档的外观和语义。 （侧重于描述“结构、语义”而非样式）。 当前版本为html4、html5目前还是个草案，也将是未来的标准。 xhtml规范编写，却用html解析： text/html，application/xhtml+xml，但是ie对application/xhtml+xml不支持。 而xhtml严格的文档规范，更加容易阅读，而且清晰的文档结构对于运用css也很重要。,Xhtml 简介,XHTML ： (eXtensible HyperText Markup Language）可扩展超文本置标语，是一种置标语言，表现方式与超文本置标语言（HTML）类似，不过语法上更加严格。 比如现在运用的Xhtml1.1、 Xhtml1.0是对html4的改进版，采用了更严格的xml规则。他们都是w3c推荐的规范。,Html、xhtml的区别：,元素、属性必须小写， 必须有结束标签； 属性值必须加冒号“ ”、 不能使用没有值的属性（图像映射的 ismap 样式） Xhtml名称空间必须在中声明（如：） 不能省略body head Title必须放在在head第一个元素位置 唯一标示元素用id不要用name。 元素不能交叉here is an emphasized paragraph.。 特殊字符用实体引用（如 :[等）,Xhtml的DTD文档定义,XHTML 1.0：三种文档定义 严格（不能使用html格式元素（font、table、center等），必须使用样式表来格式化文档） 过渡（可以使用格式化文档）： 框架（可以使用格式化、还允许在网页中定义框架元素frameset 、frame iframe 过渡型也支持） XHTML 1.1：只有一种（极其严格的方法来创建高度结构化的网页）： ,HTML的结构,HTML把元素划分为3个主要类：结构化元素、块状元素和内联元素。 核心的结构化元素有：、和。中放的是关于文档的信息，文档内容放在中。在头部元素设计模式中我们会讨论头部元素。 块状元素还分为3种：结构化的、多目标的和终端的。 内联元素也有3种主要的类型：语义化、排列顺序、内联块状。,块状元素,包括以下3类块状元素： 结构化块状元素 ： （只表明结构、不表示内容） 多目标块状元素 ： 定义 （用于扩展或终止结构，可包含块状元素或内容不建议有混合内容（只有文本和内联元素才能构为内容） 终端块状元素 ： 定义词汇 表格标题 （不能再包含块状元素、只能包含文本和内联元素、它表达的主要是语义）,内联元素,包括以下3种主要的内联元素类型和6种次要类型 内联语义 包括以下几种元素和文本的组合，如果只是为了达到某种视觉效果而使用这些标签的话，建议使用样式表，那么做会达到更加丰富的效果。 重要 ： 词组 ： 单词 ： 字符 ： 内联排列顺序 ： 内联块状 ： 包括可替代元素和表单控制元素： 替代 ： （可用外部内容替代） 控制 ： ,HTML基础介绍,HTML 与 CSS,CSS样式应用,盒子模型,定位模型,表格解析,附加,CSS简介,CSS : Cascading Style Sheets . 层叠（级联）样式表. 是控制网页布局样式的基础，真正做到网页表现与内容分离的一种样式设计语言。精确到像素级控制。,CSS选择符,1.通配选择符 语法： * sRules *lang=fr font-size:14px; width:120px; *.div text-decoration:none; 2.类型选择符 语法： E sRules 说明： 类型选择符。以文档语言对象(Element)类型作为选择符。 示例： td font-size:14px; width:120px; a text-decoration:none; ,CSS选择符,3.属性选择符 语法： E attr sRules E attr = value sRules E attr = value sRules 说明： 属性选择符。 选择具有 attr 属性的 E 选择具有 attr 属性且属性值等于 value 的 E 选择具有 attr 属性且属性值为包含value的E,CSS选择符,4.包含选择符（子孙） 语法： E1 E2 sRules 说明： 包含选择符。选择所有被 E1 包含的 E2 。即 E1.contains(E2)=true 。 示例： table td font-size:14px; 5.子对象选择符 语法： E1 E2 sRules 说明： 子对象选择符。选择所有作为 E1 子对象的 E2 。 示例： body p font-size:14px; ,CSS选择符,6.ID选择符 语法： #ID sRules #note font-size:14px; width:120px; 7.类选择符 语法： E.className sRules div.note font-size:14px; ,CSS选择符,8.选择符群组 语法： E1 , E2 , E3 sRules 说明： 选择符分组。将同样的定义应用于多个选择符，可以将选择符以逗号分隔的方式并为组。 示例： .td1,div a,body font-size:14px; td,div,a font-size:14px; ,CSS选择符,9.伪类及伪对象选择符(称之为伪，因为它选中的不知整个元素，是元素中的一部分内容、或某一状态) 语法： E : Pseudo-Classes sRules E : Pseudo-Elements sRules 说明： 伪类及伪对象选择符。 伪类选择符。:link :hover :active :visited :focus :first-child :first :left :right :lang。 伪对象(伪元素)选择符。:first-letter :first-line。 示例： div:first-letter font-size:14px; a.fly :hover font-size:14px; color:red; ,CSS选择符,附加： （ie6中：只支持 群组逗号表示、后代选择符 空格表示 ），ie6对伪类的支持也只能在a上。 A标签的伪类选择符定义顺序，有一定先后为： a:link a:visited a:hover a:active a:focus Las Vegas Hells Angels Fight 拉斯 维加斯 魔鬼 天使 之战 LoVeHAte link:连接平常的状态 active:连接被按下的时候 a:active（ie中获得焦点） a:focus（非ie获得焦点）,6个级别： 1：！important 2：style属性 3：id选择符 4：类、属性或伪类选择符 5：元素选择符 6：只有一个通配选择符* 原则： 1：越具体到某一个元素的样式，优先级别越高。 2：同一个级别的，以其高级别的选择符个数多少来判断 如：#00 *.c100 *.c10 高于 #00 *.c100 div p span 以为前者的类选择符多。 3：按照样式所处的位置判断（用于当前两条无法判断时）： 中 中的import 的文件中的import 4：后面的覆盖前面的。 附加：css 的样式会覆盖html中属性的样式，如 会被 style=”width:200xp;” 覆盖,样式优先级,HTML基础介绍,HTML 与 CSS,CSS样式应用,盒子模型,定位模型,表格解析,附加,盒子模型,盒子模型： 包括width/height, padding, border, margin。 有标准盒子模型 和 ie盒子模型之分。,盒子模型,ie盒子模型 它的width、height是包括padding、border的，标准盒子的高宽是不包括padding和border,六种盒子呈现方式,内联盒子 内联块状盒子 块状盒子 表格盒子 绝对定位盒子 浮动盒子 研究 width/height, padding, border, margin在不同状况下的不同特性。,内联盒子,内联元素特点: 其盒子模型是自适应其内容的，不会独占行。 height、width和margin-top、margin-bottom是无效的。 （ border、padding并不能增加它的行高，只会让它和其它行交叉 或则溢出父元素， 但可以通过line-height来间接控制其高度，line-height的默认值由内联元素的文字或图片高而定，） file:/F:/html%20css%20demo/Chapter%2004%20-%20BOX%20MODELS/Inline%20Box/example.html 符：从实例可以看出横向上属性margi-left、margi-right是有效的。 但height、width和margin-top、margin-bottom是无效的 magin-top实际上是没有效果，并不会控制自己的偏移。,块状盒子,块状盒子：block 独占行，width：auto会自动扩展填充满容器，填充满容器 Margin：auto width：固定值 可居中， 上下两行间的margin-top和margin-bottom会相互抵消，如果都是正的，则他们的间距以较大的一个为准，不会是两个之和。 附加：margin可以有负值。Border、padding是不行的。 file:/F:/html%20css%20demo/Chapter%2004%20-%20BOX%20MODELS/Block%20Box/example.html,内联块状盒子,内联块状元素：inlne-block 雷同于块状元素，只是它不会独占一行。 height、width和margin-top、margin-bottom都是有效的。,表格盒模型,表格：display：table 在标准里table没有padding有margin 、单元格有padding但没有margin。 table的width、height是包括border的。 Table-layout：fixed / auto 居中：margin：0 auto（表格盒模型width：auto虽然没有自动拉伸的特性，但margin：auto是和块元素一样是自动拉伸的） 独占行，但width不充满整行； file:/F:/html%20css%20demo/Chapter%2004%20-%20BOX%20MODELS/Table%20Box/example.html table的width、height是包括border的： file:/F:/html%20css%20demo/Chapter%2004%20-%20BOX%20MODELS/Table%20Box/example2.html,绝对定位盒子模型,Position：absolute 它不会对其它的元素构成影响，分属不同的排列层文档流。 相对于最近已经定位的祖先元素的padding开始进行定位（并不是从它的内宽开始） Z-index，left、right、top、bottom （符加说明： absolute偏移是相对于最近的已经定位的祖先元素，同样其width、height等百分比的尺寸也是相对于最近的已经定位的祖先元素，而不是父元素。 z-index也一样相对于其最近的已经定位的祖先元素 进行堆叠设置，同时只能用于已定位元素。） 什么是“已经定位的元素”？ 把position设置为relative或absolute或fixed， position : static | absolute | fixed | relative 其中static不算因为它只是顺序解析。,绝对定位盒子模型,原始位置绝对定位（即absolute但没有设置left right top bottom值）， 不代表它的left right top bottom会是0，而是在原来顺序位置上， 同时作为绝对定位盒子模型进行解析。 绝对定位的子元素不会撑大绝对定位的父元素。 file:/F:/html%20css%20demo/Chapter%2004%20-%20BOX%20MODELS/Absolute%20Box/example.html,浮动盒模型,Float ： 按标准它将使元素脱离原来的排序、文档流，独立在浮动层上，所以它不会撑大非float的父元素 （ie6会；火狐不会可以在浮动元素下加clear的元素，让其撑大。） 邻近两个float元素的margin是不会相抵消。 它不会影响块元素的布局，块元素会当它不存在一样的占用它的空间，但它会令内联元素和表格盒模型元素绕开它。 file:/F:/html%20css%20demo/Chapter%2004%20-%20BOX%20MODELS/Floated%20Box/example.html 浮动的子元素会撑大浮动的父元素,HTML基础介绍,HTML 与 CSS,CSS样式应用,盒子模型,定位模型,表格解析,附加,定位模型 Position,position : static | absolute | fixed | relative 它和float结合使用出现6中定位模型： 静态：专门用于覆盖其它值，恢复元素原始排列 绝对 固定 相对：相对于该元素的顺序解析时的位置，而且保留原有位置 不会被其它元素再利用 浮动 相对浮动（ relative float ）：基于原浮动后位置的相对偏移。 某一元素获得定位可以解决很多ie浏览器中莫名奇妙的问题 比如：file:/F:/SourceCode/Chapter%2007%20-%20POSITIONING1/Atomic/example.html,HTML基础介绍,HTML 与 CSS,CSS样式应用,盒子模型,定位模型,表格解析,附加,表格的解析方式,Table-layout： Auto：自动布局，根据单元格内容的最大最小宽度，及设定的单元格width对列布局。 fixed：只根据第一行的单元格设定的width进行列布局。内容超出只能被hidden（设置overflow:scroll也只在某些浏览器中有效），不会去考虑最小内容宽度，因而有些列甚至完全不渲染。,Fixed表格布局,一切以第一行的width设值为最高准则，如果各列固定width之和大于table的width会撑大width。 在fixed中，固定width列会被先分配空间，百分比width列只在完全满足固定width列之后再分配空间（设置被隐藏）。,Auto表格布局,在Table-layout ：auto中： 各种width设置方式的优先级：从低到高：自动固定百分比 file:/F:/html%20css%20demo/Chapter%2016%20-%20COLUMN%20LAYOUTS/Column%20Width/example.html 1：没有设置width时，列宽度包裹内容。 2：当各列的width之和 与 table的width有冲突时，各列的width会自动按比例缩放，当然fixed布局除外。 2：百分比比例列：当百分比小于100%时，会按百分比列自动扩展到100%；如果大于100%，则会截去使其超过100%的后几个列位auto，将剩余空间给前面几列未超过100%列 按其设定的百分比分配。 比如： 其解析方式为：90%+20%100%, 则td3 按内容最小宽度分配 10px， 甚于470px，90%,100%, 则290*90%分配给td1，余下的全部给td2. file:/F:/html%20css%20demo/Mixed%20Column%20Layouts/example.html,HTML基础介绍,HTML 与 CSS,CSS样式应用,盒子模型,定位模型,表格解析,附加,附加,1：有些可继承： 修饰内容（特别是文本内容）一般都是可继承的（如：font、text-transform、line-height、letterpacing），修饰布局的一般都不可继承（比如:margin,padding width,height,float clear等） 2：都有其默认值、不同浏览器默认值会有所不同。（引入基准样式，屏蔽这些默认值） 3：简写属性会把所有值赋给其所以详细属性。 Background：blue-则等同于background-color：blue，background-imge：none，background-positi