CSS布局之——盒模型与圣杯布局

最新推荐文章于 2024-06-11 00:44:55 发布

Katle

最新推荐文章于 2024-06-11 00:44:55 发布

阅读量180

点赞数

分类专栏： HTML/CSS 文章标签： CSS 盒模型布局圣杯布局

本文链接：https://blog.csdn.net/qq_41096610/article/details/90115727

版权

HTML/CSS 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

CSS布局之——盒模型与圣杯布局

盒模型

在CSS布局的编写中，盒模型的概念必须要搞清楚，才能更好的体现出前端代码的能力。在此之前，我们需要弄清楚几个名词。

包含块

包含块对于浮动元素来说，定义为最近的块级祖先元素，但对于定位来说，情况则没有这么简单，CSS2.1定义了一下行为：

“根元素”的包含块（也称为初始包含块）由用户代理建立，在HTML中，根元素就是HTML元素，不过有些浏览器会使用body作为根元素。在大多数浏览器中，初始包含块就是一个视窗大小的矩形。
-对于一个非根元素，如果其position值是relative或static，包含块则由最近的块级枢、表单元格或行内块级祖先的内容边界构成。
对于一个非根元素，如果其position值是absolute，包含块设置为最近的position值不是static的祖先元素（可以是任何类型），这个过程如下：
<1>.如果这个祖先是块级元素，包含块则设置为该元素的内边距边界，换句话说，就是由边框界定的区域。
<2>.如果这个祖先是行内元素，包含块则设置为该祖先元素的内容边界，在从左向右读的语言中，包含块的上边界和左边界是该祖先元素中第一个框内容区的上边界和左边界，包含块的下边界和右边界是最后一个内容区的下边界和右边界。在从有向左读的语言中，包含块的右边界对应于第一个枢的右内容边界，包含块的右边界则取自最后一个枢的左内容边界。上下边界也是一样。
<3>.如果没有祖先元素，元素的包含块定义为初始包含块

圣杯布局

圣杯布局是前端工程师面试的常见试题，是体现一个前端工程师水准的经典布局。圣杯布局的主要口诀为：两边固定，当中自适应；当中列要完整显示；当中列要优先加载。
对于圣杯布局的学习，我有一些总结：
关于浮动：搭建完整的布局框架。
margin为负值：调整旁边两列的位置，使三列布局到一行上。
使用相对定位，调整旁边两列的位置，是两列位置调整到两头。
下面圣杯布局的代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>圣杯布局</title>
    <style type="text/css">
      *{
        margin:0;
        padding:0;
      }
      #header, #footer{
        height:20px;
        background-color:gray;
        border:1px solid;
        text-align: center;
      }
      #conten{
        padding:0 200px;
        overflow: hidden;
      }
      .middle, .left, .right{       /*伪等高布局*/
        padding-bottom: 10000px;
        margin-bottom: -10000px;
      }
      .middle{
        background-color: pink;
        width:100%;
        float:left;
      }
      .left{
        position:relative;
        left:-200px;
        width:200px;
        background-color: yellow;
        float:left;
        margin-left: -100%;
      }
      .right{
        position:relative;
        right:-200px;
        width:200px;
        background-color: yellow;
        float:left;
        margin-left: -200px;
      }
      .clearfix{
        *zoom:1;
      }
      .clearfix:after{
        content:"";
        display:block;
        clear:both;
      }
    </style>
</head>
<body>
<div id="header">
  header
</div>
<div id="conten" class="clearfix">
  <div class="middle" >
    middle<br/>
  </div>
  <div class="left">left</div>
  <div class="right">right</div>
</div>
<div id="footer">
  footer
</div>
</body>
</html>

懒得在写注释了，，应该不难看懂吧……

Katle

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
CSS布局之——盒模型与圣杯布局

CSS布局之——盒模型与圣杯布局盒模型在CSS布局的编写中，盒模型的概念必须要搞清楚，才能更好的体现出前端代码的能力。在此之前，我们需要弄清楚几个名词。包含块包含块对于浮动元素来说，定义为最近的块级祖先元素，但对于定位来说，情况则没有这么简单，CSS2.1定义了一下行为：“根元素”的包含块（也称为初始包含块）由用户代理建立，在HTML中，根元素就是HTML元素，不过有些浏览器会使用bo...
复制链接

扫一扫