GVKun编程网logo

css3实现可以计算的自适应布局——calc()（css自适应布局方法）

20

关于css3实现可以计算的自适应布局——calc()和css自适应布局方法的问题就给大家分享到这里，感谢你花时间阅读本站内容，更多关于CSS几种常用自适应布局、css多栏自适应布局_html/css_

关于css3实现可以计算的自适应布局——calc()和css自适应布局方法的问题就给大家分享到这里，感谢你花时间阅读本站内容，更多关于CSS 几种常用自适应布局、css 多栏自适应布局_html/css_WEB-ITnose、CSS 实现三栏自适应布局、CSS 布局 两列布局之单列定宽，单列自适应布局思路等相关知识的信息别忘了在本站进行查找喔。

本文目录一览：

css3实现可以计算的自适应布局——calc()（css自适应布局方法）

css3实现可以计算的自适应布局——calc()（css自适应布局方法）

 

开始我们需要先了解什么是calc() ，calc()是一个CSS函数，你可以使用calc()给元素的margin、pading、width等属性设置

而且你还可以在一个calc()内部嵌套另一个calc() 

clac()的语法就非常简单了 ， 使用数学表达式来表示： 

expression 一个数学表达式,用来计算长度的表达式，该表达式的结果会作为最终的值。

clac()使用“+”、“-”、“*” 和 “/”四则运算，可以使用百分比、px、em、rem等单位，而且可以混用多种单位计算

需要注意的是

如果“0”作为除数会让HTML解析器抛出异常.

“+”和“-”时，前后必须要有空格 比如calc(100%-15px) 这是错误的

“*”和“/”时，前后可以不留空格，但是建议加上空格

 

举两个栗子

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>demo</title>
<style>
.box{
    width: 500px;
    height: 300px;
}
.left{
    width: 250px;
    background:#ccc;
    float: left;
}
.right{
    width: calc(100% - 250px);
    float: right;
    background: #333;
}
.left,.right{
    height: 100%;
}
</style>
</head>
<body>

<div>
    <div></div>
    <div></div>
</div>

</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>demo</title>
<style>
.demo{
    width: 500px;
}
.box{
    width: 100%;
    height: 30px;
    background: #ccc;
}
input{
  width: 100%;
  border:1px solid #333;
  width: calc(100% - (0px + 1px) * 2);
}
</style>
</head>
<body>
<div>
    <div>
        <input type="text">
    </div>
</div>
</body>
</html>

如果不使用calc()

 

 兼容问题

CSS 几种常用自适应布局

CSS 几种常用自适应布局

通过阅读和实践，我对几种常用的布局样式有了一定的了解，也稍微总结了一下原理，若有不对请大家纠错。谢谢

我理解的【两列布局】左边固定和右边自适应，或者右边固定左边自适应的原理是：

1.设置固定区域的宽度

2.设置自适应的区域的宽度为100%

3.设置他们向左或者向右浮动。

4.固定区域设置它的 外边距为负数 使 自适应区域能够和固定区域同在一行。

5.虽然自适应区域与固定区域同一行 但是它宽度其实是父级的宽度，所有自适应区域需要设置一个子区域，并且也需要让子区域中的内容能够正确显示在可视范围内。

【三列布局】 两边固定 中间自适应

    1.我们可以把中间和右边看成一个 右边固定，左边自适应的布局。

    2.设置左边区域的宽度和浮动

    3.因为左边的区域就应该是文档流中的区域，但是我们设置了浮动，导致左边区域已经脱离了文档流，所有我们应该使用 position:relative 使左边区域还依旧显示在文档流的位置中。

    4.给自适应区加一个子区域，并设置子区域的显示区域。


学习网站 http://nec.netease.com/library/category/#grid

我的代码： https://git.oschina.net/scc/MyTestDemo.git


css 多栏自适应布局_html/css_WEB-ITnose

css 多栏自适应布局_html/css_WEB-ITnose

在页面重构中，我们经常会需要实现多栏布局，例如n栏固定宽度 + m栏自适应宽度的组合，绝对布局+padding+百分比宽度是容易想到的比较暴力的解决方法，但是作为未来的"工程师"，我们应该需求一些优雅点的方法。先说说两栏布局，上例子：

<divcontainer'' >    <divdiv1'' >1</div>    <divdiv2'' >2</div></div>
登录后复制

如图，假如在一个容器中，有两个子元素，我们想元素1宽度为200px，元素2宽度铺满剩下的容器宽度，比较暴力的方法就是前面说的绝对布局+padding+百分比宽度，关键css:

//暴力方法 绝对布局 + padding + 百分比.container{padding-left: 200px;position: relative;}.div1{height: 200px;position: absolute;left: 0;}.div2{width: 100%;}
登录后复制

我是例子，戳我

当然，此处.div2是块级元素，不设宽度也可以。

立即学习“前端免费学习笔记（深入）”；

第二种方法，就是用到dom元素特定条件下的神秘的 “BFC” 特清除浮动性，不了解的搜索一下，直接上关键css

//优雅方法 float + BFC.div1{width:200px;float: left;}.div2{overflow: hidden;}
登录后复制

我是例子，戳我

怎么样，是不是优雅了很多。因为在已知.div1具体宽度的条件下，也可以不触发.div2的BFC特性，设置其 margin-left:200px 也可以达到同样的页面效果，但是假如.div1改变了呢，这就需要手动改.div2的margin-left了，这就不够灵活了，感兴趣的可以自己试一下。

第三种方法，用到css3的flex布局，也就是传说中新一代的布局--流动式布局，原理不说，上关键css

//前卫方法 flex.container{display: flex;}.div1{width:200px;}.div2{flex:1;}
登录后复制

我是例子，戳我

是不是也很简单，想了解更多原理性的东西还是建议观摩一下大神的博客吧，这里只是总结知识的地方 0.0 ，而且flex布局在某些浏览器下可能需要前缀，可以到 http://pleeease.io/play/ 自动添加浏览器前缀（不错的书签）

第四种方法，曾经在 “远古时期” 的前端圈子风靡一时table布局，上css

//远古方法 table + table-cell.container{display:table;width: 100%;}.div1{width:200px;display: table-cell;}.div2{display:table-cell;}
登录后复制

我是例子，戳我

其实看上去也蛮简单的嘛，哈哈。。不过可能是名字不够高大上或者其他什么原因被其他布局方式取代的吧

前面所说的例子都是针对两栏布局的，如果是两栏以上的需求，float + BFC 的方法就不太好使了，因为只能有一栏可以通过清除浮动自适应铺满剩余宽度，个人就建议用 flex 布局了，原理是一样的，固定宽度的就设置宽度，自适应的就根据比例设置flex数值，table布局的话也不够 flex 灵活，固定宽度的 table-cell 就设置宽度，不设置宽度的就会均分剩余宽度了。

总结以上，flex是最灵活的，其实flex的牛13之处还有很多，例如它可以实现

元素垂直、水平居中

.container{ display:flex;            align-items: center;//子元素垂直居中            justify-content: center;//子元素水平居中　　　　　　}
登录后复制

当然，align-items 和 justify-content 在旧浏览器也有不同写法的，但是现代浏览器大多数都支持这种写法了，保守起见，使用的时候还是去 http://pleeease.io/play/ 、http://caniuse.com/ 查一查

垂直多栏自适应布局等

.container{display: flex;flex-direction: column;height: 500px;}.div1{width: 100%; flex:1;}.div2{width: 100%;height: 200px;}.div3{width: 100%;flex:1;}
登录后复制

 

 

 其他更神奇的用法就慢慢学习吧，有不正确的地方请指出

 

CSS 实现三栏自适应布局

CSS 实现三栏自适应布局

CSS 实现三栏自适应布局

所谓三列自适应布局指的是两边定宽，中间block宽度自适应。这道题在今年网易内推前端工程师面试的时候也被问到。 我这里主要分为两大类，一类是基于position传统的实现，一类是基于css3新特性弹性盒模型布局实现。

1. 基于传统的position和margin等属性进行布局

这里也分为三种方法，分别为绝对定位法，圣杯布局，自身浮动法。

1).绝对定位法

立即学习“前端免费学习笔记（深入）”；

绝对定位法原理是将左右两边使用absolute定位，因为绝对定位使其脱离文档流，后面的center会自然流动到他们上面，然后使用margin属性，留出左右元素的宽度，既可以使中间元素自适应屏幕宽度。

代码如下：

<!DOCTYPE html>
<html>
 <head>
  <meta charset="UTF-8">
  <title>layout_box</title>
  <link rel="stylesheet" type="text/css" href="../css/layout_box.css">
 </head>
 <body>
  <h3>实现三列宽度自适应布局</h3>
  <p id = "left">我是左边</p>
  <p id = "right">我是右边</p>
  <p id = "center">我是中间</p>
 </body>
</html>
登录后复制

css代码：

html,body{ margin: 0px;width: 100%; }
h3{height: 100px;margin:20px 0 0;}
#left,#right{width: 200px;height: 200px; background-color: #ffe6b8;position: absolute;top:120px;}
#left{left:0px;}
#right{right: 0px;}
#center{margin:2px 210px ;background-color: #eee;height: 200px; }
登录后复制

该法布局的好处，三个p顺序可以任意改变。不足是 因为绝对定位，所以如果页面上还有其他内容，top的值需要小心处理，最好能够对css样式进行一个初始化，就像在上面例子中加了一个标题，如果不对样式进行初始化，则两边和中间的值会对不齐。 另外，随着浏览器窗口缩小，小于200px的时候，会发生压缩。
结果如图，可以看到中间栏宽度随着屏幕大小伸缩。

2).使用自身浮动法

自身浮动法的原理就是使用对左右使用分别使用float:left和float:right，float使左右两个元素脱离文档流，中间元素正常在正常文档流中，使用margin指定左右外边距对其进行一个定位。

HTML代码：

<h3>使用自身浮动法定位</h3>
<p id = "left_self">我是左边</p>
<p id = "right_self">我是右边</p>
<p id = "center_self">我是中间</p>
登录后复制

css代码：

#left_self,#right_self{ width: 200px;height: 200px; background-color: #ffe6b8 }
#left_self {float: left;}
#right_self{float: right;}
#center_self{margin: 0 210px;height: 200px; background-color: #a0b3d6}
登录后复制

该布局法的好处是受外界影响小，但是不足是 三个元素的顺序，center一定要放在最后，这是和绝对定位不一样的地方，center占据文档流位置，所以一定要放在最后，左右两个元素位置没有关系。当浏览器窗口很小的时候，右边元素会被击倒下一行。

3). 圣杯布局

圣杯布局的原理是margin负值法。使用圣杯布局首先需要在center元素外部包含一个p，包含p需要设置float属性使其形成一个BFC，并设置宽度，并且这个宽度要和left块的margin负值进行配合，具体原理参考这里。这里对圣杯布局解释特别详细。

实现代码：

<h3>使用margin负值法进行布局</h3>
  <p id = "wrap">
   <p id = "center"></p>
  </p>
  <p id = "left_margin"></p>
  <p id = "right_margin"></p>
登录后复制

CSS代码：

#wrap{ width: 100%;height: 100px; background-color: #fff;float: left;}
#wrap #center{ margin:0 210px; height: 100px;background-color: #ffe6b8; }
#left_margin,#right_margin{ float: left;width: 200px;height: 100px;background-color: darkorange }
#left_margin {margin-left: -100%; background-color: lightpink}
#right_margin{margin-left: -200px;}
登录后复制

该方法在网站布局中非常常见，也是面试常考点，优点是三栏相互关联，有一定的抗性。需要注意的是，布局中间部分一定要放在前面，左右顺序不限制。对于left快的margin负值一定要等于wrap的宽度。
三种方法实现三栏网页宽度自适应布局方法见下图。

2 ， css3新特性

在外围包裹一层p，设置为display：flex；中间设置flex：1；但是盒模型默认紧紧挨着，可以使用margin控制外边距。

代码：

<p id = "box">
		 <p id = "left_box"></p>
		 <p id = "center_box"></p>
		 <p id = "right_box"></p>
		</p>
登录后复制

css样式：

#box{width:100%;display: flex; height: 100px;margin: 10px;}
#left_box,#right_box{width: 200px;height: 100px; margin: 10px; background-color: lightpink}
#center_box{ flex:1; height: 100px;margin: 10px; background-color: lightgreen}
登录后复制

注意： center一定要放到中间。

效果图如下：

css布局还有很多其他特性，下一步准备研究清楚浮动，再研究position、和display属性。

推荐教程：《CSS教程》

以上就是CSS 实现三栏自适应布局的详细内容，更多请关注php中文网其它相关文章！

CSS 布局 两列布局之单列定宽，单列自适应布局思路

CSS 布局 两列布局之单列定宽，单列自适应布局思路

前言

说起自适应布局方式，单列定宽单列自适应布局是最基本的布局形式。比如斗鱼的直播间，后台管理系统都是常用的

我们将从 float, inline-block, table, absolute, flex, grid 这几个布局方式来实现这种效果

float

【float + margin】

将定宽的一列使用 float，而自适应的一列使用计算后的 margin

<style>
    .f1 .parent{overflow: hidden;zoom: 1;} // 触发bfc和haslayout来闭合浮动
    .f1 .left{position: relative;float: left;width: 100px;}
    // width: 100% 以免浮动后内容撑开宽度。 margin-left: -100px; 由于宽度设置100%这会挤到下一行去了，利用margin 负值特性来规避
    .f1 .rightWrap{float: left;width: 100%;margin-left: -100px;} 
    .f1 .right{margin-left: 120px;}
</style>
<div class="case-box f1" data-case="f1">
    <div class="parent" style="background-color: lightgrey;">
        <div class="left" style="background-color: lightblue;">
            <p>left</p>
        </div>
        <div class="rightWrap" style="background-color: pink;">
            <div class="right"  style="background-color: lightgreen;">
                <p>right</p>
                <p>right</p>
            </div>
        </div>
    </div>
</div>

效果展示：

<iframesrc="https://shiyou00.github.io/lion/dist/html/css-layout/layout.html?case=f1" frameborder="0"></iframe>

【float + margin + calc】 [注意] IE8-、android4.3-、IOS5.1 - 不支持，android4.4 + 只支持加减运算

<style>
    .f2 .parent{overflow: hidden;zoom: 1;}
    .f2 .left{float: left;width: 100px;margin-right: 20px;}
    .f2 .right{float: left;width: calc(100% - 120px);} // 利用calc可以不同长度单位进行动态计算的特性
</style>
<div class="case-box f2" data-case="f2">
    <div class="parent" style="background-color: lightgrey;">
        <div class="left" style="background-color: lightblue;">
            <p>left</p>
        </div>
        <div class="right"  style="background-color: lightgreen;">
            <p>right</p>
            <p>right</p>
        </div>
    </div>
</div>

效果展示:

<iframesrc="https://shiyou00.github.io/lion/dist/html/css-layout/layout.html?case=f2" frameborder="0"></iframe>

【float + overflow】 还可以使用 overflow 属性来触发 bfc，来阻止浮动造成的文字环绕效果。由于使用 overflow 不会改变元素的宽度属性，所以不需要重新设置宽度。由于设置 overflow:hidden 并不会触发 IE6 - 浏览器的 haslayout 属性，所以需要设置 zoom:1 来兼容 IE6 - 浏览器

<style>
    .f3 .parent{overflow: hidden;zoom: 1;}
    .f3 .left{float: left;width: 100px;margin-right: 20px;}
    .f3 .right{overflow:hidden;zom:1;} // 触发bfc和haslayout
</style>
<div class="case-box f3" data-case="f3">
    <div class="parent" style="background-color: lightgrey;">
        <div class="left" style="background-color: lightblue;">
            <p>left</p>
        </div>
        <div class="right"  style="background-color: lightgreen;">
            <p>right</p>
            <p>right</p>
        </div>
    </div>
</div>

效果展示:

<iframesrc="https://shiyou00.github.io/lion/dist/html/css-layout/layout.html?case=f3" frameborder="0"></iframe>

inline-block

inline-block 内联块布局的主要缺点是需要设置垂直对齐方式 vertical-align，则需要处理换行符解析成空格的间隙问题。IE7 - 浏览器不支持给块级元素设置 inline-block 属性，兼容代码是 display:inline;zoom:1;

【inline-block + margin + calc】 一般来说，要解决 inline-block 元素之间的间隙问题，要在父级设置 font-size 为 0，然后在子元素中将 font-size 设置为默认大小

[注意] IE8-、android4.3-、IOS5.1 - 不支持，android4.4 + 只支持加减运算

<style>
    .f4 .parent{font-size:0;}
    .f4 .left{
        display: inline-block;
        vertical-align: top;
        width: 100px;
        margin-right: 20px;
        font-size: 16px;
    }
    .f4 .right{
        display: inline-block;
        vertical-align: top;
        width: calc(100% - 120px);
        font-size: 16px;
    }
</style>
<div class="case-box f4" data-case="f4">
    <div class="parent" style="background-color: lightgrey;">
        <div class="left" style="background-color: lightblue;">
            <p>left</p>
        </div>
        <div class="right"  style="background-color: lightgreen;">
            <p>right</p>
            <p>right</p>
        </div>
    </div>
</div>

效果展示:

<iframesrc="https://shiyou00.github.io/lion/dist/html/css-layout/layout.html?case=f4" frameborder="0"></iframe>

【inline-block + margin + margin 负值】

<style>
    .f5 .parent{
        font-size: 0;
    }
    .f5 .left{
        position: relative;
        display: inline-block;
        vertical-align: top;
        width: 100px;
        font-size:16px;
    }
    .f5 .rightWrap{
        display: inline-block;
        vertical-align: top;
        width: 100%;
        margin-left: -100px;
        font-size: 16px;
    }
    .f5 .right{margin-left: 120px;}
</style>
<div class="case-box f5" data-case="f5">
    <div class="parent" style="background-color: lightgrey;">
        <div class="left" style="background-color: lightblue;">
            <p>left</p>
        </div>
        <div class="rightWrap" style="background-color: pink;">
            <div class="right"  style="background-color: lightgreen;">
                <p>right</p>
                <p>right</p>
            </div>
        </div>
    </div>
</div>

效果展示:

<iframesrc="https://shiyou00.github.io/lion/dist/html/css-layout/layout.html?case=f5" frameborder="0"></iframe>

table

使用 table 布局的缺点是元素被设置为 table 后，内容撑开宽度，所以需要设置 width:100%。若要兼容 IE7 - 浏览器，需要改为 <table> 结构。由于 table-cell 元素无法设置 margin，若需要在元素间设置间距，需要增加结构

<style>
    .f6 .parent{display:table;width: 100%;table-layout: fixed;}
    .f6 .left,.f6 .rightWrap{display:table-cell;}
    .f6 .left{width: 100px;}
    .f6 .right{margin-left: 20px;}
</style>
<div class="case-box f6" data-case="f6">
    <div class="parent" style="background-color: lightgrey;">
        <div class="left" style="background-color: lightblue;">
            <p>left</p>
        </div>
        <div class="rightWrap" style="background-color: pink;">
            <div class="right"  style="background-color: lightgreen;">
                <p>right</p>
                <p>right</p>
            </div>
        </div>
    </div>
</div>

效果展示:

<iframesrc="https://shiyou00.github.io/lion/dist/html/css-layout/layout.html?case=f6" frameborder="0"></iframe>

absolute

absolute 布局的缺点是由于父元素需要设置为 relative，且子元素设置为 absolute，所以父元素的高度并不是由子元素撑开的，需要单独设置。

<style>
    .f7 .parent{
        position: relative;
        width: 100%;
        height:40px;
    }
    .f7 .left{
        position: absolute;
        left:0;
        width:100px;
    }
    .f7 .right{
        position: absolute;
        left:120px;
        right:0;
    }
</style>
<div class="case-box f7" data-case="f7">
    <div class="parent" style="background-color: lightgrey;">
        <div class="left" style="background-color: lightblue;">
            <p>left</p>
        </div>
        <div class="right"  style="background-color: lightgreen;">
            <p>right</p>
            <p>right</p>
        </div>
    </div>
</div>

效果展示:

<iframesrc="https://shiyou00.github.io/lion/dist/html/css-layout/layout.html?case=f7" frameborder="0"></iframe>

flex

flex 弹性盒模型是非常强大的布局方式。但由于其性能消耗较大，适合于局部小范围的布局

[注意] IE9 - 浏览器不支持

flex 布局教程

<style>
    .f8 .parent{
        display: flex;
    }
    .f8 .left{
        width:100px;
        margin-right: 20px;
    }
    .f8 .right{
        flex:1 1 auto;
    }
</style>
<div class="case-box f8" data-case="f8">
    <div class="parent" style="background-color: lightgrey;">
        <div class="left" style="background-color: lightblue;">
            <p>left</p>
        </div>
        <div class="right"  style="background-color: lightgreen;">
            <p>right</p>
            <p>right</p>
        </div>
    </div>
</div>

效果展示:

<iframesrc="https://shiyou00.github.io/lion/dist/html/css-layout/layout.html?case=f8" frameborder="0"></iframe>

grid

使用栅格布局 grid 实现 [注意] IE10 - 浏览器不支持

grid 布局详细教程

<style>
    .f9 .parent{
        display: grid;
        /* 子项目分别按照 100px固定宽度 以及1fr的栅格宽度分配 */
        grid-template-columns: 100px 1fr;
        /* 子项目间隙 */
        grid-gap:20px
    }
</style>
<div class="case-box f9" data-case="f9">
    <div class="parent" style="background-color: lightgrey;">
        <div class="left" style="background-color: lightblue;">
            <p>left</p>
        </div>
        <div class="right"  style="background-color: lightgreen;">
            <p>right</p>
            <p>right</p>
        </div>
    </div>
</div>

效果展示:

<iframesrc="https://shiyou00.github.io/lion/dist/html/css-layout/layout.html?case=f9" frameborder="0"></iframe>

今天关于css3实现可以计算的自适应布局——calc()和css自适应布局方法的讲解已经结束，谢谢您的阅读，如果想了解更多关于CSS 几种常用自适应布局、css 多栏自适应布局_html/css_WEB-ITnose、CSS 实现三栏自适应布局、CSS 布局 两列布局之单列定宽，单列自适应布局思路的相关知识，请在本站搜索。

本文标签：

上一篇python3 线程 threading.Thread GIL性能详解(2.3)（python threading多线程）

下一篇linux配置node forever（linux配置文件放在哪个目录）

相关文章