html+css 布局篇

float

做了float后有一些不好的影响。

1、背景不能显示 由于浮动产生，如果对父级设置了（CSS background背景）CSS背景颜色或CSS背景图片，而父级不能被撑开，所以导致CSS背景不能显示。

2、边框不能撑开 如上图中，如果父级设置了CSS边框属性（css border），由于子级里使用了float属性，产生浮动，父级不能被撑开，导致边框不能随内容而被撑开。

3、margin padding设置值不能正确显示 由于浮动导致父级子级之间设置了css padding、css margin属性的值不能正确表达。特别是上下边的padding和margin不能正确显示。

故需清除浮动

1 、父div设置合适高度

2 、在要做float的div后，可以在html加一个空的div，或者在css在其父元素用after中 content:'';，

而后写

clear:both;（有一些浏览器不写这句就不作用

display:block;

（最好再写上width:0;height:0;visibility:hidden;保证这个元素看不见，不影响布局）

（建议是用after）

3、父级div定义overflow:hidden（或overflow：auto）

（注意：给导航栏单独每一项加下划线时不要用3，因为会把下划线隐藏）

（还有一些奇奇怪怪不好用的方法，比如把父元素也设置浮动，就不提了）

 

div

默认一个div占一行，那么如何让多个个div同一行？

1、用float

如果分两列，可以先把两列的div分别包含在两个div里面

如果分三列，要都float：left，或者两个float：left一个float：right；

缺点：如果右边div没有设置宽度，右边div的宽度会根据div里的内容自动调整，不易控制。

2、只有左侧div设置为float:left，右侧div设置overflow:auto;，右侧div将会占据整个右侧剩余宽度。

缺点：如果有多个div 比如三个及以上了？

3、使用display的inline-block属性(不用inline，inline高度不可控)

（会上下错位，原因：

①同一行的行内元素对齐方式默认是底部对齐，即vertical-align：baseline

②对于内容为空的inline-block元素而言，该元素的基线就是它的margin底边缘，否则就是元素的内部最后一行内联元素的基线

解决方案：

改变vertical-align属性（右侧div设置vertical-align: top;）

4、①对于两个div并排，左边为绝对宽度，右边为相对宽度的，需要用到这种布局的情况比较多见，如左边为导航，右边为内容的页面

      ②左边固定宽度，使用position:absolute

      ③右边margin-left为左边一块的固定宽度

 

(此处暂时不考虑弹性盒子，我先练习不用弹性盒子的)