关于前端布局的思考

来源：互联网发布：5sing mac版编辑：程序博客网时间：2024/05/22 16:50

在刷百度前端技术学院题目时的思考

1.两栏布局

 a.通常情况下比较喜欢使用左浮动加右浮动，给两个浮动块都加上宽度，只要一行能够放下就可以，放不下就会跑到下一行中。这时候给右边的元素加margin，它是相对于左浮动元素来确定margin的距离的。因为这俩是在一个层级。 b.或者左浮动但是右面的元素不加浮动，但是右边的元素需要设置margin-left值，而这个值是相对于父级边框的，而不是相对于左边的元素。然后右边设置width：auto或者不设置宽度，那么右边元素的宽度是自适应的。 c.还有一种是

<style type="text/css">         #header, #footer{              height: 100px;             background: red;          }         #content .main{             height: 200px;             background: green;             overflow: auto;         }         #content .aside{             height: 200px;             width: 100px;             background: blue;             float: left;         }     </style>   <body>    <div id="header"></div>    <div id="content">        <div class="aside"></div>        <div class="main">            main main main main main main        </div>    </div>    <div id="footer"></div></body>

第三种方法，我利用的是创建一个新的BFC（块级格式化上下文）来防止文字环绕的原理来实现的。BFC就是一个相对独立的布局环境，它内部元素的布局不受外面布局的影响。它可以通过以下任何一种方式来创建：
float 的值不为 none
position 的值不为 static 或者 relative
display 的值为 table-cell , table-caption , inline-block , flex , 或者 inline-flex 中的其中一个
overflow 的值不为
visible

关于BFC，在w3c里是这样描述的：在BFC中，每个盒子的左外边框紧挨着包含块的左边框（从右到左的格式化时，则为右边框紧挨）。即使在浮动里也是这样的（尽管一个包含块的边框会因为浮动而萎缩），除非这个包含块的内部创建了一个新的BFC。这样，当我们给右侧的元素单独创建一个BFC时，它将不会紧贴在包含块的左边框，而是紧贴在左元素的右边框。
4.使用负margin

<style type="text/css">         html,body{             padding: 0;             margin: 0;         }         #header, #footer{              height: 100px;             background: red;            overflow: hidden;          }         #main{            overflow: auto;         }         #main .center{            height: 200px;            width: 100%;            float: left;         }        .center .content{            height: 200px;            background: green;            margin-right: 100px;        }         #main .aside{             height: 200px;             width: 100px;             background: blue;             float: left;            margin-left: -100px;         }     </style> <body>    <div id="header">header</div>    <div id="main">        <div class="center">            <div class="content">                我是主区块 我是主区块 main main  main            </div>        </div>        <div class="aside"></div>    </div>    <div id="footer">footer</div></body>

2.三栏布局

张鑫旭-我熟知的三种三栏网页宽度自适应布局方法
a.绝对定位

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Document</title></head><style type="text/css"> html,body{    margin: 0px;    height: 100%; } #container{    height: 100%; } #right,#left{    position: absolute;    top: 0;    width: 200px;    height: 100%; }  #left{    left: 0px;    background-color: red; }  #right{    right: 0px;    background-color: yellow; }  #main{    margin: 0 210px;    background-color: blue;    height: 100%; }    </style> <body>     <div id="container">        <div id="left"></div>        <div id="main"></div>        <div id="right"></div>     </div>   </body></html>

这个注意一下，body 和html都得设置height：100%。要不中间的元素块会没有了。设置html的height:100%，就可以获取浏览器的定高了，后面的body和div也就有了依赖。详细可以看下面的链接。
由html,body{height:100%}引发的对html和body的思考
b.负margin

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Document</title></head><style type="text/css">html,body{    margin: 0px;    height: 100%; } #main{    width: 100%;    height: 100%;    float: left; } #main #body{    margin: 0 210px;    background-color: blue;    height: 100%; }  #right,#left{    float: left;    background-color: yellow;    top: 0;    width: 200px;    height: 100%; }  #left{    margin-left: -100%; }  #right{    margin-left: -200px; } </style> <body>     <div id="main">        <div id="body"></div>     </div>       <div id="left"></div>    <div id="right"></div></body></html>

c.然后就是自身浮动法
这个比较简单，就不多说了。

阅读全文

0 0