HTML&CSS基础3——布局

Mar 15, 2016

CSS布局


左侧固定右侧自适应宽度的两列布局

  • 用两种不同的方法来实现一个两列布局，其中左侧部分宽度固定、右侧部分宽度随浏览器宽度的变化而自适应变化

方法一：

不使用浮动，使用绝对定位，将左上角的块放好位置，右边的块设置margin-left

html 文件：

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>layout</title>
        <link rel="stylesheet" type="text/css" href="task0001-6-3.css">
    </head>
    <body>
        <div class="row">
            <div class="left">DIV-A</div>
            <div class="right">DIV-B</div>
        </div>
        <div class="bottom">DIV-C</div>
    </body>
</html>

css 文件：

.row {
    position: relative;
}
.left {
    width: 100px;
    height: 100px;
    background-color: red;
    position: absolute;
    top: 0;
    left: 0;
}
.right {
    height: 100px;
    background-color: blue;
    margin-left: 100px;
}
.bottom {
    height: 100px;
    background-color: yellow;
}

方法二：

使用浮动，左边的块使用浮动，右边的块使用margin-left

.left {
    width: 100px;
    height: 100px;
    background-color: red;
    float: left;
}
.right {
    height: 100px;
    background-color: blue;
    margin-left: 100px;
}
.bottom {
    height: 100px;
    background-color: yellow;
}

补充：

参考资料：深入理解BFC和Margin Collapse

BFC方法：

BFC(Block Formatting Contexts)直译为”块级格式化上下文”。Block Formatting Contexts就是页面上的一个隔离的渲染区域，容器里面的子元素不会在布局上影响到外面的元素，反之也是如此。如何产生BFC？

  • float的值不为none。
  • overflow的值不为visible。
  • position的值不为relative和static。
  • display的值为table-cell, table-caption, inline-block中的任何一个。

那BFC一般有什么用呢？比如常见的多栏布局，结合块级别元素浮动，里面的元素则是在一个相对隔离的环境里运行。

html

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>使用 BFC 进行两列布局</title>
        <link rel="stylesheet" href="two-col-layout-with-BFC.css">
    </head>
    <body>
        <div class="left">DIV-A</div>
        <div class="right">DIV-B</div>
        <div class="bottom">DIV-C</div>
    </body>
</html>

css

.left{
    width: 100px;
    height: 100px;
    background-color: blue;
    float: left;
}
.right{
    height: 100px;
    background-color: yellow;
    overflow: hidden;
}
.bottom{
    height: 100px;
    background-color: red;
}


双飞翼布局

  • 用两种不同的方式来实现一个三列布局，其中左侧和右侧的部分宽度固定，中间部分宽度随浏览器宽度的变化而自适应变化

原题中参考资料 双飞翼布局

方法一： margin负值

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Flying Swing Layout</title>
        <link rel="stylesheet" type="text/css" href="task0001-6-4.css">
    </head>
    <body>
        <div class="bd">
            <div class="main">
                <div class="main-wrap">
                    <p>Flying Swing Layout</p>
                </div>
            </div>
            <div class="sub">
                <p>Flying Swing Layout</p>
                left
            </div>
            <div class="extra">
                <p>Flying Swing Layout</p>
                right
            </div>
        </div>
    </body>
</html>

css

.bd {

    /*padding: 0 190px;*/
}
.main {
    float: left;
    width: 100%;
    background-color: #aaa;
}
.main-wrap {
    margin: 0 190px;
}
.sub {
    float: left;
    width: 190px;
    margin-left: -100%;
    background-color: blue;        
    /*position: relative;
    left: -190px;*/
}
.extra {
    float: left;
    width: 190px;
    margin-left: -190px;
    background-color: yellow;        
    /*position: relative;
    right: -190px;*/
}

方法二：绝对定位法

  <div class="left">DIV-A</div>
    <div class="main">DIV-B</div>
    <div class="right">DIV-c</div>

<style type="text/css">
        *{
            margin: 0;
            padding: 0;
        }
        .left{
            width: 200px;
            background-color: red;
            position: absolute;
            top: 0;
            left: 0;
        }
        .right{
            width: 200px;
            background-color: yellow;
            position: absolute;
            top: 0;
            right: 0;
        }
        .main{
            margin: 0 200px;
        }
    </style>

补充：

使用 BFC 的另一种方法：main栏放在left和right后面；

html

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>flying-Swing-BFC</title>
        <link rel="stylesheet" href="flying-Swing-BFC.css">
    </head>
    <body>
        <div class="left">left</div>
        <div class="right">right</div>
        <div class="main">
            flying-Swing-BFC.htmlflying-Swing-BFC.htmlflying-Swing-BFC.htmlflying-Swing-BFC.htmlflying-Swing-BFC.htmlflying-Swing-BFC.htmlflying-Swing-BFC.htmlflying-Swing-BFC.htmlflying-Swing-BFC.htmlflying-Swing-BFC.htmlflying-Swing-BFC.html
        </div>
        <div class="footer">
            footerfooterfooterfooterfooterfooterfooterfooterfooter
        </div>
    </body>
</html>

css

.left{
    width: 100px;
    background-color: red;
    float: left;
}
.right{
    width: 200px;
    background-color: blue;
    float: right;
}
.main{
    background-color: #eee;
    overflow: hidden;
}

浮动布局

  • 实现一个浮动布局，红色容器中每一行的蓝色容器数量随着浏览器宽度的变化而变化 picpic

html文件

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
        <link rel="stylesheet" type="text/css" href="task0001-6-5.css">
    </head>
    <body>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
    </body>
</html>

css文件

body {
    background-color: red;
}
div {
    width: 150px;
    height: 100px;
    margin: 10px;
    float: left;
    background-color: blue;
}

清除浮动/闭合浮动

  1. 清除浮动：清除对应的单词是 clear，对应CSS中的属性是 clear：left | right | both | none；
  2. 闭合浮动：更确切的含义是使浮动元素闭合，从而减少浮动带来的影响。

我们想要达到的效果更确切地说是闭合浮动，而不是单纯的清除浮动，设置clear：both清除浮动并不能解决warp高度塌陷的问题。

正是因为浮动的这种特性，导致本属于普通流中的元素浮动之后，包含框内部由于不存在其他普通流元素了，也就表现出高度为0（高度塌陷）。在实际布局中，往往这并不是我们所希望的，所以需要闭合浮动元素，使其包含框表现出正常的高度。

html

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
        <link rel="stylesheet" href="close-float.css">
    </head>
    <body>
        <div class="row clearfix">
            <div class="left">
                <h1>left</h1>
                <div>Content or Something</div>
            </div>
            <div class="right">right</div>
        </div>
        <div class="row2">Row2</div>
    </body>
</html>

css

.row {
    border: 1px solid red;
}
.clearfix:after {
    content: "\200B";
    display: block;
    height: 0;
    clear: both;
}
.clearfix {
    *zoom: 1;
}
.left {
    width: 200px;
    float: left;
    background-color: #eee;
}
.right {
    width: 200px;
    float: right;
    background-color: #eee;
}
.row2 {
    width: 600px;
    height: 50px;
    background-color: #aaa;
}

其中*zoom: 1是为了触发hasLayout

还有另一种解决方案！

直接使用，如下代码即可

.clearfix{
    overflow: auto;
    zoom: 1;
}

box-sizing

当你设置一个元素为 box-sizing: border-box; 时，此元素的内边距和边框不再会增加它的宽度。

他们的内边距和边框都是向内的挤压的。支持IE8+，需要加浏览器内核。

.simple {
    width: 500px;
    margin: 20px auto;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

响应式布局

媒体查询

多列布局

BFC 和 IE 的 hasLayout

看完这个资料后我震惊了！竟然可以这么玩儿！
我将本文之前提到的两列布局，双飞翼布局又重新写了一遍！太爽了！代码超级简洁！

Block Formatting Context 的几大用处：

  1. 防止 margin 折叠
  2. 清除float
  3. 不会环绕float元素

相关资料

div 三列等高

纯CSS实现三列DIV等高布局

最关键的地方有3句：

最外层div设置一个溢出隐藏

#wrap {
    overflow:hidden;
}

每一个子块设置 padding 和 margin

#left,#center,#right{
    margin-bottom:-10000px;
    padding-bottom:10000px;
}

overflow:hidden; ‘隐藏溢出。如果内容溢出wrap层，则不显示。

margin-bottom:-10000px; ‘底部边距-10000px。
padding-bottom:10000px; ‘底部填充10000px。
上面这两句能够实现的效果就是，产生10000px的填充，然后用负的边距把它给抵销掉。

上一篇博客：HTML&CSS基础2——居中
下一篇博客：Javascript基础1