• 欢迎访问亿浪博客,最新前端学习资料,推荐使用最新版火狐浏览器和Chrome浏览器访问本网站
  • 如果您觉得本站非常有看点,那么赶紧使用Ctrl+D 收藏亿浪博客吧

CSS常见布局解决方案

前端设计 迷惘 3个月前 (08-14) 94次浏览 已收录 0个评论 扫描二维码

CSS常见布局解决方案

水平居中布局

首先我们来看看水平居中

1.margin + 定宽

 

Demo

 

 

<style>.child {
	width: 100px;
	margin: 0 auto;
}</style>

相必是个前端都见过,这定宽的水平居中,我们还可以用下面这种来实现不定宽的

2. table + margin

 

Demo

 

 

<style>.child {
	display: table;
	margin: 0 auto;
}</style>

 

display: table 在表现上类似 block 元素,但是宽度为内容宽。

无需设置父元素样式 (支持 IE 8 及其以上版本)兼容 IE 8 一下版本需要调整为 <table>
3.inline-block + text-align

 

Demo

 

 

<style>.child {
	display: inline-block;
}

.parent {
	text-align: center;
}</style>

 

兼容性佳(甚至可以兼容 IE 6 和 IE 7)
4. absolute + margin-left

 

Demo

 

 

<style>.parent {
	position: relative;
}

.child {
	position: absolute;
	left: 50%;
	width: 100px;
	margin-left: -50px;
	/* width/2 */
}</style>

 

宽度固定
相比于使用transform ,有兼容性更好
5. absolute + transform

 

Demo

 

 

<style>.parent {
	position: relative;
}

.child {
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
}</style>

 

绝对定位脱离文档流,不会对后续元素的布局造成影响。
transform 为 CSS3 属性,有兼容性问题
6. flex + justify-content

 

Demo

 

 

<style>.parent {
	display: flex;
	justify-content: center;
}</style>

 

只需设置父节点属性,无需设置子元素
flex有兼容性问题
垂直居中

1.table-cell + vertical-align

 

Demo

 

 

<style>.parent {
	display: table-cell;
	vertical-align: middle;
}</style>

 

兼容性好(IE 8以下版本需要调整页面结构至 table)
2.absolute + transform

强大的absolute对于这种小问题当然也是很简单的

 

Demo

 

 

<style>.parent {
	position: relative;
}

.child {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
}</style>

绝对定位脱离文档流,不会对后续元素的布局造成影响。但如果绝对定位元素是唯一的元素则父元素也会失去高度。
transform 为 CSS3 属性,有兼容性问题
同水平居中,这也可以用margin-top实现,原理水平居中

3.flex + align-items

如果说absolute强大,那flex只是笑笑,因为,他才是最强的。。。但它有兼容问题

 

Demo

 

 

<style>.parent {
	display: flex;
	align-items: center;
}</style>

水平垂直居中   1. absolute + transform

 

Demo

 

 

<style>.parent {
	position: relative;
}

.child {
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
}</style>

 

绝对定位脱离文档流,不会对后续元素的布局造成影响。
transform 为 CSS3 属性,有兼容性问题
2. inline-block + text-align + table-cell + vertical-align

 

Demo

 

 

<style>.parent {
	text-align: center;
	display: table-cell;
	vertical-align: middle;
}

.child {
	display: inline-block;
}</style>

兼容性好
3. flex + justify-content + align-items

 

Demo

 

 

<style>.parent {
	display: flex;
	justify-content: center;
	/* 水平居中 */
	align-items: center;
	/*垂直居中*/
}</style>

只需设置父节点属性,无需设置子元素
蛋疼的兼容性问题
##一列定宽,一列自适应

1.float + margin

 

 

left

 

 

 

right

 

right

 

 

 

<style>.left {
	float: left;
	width: 100px;
}

.right {
	margin-left: 100px
	/*间距可再加入 margin-left */
}</style>

IE 6 中会有3像素的 BUG,解决方法可以在 .left 加入 margin-left:-3px 当然也有解决这个小bug的方案如下:

 

 

left

 

 

 

 

right

 

right

 

 

 

 

<style>.left {
	float: left;
	width: 100px;
}

.right-fix {
	float: right;
	width: 100%;
	margin-left: -100px;
}

.right {
	margin-left: 100px
	/*间距可再加入 margin-left */
}</style>

此方法不会存在 IE 6 中3像素的 BUG,但 .left 不可选择, 需要设置 .left {position: relative} 来提高层级。 注意此方法增加了不必要的 HTML 文本结构。

傲娇的程序员应该放弃太低版本的浏览器

2.float + overflow

 

 

left

 

 

 

right

 

right

 

 

 

<style>.left {
	float: left;
	width: 100px;
}

.right {
	overflow: hidden;
}</style>

设置 overflow: hidden 会触发 BFC 模式(Block Formatting Context)块级格式上下文。BFC是什么呢。用通俗的来讲就是,随便你在BFC 里面干啥,外面都不会受到影响 。此方法样式简单但不支持 IE 6

3 .table

 

 

left

 

 

 

right

 

right

 

 

 

<style>.parent {
	display: table;
	width: 100%;
	table-layout: fixed;
}

.left {
	display: table-cell;
	width: 100px;
}

.right {
	display: table-cell;
	/*宽度为剩余宽度*/
}</style>

table 的显示特性为每列的单元格宽度和一定等与表格宽度。 table-layout: fixed 可加速渲染,也是设定布局优先。table-cell 中不可以设置 margin 但是可以通过 padding 来设置间距

4. flex

 

 

left

 

 

 

right

 

right

 

 

 

<style>.parent {
	display: flex;
}

.left {
	width: 100px;
	margin-left: 20px;
}

.right {
	flex: 1;
}</style>

低版本浏览器兼容问题
性能问题,只适合小范围布局
我们在学会一列定宽,一列自适应的布局后也可以方便的实现 多列定宽,一列自适应 多列不定宽加一列自适应 这里我们不一一讲解,大家自行尝试,也可以巩固前面学习的

等分布局

1. float

 

 

1

 

 

 

2

 

 

 

3

 

 

 

4

 

 

 

<style>.parent {
	margin-left: -20px;
}

.column {
	float: left;
	width: 25%;
	padding-left: 20px;
	box-sizing: border-box;
}</style>

此方法可以完美兼容 IE8 以上版本
2. flex

 

 

1

 

 

 

2

 

 

 

3

 

 

 

4

 

 

 

<style>.parent {
	display: flex;
}

.column {
	flex: 1;
}

.column+.column {
	/* 相邻兄弟选择器 */
	margin-left: 20px;
}</style>

强大简单,有兼容问题
3. table

 

 

 

1

 

 

 

2

 

 

 

3

 

 

 

4

 

 

 

 

<style>.parent-fix {
	margin-left: -20px;
}

.parent {
	display: table;
	width: 100%;
	/*可以布局优先,也可以单元格宽度平分在没有设置的情况下*/
	table-layout: fixed;
}

.column {
	display: table-cell;
	padding-left: 20px;
}</style>

等高布局

1.table

table 的特性为每列等宽,每行等高可以用于解决此需求

 

 

left

 

 

 

right

 

right

 

 

 

<style>.parent {
	display: table;
	width: 100%;
	table-layout: fixed;
}

.left {
	display: table-cell;
	width: 100px;
}

.right {
	display: table-cell
	/*宽度为剩余宽度*/
}</style>

2.flex

 

 

left

 

 

 

right

 

right

 

 

 

<style>.parent {
	display: flex;
}

.left {
	width: 100px;
	margin-left: 20px;
}

.right {
	flex: 1;
}</style>

注意这里实际上使用了 align-items: stretch,flex 默认的 align-items 的值为 stretch

3. float

 

 

left

 

 

 

right

 

right

 

 

 

<style>
  .parent {
    overflow: hidden;
  }
  .left,
  .right {
    padding-bottom: 9999px;
    margin-bottom: -9999px;
  }
  .left {
    float: left;
    width: 100px;
    margin-right: 20px;
  }
  .right {
    overflow: hidden;
  }
</style>

亿浪博客 , 版权所有丨如未注明 , 均为原创丨本网站采用BY-NC-SA协议进行授权 , 转载请注明CSS常见布局解决方案
喜欢 (0)
[]
分享 (0)
迷惘
关于作者:
亿浪博客是一个个人博客,主要写一些个人学习心得 、笔记什么的,分享下网络实用常识、 实用软件、 心情随笔 、手机技巧 、站长工具等文章!
发表我的评论
取消评论
表情 加粗 删除线 居中 斜体 签到

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址