Web前端开发之-页面布局技术 JSAPI培训资料

Web前端开发之页面布局技术易智瑞中国

成都分公司雷凯华层叠样式表CSS基础框模型和包含块CSS定位体系内容提要浏览器的内容表现设计

HTML–内容CSS–表现JavaScript–客户端脚本从内容花生开始，将其标记为富含语义的HTML，接着给内容裹上一层富含奶油的CSS。最后，添加JavaScript作为糖果硬壳，这就做成了一颗可口无比的美味。Css文件层叠顺序浏览器内置的样式声明(UAdeclarations)用户自定义的浏览器样式声明(usernormaldeclarations)开发者的样式声明(authornormaldeclarations)层叠样式表文件的层叠顺序演示1：自定义html标签用户自定义的浏览器样式声明-演示

CSS基础

选择器例子例子描述.ro选择class="intro"的所有元素。#id#firstname选择id="firstname"的所有元素。**选择所有元素。elementp选择所有<p>元素。element,elementdiv,p选择所有<div>元素和所有<p>元素。element

elementdivp选择<div>元素内部的所有<p>元素。element>elementdiv>p选择父元素为<div>元素的所有<p>元素。element+elementdiv+p选择紧接在<div>元素之后的所有<p>元素。[attribute][target]选择带有target属性所有元素。[attribute=value][target=_blank]选择target="_blank"的所有元素。:first-child p:first-child选择属于父元素的第一个子元素的每个<p>元素。常用CSS选择器更多选择器请参考：http:///cssref/css_selectors.aspCSS选择器使用Id=“content”的div背景颜色应该是什么颜色？1、如果HTML标签的'style'属性中该样式存在，则记千位数为1；2、数一下选择器中ID选择器的个数作为百位数的值。比如，以上样式中包含'#c1'和'#c2'的选择器；3、其他属性以及伪类（pseudo-classes）的总数量是十位数的值。比如，上面例子中的'.con'，':hover'等；4、元素名和伪元素的数量是个位数的值；比如上面例子中的‘div’。CSS选择器优先级的确定优先级结果为一个4位数字，数字越大优先级越大。长度值URI颜色常用CSS的属性值

可作用属性例如：“margin”“padding”

“height”

“width”常用值px:像素数(pixels)em:与作用到元素上的'font-size'的值大小相等ex:一个小写字母x的高度使用示例p{font-size:12px}h1{margin:0.5em}h1{margin:1ex}CSS的属性值--长度CSS的属性值--URI

可作用属性例如：“background-image”属性值格式background-image: <uri>|none|inherit使用示例div{background-image:url(./img/logo.jpg)}CSS的属性值–颜色

可作用属性例如：“color”“background-color”关键词表示颜色aqua、black、blue、fuchsia、gray、green、lime、maroon、navy、olive、orange、purple、red、silver、teal、white、

yellow使用示例span{color:red}RGB方式表达颜色span{color:#f00}/*#rgb*/span{color:#ff0000}/*#rrggbb*/span{color:rgb(255,0,0)}/*范围0-255*/span{color:rgb(100%,0%,0%)}CSS的属性值–颜色

框模型和包含块行内元素（span、img…）display:inline;块元素（div、p、h1、h2…）display:block;行内块元素display:inline-block;DOM元素的类型DOM元素的类型-行元素与块元素的区别演示2：DOM元素基本类型CSS框模型（boxmodel）演示3：框模型两个或多个，毗邻的，普通流中的块元素，垂直方向上的margin，会折叠！框模型的外边距折叠备注毗邻：是指没有被非空内容、padding、border或clear分隔开。普通流：是指非浮动，非绝对定位演示4-外边距折叠了解包含块有什么用？宽度高度自动值的计算浮动元素的定位绝对定位元素的定位CSS包含块(Containingblock)演示5-包含块作用CSS包含块的判定方法1、静态定位元素

或

相对定位元素（position："relative"/"static"）包含块由它最近的块级父元素的内容框创建。2、固定定位元素(position:"fixed")包含块是当前可视窗口

3、绝对定位元素（position:"absolute"）包含块由离它最近的'position'属性为'absolute'、'relative'或者'fixed'的父元素创建CSS包含块的常见情况CSS定位体系常规流(Normalflow)浮动(Floats)绝对定位(Absolutepositioning)CSS的三种定位体系演示6-常规流触发方式：浮动元素绝对定位元素'display'特性为"inline-block"，"table-cell"，"table-caption"的元素'overflow'不是“visible”的元素（即overflow:hidden）特点：可以包含浮动元素可以阻止与子元素外边距折叠可以防止元素被浮动元素覆盖常规流-块级格式化上下文(BlockFormattingContext)

特点：框(boxes)一个接一个地水平排列起点是包含块的顶部水平方向上margin/padding被保留垂直方向上的对齐方式分顶部、底部、文字基线常规流-行内格式化上下文(InlineFormattingContext)

参考：http:///zh-cn/kb/010/代码示例：div{float:left}浮动元素不在常规流中，它在当前行被向左(float:left)偏移，或者向右(float:right)偏移。偏移到哪里？直到浮动框接触到它包含块的边界或另一个浮动元素的外边界。如果存在一个行框，浮动框的顶边会和当前行框的顶部对齐。如果水平方向没有足够的空间放置浮动元素，它将向下移动，直到有足够的空间或没有更多的浮动元素为止。浮动（float）演示7-浮动-文字环绕演示8-浮动-浮动元素的定位清除浮动是什么？本来红色盒子是在黑色盒子内，照理说，这黑色盒子对象应该被撑开。红色盒子使用了float浮动后，导致红色盒子不能撑开。这时候就需要清除浮动，以达到右侧效果。演示9-浮动-清除浮动代码示例：

div{position:absolute}div{position:fixed}相对于其包含块进行定位；完全脱离常规流；绝对定位