-
/*上一个div的浮动效果致使footer被浮动，因此footer需要通过清除浮动效果来取消被浮动*/查看全部
-
一列布局： 1.通常作为网页头部。固定宽度。 2.真正开发，高度设置自动的。 一列布局通常用于首页； 让div居中：margin:0 auto; 2. 典型单列布局：头部top 主体main 尾部foot 三个<div> 3. 清除默认样式：;body{margin:0;padding:0} 4. margin的顺序是上右下左，那么这里的0表示上方的为0，上方的对应部位也就是下方也为0.同理auto指的是右方，那么对应的左方也为auto。查看全部
-
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>混合布局编程挑战</title> <style type="text/css"> .body{ margin:0; padding:0; font-size:30px; color:#fff} .top{background:#ccc;height:60px;} .main{background:red;height:500px;position:relative;} .left{width:200px;position:absolute;top:0;left:0;background:blue;height:100%;} .right{margin-left:210px;background:rgb(154,204,153);height:100%;} .foot{height:60px;background:rgb(255,102,52);} </style> </head> <body> <div class="top">top</div> <div class="main"> <div class="right">right</div> <div class="left">left</div> </div> <div class="foot">foot</div> </body> </html>查看全部
-
CSS position 属性 通过使用 position 属性，我们可以选择 4 种不同类型的定位，这会影响元素框生成的方式。 position 属性值的含义： static 元素框正常生成。块级元素生成一个矩形框，作为文档流的一部分，行内元素则会创建一个或多个行框，置于其父元素中。 relative 元素框偏移某个距离。元素仍保持其未定位前的形状，它原本所占的空间仍保留。 absolute 元素框从文档流完全删除，并相对于其包含块定位。包含块可能是文档中的另一个元素或者是初始包含块。元素原先在正常文档流中所占的空间会关闭，就好像元素原来不存在一样。元素定位后生成一个块级框，而不论原来它在正常流中生成何种类型的框。 fixed 元素框的表现类似于将 position 设置为 absolute，不过其包含块是视窗本身。 提示：相对定位实际上被看作普通流定位模型的一部分，因为元素的位置相对于它在普通流中的位置。查看全部
-
属性 描述 position 把元素放置到一个静态的、相对的、绝对的、或固定的位置中。 top 定义了一个定位元素的上外边距边界与其包含块上边界之间的偏移。 right 定义了定位元素右外边距边界与其包含块右边界之间的偏移。 bottom 定义了定位元素下外边距边界与其包含块下边界之间的偏移。 left 定义了定位元素左外边距边界与其包含块左边界之间的偏移。 overflow 设置当元素的内容溢出其区域时发生的事情。 clip 设置元素的形状。元素被剪入这个形状之中，然后显示出来。 vertical-align 设置元素的垂直对齐方式。 z-index 设置元素的堆叠顺序。查看全部
-
浮动float:right left 左侧绝对定位position:absolute;left:0;top:0 margin:0 300px 0 300px 右侧绝对定位position:absolute;right:0;top:0查看全部
-
1.要兼容IE6，所以尽量不要使用float，用绝对定位或者相对定位就可以了,而且当子元素要设定为absolute的时候，父元素要设定relative才可以; 2.在这里先加载的意思就是把right写在前面的div，left写在后面的div查看全部
-
兼容IE6不能用浮动，而且当子元素要设定为absolute的时候，父元素要设定relative才可以。 要右侧自适应，则左侧应该定宽并且position：absolute。 加载顺序先右后左div的顺序为先右后左查看全部
-
清除底部的浮动：clear:both;查看全部
-
1列布局margin，2列布局float，3列布局position 1、块挨着块 2、块嵌套着块 3、块叠着块 1.混合布局：我们可以把一列布局加入“左”和“右”改造为混合布局。 2.在中部mian中加入子div 分别是（左，右）。 然后分别在style中加入“.left和.right”的样式！ 3.注“left和right”都要加浮动“float” 4.还可以在混合布局下进行更复杂的混合布局 5.可以将right定义为sub_right和sub_right 分为化为更为密集的混合布局查看全部
-
三列布局： 左右列固定宽度，中间列自适应。 左侧绝对定位：position：absolute;left:0;top:0; 右侧绝对定位：position：absolute;right:0;top:0; 中间宽度定位：margin:0 (right宽度+间隙宽度)px 0 (left宽度+间隙宽度)px; 上右下左，左右调节大小可以紧邻，也可以有间距查看全部
-
3列布局-特殊案例 左右列固定宽度，中间列自适应。 左侧绝对定位：position：absolute;left:0;top:0; 右侧绝对定位：position：absolute;right:0;top:0; 中间宽度定义去掉，加上左右的margin值，margin:0 310px 0 210px; 上右下左（中间空一点出的话，增加margin属性值便可以实现） 左右两侧布局固定宽度，中间部分宽度自适应。则需要采用绝对定位来实现，把左右设置为绝对定位查看全部
-
两列布局利用到了float：left/right 属性 1.自适应，用百分比%分配宽度，当拖动浏览器窗口时，按设置做相应变化，此方法比较少用 2.固定宽度，用px明确指定宽度， 限制左右在父级框中 .main{margin:0 auto} .left{float:left;} .right{float:right;} <div class="main">查看全部
-
文档流：将窗体自上而下分成一行行, 并在每行中按从左至右的顺序排放元素,即为文档流. 浮动（float）和 绝对定位（position：absolute）-->脱离文档流 脱离文档流，也就是将元素从普通的布局排版中拿走，其他盒子在定位的时候，会当做脱离文档流的元素不存在而进行定位。需要注意的是，使用float脱离文档流时，其他盒子会无视这个元素，但其他盒子内的文本依然会为这个元素让出位置，环绕在周围。而对于使用position：absolute脱离文档流的元素，其他盒子与其他盒子内的文本都会无视它。查看全部
-
两列布局： 1、宽度自适应（用的比较少）， 1.1因为宽度要自适应，所以要设置左侧left的width:xx%；1.2，需要左右排列，所以设置float:left；1.3另一侧right也设置width和float(left和right都可以吧，再微调) 2、固定宽度（）left和right增加一个父div#main,设置这个main的width，以及margin 0 auto； 2.1如果要精确控制left和right的宽度，可以使用px【就是说也可以使用%粗略控制。】查看全部
举报
0/150
提交
取消