学习前端，入门很重要，如果刚开始就陷入抓耳挠腮的状态，很影响后面的心态，而我们前端入门会先学习html+css，通过多年教学中学员反馈出来的问题，接下来给大家清扫一下关于html和css的难点

　　难点1：浮动-高度塌陷

　　问题描述：

 <style>

        .box1 div{ width: 100px; height: 100px; border: 2px solid red; background-color: cyan; float: left;}

        .box2{ height: 150px; background-color: orange;}

    </style>

    <div class="box1">

        <div>box1-模块1</div>

        <div>box1-模块2</div>

        <div>box1-模块3</div>

    </div>

    <div class="box2">box2</div>

　　呈现的结果如下：

　　由于box1里面的子元素浮动导致box1高度塌陷，最终box2不能在下方正常显示而被遮盖

　　解决方法：

　　办法有很多种，给大家提供最常用的3种方法恢复如下正常情况：

　　方法1: 给浮动元素的父级加高度 .box1{ height:150px;}

　　方法2：给浮动元素的父级overflow:hidden;zoom:1; .box1{overflow:hidden;zoom:1;}

　　方法3：给浮动元素父级加伪类选择器 .box1::after{content: ''; width: 0; height: 0; display: block; visibility: hidden; clear: both;}

　　总结：

　　其实对于浮动，大部分情况只要设置三点，模块就会乖乖听话：一每个子元素设浮动，二每个子元素设宽并且总宽不超过父级，三父级解决高度塌陷

　　难点2：盒模型-计算

　　问题描述：

　　呈现的结果如下：

　　由于盒模型没有计算好，导致第3个模块折行显示了

　　解决方法：

<style>

        .box1{ width: 300px; height: 220px; border: 2px solid black;}

        .box1 div{ width: 100px; height: 100px; border: 2px solid red; background-color: cyan; float: left;}

    </style>

    <div class="box1">

        <div>box1-模块1</div>

        <div>box1-模块2</div>

        <div>box1-模块3</div>

    </div>

　　计算好盒模型就可以实现如下效果

　　方法1：box1里面的每个小div占的范围是100px的宽+4px的边框，所有三个一共占据312px，那么box1的宽度至少是312px才能让他们显示在一行中 .box1{width:312px}

　　方法2：可以把box1里面的三个小div转换为IE怪异盒子 .box1 div{box-sizing:border-box}

　　总结：

　　记住两个公式即可

　　W3C标准盒子：实际的宽度=width+左右padding+左右border+左右margin

　　IE怪异盒子：实际的宽度=width(包括内容、内边距、边框)+左右margin

　　难点3：定位-参照物

　　相对定位

　　position:relative，参照物是自己原位置

　　如下案例给small2设置相对定位后，是参照自己原位置定位的

 <style>

        .big{ width: 800px; border: 1px solid red; margin: 50px;overflow: hidden;zoom: 1; padding: 50px;}

        .big div{ width: 200px; height: 200px; border: 1px solid blue;float: left;}

        .big .small2{ width: 200px; height: 200px; background-color: orange; position: relative; left: 40px; top: 20px;}

    </style>

    <div class="big">

        <div class="small1">1</div>

        <div class="small2">2</div>

        <div class="small3">3</div>

    </div>

　　绝对定位

　　position:absolute，参照物是设置了定位的父级或祖级(一般给父级加上相对定位)

　　如下案例给small2设置绝对定位，给big设置相对定位，则small2参照big进行定位

<style>

        .big{ width: 800px; border: 1px solid red; margin: 50px;overflow: hidden;zoom: 1; padding: 50px; position: relative;}

        .big div{width: 200px;height: 200px;border: 1px solid blue;float: left;}

        .big .small2{width: 200px;height: 200px;background-color: orange;position: absolute;left: 0;top: 0;}

    </style>

    <div class="big">

        <div class="small1">1</div>

        <div class="small2">2</div>

        <div class="small3">3</div>

    </div>

　　固定定位

　　position:fixed，参照物是浏览器窗口

　　如下案例给demo设置固定定位后，则参照浏览器窗口进行定位

 <style>

        .demo{width: 120px;height: 40px;line-height: 40px;text-align: center;font-size: 16px;color: #fff;background-color: orange;position: fixed;right: 0;top: 20px;}

    </style>

    <div class="demo">返回顶部</div>

　　好了，关于初学时的常见问题就给大家总结这些内容，也很重要很实用，以上所涉及到的浮动、盒模型、定位是我们初学html+css时重要的布局方式，希望能帮助大家顺利进入到后面html5+css3的学习。

上一篇

块级元素和内联元素

下一篇

如何添加CSS_外部样式