css实现左右布局
css实现左右布局的方式大概有六种：
1. table的li实现
table标签是能够具有实现左右布局的属性,tr表示一行，td表示一列，tr中可以添加td实现盒子的左右布局.
2 . inline-block
立即学习“前端免费学习笔记（深入）”；
display:inline-block属性是介于行级元素(display:inline)和块级元素(display：block)之间的属性，它可以像行级元素一样水平布局，也可以像块级元素设置宽高属性，所以可以进行左右布局。
3. float实现左右布局
float浮动，将该块状区域脱离父级标签的文档流，left属性值使该区域向父级标签区域的左侧边界放置，right属性值使该区域块向父级标签的右侧边界放置，如是利用该属性可以实现左右布局。
float布局对于后面节点的布局采用交错性的布局，inline-block采用正常式的布局。
4. flexbox属性实现左右布局
flexbox弹性盒子布局，display:box;该种布局主要用于移动前端开发。
5. float+margin实现左右布局
float能够使得元素向左或者向右靠边布局，如果在同级元素中设置一个正常流的区域与浮动块并列，则浮动块会在该正常流同级区域的边界处，只是浮动块会影响该区域块的布局，所以要清除浮动块的影响，所以此时将正常流区域块外的盒子设置margin等于浮动块的宽度既可以清除影响。
6. position:absolute左右布局
绝对定位，产生脱离文档流的布局现象。absolute可以覆盖任何位置的元素且不会影响正常流的布局，但是会产生遮盖。
css左中右布局
三栏自适应布局：两边定宽，中间block宽度自适应。
1.绝对定位法
将左右两边使用absolute定位，因为绝对定位脱离文档流，后面的center会自然流动到上面，然后使用margin属性，留出左右元素的宽度，既可以使中间元素自适应屏幕宽度。
2. 使用自身浮动法
对左右使用分别使用float:left和float:right，float使左右两个元素脱离文档流，中间元素正常在正常文档流中，使用margin指定左右外边距对其进行一个定位。同时父盒子设置 overflow: auto; 来避免子盒子溢出
3. 圣杯布局
圣杯布局的原理是margin负值法。使用圣杯布局首先需要在center元素外部包含一个p，包含p需要设置float属性使其形成一个BFC，并设置宽度，并且这个宽度要和left块的margin负值进行配合。
css居中布局
水平居中
对于行内元素(inline)：text-align: center;
HMCSS是由河马工作室全新开发的通用的企业网站系统，是PHP+MYSQL的架构，采用DIV+CSS的方式进行网页布局，网站的功能包括有：企业简介，图片展示幻灯，产品图片滚动，企业荣誉，实力展示，产品分类及展示，网上招聘，在线留言，联系我们，在线地图等内容，另外还带有完整的管理后台，如网站SEO优化关键词等都可以自由设定。 HMCSS目前发布的是1.0版本，就是上述的这些内容。后面我们还要加上产品
对于块级元素(block)：设置宽度且 marigin-left 和 margin-right 是设成 auto，使用 max-width 替代 width。
对于多个块级元素：对父元素设置 text-align: center;，对子元素设置 display: inline-block;（vertical-alinga:top）；或者使用 flex 布局
flex 布局： display:flex； justify-content:center
垂直居中
对于行内元素(inline)
单行：设置上下 pandding 相等（或者设置 line-height 和 height 相等）
多行：设置上下 pandding 相等；或者设置 display: table-cell; 和 vertical-align: middle;；或者使用 flex 布局；或者使用伪元素
对于块级元素(block)：（下面前两种方案，父元素需使用相对布局）
已知高度：子元素使用绝对布局 top: 50%;，再用负的 margin-top 把子元素往上拉一半的高度
未知高度：子元素使用绝对布局 position: absolute; top: 50%; transform: translateY(-50%);
使用 Flexbox：选择方向，justify-content: center;
css实现水平垂直居中布局
定高定宽：先用绝对布局 top: 50%; left: 50%;，再用和宽高的一半相等的负 margin 把子元素回拉
高度和宽度未知：先用绝对布局 top: 50%; left: 50%;，再设置 transform: translate(-50%, -50%);
使用 Flexbox：justify-content: center; align-items: center。
box-sizing
当你设置一个元素为 box-sizing: border-box; 时，此元素的内边距和边框不再会增加它的宽度。
百分比宽度
百分比是一种相对于包含块的计量单位。它对图片和盒子模很有用：比如实现图片宽度始终是容器宽度的50%，即使窗口缩小。
css实现inline-block 布局
inline-block 元素 影响垂直居中，加vertical-align：top。
相关文章推荐：
