怎样给div设置背景色和解决css不起作用的问题
你有没有遇到过给div设置背景色，结果css居然不生效？真是让人头大啊！其实呢，首先你得确保选择器写对了，比如像#IamFloat这样的id选择器，写成#IamFloat { background-color: red; }才能起作用。另外，浮动元素(floated elements)有时候会导致容器宽度“爆炸”，特别是在IE浏览器下，容器可能会被内部宽度更大的div挤破，这时候，你要用Photoshop或Firework那类工具精准测量像素，这样调起来才不会手忙脚乱。
还有一点要注意，IE对于margin和display属性的解释有点小叛逆，你看到的margin:5px在IE里可能变成10px，display:inline也可能被理解为5px边距。哎，这就是IE老版本的“特色”，坑爹又让人无奈。要想兼容多浏览器，细节得特别留意，一点点小BUG就能让你的设计变形，实在是叫人抓狂！
div+css布局中什么定位方法最适合 float:left是个啥意思 图片如何在同一行排列还能不被文字覆盖
说到div+css布局，很多朋友会纠结“到底用绝对定位呢，还是相对定位？”其实啊，平时做普通网页布局呢，一般都不会太常用定位，除非你是做特效或者有特殊需求。绝对定位脱离文档流，就是跟页面整体布局没关系了，会直接固定在某个位置，而相对定位更多用来微调元素位置。大多数时候，像做普通的布局，咱们更推荐用float或者flexbox哦。
说到float，那真是div布局的老伙伴啦。比如你设置float:left，是让元素像“左浮动”一样往左靠，旁边元素则会跟着浮动排开。举个例子，如果父容器有3个div，前面一个不浮动，后面两个float:left，它们都会排成一行，看起来自然又利索。这里给你几点超实用小诀窍：
-
浮动元素容易造成容器高度塌陷，记得给父容器加个
overflow: hidden;或者用清除浮动的方法（clear: both;）来让父容器包裹起来。 -
图片浮动左上角放置，文字环绕也轻轻松松，像下面这段代码：
css
div img {
float: left;
border: 0;
margin-right: 10px;
}
这样图片就会自动飘到左边，文字自动绕过，清清爽爽。
-
两张图片想排同一行？超简单，先用一个容器div包起来，然后给两张图片都
float:left，宽度和间距也调好，不就成了排排坐，吃果果的样子了么？ -
避免内容底部乱跑，很多时候底部内容跑上去了，就是因为上面内容没设置好浮动或者定位，导致后面的div顶上去了。解决非常简单，给上层内容加个固定高度或者设置
display:table;或display:block;，然后再给浮动元素加清除浮动，保证页面结构稳稳当当。
所以说，浮动是一把双刃剑，使用得巧，效果赞；用不好，那真是各种布局大乱斗，分分钟想砸键盘！
相关问题解答
-
为什么我设置的背景色没有显示出来呢？
哎，这个问题可不少人遇到过嘛！通常是选择器写错啦，或者背景色被别的样式覆盖了。还有就是浮动元素有时候会让父容器高度塌陷，结果看着好像背景色没生效，实际上是容器没撑起来。你可以试试给父容器加个overflow: hidden;，保证包裹子元素，这样背景色才会亮出来，试试看，万一就解决了呢！ -
浮动到底是怎么回事？为什么要用float:left？
哎呀，float就是让一个元素像漂流瓶一样漂向左边，旁边的文字或者其他元素会顺着它靠边排列。用float:left，就是让元素向左边靠，特别适合做图片和文字混排那种布局。实在不懂的话，想象成把元素往左推，其他东西自然往右挤挤，超方便！ -
绝对定位和相对定位都有哪些区别？哪种更适合布局？
说实话，绝对定位就像固定钉在那里，不跟其他页面内容“打招呼”，位置固定得死死的；相对定位就是相对于它原本位置做小滑动，不脱离文档流。平时做普通布局的话，别急着用绝对定位，容易让页面变形，推荐先用float或者flex，灵活多了。除非你做弹窗或者特效，绝对定位那才派上用场。 -
图片放在div里，怎么避免文字覆盖图片？
这个超简单啦！给图片设置float:left;就对了，然后图片右边留点margin，这样文字自然环绕图片，既美观又整洁。千万别忘了图片外的div也要清除浮动，不然后面内容可能跟图片抢位置，杂乱无章。试试这种方式，效果绝对让你满意！
发表评论