-
使footer正常显示的方法： 一：clear:both(/left/right); //此法用于当main没有设置高度，而main脱离文本流的方式为float的时候。// 二：overflow:hidden;width:100%; 三：给main设置高度：.main{width:960px; {height:600px};margin:0 auto;} 四：margin:600px 0 0 0;查看全部
-
一列布局：普通，居中即可（左右margin为auto） 二列布局：float：left和float：right即可 三列布局： 1.全部自适应：margin=33.33%，并全部设置为float 2.左右固定，当中自适应：左右position：absolute；当中margin定死(手动写左右margin=左右栏宽)查看全部
-
仍可以看到footer留在底下的答案如下： float和position:absolute可以使盒子脱离文档流 脱离文档流，也就是将元素从普通的布局排版中拿走，其他盒子在定位的时候，会当做脱离文档流的元素不存在而进行定位。需要注意的是，使用float脱离文档流时，其他盒子会无视这个元素，但其他盒子内的文本依然会为这个元素让出位置，环绕在周围。而对于使用absolute positioning脱离文档流的元素，其他盒子与其他盒子内的文本都会无视它查看全部
-
<!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; font-weight:bold} div{ text-align:center; line-height:50px} .main{ width:960px; height:600px; margin:0 auto} .left{ width:36%; height:550px; background:#ccc;float:left; 【任务1】}/*左浮动样式*/ .right{ width:60%; height:550px; background:#FCC; float:right;【任务2】}/*右浮动样式*/ </style> </head> <body> <div class="main"> <div class="left">left</div> <div class="right">right</div> </div> </body> </html>查看全部
-
<!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} div{ text-align:center; font-weight:bold} .main,.footer{ width:600px;margin:0 auto;【任务1】} .head{ width:100%; height:100px; background:#ccc} .main{ height:600px; background:#FCC} .footer{ height:50px; background:#9CF} </style> </head> <body> <div class="head">head</div> <div class="main">main</div> <div class="footer">footer</div> </body> </html>查看全部
-
Div{width:800px; height:500px; margin:0 auto}，上面这段样式，可以让 div 在页面的： 居中对齐查看全部
-
1、自适应宽度：设置左：float：left;中：float:left;右：float:right; 2、左右固定宽度，中间自适应宽度：取消float,用position:absolute实现 左：width:200px;position:absolute;left:0;top:0; 右：width:300px;position:absolute;right:0;top:0; 中：margin:0 300px 0 200px;(上 右 下 左),如果需要与两侧之间有间距，只需要改变margin即可查看全部
-
文档流：将窗体自上而下分成一行行, 并在每行中按从左至右的顺序排放元素,即为文档流. 浮动（float）和 绝对定位（position：absolute）-->脱离文档流 脱离文档流，也就是将元素从普通的布局排版中拿走，其他盒子在定位的时候，会当做脱离文档流的元素不存在而进行定位。需要注意的是，使用float脱离文档流时，其他盒子会无视这个元素，但其他盒子内的文本依然会为这个元素让出位置，环绕在周围。而对于使用position：absolute脱离文档流的元素，其他盒子与其他盒子内的文本都会无视它。查看全部
-
margin:0 auto 元素居中查看全部
-
float:left ->左浮动(定义元素在哪个方向浮动) float:right ->右浮动 text-align:left; -> 文字的对齐是左对齐查看全部
-
浮动（float）和 绝对定位（position：absolute）,可以让元素脱离文档查看全部
-
<style type="text/css"> .top{width:100%;background:#ccc;} .main{height:600px;background:red;position:relative}/*作为子元素绝对定位的参照系*/ .left{width:200px;height:600px;background:blue;position:absolute;}/*定位默认左上角*/ .right:{height:600px;background:green;position:absolute;left:210px;right:0;}/*紧贴右侧，宽度未定可自适应，为避免被left覆盖，设定距离左侧210px，和left保留10px的间隙* .foot{width:100%;height:50px;background:pink;} </style>查看全部
-
自适应需要百分比宽度 左右排列需要float查看全部
-
position:absolute(绝对定位）还有浮动会让块元素脱离文档流，同时会使该div的变成行内元素。查看全部
-
html中写在前面的先加载：右侧（right）先加载，左侧（left）后加载,即right放在前面，left放在后面。例如：<div class="main"> <div class="right">right</div> <div class="left">left</div> </div>查看全部
举报
0/150
提交
取消