一 .元素居中的三种方式:
方法一:父相自绝后,子分部向左向上移动本身宽度和高度的一半(也可以用 transform:translate(-50%,-50%))最常用方法
#box{
width: 400px;
height: 400px;
background: red;
position: relative;
}
#x{
width: 200px;
height: 200px;
background: yellow;
position: absolute;
left: 50%;
top: 50%;
margin-left: -100px;
margin-top: -100px;
}
方法二:父元素设置成弹性盒,子元素横向居中,纵向居中
#box{
width: 400px;
height: 400px;
background: red;
display: flex;
justify-content: center;
align-items: center;
}
#x{
width: 200px;
height: 200px;
background: yellow;
}
方法三:父向子绝,子元素所有定位为0,margin设置auto自适应。
#box{
width: 400px;
height: 400px;
background: red;
position: relative;
}
#x{
width: 200px;
height: 200px;
background: yellow;
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
margin: auto;
}
二.常用的页面布局(两栏布局、三栏(圣杯、双飞翼)布局)
1. 两栏布局,左边定宽,右边自适应
//html
<div id="left">左边定宽</div>
<div id="right">右边自适应,前端前端前端前端前端前端前端前端前端前端</div>
左边左浮动,右边加oveflow:hidden;变成BFC清除左侧浮动元素的影响
#left{
float: left;
width: 200px;
background: green;
}
#right{
overflow: hidden;
background: red;
}
2. 三栏布局,圣杯布局、双飞翼布局
圣杯布局和双飞翼布局是前端工程师需要日常掌握的重要布局方式。两者的功能相同,都是为了实现一个两侧宽度固定,中间宽度自适应的三栏布局。(中间先加载渲染)
圣杯布局来源于文章In Search of the Holy Grail,而双飞翼布局来源于淘宝UED。虽然两者的实现方法略有差异,不过都遵循了以下要点:
- 两侧宽度固定,中间宽度自适应
- 中间部分在DOM结构上优先,以便先行渲染
- 允许三列中的任意一列成为最高列
- 只需要使用一个额外的<div >外层 标签
圣杯布局
1. DOM结构
<div id="header"></div>
<div id="container">
<div id="center" class="column"></div>
<div id="left" class="column"></div>
<div id="right" class="column"></div>
</div>
<div id="footer"></div>
首先定义出整个布局的DOM结构,主体部分是由container
包裹的center,left,right
三列,其中center
定义在最前面。
2. CSS代码
假设左侧的固定宽度为200px,右侧的固定宽度为150px,则首先在container上设置:
#container {
padding-left: 200px;
padding-right: 150px;
}
随后分别为三列设置宽度与浮动,同时对footer设置清除浮动:
#container .column {
float: left;
}
#center {
width: 100%;
}
#left {
width: 200px;
}
#right {
width: 150px;
}
#footer {
clear: both;
}
根据浮动的特性,由于center
的宽度为100%
,即占据了第一行的所有空间,所以left
和right
被“挤”到了第二行。
接下来的工作是将left放置到之前预留出的位置上,这里使用负外边距:
#left {
width: 200px;
margin-left: -100%;
}
这里使用position: relative
和right: 200px
将left的位置在原有位置基础上左移200px
,以完成left
的放置:
接下来放置right,只需添加一条声明即可:
#right {
width: 150px;
margin-right: -150px;
}
至此,布局效果完成。不过还需要考虑最后一步,那就是页面的最小宽度:要想保证该布局效果正常显示,由于两侧都具有固定的宽度,所以需要给定页面一个最小的宽度,但这并不只是简单的200+150=350px。回想之前left使用了position: relative,所以就意味着在center开始的区域,还存在着一个left的宽度。所以页面的最小宽度应该设置为200+150+200=550px:
body {
min-width: 550px;
}
综上所述,圣杯布局的CSS代码为:
body {
min-width: 550px;
}
#container {
padding-left: 200px;
padding-right: 150px;
}
#container .column {
float: left;
}
#center {
width: 100%;
}
#left {
width: 200px;
margin-left: -100%;
position: relative;
right: 200px;
}
#right {
width: 150px;
margin-right: -150px;
}
#footer {
clear: both;
}
双飞翼布局
1.DOM结构
<body>
<div id="header"></div>
<div id="container" class="column">
<div id="center"></div>
</div>
<div id="left" class="column"></div>
<div id="right" class="column"></div>
<div id="footer"></div>
<body>
双飞翼布局的DOM结构与圣杯布局的区别是用container
仅包裹住center
,另外将.column
类从center
移至container
上。
2. CSS代码
按照与圣杯布局相同的思路,首先设置各列的宽度与浮动,并且为左右两列预留出空间,以及为footer
设置浮动清除:
#container {
width: 100%;
}
.column {
float: left;
}
#center {
margin-left: 200px;
margin-right: 150px;
}
#left {
width: 200px;
}
#right {
width: 150px;
}
#footer {
clear: both;
}
以上代码将container,left,right设置为float: left,而在container内部,center由于没有设置浮动,所以其宽度默认为container的100%宽度,通过对其设置margin-left和margin-right为左右两列预留出了空间。
将left放置到预留位置:
#left {
width: 200px;
margin-left: -100%;
}
得到将right放置到预留位置:
#right {
width: 150px;
margin-left: -150px;
}
最后计算最小页面宽度:由于双飞翼布局没有用到position:relative进行定位,所以最小页面宽度应该为200+150=350px。但是当页面宽度缩小到350px附近时,会挤占中间栏的宽度,使得其内容被右侧栏覆盖,
因此在设置最小页面宽度时,应该适当增加一些宽度以供中间栏使用(假设为150px),则有:
body {
min-width: 500px;
}
至此双飞翼布局大功告成!其布局整体代码为:
body {
min-width: 500px;
}
#container {
width: 100%;
}
.column {
float: left;
}
#center {
margin-left: 200px;
margin-right: 150px;
}
#left {
width: 200px;
margin-left: -100%;
}
#right {
width: 150px;
margin-left: -150px;
}
#footer {
clear: both;
}
三 .flex布局
容器的属性
- flex-direction
- flex-wrap
- flex-flow
- justify-content
- align-items
- align-content
1.flex-direction属性
flex-direction
属性决定主轴的方向(即项目的排列方向)
row
(默认值):主轴为水平方向,起点在左端。row-reverse
:主轴为水平方向,起点在右端。column
:主轴为垂直方向,起点在上沿。column-reverse
:主轴为垂直方向,起点在下沿
2.flex-wrap属性
默认情况下,项目都排在一条线(又称"轴线")上。flex-wrap
属性定义,如果一条轴线排不下,如何换行。
-
nowrap
(默认):不换行。 -
wrap
:换行,第一行在上方 wrap-reverse
:换行,第一行在下方
3. flex-flow
flex-flow
属性是flex-direction
属性和flex-wrap
属性的简写形式,默认值为row nowrap
。
4. justify-content属性
justify-content
属性定义了项目在主轴上的对齐方式。
flex-start
(默认值):左对齐flex-end
:右对齐center
: 居中space-between
:两端对齐,项目之间的间隔都相等。space-around
:每个项目两侧的间隔相等。所以,项目之间的间隔比项目与边框的间隔大一倍。
5. align-items属性
align-items
属性定义项目在交叉轴上如何对齐
flex-start
:交叉轴的起点对齐。flex-end
:交叉轴的终点对齐。center
:交叉轴的中点对齐。baseline
: 项目的第一行文字的基线对齐。stretch
(默认值):如果项目未设置高度或设为auto,将占满整个容器的高度
6 align-content属性
align-content
属性定义了多根轴线的对齐方式。如果项目只有一根轴线,该属性不起作用。
flex-start
:与交叉轴的起点对齐。flex-end
:与交叉轴的终点对齐。center
:与交叉轴的中点对齐。space-between
:与交叉轴两端对齐,轴线之间的间隔平均分布。space-around
:每根轴线两侧的间隔都相等。所以,轴线之间的间隔比轴线与边框的间隔大一倍。stretch
(默认值):轴线占满整个交叉轴。