封面 pid: 80699595

水平居中

(1)对行内元素(包括inline-block,下同)
直接对块级父使用 text-align

(2)对块级元素
固定宽度,左右 margin 设置 auto(前提父宽大于子宽)

(3)绝对定位
万能绝对定位,设置 right / left 为50%,再使用 margintransform 进行校正

(4)flex布局
给父设置 flex 布局并且设置主轴对齐方式justify-content为居中

垂直居中

(1)对行内元素
块级父设置heightline-height×行数相等

(2)对块级元素
父设置 table-cell 布局并设置 vertical-aligin为middle(但table-cell使自身高宽百分比和margin失效,需要祖先 table 布局)

(3)绝对定位

(4)flex布局
给父设置 flex 布局并且设置交叉轴对齐方式align-items为居中

水平垂直居中

(1)对行内元素
块级父设置 text-alignheight=line-heightfont-size:0,子设置 vertical-aligin为middle

(2)table-cell
父设置 table-cell 布局并设置 vertical-aligin为middle实现垂直居中,根据内容块级与否选择使用 margin/text-align实现水平居中

(3)绝对定位

(4)绝对居中
绝对定位下设置 top、right、bottom、left为0,并设置margin为 auto,自动四方扩展平分

(5)flex布局
给父设置 flex 布局并设置两个方向的对齐方式

#parent{
    display: flex;
}
#son{
    margin: auto;
}

/*或*/

#parent{
    display: flex;
    justify-content: center;
    align-items: center;
}

两列布局

  • 一列定宽,一列自适应
    • float(定) + margin
    • float (定)+ overflow
    • 绝对定位
    • flex 布局,一列设置 flex-glow:1
    • table-cell布局,一边自动获取剩余宽度
  • 一列不定,一列自适应
    • float + overflow
    • flex 布局,一列设置 flex-glow:1

三列布局(两侧定宽,中间自适应)

  • 两侧绝对定位,中间两边margin
  • flex 布局,中间设置 flex-glow:1
  • table-cell布局,中间自动获取剩余宽度

圣杯布局&双飞翼布局(图解)
圣杯布局(container包含left、center、right):

<div id="container">
  <div id="center" class="column"></div>
  <div id="left" class="column"></div>
  <div id="right" class="column"></div>
</div>
/*容器空出两边位置*/
#container {
  padding-left: 200px; 
  padding-right: 150px;
}

.column {
  float: left;
}

#center {
  width: 100%;
}

#left {
  width: 200px;
  /*通过负边距返回第一行,与center开头对齐*/ 
  margin-left: -100%;
  /*向左偏移自身长度,到达指定左边*/
  position: relative;
  right: 200px;
}

#right {
  width: 150px;
  /*通过负边距返回第一行,右偏自身长度,到达指定右边*/
  margin-right: -150px; 
}

双飞翼布局(container只包center):

<div id="container" class="column">
  <div id="center"></div>
</div>
<div id="left" class="column"></div>
<div id="right" class="column"></div>
#container {
  width: 100%;
}

.column {
  float: left;
}
/*center在容器中空出两边*/
#center {
  margin-left: 200px;
  margin-right: 150px;
}

#left {
/*通过负边距返回第一行,与容器开头对齐*/ 
  width: 200px; 
  margin-left: -100%;
}

#right {
/*通过负边距返回第一行,左偏自身长度,到达指定右边*/ 
  width: 150px;
  margin-left: -150px;
}

Flex 布局

忘记具体属性值意义请跳此处
设置了 display:flex 的被称为容器,容器有6个属性

flex-container{
/*第一个值为默认*/
  flex-direction: row | row-reverse | column | column-reverse;
  flex-wrap: nowrap | wrap | wrap-reverse;
  flex-flow: <'flex-direction'> || <'flex-wrap'>;
  justify-content: flex-start | flex-end | center | space-between | space-around;
  align-items: stretch | flex-start | flex-end | center | baseline;
  align-content: stretch | flex-start | flex-end | center | space-between | space-around;
}

容器的直接子称项目,有6个属性

flex-item{
  order: 0 | <integer>;/*越小越靠前*/
  flex-grow: 0 | <number>;
  flex-shrink: 1 | <number>;
  flex-basis: auto | <length>;
  flex: 0 1 auto | <'flex-grow'> [<'flex-shrink'> <'flex-basis'> ];
  align-self: auto | flex-start | flex-end | center | baseline | stretch;
}

BFC

全名 Block Formatting Context
BFC是一个css的一个布局概念,是一个独立的区域,是一个环境。它决定了其子元素(块级盒)将如何布局,并排除外界对该区域的影响。

以下情况会触发BFC:

  • float的值不是none
  • position的值不是static或者relative
  • display的值为inline-block、inline-flex、flex、flow-root、table-caption、table-cell
  • overflow的值不是visible

BFC特性:

  • 不会被浮动的元素覆盖(双列自适应布局)
  • 计算BFC的高度时,包含浮动子元素高度(避免高度坍塌)
  • 同一个BFC的子元素之间会margin重叠(反过来避免margin坍塌)

杂项

隐藏元素方式:visibility/opacity/display、宽高为0并 overflow:hiddenz-index、偏移至视线外
图标使用 css sprites 以提高性能

一些常用css属性如字体,浮动等,或是同一css属性的不同值(规格),可以作为公共类,到时候想加某一效果就将该类加到 class 属性中

.clearfix:after{
  content:'.';
  display:block;
  height:0;
  clear:both;
  visibility: hidden;
}

.clearm{margin:0}

.pointer{cursor:pointer}

.fz-12{font-size:12px}

.ellipsis{
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/*等等*/

    添加新评论 | #

    Markdown Supported
    简单数学题:NaN + NaN =
    表情

    Comments | ?? 条评论

    • 单身为狗 21 年

    • 朝循以始 夜继以终

    • Blog: Von by Bersder

    • Alive: 0 天 0 小时 0 分

    Support:

    frame ssr server DNS music player

    © 2019-2020 ᛟᛊᚺᛁᚾᛟ

    back2top