关于html布局的初级认识——简单的布局问题-C++技术网

关于html布局的初级认识——简单的布局问题

更新时间：2017-06-17 14:36:55浏览次数：1+次

首先说明一下这是个人的总结，如有错误，请指出：

在布局中，一切都是盒子。网页布局（本人仅仅指代：div+css布局）换一种说法就是面向“盒子”编程。所有的东西都是在一个个盒子中的体现的，也就是说盒子的摆放是布局的基础。

经验：

大部分浏览器的默认都有margin和padding的，所以为了不影响我们的布局，先清除样式。
在布局中要注意几个地方：

内容高度想自适应怎么办？

<html>
<head><title>Test Page</title>
<style type="text/css">
#content_auto_height{
height:auto;/*注意这句话，自适应用的*/
width:80%;
margin-left:10%;
margin-right:10%;
background-color:yellow;
}
#content_fix_height{
height:120px;/*注意这句话，固定了高度*/
width:80%;
margin-left:10%;
background-color:purple;
margin-right:10%;
overflow:scroll;/*注意这句话规定了溢出部分的滚动，不想滚动就用hidden*/
}
#content_fix_height .subContent{
overflow:inherit;/*这是细化的一个小布局，用来体现content_fix_height的效果，其中的inhert表示继承父元素的overflow的scroll属性，否则浏览器会默认添加visual属性*/
}
</style>
</head>

<body>
<div id="content_auto_height">
<h2>11111111</h2>
<h2>22222222</h2>
<h2>33333333</h2>
<h2>44444444</h2>
<h2>55555555</h2>
<h2>66666666</h2>
</div>

<div id="content_fix_height">
    <div class="subContent">
    <h2>11111111</h2>
    <h2>22222222</h2>
    <h2>33333333</h2>
    <h2>44444444</h2>
    <h2>55555555</h2>
    <h2>66666666</h2>
    </div>
</div>
</body>
</html>

清除多余格式怎么办？

*{/*最简单有效的，但是耗费时间*/
padding:0px;
margin:0px;
}
body{/*节省点资源，针对性强*/
padding:0px;
margin:0px;
}
body,ol,ul,h1,h2,h3,h4,h5,h6,p,th,td,dl,dd,form,fieldset,legend,input,textarea,select{margin:0;padding:0} /*针对性更强大的*/

3.什么是浮动？

通俗来说，浮动可以理解成一种动作，就是这个块本身自己向某方向运动，如果没有阻挡就一直往那个方向浮。比如：float:left，那么元素就一直像左侧浮动。直到左侧有东西拦着它。。。就像回滚一样。

就这些吧。。。。。