-
1.任务top，foot宽度自适应：则不必设置其宽度，只需设置高度及背景色 2.父级(main)高度及背景色，相对定位position:relative， 设置左侧宽度，高度 ，背景色，再相对于父级绝对定位position：absolute 再固定位置left:0,top:0 右侧设置高度及背景，自适应则设置margin：上0 右0 下0 左侧宽+10px 3.右侧先加载，则右侧div写在左侧上面，写代码时先写右侧再写左侧 4.兼容IE6不能用浮动，而且当子元素要设定为absolute的时候，父元素main要设定position:relative才可以。 兼容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中使用两列或三列布局。 1，relative（相对定位）的定位原点是以自己本省原来所在位置做为原点的。 2，absolute（绝对定位）的定位原点是离自己这一级元素最近的一级position设置为absolute或者relative的父元素的左上角为原点的，（当然，如果自己的所有父元素都没有设置position，那么就以body为定位原点）查看全部
-
z-index值表示谁压着谁查看全部
-
这里是一个排版陷阱：当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，不代表它不存在。 clear:both; //清除两边元素的浮动对他的影响 overflow: hidden; // 用在浮动元素本身清除对父元素的影响查看全部
-
1.混合布局：我们可以把一列布局加入“左”和“右”改造为混合布局。 2.在中部mian中加入子div 分别是（左，右）。 然后分别在style中加入“.left和.right”的样式！ 3.注“left和right”都要加浮动“float” 4.还可以在混合布局下进行更复杂的混合布局 5.可以将right定义为sub_right和sub_right 分为化为更为密集的混合布局 布局有一列、二列、三列和混合布局 混合布局： 将一列布局改造就变成了混合布局。 即主体部分加上子div 要点回顾： 其实在网页制作当中，页面中的元素就是块与块之间的关系： 块挨着块；块嵌套着块；块叠压着块 通过css将这些块摆放正确，网页布局就自然完美了。 1、margin:0 auto 自动居中 2、两种分成三栏的方式： 1）两边position：absolute，left：0/right：0，top:0， 中间margin｛0 右边 0 左边｝ 2）先分两栏 左右float 再分两栏左右float查看全部
-
如果盒子进行了绝对定位还想居中，就需要left:50% 然后margin-left:(-宽的一半长度)查看全部
-
三列布局： 左右列固定宽度，中间列自适应。 左侧绝对定位：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 ->左浮动(定义元素在哪个方向浮动) float:right ->右浮动 text-align:left; -> 文字的对齐是左对齐查看全部
-
文档流：将窗体自上而下分成一行行, 并在每行中按从左至右的顺序排放元素,即为文档流. 浮动（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【就是说也可以使用%粗略控制。】查看全部
-
margin:0 auto;是块状元素的居中对齐方式， text-align:center;是内联元素（如，a,img标签)的对齐方式， padding:0;margin:0;是做为初始化页面， 原因是页面在被各个浏览器读取时的理解不同产生不同的展示效果，所以需要清除.查看全部
-
margin后面如果只有两个参数的话，第一个表示top和bottom，第二个表示left和right 因为0 auto，表示上下边界为0，左右则根据宽度自适应相同值（即居中）查看全部
-
一列布局通常用于首页； 让div居中：margin:0 auto; 2. 典型单列布局：头部top 主体main 尾部foot 三个<div> 3. 清除默认样式：;body{margin:0;padding:0} 4. margin的顺序是上右下左，那么这里的0表示上方的为0，上方的对应部位也就是下方也为0.同理auto指的是右方，那么对应的左方也为auto。查看全部
-
2、绝对定位：一旦一个元素进行了绝对定位，它就能脱离标准文档流了，就不再分行内和块状元素了，可以设置宽和高了 用bottom定位的时候，参考点是浏览器首屏的左下角！查看全部
-
1、相对定位：就是微调元素位置，让元素相对自己原来的位置，进行位置调整。也就是说，如果一个盒子想要位置调整，就要相对定位 相对定位后，盒子的真实本体还在原先位置上 相对定位：不脱标，老家留坑，形影分离 相对定位用途：相对定位有坑，所以一般不用于做“压盖”效果；一般就两个用：1、微调元素；2、做绝对定位的参考，子绝父相查看全部
举报
0/150
提交
取消