整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
家好，我是三木。
这篇文章，替大家汇总了css的布局方式，在每个布局的结尾附上了我认为比较好的文章链接，不仅仅可以当作学习资料，也可以当作方法的查询手册，以后开发的时候忘记了某个属性就来查查。
看完推荐的文章保准解决你 99% 的css布局问题
每篇文章不仅仅包含介绍，还有代码案例，以及如w3c网站的在线代码编辑，可以自己修改属性尝试。
使用方法——display: block/inline/inline-block
根据CSS规范的规定，每一个网页元素都有一个display属性，用于确定该元素的类型，每一个元素都有默认的display属性值，比如div元素，它的默认display属性值为“block”，成为“块级”元素(block-level)；而span元素的默认display属性值为“inline”，称为“行内”元素。
w3c：https://www.w3schools.com/cssref/playdemo.asp?filename=playcss_display
w3c：https://www.w3school.com.cn/css/css_inline-block.asp
用法：https://zhuanlan.zhihu.com/p/65353887
使用方法：float:left/right
指定一个元素应沿其容器的左侧或右侧放置，允许文本和内联元素环绕它。
float属性用于定位和格式化内容，例如让图像向左浮动到容器中的文本。
float的值有：
w3c：https://www.w3schools.com/css/css_float.asp
MDN：https://developer.mozilla.org/zh-CN/docs/Web/CSS/float
CSS深入理解之float浮动：https://segmentfault.com/a/1190000014554601
使用方法——display：flex/inline-flex
Flexible Box 模型，通常被称为 flexbox，是一种一维的布局模型。它给 flexbox 的子元素之间提供了强大的空间分布和对齐能力。
容器默认存在两根轴：水平的主轴（main axis）和垂直的交叉轴（cross axis）。主轴的开始位置（与边框的交叉点）叫做main start，结束位置叫做main end；交叉轴的开始位置叫做cross start，结束位置叫做cross end。
项目默认沿主轴排列。单个项目占据的主轴空间叫做main size，占据的交叉轴空间叫做cross size。
容器有以下属性：
w3c：https://www.w3schools.com/css/css3_flexbox_container.asp
Flex 布局教程：语法篇：https://www.ruanyifeng.com/blog/2015/07/flex-grammar.html
深度解析 CSS Flexbox 布局：https://juejin.cn/post/6844904116141948936
48张小图带你领略flex布局之美：https://juejin.cn/post/6866914148387651592
使用方法——position：absolute/relative...
给元素设置postion属性后，就可以定义该元素的top,bottom,left,right四个属性。当然postion的值不同，对应的top,bottom,left,right这四个属性的值代表的含义也不相同
position属性用来指定一个元素在网页上的位置，一共有5种定位方式：
w3c: https://www.w3schools.com/css/css_positioning.asp
MDN：https://developer.mozilla.org/zh-CN/docs/Web/CSS/position
CSS 定位详解：https://www.ruanyifeng.com/blog/2019/11/css-position.html
使用方法——display:table/table-row/table-cell....
有两种方式使用表格布局 -HTML Table（<table>标签）和CSS Table（display:table 等相关属性）。
HTML Table是指使用原生的<table>标签，而CSS Table是指用CSS属性模仿HTML 表格的模型。
table布局的display总共包含如下值
display:table的几个用法：https://blog.51cto.com/u_4048786/3205160
css table布局大法：https://segmentfault.com/a/1190000007007885
display:table的用法：https://www.jianshu.com/p/037a706ba9e9
使用方法 ——display：grid
网格布局将网页划分成一个个网格，可以任意组合不同的网格，做出各种各样的布局。
w3c：https://www.w3schools.com/css/css_grid.asp
CSS Grid 网格布局教程：https://www.ruanyifeng.com/blog/2019/03/grid-layout-tutorial.html
Grid 布局：https://juejin.cn/post/6854573220306255880
A Complete Guide to Grid：https://css-tricks.com/snippets/css/complete-guide-grid/
使用方法——column-count
column-count： length ｜ auto
column-width：interger ｜ auto
浅谈CSS3多列布局：https://juejin.cn/post/6844903450623524872
CSS columns分栏布局教程：https://www.zhangxinxu.com/wordpress/2019/01/css-css3-columns-layout/
TML中的表格是由<table>标签进行定义的，表格在HTML中的表现形式与使用方法与word中的表格非常类似。多数情况使用Dreamweaver的可视化视图只做表格更为简单、方便。本文主要讲述如何使用代码来编写表格，让大家掌握表格的代码书写格式与其对应的属性。
表格的标签组成
HTML中的表格是由<table>为主体标签，浏览器会将该标签解释为一个表格。表格中的行使用<tr>标签进行定义。<tr>标签为<table>标签的子类，设置若干个<tr>标签可以将表格分割为若干个行。<td>标签用于定义表格的列，<td>标签为又是<tr>标签的子类，因此每个行都需要设置相应数量的<td>标签来分割列，形成一个完整的表格。
表格的标签组合关系为：
<table>
<tr>
<td>我是单元格1</td>
<td>我是单元格2</td>
</tr>
</table>
表格中可以插入文本、图片、列表、段落、表单、水平线等任何html标签，甚至可以用来做页面布局。但是table布局存在代码冗余过长、不符合HTML规范、搜索引擎不友好等问题。因此建议大家尽量不要使用table进行页面布局，除非页面中确实需要一张表格。
剩下的<th>、<thead>、<tbody> 和 <tfoot>很少被用到，这是由于浏览器对它们的支持不太好。
表格和边框属性
表格自身可以定义border属性来决定表格边框的宽度，该属性的值默认是以数字单位进行显示，例如border=”1″该值的单位为px。注意，不要在border的数值后面加上任何单位，否该值无法正确识别。
表格的表头
在<table>中可以通过<th>标签设置表头，表头的<th>标签与<tr>标签属于平级，并且表头一般出现在<tr>标签的前面。对于一个表格来说，表头并不是必须的，可以根据需要插入表头。<th>标签内的文字会被自动加粗。
单元格的合并
单元格的合并分为垂直合并与水平合并，在合并时需要确定其他行与列中是否有对应数量的单元格。
水平合并单元格使用colspan属性，其值是用数字的形式确定需要合并的单元格数量，例如colspan=”2″即代表向右合并两个单元格。
垂直合并单元格使用rowspan属性，与水平合并的属性相同，同样也是以数字形式确定需要合并的单元格数量，例如rowspan=”2″代表向下合并两个单元格。
实例演示代码：
<table border=“1”>
<tr>
<th>姓名</th>
<th colspan=“2”>电话</th>
</tr>
<tr>
<td>Bill Gates</td>
<td>555 77 854</td>
<td>555 77 855</td>
</tr>
</table><h4>横跨两行的单元格：</h4>
<table border=“1”>
<tr>
<th>姓名</th>
<td>Bill Gates</td>
</tr>
<tr>
<th rowspan=“2”>电话</th>
<td>555 77 854</td>
</tr>
<tr>
<td>555 77 855</td>
</tr>
</table>
单元格边距
表格具有与padding样式类似的内边距功能。通过在<table>标签内定义cellpadding属性，来为其标签下的所有<td>元素设置内边距。cellpadding属性的参数是值是以数字的形式来确定边距的大小，例如cellpadding=”10″ 则表示table中的所有<tr>标签内边距为10px
单元格间距
单元格的间距是设置<tr>标签的外边距，这个也与css样式中的margin类似，通过在<table>标签内定义cellspacing属性，来为其标签下的所有td元素设置外边距。该属性也是以数字的形式来确定外边距的大小，例如cellspacing=”10″则表示这个table中的所有<tr>标签的外边距为10px
为表格设置背景
表格可以通过background属性为表格或单元格设置任意图片作为背景，其使用方法非常像css中的background。为background设置对应的图片路径，即可使单元格显示相应的图片。例如background=”table_bg.gif”
表格内容的对齐排列
表格的对齐分为水平对齐和垂直对齐。它们分别是align属性与valign属性，将这两个属性插入到对应的<td>标签中即可完成单元格内文本或图像的对齐。
水平对齐align分别有三个值：left左对齐、center水平居中、right右对齐
垂直对齐valign也有三个值：top顶端对齐、middle垂直居中、bottom底部对齐、baseline为基线对齐。
其中基线对齐可能无法从字面上理解，其实基线对齐也就是文本出现在表格的中上部而不是正中央。如果文字不大的话，效果和middle差不多，比middle稍微靠上一点。
私信发送【前端】有惊喜！
<table>标签：
<table>指的是表格，用表格来搭建界面布局，即用表格的嵌套，来搭建界面布局。
<table>布局优势：
table优势：开发时间短（使用DW开发速度快）；纯table各浏览器不会有兼容问题；内容可自适应；在搜索引擎排名能靠前；
但是 table如果布局变更，需要重新开发；如果table里有div ul 等，可能会出现浏览器兼容问题；加载速度慢；table嵌套的太多，运维是非常困难的。
<div>块级（block-level）标签：
DIV是层叠样式表中的定位技术，全称DIVision，即为划分。有时可以称其为图层。
<div>布局优势：
一.精简代码，减少重构难度。
网站使用DIV+CSS布局使代码很是精简，css文件可以在网站的任意一个页面进行调用，而若是使用table表格修改部分页面却是显得很麻烦。要是一个门户网站的话，需手动改很多页面，而且看着那些表格也会感觉很乱也很浪费时间，但是使用css+div布局只需修改css文件中的一个代码即可。
二.网页访问速度
使用了DIV+CSS布局的网页与Table布局比较，精简了许多页面代码，那么其浏览访问速度自然得以提升，也从而提升了网站的用户体验度。
三.SEO优化
采用div-css布局的网站对于搜索引擎很是友好，因此其避免了Table嵌套层次过多而无法被搜索引擎抓取的问题，而且简洁、结构化的代码更加有利于突出重点和适合搜索引擎抓取。
四.浏览器兼容性
若使用table布局网页，在使用不同浏览器情况下会发生错位，而div+css则不会，无论什么浏览器，网页都不会出现变形情况。
1.流动式布局：是HTML网页默认的布局方式
特点：
1.块级元素都会在所处的包含元素内自上而下按顺序处置延伸分布，且默认状态下，块级元素占整个文档流，默认宽度为100%。
2.内联元素都会在所处的包含元素内从左到右水平分布显示，不占整个文档流。
常见的块级（block）元素有：<h1-h5> 、<table>、 <ul>、<li> 、<p> 、<form>、 ol
常见的内内联（行内）元素有：<a>、<span>、<img>、<input>、<select>、<textarea>
2.浮动布局（float）
特点：
浮动布局依靠【 浮动属性 float：left/right/... 】来使标签脱离文档流，达到两个块级元素并排显示的效果。
float：left ； 浮动脱离当前文档流浮动。
同时可以依靠【展示属性display：inline/block/inline-block】来进行行内元素和块级元素的效果切换。从而达到灵活运用块级元素和行内元素布局的效果。
3.层模型布局又叫定位布局
特点：
当我们应拥div布局是，在第一层块界面上来做第二层块界面的开发时，就要用到我们所说的定位布局。
通过运用【定位属性position:absolute/relative/fixed】 来进行第二层界面的定位布局。
网页是静态的，网页上的定位
position：absolute ；绝对定位脱离文档流，不受浮动影响，就是相对于窗体（body）边界的margin定位。
position：relative； 相对定位不脱离文档流，相对于父级标签元素的位置定位。
position:fixed；固定位置，不会受任何因素影响。
滚动条移动前
滚动条移动后
优先层显示方法：【属性：z-index:0/1/2...】
特点： 数值越大，越优先显示。
注意：只有元素使用了position属性的，才具有z-index属性。
本文部分内容来自网络，如有侵权，请联系修改。
*请认真填写需求信息，我们会在24小时内与您取得联系。
