巩固前端10--居中总结

发表于 | 分类于 ， ， ， | 本文总阅读量 次
字数统计: 2.6k | 阅读时长 ≈ 10

居中方法总结

今天是根据网上提供的JPG和psd设计稿来实现网页的设计，首先先切图，然再敲网页代码，切图过程是需要涉及到使用ps的，而我也在学习切图的过程中，学习了ps，熟悉了它的一些基本操作。在敲代码的过程中也是遇到很多问题，但是经过这些问题的解决，自己的实际水平得到了更深一步的提高。
这是我这次作业的demo：转换图片格式到网页

flex使用的一些注意

  • justify-content属性可适用于所有的flex容器，它的作用是设置flex子项（flex items）在主轴上的对齐方式，为center时候，元素之间没有间距紧挨在一起。align-items属性可以应用于所有的flex容器，它的作用是设置flex子项在每个flex行的交叉轴上的默认对齐方式。align-content只适用于多行的flex容器（也就是说容器中的子项不止一行时该属性才有效果），它的作用是当flex容器在交叉轴上有多余的空间时，将子项作为一个整体进行对其。
    当只有当行元素时候，只有align-items属性起作用，align-content属性不起作用。且当元素高度不一致的时候，以最高元素高度为基准，实现水平垂直居中。
    更注意的是，align-items实现的是子元素的垂直居中，并且居中对齐的基准线是最高元素的中心线，也就是说其余元素的中心线要跟最高元素的中心线对齐；但是align-content居中也是垂直居中，不过是让所有子元素的顶部对齐，不是以中心线为基准。还有一个区别是，当子项为多行的时候，align-items属性的flex容器会将交叉轴上的多于空间按照行数平均分给每行，然后每行各自按照各自所在的行居中对齐（每行的效果跟单行是一样的），但是align-content属性的flex容器是将子项最为一个整体，然后整体在flex容器上的交叉轴上居中对齐，对齐方式没变。

综上可知对于align-items和align-content的区别我们记住以下三点：

1
2
3
1、align-items属性是针对单独的每一个flex子项起作用，它的基本单位是每一个子项，在所有情况下都有效果。
2、align-content属性是将flex子项作为一个整体起作用，它的基本单位是子项构成的行，只在子项为多行的情况下有效果
3、align-items是以子项元素中心线为基准对齐，align-content是以子项顶部基准线对齐。

让p内的内容超出div或者p的宽度自动换行
HTML代码：

1
2
3
4
5
6
<div class="a1">
     shdiosahdjkcbdsiucdshfbsadvkj sdcisdu //内容
     </div>
<p class="a2">
     hdusaifkhbdsifygvjbasdiyfhdsagfbdivhcdsb//内容
     </p>

对应的CSS样式为：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
.a1{
	width:100%;
	height:auto;
	word-wrap:break-word;
	word-break:break-all;
	overflow:hidden;
}
.a2{
	width:100%;
	height:auto;
	word-wrap:break-word;
	word-break:break-all;
	overflow:hidden;
}

CSS详解：

1
2
3
4
5
6
7
word-wrap：normal|break-word
normal：只在允许的断字点换行（浏览器默认值）
break-world:在长单词或URL地址内部进行换行。
word-break：normal|break-all|keep-all
normal:使用浏览器默认的换行规则；
break-all：允许在单词内换行；
keep-all：只能在半角空格或连字符处换行。

水平居中的方法总结

最近布局用到非常多的水平居中方法，尽管我也用过许多种，但是今天想要详细的记录一下。
方法一、margin：0 auto；text-align:center
这种方法是实现CSS水平居中最最常用的，我在前端开发中大概有60%的CSS水平居中就是通过“margin: 0 auto; text-align: center”实现的。
用这个方法可以实现一个div块相对于body或者父元素水平居中，但是有一个前提是必须已知该块的宽度，也就是说要设置该块的宽度，只有这样计算机才能计算出该块相对于父元素的左右边距值！！！这两个属性都是添加在子元素中的。

方法二、display:flex
随着越来越多兼容flexbox，所以通过“display:flex”实现CSS水平居中的方案也越来越受青睐。
通过display:flex实现CSS水平居中的原理是，父元素display:flex;flex-direction:column;而子元素align-self:center;
这个跟CSS垂直居中的原理是一样的，只是在flex-direction上有所差别，一个是row(默认值)，另外一个是column。

方法三、display:table-cell和margin-left实现CSS水平居中
前提条件是父元素和子元素的宽度都确定的情况下，通过计算得到的，margin-left=（父元素宽度-子元素宽度）/2；父元素设置display：table-cell；
方法四、position:absolute实现CSS水平居中。
前提条件是父元素和子元素的宽度都确定的情况下，父元素设置position：absolute；子元素margin-left=（父元素宽度-子元素宽度）/2；
方法五、width:fit-content实现CSS水平居中
可以在子元素宽度不确定的情况下使用该方法，需要配合“margin: 0 auto; text-align: center”使用。这三个属性都是添加在子元素中的。
方法六、display:inline-block和text-align:center实现CSS水平居中
display:inline-block能改父元素内的子元素的表达样式，同样需要配合“margin: 0 auto; text-align: center”使用。display:inline-block属性添加在父元素中，margin: 0 auto; text-align: center属性添加在子元素中。

方法七、position:relative、float:left和margin-left实现CSS水平居中。
给父元素样式position:relative，给子元素float:left和margin-left就可以实现CSS水平居中。同时使用条件是子元素和父元素的宽度都已知的情况下，子元素margin-left=（父元素宽度-子元素宽度）/2；

垂直居中方法总结

方法一、verticle-align:middle实现CSS垂直居中。
通过vertical-align:middle实现CSS垂直居中是最常使用的方法，但是有一点需要格外注意，vertical生效的前提是元素的display：inline-block。且这两个属性都是添加在子元素中。

方法二、display:flex实现CSS垂直居中。
通过display:flex实现CSS垂直居中的方法是给父元素display:flex;而子元素align-self:center;这个跟CSS水平居中的原理是一样的，只是在flex-direction上有所差别，垂直居中是row(默认值)，水平居中是column。

方法三、display:table-cell实现CSS垂直居中。
给父元素display:table，子元素添加display：table-cell和vertical-align：middle；的方式实现CSS垂直居中。注意对比和方法一的差别。

方法四、line-height实现CSS垂直居中。
设置子元素的line-height值等于父元素的height，这种方法适用于子元素为单行文本的情况。

水平垂直居中方法总结

定宽高元素使用

方法一、position ，子元素已知宽度和高度

1
2
父元素设置为：position: relative;
子元素设置为：position: absolute;

距上50%，据左50%，然后利用margin的负边距特性减去元素自身宽度和自身高度的一半就可以实现
为了实现上面的效果先来做些准备工作，假设HTML代码如下，总共两个元素，父元素和子元素

1
2
3
<div class="wp">
    <div class="box size">123123</div>
</div>

wp是父元素的类名，box是子元素的类名，因为有定宽和不定宽的区别，size用来表示指定宽度

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
.wp {
    border: 1px solid red;
    width: 300px;
    height: 300px;
    position: relative;

}
.box {

	 width: 100px;
    height: 100px;
    position: absolute;;
    top: 50%;
    left: 50%;
    margin-left: -50px;
    margin-top: -50px;
}

方法二、absolute + margin auto
这种方式也要求居中元素的宽高必须固定，HTML代码如下

1
2
3
<div class="wp">
    <div class="box size">123123</div>
</div>

这种方式通过设置各个方向的距离都是0，此时再讲margin设为auto，就可以在各个方向上居中了

1
2
3
4
5
6
7
8
9
10
11
.wp {
    position: relative;
}
.box {
    position: absolute;;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
}

方法三、absolute + calc
这种方式也要求居中元素的宽高必须固定，所以我们为box增加size类，HTML代码如下

1
2
3
<div class="wp">
    <div class="box size">123123</div>
</div>

css3带来了计算属性，既然top的百分比是基于元素的左上角，那么在减去宽度的一半就好了，代码如下

1
2
3
4
5
6
7
8
.wp {
    position: relative;
}
.box {
    position: absolute;;
    top: calc(50% - 50px);
    left: calc(50% - 50px);
}

不需要知道宽度和高度的元素
方法四、absolute + transform
还是绝对定位，但这个方法不需要子元素固定宽高，所以不再需要size类了，HTML代码如下

1
2
3
<div class="wp">
    <div class="box">123123</div>
</div>

修复绝对定位的问题，还可以使用css3新增的transform，transform的translate属性也可以设置百分比，其是相对于自身的宽和高，所以可以讲translate设置为-50%，就可以做到居中了，代码如下

1
2
3
4
5
6
7
8
9
.wp {
    position: relative;
}
.box {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

方法五、lineheight
利用行内元素居中属性也可以做到水平垂直居中，HTML代码如下

1
2
3
<div class="wp">
    <div class="box">123123</div>
</div>

把box设置为行内元素，通过text-align就可以做到水平居中，通过vertical-align也可以在垂直方向做到居中，代码如下

1
2
3
4
5
6
7
8
9
10
11
12
.wp {
    line-height: 300px;
    text-align: center;
    font-size: 0px;
}
.box {
    font-size: 16px;
    display: inline-block;
    vertical-align: middle;
    line-height: initial;
    text-align: left; /* 修正文字 */
}

方法六、flex布局
在父元素中添加代码

1
2
3
display: flex;//flex布局
justify-content: center;//使子项目水平居中
align-items: center;//使子项目垂直居中

HTML代码如下：

1
2
3
4
5
6
7
8
9
<div class="wp">
    <div class="box">123123</div>
</div>

.wp {
    display: flex;
    justify-content: center;
    align-items: center;
}
-------------本文结束感谢您的阅读-------------