CSS-四种两栏式布局

四种两栏式布局

先分别介绍float、position、flex和table

1.float属性指定一个盒子（元素）是否应该浮动。

在早期浏览器当中，文档类型基本都是图片加文字进行页面展示。float属性最开始的设计是想让文字环绕图片
例如这样：

而开发人员无意中利用它做了一些本不应该是float设计时的工作，于是早期的页面布局一般都是float布局。例如让两个块级盒子在一行显示。

2.position属性指定一个元素（静态的，相对的，绝对或固定）的定位方法的类型

absolute
生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。
元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。fixed
生成固定定位的元素，相对于浏览器窗口进行定位。
元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。relative
生成相对定位的元素，相对于其正常位置进行定位。
因此，"left:20" 会向元素的 LEFT 位置添加 20 像素。static  默认值。没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）。

3.flex 这是一个新朋友，但是如果你学好了这个属性，碰见任何布局都不带怂的（这里我的语气要降低点，因为我也不是那么肯定~~）。总之这是一个非常好用的属性，详细的细节以后再说，实在是属性太多，这里简单说几个属性。

    首先你必须要给父级添加一个display:flex属性，来确认当前元素是一个弹性盒子！！【这是最关键】好了接下来简单说说子元素的属性flex-grow   一个数字，规定项目将相对于其他灵活的项目进行扩展的量。flex-shrink 一个数字，规定项目将相对于其他灵活的项目进行收缩的量。

因为属性实在太多，所以先说这么多

4.table 这是由html内的table标签转化而来的
这里呢，我只说两个属性。display:table和display:table-cell

display:table对应的是html内table
dispaly:table-cell对应的是html内td

这里只是打个比方，对于那些想说“为什么要打比方，比方是无辜的”，同学请你出去！~~

好了，开个玩笑。总算是铺垫了点东西，开始进入今天的正题两栏式布局

一、利用float配合margin( position也一样需要这个属性进行配合)
那可能就有同学问了为什么不用padding或者border呢？这里考虑到有些同学习惯整体用box-sizing:border-box。而一旦用了这个，盒子的的border和padding就属于盒子自身的size了。
哎~~另外如果用border的话还要给border-color透明。所以这里推荐使用margin!!
好了，到了激动人心的时刻了，上代码！！！（注：此处应该有掌声）

 <style> .box div{height:100px;}.left{width:200px;float: left;background-color:pink;}.right{margin-left:200px;background-color:yellow}</style><div class="box"><div class="left"></div><div class="right"></div></div>

是不是很惊奇？有人问了，这么短的代码就能实现我要两栏布局？我可以郑重的告诉你，或许别人不行，但是！！！集才华与美貌的我，就只要这几行代码~~~

那个~~只是活跃一下气氛啊。。
现在讲讲它的注意事项。第一，float必须放在第一个子元素。第二margin的方向必须同float方向，第三margin的值必须等于float元素的宽（这一点根据实际开发情况来定，一般项目开发两栏之间是需要间距的，这个时候可酌情多个10-20像素）

emm,我最近在群里看到有些同学并没有给margin值(备注：这个群呢，是我在网上报的一所前端培训机构–渡一教育。有兴趣的同学可以搜一下)，其实也是可以的，但是并不完美，如果不给margin值，第二个子元素将会是父级的宽，但是文本内容会绕开float，就像我之前说的文字围绕图片，如果一旦第二子元素内又有一个块级元素呢？而我要将他完整展现出来呢？这是有缺陷的，所以说希望同学们能加上margin。

二、利用position配合margin
原理呢，和float一样这里就不重复说了。直接上代码~~

 <style>.box{position: relative}.box div{height:100px;}.left{width:200px;position: absolute;left:0;background-color:pink;}.right{margin-left:200px;background-color:yellow}</style><div class="box"><div class="left"></div><div class="right"></div></div>

你没有看错，还是这么短的代码。是不是很惊讶，只要998，代码带回家！！！

一如既往的皮一下~~下面讲讲注意事项
第一，和float一样，必须是第一个子元素，当然如果给它加上top:0的话可以随意，其实如果只是定位在左边的话，我left:0也不会写。显得代码逼格高，如果你要向右那就要加right了。第二，像之前说的float可以不加margin，只能显示文本。这position是不存在的,文字不会环绕定位元素，所以小伙伴们还是都加上margin吧。第三点与float一样。

三、display:flex与flex-grow(比起float，position的搭配，人家这才是两兄弟，之前那两货只能算是半路夫妻)
display:flex需要给予父级，flex-grow放置自适应的子元素。（IE10一下不支持）这里不说太多直接上代码~~

  <style>.box{display: flex}.box div{height:100px;}.left{width:200px;background-color:pink;}.right{flex-grow:1;background-color:yellow}</style><div class="box"><div class="left"></div><div class="right"></div></div>

一如既往的少…那啥，就不吹了。怕被揍。。。一下省略一万字描述我的才华与美貌

下面说说优点于注意事项：

第一，与float、position相比flex布局的好处在于不需要写宽度和margin相匹配了，这里只要求你写入一个固定宽度，flex-grow会自动将你剩下的补全。第二，你可以在任何地方插入，顺序是你写入的顺序，比如你写三栏布局，要求两侧固定宽度200px，中间自适应。你只需要将两侧设置宽度，中间给予flex-grow就OK了。与之前两个相比较，还有一个好处就是，如若你的两个子元素，高度不统一，这个时候，给两个子元素vertical-align: middle;可以让两个子元素水平对齐。是不是感觉很神奇，我可以很不负责任的告诉你，flex布局的强大之处远不至此。想了解的话，关注后期更新

四、display:table和display:table-cell
display:table 给予父级，display:table-cell给予两个子集，这里代码如下：

    .box{display: table}.box div{display: table-cell}.left{min-width:200px;background-color:pink;}.right{width:100%;background-color:yellow;}</style><div class="box"><div class="left"></div><div class="right"><div style="height:100px"></div></div></div>

这个是我很喜欢的一种布局方式，说说他的优点
第一，你不需要给高，他们自适应的选出你两个子元素最高的作为公共高度（我代码内有一个高100px的div是为了撑起div,如果有内容的话，高度将会是内容高度），第二，甚至你可以不给宽，这里以为我讲的是两栏布局，所以我给了第一个子元素一个200px最小宽度，如果说你内容宽度超过了200px,他将让你的第一个子元素的宽度等于内容宽度。我认为这是自适应的最高境界！！第三，如果你想文本水平居中可以添加vertical-align:middle;

是不是感觉这种布局和之前三个写法不太一样，下面是点私货，与其他三种一样的布局，只添加一个子元素属性：

    <style>.box{display: table;width: 100%}.left{display: table-cell;width:200px;background-color:pink;}.right{width: 100%;background-color:red;}</style><div class="box"><div class="left"></div><div class="right"><div style="height:100px"></div></div></div>

这样看起来是不是就和之前三种布局写法类似了~~~

我第一次接触这个属性来自于bootstarp的input-group组件，当我去看这个组件的属性时是真的被吸引住了，当然这个组件需要合适的地方才能发挥出他强大的一面，大家有兴趣的可以去看看bootstarp的input-group组件。

本次分享到这里就该介绍了，这是鄙人第一次写分享文章，有哪些地方没讲的清楚或错误的地方，还请留言拨正。谢谢大家的阅读

CSS-四种两栏式布局相关推荐

css两栏式布局示例
请先看图,这里主要用到了float属性,该属性的值指出了对象是否及如何浮动语法: float : none | left |right 参数: none : 对象不浮动;left : 对象浮 ...
常见CSS两栏式布局
代码下载:https://files.cnblogs.com/files/xiandedanteng/TwoColumnLayout.rar 效果展示: 代码: <!DOCTYPE html&g ...
HCJ2：页面两栏式或三栏式布局
2.1 简介大家在进行页面布局的时候,可能会遇见两栏式布局与三栏式布局,如下图所示: 两栏式例子: 三栏式 2.2 方法 2.2.1 两栏式 .left-pane{width: 14%;heigh ...
html四种选择器的特点,css四种选择器总结
css 在网页开发中扮演着重要的角色,被誉为网页开发的三剑客,如果说html是人的外在器官部分,那css无疑是各个器官组成在一起然后表现出来,css又称样式重叠在网页排版布局中的地位举足轻重. 做为后 ...
Web布局连载——两栏固定布局（五）
在上一篇<Web布局连载--两栏固定布局(四)>中留了一个下文,"No div, no float, no clear, no hack".看起来很有意思,这种没有di ...
CSS几种常见的页面布局方式介绍
问题:CSS几种常见的页面布局方式介绍? CSS常见的有以下7种,必须要掌握的是前3种: flex弹性盒子(弹性布局): rem布局(一般都是flex+rem使用的比较多): 响应式布局(响应式布局的 ...
HTML(十二)三种常见布局：三栏式布局双飞翼布局圣杯布局
一.三栏式布局顾名思义,即是将主页分成三部分(左,中,右),给左边和右边的块定宽,中间的块占据余下部分.以下是几种常用的实现方法 1.巧用浮动优点:兼容性好,实现简单缺点:必须先写浮动元素,再写 ...
三个经典布局：三栏式布局、双飞翼布局、圣杯布局
1.三栏式布局三栏式布局就是左栏定宽左浮动,右栏定宽右浮动. <div class="wrap"><div class="left"> ...
【三栏式布局、双飞翼布局、圣杯布局】09
三栏式布局文章目录三栏式布局 1. 用calc函数实现三栏式布局 2. 双飞翼布局 3. 圣杯布局两边盒子固定宽度,中间盒子自适应的布局. 1. 用calc函数实现三栏式布局 <div c ...

CSS-四种两栏式布局

四种两栏式布局

CSS-四种两栏式布局相关推荐

最新文章

热门文章