-
CSS中脱离文档流，也就是将元素从普通的布局排版中拿走，其他盒子在定位的时候，会当做脱离文档流的元素不存在而进行定位。 需要注意的是，使用float脱离文档流时，其他盒子会无视这个元素，但其他盒子内的文本依然会为这个元素让出位置，环绕在周围。 而对于使用absolute positioning脱离文档流的元素，其他盒子与其他盒子内的文本都会无视它查看全部
-
margin:上 右 下 左查看全部
-
三列布局中间自适应: 两边固定宽度，中间不设定宽度 如果用float会破坏布局，因为中间宽度无线延伸。 用定位：左右position：absolute ;设置left ：0 right：0 中间margin：0 200px 0 200px查看全部
-
float 属性定义元素在哪个方向浮动。以往这个属性总应用于图像，使文本围绕在图像周围，不过在 CSS 中，任何元素都可以浮动。浮动元素会生成一个块级框，而不论它本身是何种元素。 如果浮动非替换元素，则要指定一个明确的宽度；否则，它们会尽可能地窄。 注释：假如在一行之上只有极少的空间可供浮动元素，那么这个元素会跳至下一行，这个过程会持续到某一行拥有足够的空间为止。 替换元素： 替换元素是浏览器根据其标签的元素与属性来判断显示具体的内容。 比如：<input /> type="text" 的是，这是一个文本输入框，换一个其他的时候，浏览器显示就不一样 (X)HTML中的<img>、<input>、<textarea>、<select>、<object>都是替换元素，这些元素都没有实际的内容。 非替换元素： (X)HTML 的大多数元素是不可替换元素，他们将内容直接告诉浏览器，将其显示出来。 比如<p>wanmei.com</p> 浏览器将把这段内容直接显示出来。 除了这两字，还有两种非常属性的元素，显示元素，他分为两种情况，一种是‘块及元素’ ‘block’，还有一种是“行内元素”inline，大家也叫“内联元素”。 块及元素 他最明显的特征就是独自占领一行，自动充满父级元素的内容区域，绝不会让别人“侵略”（当然可以通过其他方式去改变他）。 常见的有：div，p..等等。 通过CSS设定了浮动（float属性，可向左浮动或向右浮动）以及设定显示（display）属性为“block”或“list-item”的元素都是块级元素。这个地方浮动是一个比较特殊的情况，可以详查浮动这个知识 行内元素： 上面说块及元素独自占领一行，行内元素就没这么霸道了，他可以左右都允许有元素，最常见的就是<a></a>查看全部
-
<!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{width:100%;height:50px;background:pink;} .main{width:100%;height:600px;background:red;} .left{width:200px;height:600px;position:absolute;top:50px;background:blue;text-align:left;} .right{height:600px;margin-left:210px;background:yellow;text-align:left;} .foot{width:100%;height:30px;background:orange;} </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>查看全部
-
兼容IE6不能用浮动，而且当子元素要设定为absolute的时候，父元素要设定relative才可以。 要右侧自适应，则左侧应该定宽并且position：absolute。 加载顺序先右后左div的顺序为先右后左 CSS布局笔记：<br> 1.使用margin:0 auto；使得div居中;<br> 2.使用float为left和right使得两个div处于同一行；<br> 3.使用百分比宽度实现宽度自适应，使用绝对值使得宽度固定；<br> 4.使用position:absolute实现div绝对定位，在三列布局中使得最左和最右绝对定义，中间可自适应；<br> 5.混合布局可使用嵌套的方式，在横向header、main和footer，然后在main中使用两列或三列布局。查看全部
-
这里是一个排版陷阱：当main里面设置了左右两个div之后，这个时候不要忘记给main也设置和左右div一样的高度，题中的main是没有设置高度的，只设置了宽度，这个时候我们可以想象main其实就是一根高度为0的线条浮在top的下面，只是我们看不到，因为它没有高度。而footer是浮在main下面的，并不是浮在左右两个div下面，所以我们看到footer块莫名其妙跑上来盖住了左右两个div，解决办法如下： 第一，给main赋予和左右div同样大小的高度，这个是最直接的方法，main的高度从0变成600px之后，自然把以它为参照、浮在它屁股下面的footer压到下面去了； 第二，把footer的浮动清除掉，使用clear：both，这样footer从一个跟着main浮起来的飞行物变成了失去翅膀的元素，不能浮动，它就只能自动找最长的参照物（也就是很长的左右div），然后折行显示在底部了，一样能达到效果。 如果还不懂，可以将main的高度设置为height：300px，就一目了然了，因为这个时候main变成了300px，而footer会跟着main低300px显示在top下面。我们看不到main，不代表它不存在。查看全部
-
三列布局：不能使用float，左右两列绝对定位，分别靠左和靠右，中间列为相对定位，左右margin分别设置为左右两列的宽度即可，如果列与列之间需要间隔，则增加相应的margin值。查看全部
-
艺术与技术完美融合的关键岗位查看全部
-
清除浮动的方法： 1.clear:both; 清除两边元素的浮动对他的影响 2.overflow:hidden; 在设置了width 或 height 的div中，超出父元素宽度或高度的部分，就隐藏了。查看全部
-
三列布局： 左右列固定宽度，中间列自适应。 左侧绝对定位：position：absolute;left:0;top:0; 右侧绝对定位：position：absolute;right:0;top:0; 中间宽度定位：margin:0 10px 0 10px; 上右下左，左右调节大小可以紧邻，也可以有间距查看全部
-
我这个不知能否兼容IE6？查看全部
-
文档流：将窗口自上而下分成一行一行，并在每行中按从左至右的依次排放元素，即为文档流。 有三种情况使得元素离开文档流而存在，分别是浮动 绝对布局 固定定位 不脱离文档流就只有三种情况：块级、行内和相对定位查看全部
-
任务一：宽度不设值即可自适应 任务二：left的height值设置成200px；right值不设； 任务三：由于浏览器加载CSS的顺序是从上到下的 所以先写right的样式 再写left的样式 任务四：不要使用float，使用绝对定位position：absolute；查看全部
-
1、让div居中：margin:0 auto; 2、典型单列布局：头部top 主体main 尾部foot 三个<div> 3、清除默认样式：;body{margin:0;padding:0}查看全部
举报
0/150
提交
取消