-
文档流：将窗体自上而下分成一行行, 并在每行中按从左至右的顺序排放元素,即为文档流. 浮动（float）和 绝对定位（position：absolute）-->脱离文档流 浮动和绝对定位脱离文档流的区别 相同点：其他盒子都会无视被浮动或绝对定位的盒子； 不同点：盒子的内容会考虑被浮动的盒子，但任然会无视绝对定位的盒子。 相对定位（position：relative），不可以脱离文本流查看全部
-
需要块状元素并列排列时需要浮动，浮动后，为了不影响后面的元素都要设置清除浮动。查看全部
-
这里是一个排版陷阱：当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，不代表它不存在。查看全部
-
浮动后面的元素如果不清楚浮动 就会当前面的元素不存在而占用其位置. 本例中main未设置高度,footer未清除浮动其css效果就会占用main位置 清除浮动方式： clear:both overflow:hidden 在有些情况下只能是用overflow:hidden来清除浮动查看全部
-
三列布局，左右两侧固定宽度，中间自适应的参考做法： 左边：position:absolute;left:0px;top:0px;width:200px; 中间：设置外边距： margin:0 305px 0 205px; 右边：position:absolute;right:0px;top:0px;width:300px;查看全部
-
文档流：将窗体自上而下分成一行行, 并在每行中按从左至右的顺序排放元素,即为文档流. 浮动（float）和 绝对定位（position：absolute）-->脱离文档流 脱离文档流，也就是将元素从普通的布局排版中拿走，其他盒子在定位的时候，会当做脱离文档流的元素不存在而进行定位。 浮动会脱离标准文档流，但是任然具有文档流性质，即还是会占据文档位置； 绝对定位脱离标准文档流后不再具备文档流性质，不占据文档位置，直接与其他元素进行层堆叠。 需要注意的是，使用float脱离文档流时，其他盒子会无视这个元素，但其他盒子内的文本依然会为这个元素让出位置，环绕在周围。而对于使用absolute positioning脱离文档流的元素，其他盒子与其他盒子内的文本都会无视它。查看全部
-
两列布局： body{margin:0;padding:0}清除默认样式 自适应宽度：将宽度设为百分比【用的很少，一般用固定宽度的两列布局】。 固定宽度：套一个父级，设置宽度和自动居中。left和right增加一个父div#main,设置这个main的width，以及margin 0 auto；如果要精确控制left和right的宽度，可以使用px【就是说也可以使用%粗略控制。】查看全部
-
水平居中： .main,.footer{ width:960px; margin:0 auto;}查看全部
-
布局：又称版式布局，是网页UI设计师将有限的视觉元素进行有机的排列组合。 特点：1、网页可以自适应宽度 2、网页的长度理论上可以无限延长 分栏又称分列，常见布局有：一列布局、二列布局、三列布局，但更多的是混合布局查看全部
-
没有给子盒子定义宽度，默认为父元素宽度的100%。查看全部
-
position:absolute folat 能使盒子上浮，不排斥下方盒子的margin.查看全部
-
.left{ width:200px; height:600px; background:#ccc;position:absolute; left:0; top:0} .main{ height:600px; margin:0px 310px 0 210px; background:#9CF} .right{ height:600px; width:300px; position:absolute; top:0; right:0; background:#FCC;}查看全部
-
三列布局查看全部
-
《一列布局》水平居中：margin:0 auto;查看全部
-
一列布局：简单明了。（通常宽度是固定的，百度首页）查看全部
举报
0/150
提交
取消