css 布局的几种方式,爆推【附源码】_mb6130455f7bea2

首先要明白我们平常说的宽度和高度指的是内容区的宽度和高度。

然后计算一个盒子占用的空间是 content + padding + border + margin

2.2 display / poistion

这里还要介绍两个属性,display 和 poistion

display 有如下几个值

  • block(元素表现为块级元素,有固定宽高,独占一行)

  • inline(元素表现为行内元素,不能设置宽高)

  • inline-block (对外表现为行内元素,对内表现为块级元素)3

position 有如下几个值

  • static(默认情况,存在文档流当中)

  • relative(根据元素本身原来所应该处的位置偏移,不会改变布局的计算)

  • absolute(绝对定位,脱离文档流,不会对别的元素造成影响,相对的是父级最近的 relative 或者 absolute 定位元素)

  • fixed(绝对定位,脱离文档流,相对于的是屏幕,就是那些浮动的广告那样,怎么拉都固定在同一个位置,而 absolute 元素离开屏幕就看不见了)

position 的层叠是按顺序层叠的,不过可以通过设置 z-index 来改变层叠顺序,只有 relative,absolute,fixed 可以设置 z-index。

2.3 flexbox 布局

flexbox 布局即弹性盒子布局,它的特点是盒子本来就是并列的,只需要指定宽度,来看一个经典的三栏布局的例子

 <!DOCTYPE html>  <html lang="en">  <head>      <meta charset="UTF-8">      <title>CSS 布局</title>  </head>  <style> .container{      height:200px;      width: 200px;      display: flex }  .left{      background-color: red;       flex: 1;  }  .middle{      background-color: yellow;       flex: 1;      }  .right{      background-color: green;      flex: 1;  } </style>  <body>      <div class=container>          <div class=left></div>          <div class=middle></div>          <div class=right></div>      </div>  </body>  </html> 

效果如下

css 布局的几种方式,爆推【附源码】_mb6130455f7bea2

有时我们可能需要两边定宽,中间自适应,那么可以这样写

 .left{      background-color: red;       width: 20px;  }  .middle{      background-color: yellow;       flex: 1;      }  .right{      background-color: green;      width: 20px;  } 

效果如下

css 布局的几种方式,爆推【附源码】_mb6130455f7bea2

如果想深入了解可以看阮一峰老师的文章

[Flex 布局教程:语法篇](

)

[flex布局案例](

)

但是 flexbox 布局方式浏览器的支持不是太好,有一些兼容性的问题,但是是未来布局的趋势。

3 float 布局


float 布局应该是目前各大网站用的最多的一种布局方式了,但是也特别复杂,这里详细讲一下

首先,什么是浮动?

浮动元素是脱离文档流的,但不脱离文本流,这是什么意思呢,用过 word 的应该知道有一种图片环绕的方式是文字环绕吧,就是这种效果。

那么它有什么特点呢

  • 对自身的影响

    • float 元素可以形成块,如 span 元素。可以让行内元素也拥有宽和高,因为块级元素具有宽高

    • 浮动元素的位置尽量靠上

    • 尽量靠左(float:left)或右(float:right),如果那一行满足不了浮动元素的宽度要求,则元素会往下掉
  • 对兄弟元素的影响

    • 不影响其他块级元素的位置

    • 影响其他块级元素的文本

    • 上面贴非 float 元素

    • 旁边贴 float 元素或者边框
  • 对父级元素的影响

    • 从布局上 “消失”

    • 高度塌陷

3.1 高度塌陷

什么是高度塌陷,举个例子吧

 <!DOCTYPE html>  <html lang="en">  <head>      <meta charset="UTF-8">      <title>CSS 布局</title>  </head>  <style> *{      margin: 0;      padding: 0;  }  .container{      width: 200px;      background-color:red;  }  .left{      background-color: yellow;       float: left;      height: 50px;      width:50px;  }  .right{      background-color: yellow;       float: right;      height: 50px;      width:50px;  } </style>  <body>      <div class=container>                 <span class=left>float</span>          <span>我是字</span>          <span class=right>float</span>      </div>      <div class="container" style="height: 200px;background: blue">            </div>  </body>  </html> 

效果如下

css 布局的几种方式,爆推【附源码】_mb6130455f7bea2

从图中可以看出,两个 float 元素虽然包含在第一个 container 中,但是却超出了第一个 container 的范围,在文档流中,父元素的高度默认是被子元素撑开的,也就是子元素多高,父元素就多高。

但是当为子元素设置浮动以后,子元素会完全脱离文档流,此时将会导致子元素无法撑起父元素的高度,导致父元素的高度塌陷。

解决办法有下面几种

  • 父元素设置 overflow: auto 或者 overflow: hidden

    效果如下

    css 布局的几种方式,爆推【附源码】_mb6130455f7bea2

  • 给父元素加一个 after 伪类
  .container::after{          content:'';          clear:both;          display:block;          visibility:hidden;          height:0;       } 

效果如下

css 布局的几种方式,爆推【附源码】_mb6130455f7bea2

这也是目前各大网站比较主流的清除浮动的方式,还有一些其他方式这里就不详细讲了,毕竟这是一篇讲布局的文章。

3.2 两栏布局

首先我们要明白为什么可以用 float 实现布局。其实上面的例子我们大概就可以看出来了,黄红黄这不就是一个标准的三栏布局吗。其实并没有,我们看看下面的例子

 <!DOCTYPE html>  <html lang="en">  <head>      <meta charset="UTF-8">      <title>CSS 布局</title>  </head>  <style> *{      margin: 0;      padding: 0;  }  .container{      width: 400px;      height: 200px;  }  .left{      background-color: yellow;       float: left;      height: 100%;      width:100px;  }  .right{      background-color: red;       margin-left: 100px;      height:100%;  }  .container::after{      content: '';      display: block;      visibility: hidden;      clear: both } </style>  <body>      <div class=container>                 <div class=left></div>          <div class=right></div>      </div>  </body>  </html> 

效果如下

css 布局的几种方式,爆推【附源码】_mb6130455f7bea2

上面代码中最重要的是 margin-left: 100px;,这一句将浮动元素的位置空了出来,所以右边栏里面的元素不会影响到浮动的 div。

这就是浮动布局的基本思想。

3.3 三栏布局

讲完两栏布局再讲一下三栏布局,思路主要是左边一个浮动元素,右边一个浮动元素。这里有个小问题,中间的元素要写在最后,因为中间元素假设有块级元素的话,会影响右边浮动元素的定位,这里演示一下

  <!DOCTYPE html>  <html lang="en">  <head>      <meta charset="UTF-8">      <title>CSS 布局</title>  </head>  <style> *{      margin: 0;      padding: 0;  }  .container{      width: 400px;      height: 200px;  }  ### 最后  推荐一些系统学习的途径和方法。    ![路线图](https://s2.51cto.com/images/20210928/1632813708132828.jpg)  每个Web开发人员必备,很权威很齐全的Web开发文档。作为学习辞典使用,可以查询到每个概念、方法、属性的详细解释,注意使用英文关键字搜索。里面的一些 HTML,CSS,HTTP 技术教程也相当不错。  **[开源分享:【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】](https://ali1024.coding.net/public/P7/Web/git)**  HTML 和 CSS:  ![html5知识](https://s2.51cto.com/images/20210928/1632813708470960.jpg)  ![css基础知识](https://s2.51cto.com/images/20210928/1632813709301601.jpg)

本站由小牛团队全力维护,小牛十年了,大家已经步入中年 。本站源码全部经过团队成员测试并调试,价格可能比其它网站略贵几元钱,不解释!
小牛资源 » css 布局的几种方式,爆推【附源码】_mb6130455f7bea2

发表评论

全站资源亲测可用,价格略高几元,不解释

立即查看 了解详情