CSS常用布局学习

CSS常用布局学习

  • 1、水平居中
    • 1.1 行内元素/行内块元素水平居中
    • 1.2 块级元素水平居中
      • 定宽块级元素水平居中
      • 不定宽块级元素水平居中
        • 方法一:设置table
        • 方法二:设置inline-block(多个块级元素)
        • 方法三: 设置flex布局(多个块级元素)
        • 方法4:position + 负margin;
        • 方法5:position + margin:auto;
        • 方法6:position + transform;
    • 总结
  • 2、垂直居中
    • 2.1 单行文本垂直居中
    • 2.2 图片居中
    • 2.3 多行文本的垂直居中
    • 2.4 块级元素垂直居中
      • 定高度垂直居中
        • 利用position和top和负margin。
        • 利用position和bottom、top、margin
      • 不定高垂直居中
        • position和top和transform
        • 利用flex
    • 总结
  • 3、水平垂直居中
    • 3.1 行内/行内块/图片
    • 3.2 table-cell
    • 3.1 定位 + margin:auto
    • 3.2 定位+负margin
    • 3.3 定位 + transform
    • 3.4 flex

1、水平居中

1.1 行内元素/行内块元素水平居中

给父元素设置text-align:center

.parent{
     
        text-align:center;
}
"parent">水平居中

优缺点

  • 优点:简单快捷,容易理解,兼容性非常好
  • 缺点:**只对行内内容有效;**属性会继承影响到后代行内内容;如果子元素宽度大于父元素宽度则无效只有后代行内内容中宽度小于设置text-align属性的元素宽度的时候,才会水平居中

1.2 块级元素水平居中

定宽块级元素水平居中

只需给需要居中的块级元素加margin:0 auto即可,但这里需要注意的是,这里块级元素的宽度width值一定要有

  .center{
     
      width:200px;
      margin:0 auto;
      border:1px solid red;
  }
  
"center">水平居中

优缺点

  • 优点:简单;兼容性好
  • 缺点:必须定宽,并且值不能为auto;宽度要小于父元素,否则无效

不定宽块级元素水平居中

不定宽即块级元素宽度不固定

方法一:设置table

通过给要居中显示的元素,设置display:table,然后设置margin:0 auto来实现。

.center{
     
      display:table;
      margin:0 auto;
      border:1px solid red;
  }
  
"center">水平居中

方法二:设置inline-block(多个块级元素)

子元素设置inline-block,同时设置父元素text-align:center

 .parent{
     
      text-align:center;
  }
  .inlineblock-div{
     
      display:inline-block;
  }
  
"parent">
"inlineblock-div">1
"inlineblock-div">2

CSS常用布局学习_第1张图片
优缺点

  • 优点:简单,容易理解,兼容性非常好
  • 缺点:只对行内内容有效;属性会继承影响到后代行内内容;块级改为inline-block换行、空格会产生元素间隔

方法三: 设置flex布局(多个块级元素)

只需把要处理的块状元素的父元素设置display:flex,justify-content:center;

  .parent{
     
      display:flex;
      justify-content:center;
  }
  
"parent">
"flex-div">1
"flex-div">2

CSS常用布局学习_第2张图片
优缺点

  • 优点:功能强大;简单方便;容易理解
  • 缺点:PC端兼容性不好,移动端(Android4.0+)

方法4:position + 负margin;

.parent {
     
  position: relative;
  height: 400px;
  border: 1px solid red;
}
.son {
     
  position: relative;
  width: 100px;
  height: 100px;
  left: 50%;
  margin-left: -50px;
  border: 1px solid orange;
}
 
"parent">
"son">HelloWorld!

优缺点

  • 优点:使用margin-left兼容性好;不管是块级还是行内元素都可以实现
  • 缺点:使用margin-left需要知道宽度值;

方法5:position + margin:auto;

.parent {
     
  position: relative;
  height: 400px;
  border: 1px solid red;
}
.son {
     
  position: relative;
  width: 100px;
  height: 100px;
  left: 0;
  right: 0;
  margin: auto;
  border: 1px solid orange;
}
 
"parent">
"son">HelloWorld!

方法6:position + transform;

.parent {
     
  position: relative;
  height: 400px;
  border: 1px solid red;
}
.son {
     
  position: relative;
  width: 100px;
  height: 100px;
  left: 50%;
  transform: translateX(-50%);
  border: 1px solid orange;
}
 
"parent">
"son">HelloWorld!

缺点: 使用transform兼容性不好(ie9+)

总结

  • 对于水平居中,我们应该先考虑,哪些元素有自带的居中效果,最先想到的应该就是 text-align:center 了,但是这个只对行内内容有效,所以我们要使用 text-align:center 就必须将子元素设置为 display: inline; 或者 display: inline-block;
  • 其次就是考虑能不能用margin: 0 auto; ,因为这都是一两句代码能搞定的事,实在不行就是用绝对定位去实现了。
  • 移动端能用flex就用flex,简单方便,灵活并且功能强大,无愧为网页布局的一大利器!

2、垂直居中

2.1 单行文本垂直居中

原理:line-height的最终表现是通过inline box实现的,而无论inline box所占据的高度是多少(无论比文字大还是比文字小),其占据的空间都是与文字内容公用水平中垂线的。

.parent {
     
  height: 200px;
  line-height: 200px;
  border: 1px solid red;
}
 
"parent"> 好好学习

优缺点

  • 优点:简单;兼容性好
  • 缺点:只能用于单行行内内容;要知道高度的值

2.2 图片居中

.parent{
     
    height: 150px;
    line-height: 150px;
    font-size: 0;
}
.son{
     vertical-align: middle;} /*默认是基线对齐,改为middle*/

优缺点

  • 优点:简单;兼容性好
  • 缺点:需要添加font-size: 0; 才可以完全的垂直居中;不过需要注意,parent包裹img之间需要有换行或空格

2.3 多行文本的垂直居中

通过设置父元素table,子元素table-cellvertical-align
vertical-align:middle的意思是把元素放在父元素的中部

.parent {
     
  display: table;
  height: 400px;
  border: 1px solid red;
}
.son {
     
  display: table-cell;
  vertical-align: middle;
}
 
"parent"> "son" >多行文本多行文本多行文本多行文本多行文本多行文本多行文本多行文本多行文本多行文本多行文本多行文本

CSS常用布局学习_第3张图片

2.4 块级元素垂直居中

定高度垂直居中

利用position和top和负margin。

第一步:给父元素设置postion。
第二步:设置要垂直居中的块级元素postion:absolute/relative/fixed
第三步: 设置margin=高度的负一半。

.parent {
     
  position: relative;
  height: 400px;
  border: 1px solid red;
}
.son {
     
  position: relative;
  height: 200px;
  width: 100px;
  top: 50%;
  margin-top: -100px;

  border: 1px solid orange;
}

  
"parent">
"son">

利用position和bottom、top、margin

.parent {
     
  position: relative;
  height: 400px;
  border: 1px solid red;
}
.son {
     
  position: absolute;
  bottom: 0;
  top: 0;
  margin: auto;

  width: 100px;
  height: 100px;
  border: 1px solid orange;
}

  
"parent">
"son">HelloWorld!

不定高垂直居中

position和top和transform

.parent {
     
  position: relative;
  height: 400px;
  border: 1px solid red;
}
.son {
     
  position: relative;
  top: 50%;
  transform: translateY(-50%);
  width: 200px;
  border: 1px solid orange;
}
 
"parent">
"son">HelloWorld

利用flex

在需要垂直居中的父元素上,设置display:flexalign-items:center.
要求:父元素必须显示设置height值

.parent {
     
  display: flex;
  align-items: center;
  height: 400px;
  border: 1px solid red;
}
  
"parent">
"son">HelloWorld

优缺点

  • 优点:简单灵活;功能强大
  • 缺点:PC端兼容性不好,移动端(Android4.0+)

总结

  • 对于垂直居中,最先想到的应该就是 line-height 了,但是这个只能用于行内内容;
  • 其次就是考虑能不能用vertical-align: middle; ,不过这个一定要熟知原理才能用得顺手,建议看下vertical-align和line-height的基友关系 ;
  • 然后便是绝对定位,虽然代码多了点,但是胜在适用于不同情况;
  • 移动端兼容性允许的情况下能用flex就用flex

3、水平垂直居中

3.1 行内/行内块/图片

原理:text-align: center; 控制行内内容相对于块父元素水平居中,然后就是line-height和vertical-align的基友关系使其垂直居中,font-size: 0; 是为了消除近似居中的bug

.parent{
     
    height: 150px;
    line-height: 150px;  /*行高的值与height相等*/
    text-align: center;
    font-size: 0;   /*消除幽灵空白节点的bug*/
}
.son{
     
    /*display: inline-block;*/  /*如果是块级元素需改为行内或行内块级才生效*/
    vertical-align: middle;
}
  • 优点:代码简单;兼容性好(ie8+)
  • 缺点:只对行内内容有效;需要添加font-size: 0; 才可以完全的垂直居中;不过需要注意html中parent包裹son之间需要有换行或空格;熟悉line-height和vertical-align的基友关系较难.

3.2 table-cell

原理:CSS Table,使表格内容垂直对齐方式为middle,然后根据是行内内容还是块级内容采取不同的方式达到水平居中

.parent{
     
    height: 150px;
    width: 200px;
    display: table-cell;
    vertical-align: middle;
    /*text-align: center;*/   /*如果是行内元素就添加这个*/
}
.son{
     
    /*margin: 0 auto;*/    /*如果是块级元素就添加这个*/
    width: 100px;
    height: 50px;
}
  • 优点:简单;适用于宽度高度未知情况;兼容性好(ie8+)
  • 缺点:设置tabl-cell的元素,宽度和高度的值设置百分比无效,需要给它的父元素设置display: table; 才生效;table-cell不感知margin,在父元素上设置table-row等属性,也会使其不感知height;设置float或position会对默认布局造成破坏,可以考虑为之增加一个父div定义float等属性;内容溢出时会自动撑开父元素。

3.1 定位 + margin:auto

.parent {
     
  position: relative;
  height: 400px;
  border: 1px solid red;
}
.son {
     
  position: absolute;
  left: 0;
  bottom: 0;
  right: 0;
  top: 0;
  margin: auto;

  width: 100px;
  height: 100px;
  border: 1px solid orange;
}

3.2 定位+负margin

.parent {
     
  position: relative;
  height: 400px;
  border: 1px solid red;
}
.son {
     
  position: relative;
  top: 50%;
  left: 50%;
  margin-top: -50px;
  margin-left: -50px;
  width: 100px;
  height: 100px;
  border: 1px solid orange;
}
  
"parent">
"son">HelloWorld!

3.3 定位 + transform

.parent {
     
  position: relative;
  height: 400px;
  border: 1px solid red;
}
.son {
     
  position: absolute;
  left: 50%; /* 定位父级的50% */
  top: 50%;
  transform: translate(-50%, -50%); /*自己的50% */
  border: 1px solid orange;
}

 
"parent">
"son">HelloWorld!

3.4 flex

.parent {
     
  display: flex;
  justify-content: center; /*子元素水平居中*/
  align-items: center; /*子元素垂直居中*/
  /* aa只要三句话就可以实现不定宽高水平垂直居中。 */
  height: 400px;
  border: 1px solid red;
}
.son {
     
  border: 1px solid orange;
}
 
"parent">
"son">HelloWorld!

参考文档:
干货!各种常见布局实现+知名网站实例分析

你可能感兴趣的:(CSS,css,html,html5)