-
横向两列布局： 相对于“浮动定位”，使用绝对定位实现横向两列布局，应用比较少。应用情况有：常用于一列固定宽度，一列宽度自适应的情况。 注： a.在没有已定位的祖先元素的情况下，mainbody已设置成相对定位而要设置绝对定位的这个元素在没有设置偏移量的情况下，它还是处在原来的位置上。 b.视为"柱子层"()的元素的高度一定要大于绝对定位的元素的高度。 c.若a元素（b的父元素）为静态定位，则b元素要以根元素为基准进行偏移，也就是html元素。查看全部
-
绝对定位 情况1：未设置偏移量 特点：a.无论是否存在已定位的祖先元素，都保持在元素初始位置； b.脱离了文档标准流. 注：当一个元素设置了绝对定位，没有设置宽度时，元素的宽度随着内容进行调节，这跟设置的float属性相似。 情况2：设置了偏移量 便宜参照标准： a.无已定位祖先元素，以html（即浏览器）为偏移参照基准；(而不是参照body进行偏移的) b.有已定位祖先元素，以离它最近的已定位祖先元素为偏移参照基准;（一般设置其祖先元素为相对定位，因为与绝对定位相比更稳定）查看全部
-
相对定位查看全部
-
绝对定位布局： position属性拥有3种定位方式： a.静态定位（static）,b.相对定位(relative)c.绝对定位(absolute,fixed):括号里边的是四个属性值。查看全部
-
横向两列布局 1.对页面进行初始化：用全局选择器将浏览器的默认添加上， 把内填充、外填充都设置为0：*{padding:0;margin:0;}。 2.让页面自动居中：#wrap{margin:0 auto;width:960px}(上下值可任意设置，左右值必须设置为auto，宽度也必须设置，不然默认宽度会占据浏览器的100%)。 3.当设置浮动后，父级元素和后面紧邻的元素会受到影响。因为子级设置了浮动，因此父级元素的高度没办法正常扩展。 当父包含块缩成一条时，用clear:both方法清除浮动无效，它一般用于紧邻后边元素的清除浮动。 此时只能用：overflow：hidden方法。（这种方法如果在不设置高度的情况下内容能完全显示，如果设置了高度，当超过高度时，多余的内容则不显示。） 4.div块的高度一般不需要设置。 横向两列布局有两种方式： a.两列中均设置为左浮动：float:left,然后第一列设置margin属性值； b.两列中一列设置左浮动，一列设置右浮动（这种方法仅限于两列布局，对于多列无效）； 情况：父包含块没有设置浮动，而子包含快设置了浮动，此时的父包含块的高度就没法扩展，接下来就要对父包含块进行清除浮动 注： 清除浮动影响的另一方法：在受到浮动影响的元素之前添加空的兄弟元素，p标签查看全部
-
“以最近的祖先元素为参照基准”。mark查看全部
-
清除浮动的常用方法： 注意： 应该对受到浮动影响的元素设置清除浮动属性的设置；如：p{clear:both}或p{width:100%;overflow:hidden} 空标签无意义，不建议使用此方法清除浮动。如<br/>查看全部
-
浮动布局： CSS中规定的第二种定位机制； 能够实现横向多列布局； 通过设置float属性实现。 注意： 当元素没有设置宽度值，而设置了浮动属性，元素的宽度随内容的变化而变化。 当元素设置浮动属性后，会对相邻元素产生影响，相邻元素特指紧邻后面的元素。查看全部
-
自动居中一列布局 三个技能点：a.标准文档流；b.块级元素c.margin属性; DW中代码自动缩机快捷键：ctrl+shift+>; 注意以下代码： *{margin:0;padding:0;}一般浏览器会给网页自动添加默认的格式，此代码是为了消除此格式。 #header{width:100%;height:200px;}相对于父类是100%显示。高度一般不设置，默认情况下，框的大小随文字的多少自动变化。 #wrap{width:770px;margin:0px auto}让页面自动居中：为所有的子类设置一个包裹层，让包裹曾自动居中，则其中的内容也会自动居中。(设置一个固定高度，设置margin的上下高度随意设置，左右值必须设置为auto) 注： auto会根据浏览器的宽度自动的设置两边倒外边距。 原理：（浏览器的宽度-外包曾的宽度）/2=外边距。 如果想让页面自动居中，当设置margin属性为auto的时候，不能再设置浮动或绝对定位属性。查看全部
-
图片-盒子模型 <body> <div id="wrap"> <div id="header"><a href="#">。</a>|<a href="#">。</a></div> <div id="mainbody"> <div class="content profile"> <h2>:: 。 ::</h2> <p>。</p> </div> <div class="content book"> <a href="#"><img src="http://img.。.jpg" width="80" height="80" /></a> <a href="#"><img src="http://img1.sycdn.imooc.com//536c9de300012a0500800080.jpg". width="80" height="80" /></a> <a href="#"><img src="http://img1.sycdn.imooc.com//536c9dfe0001b81b00800080.jpg" width="80" height="80" /></a> <a href="#"><img src="http://img1.sycdn.imooc.com//536c9fa00001f6dd00800080.jpg" width="80" height="80" /></a> <a href="#"><img src="http://img1.sycdn.imooc.com//536c9fad0001f29800800080.jpg" width="80" height="80" /></a> <a href="#"><img src="http://img1.sycdn.imooc.com//536c9fb90001d71b00800080.jpg" width="80" height="80" /></a></div> </div> <div id="footer">copyright © 2004-2012 Jimmyspa.com All Rights Reserved.</div> </div> </body>查看全部
-
图片-盒子模型 <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>几米</title> <style type="text/css"> *{margin:0; padding:0; font-size:12px; color:#346667; font-family:Arial, Helvetica, sans-serif,"宋体";} a{text-decoration:none;} a:hover{text-decoration:underline;} h2{line-height:30px; font-size:14px; margin-bottom:5px;} p{line-height:24px; text-indent:26px; margin-bottom:5px;} #wrap{width:770px; margin:0 auto;} #header{width:762px; border:4px solid #badbdb; background:url(../images/banner.gif) no-repeat; height:92px; text-align:right; color:#fff;} #header a{color:#fff; margin:0 5px;} #mainbody,#footer{width:100%;} #footer{text-align:center; padding:20px 0;} .content{background:#eff9f9; padding:44px 15px 15px;//【任务1】？ border:4px solid #badbdb;} .profile{background:url(../images/t_profile.gif) no-repeat #eff9f9;} .book{background:url(../images/t_book.gif) no-repeat #eff9f9;} .book img{ border:1px solid #b1adaa;//【任务2？ margin:10px 18px;//【任务3？} </style> </head>查看全部
-
【HTML/CSS基础篇--position定位属性】 相对定位（relative）： 1.相对于自身原有的位置进行偏移； 2.仍处于标准文档流中； 3.随即拥有偏移属性和z-index属性；查看全部
-
W3C标准 由万维网联盟制定的一系列标准，包括： 结构化标准语言（HTML和XML） 表现标准语言（CSS） 行为标准语言（DOM和ECMAScript） 倡导结构、样式、行为分离查看全部
-
绝对定位：建立了包含块为基准的定位 完全脱离了标准文档流 随即拥有偏移属性和z-index属性 绝对定位的特点：无论是否存在已定位祖先元素，都保持在元素初始位置 脱离了标准文档流 未设置偏移量时特点：1.无论是否存在已定位祖先元素，都保持在元素初始位置 2.脱离了标准文档流 设置偏移量 偏移量参照基准：1.无已定位祖先元素。（以<html>为偏移参照基准） 2.有已定位祖先元素。查看全部
-
code查看全部
举报
0/150
提交
取消