关于前端布局的思考

最新推荐文章于 2024-08-09 21:30:00 发布

苏小哈

最新推荐文章于 2024-08-09 21:30:00 发布

阅读量232

点赞数

分类专栏： css 文章标签：前端布局 css

本文链接：https://blog.csdn.net/github_38849342/article/details/73497448

版权

css 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

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

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
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
关于前端布局的思考

在刷百度前端技术学院题目时的思考1.两栏布局 a.通常情况下比较喜欢使用左浮动加右浮动，给两个浮动块都加上宽度，只要一行能够放下就可以，放不下就会跑到下一行中。这时候给右边的元素加margin，它是相对于左浮动元素来确定margin的距离的。因为这俩是在一个层级。 b.或者左浮动但是右面的元素不加浮动，但是右边的元素需要设置margin-left值，而这个值是相对于父级边框的，而不是相对于左边的元素
复制链接

扫一扫

专栏目录