常见的CSS页面布局方式

详情：CSS页面结构是我们日常生活中最常使用到的，当然目前可能大家用的最多的是elementUI实现布局，简单方柏霓，下面介绍几种常见的原生页面布局的方式

公共的样式部分

    <style>* {margin: 0;padding: 0;}.layout {margin-bottom: 20px;}.layout article {width: 100%;}.layout article>div {min-height: 100px;}.layout article .left {width: 300px;background: red;}.layout article .center {background: orange;}.layout article .right {width: 300px;background: blue;}</style>

1、float浮动布局方式

  <!-- 浮动布局 --><section class="layout float"><style>.layout.float .left {float: left;}.layout.float .right {float: right;}</style><article class="left-center-right"><div class="left"></div><div class="right"></div><div class="center"><h2>这是float布局</h2><p>这是一段文字</p><p>这是一段文字</p></div></article></section>

2、absolute的布局方式

 <!-- 定位布局 --><section class="layout absolute"><style>.layout.absolute .left-center-right > div {position: absolute;}.layout.absolute .left {left: 0;}.layout.absolute .center {left: 300px;right: 300px;}.layout.absolute .right {right: 0;}</style><article class="left-center-right"><div class="left"></div><div class="center"><h2>这是absolute布局</h2><p>这是一段文字</p><p>这是一段文字</p></div><div class="right"></div></article></section>

3、flex布局

  <!-- flex布局 --><section class="layout flex"><style>.layout.flex {margin-top: 140px;}.layout.flex .left-center-right{display: flex;}.layout.flex .center {flex: 1;}</style><article class="left-center-right"><div class="left"></div><div class="center"><h2>这是flex布局</h2><p>这是一段文字</p><p>这是一段文字</p></div><div class="right"></div></article></section>

4、Grid布局方式

  <!-- grid布局 --><section class="layout grid"><style>.layout.grid .left-center-right {display: grid;grid-template-columns: 300px auto 300px;}</style><article class="left-center-right"><div class="left"></div><div class="center"><h2>这是grid布局</h2><p>这是一段文字</p><p>这是一段文字</p></div><div class="right"></div></article></section>

效果图展示：

总结：
（1）float布局的兼容性比较好。缺点是如图二, 解决办法：给橙色块添加overflow: hidden（生成了一个BFC）。浮动元素父元素还存在高度塌陷问题，解决方法：父元素生成一个BFC。
（2）absolute布局的有点是简单直接，兼容性好。缺点，脱离了文档流。
（3）flex布局的优点，布局简单、灵活，移动端友好；缺点是ie8以下不兼容。
（2）grid布局优点，是第一个基于二维方向的布局模块。它是第一个基于网格的原生布局系统。缺点是对低版本浏览器兼容性不好。

常见的CSS页面布局方式相关推荐

分享 10 个常见的 CSS 页面布局代码片段
大家好,本篇文章将分享我们业务中很常见的10个页面布局代码片段,这10 种页面布局很常见,实现方式也有很多种,本篇文章将用最简单的新方式进行实现,希望对大家有所启发. 1.Card layout(卡片 ...
CSS几种常见的页面布局方式介绍
问题:CSS几种常见的页面布局方式介绍? CSS常见的有以下7种,必须要掌握的是前3种: flex弹性盒子(弹性布局): rem布局(一般都是flex+rem使用的比较多): 响应式布局(响应式布局的 ...
CSS常见的几种布局方式
在看前端面试题的时候经常会看到css的布局方式,今天整理一下分享给大家. #单列布局 #两列自适应布局 #三栏布局(圣杯布局和双飞翼布局) 一.单列布局常见的单列布局有两种: header.cont ...
前端必经之路：CSS页面布局(深入理解浮动布局、定位布局、圣杯布局和双飞翼布局等重要布局方案)
建筑师在对一栋建筑物进行施工之前,首先会根据建筑图纸上的平面图.立体图.剖面图和构造详图等对建筑物进行整体布局后再从局部施工(当然不排除有先装修完厕所再砌卧室围墙的奇葩).在一个网页页面的搭建过程中, ...
CSS页面布局（超详解）
目录 1 CSS页面布局概述 1.1 概述 1.2 网页栏目划分 1.3 元素类型转化 1.3.1 块元素 1.3.2 行内元素 1.3.2 块元素和行内元素的转换 1.4 定位 1.4.1 静态定位 ...
2.18 前端页面布局方式的演变
第一阶段现在已经很少有人提及,其实最早的页面布局是使用table布局的,那时候的网页设计师基本不会担心跑位的问题,但是随着网页的功能越来越复杂,CSS的表现力越来越强,对HTML文档的语义化要求和页 ...
[转]企业网站首页设计常见的6种布局方式
在群里和大家交流时,看到太多的网页设计师发布企业站的个人作品,设计中总是摆脱不了大框套小框的设计布局思路,不加思索的跳入单一的网页布局形式中,于是就有了把企业站常用的页面布局方式总结一下的想法,让 ...
企业网站首页设计常见的6种布局方式
转载自:http://www.wzsky.net/html/Website/Experience/120178.html 在群里和大家交流时,看到太多的网页设计师发布企业站的个人作品,设计中总是摆脱不 ...
20个不错的CSS页面布局相关资源推荐
本篇文章搜集整理的是CSS页面布局的一个很长的列表.如果你时间很少,那么可以下载已经准备好的CSS页面布局,如果你想进行个性化的尝试,下面列出了一些站点你可以不需过多努力而达到效果. 漂亮.免费的CS ...

常见的CSS页面布局方式

常见的CSS页面布局方式相关推荐

最新文章

热门文章