发表于： 2019-11-05 23:41:00
1 875
今日完成:
为日报增添内容:
（2）知识剖析： 几种常用到的垂直居中方法：
行内元素;
单行 - 行内元素
display属性为inline 或者 inline-* 行内元素?（例如：文本或者链接）。
1.一般用line-height来实现垂直居中,用text-ailgn实现水平居中
为父元素设置text-align:center;设置水平居中/*text-align属性指定元素文本的水平对齐方式*/
为行内元素设置line-height(行高)等于父容器高度,实现垂直居中
ps:
1.用line-height实现垂直居中的原理
在浏览器中，会将给每一段文本生成一个行框，行框的高度就是行高。行框由上间距、文本高度、下间距组成，上间距的距离与下间距的距离是相等的。
以文字默认在这一行中是垂直居中的,如果一段文本的高度为16px，如果给他设置line-height的高度为200px，那么相当于，文本的上下间距的高度增加了，
但是文本本身的高度依然是16是不变的，并且一直默认在行框中垂直居中，而上间距和下间距平分了200px的高度并且减去文本本身的高度。
所以，容器被这一行文本占满，而本身文字在自己的一行中是垂直居中的，所以看起来就像是在容器中垂直居中。
知道原理line-height就有两种应用方式,一种父元素没有高度,有其中行内子元素用line-height定义,
一种是知道父元素高度,要求行内元素垂直居中,就line-height,等于父元素高度
如demo inline-height.html,是用行高line-height:200px,撑起来的高200px的盒子,
让我们为盒子添加height;200px,显示无变化,证明说法正确
2.与之不同的,text-align:center必须要求设置在有一定宽度的父元素上,直接设置在行内元素上无效,因为宽度就是它自身
辩证;把行内元素<span>标签改为块元素的<p>标签,直接在<p>标签上设置text-align:center,成功,
但是文本好像偏下,因为<p>标签有默认的外边距属性,设置margin:0,或者通配符*{margin:0}都可以,显示垂直水平居中
多行 - 行内元素
对于多行行内元素，如果使用单行的方法，在换行之后，会出现错误(行高过高)
1.用表格的vertical-align来实现垂直居中
(前提父元素有固定宽高)
只需要将容器设为display:table然他成为一个块级表格元素，
子元素display:table-cell使子元素成为表格单元格，然后就像在表格里一样，
给子元素加个vertical-align: middle就行了,多行文字垂直居中
<style type="text/css">
.father {
display: table;
width: 200px;
height: 200px;
border: 2px solid;
text-align: center;
}
.son {
display: table-cell;
vertical-align: middle;
}
</style>
显示demo如下
vertical-align.html
2.用flex弹性布局
(行内元素本身有固定宽高)
flex.html
直接为行内元素设置
<style type="text/css">
span {
display: flex;
justify-content: center;
/*主轴居中*/
flex-direction: column;
/*主轴从上往下*/
width: 200px;
height: 200px;
border: 2px solid;
}
</style>
显示demo如下
flex.html
ps:flex使文本转化为块元素
实验:margin:auto生效
块级元素
1.通过padding实现垂直居中
padding.html
(前提:不设父元素,或者父元素由子元素撑开)
如dome所示
块级元素的padding,margin上下左右都生效,可以通过设置相同的左右,上下边距,达到水平或者垂直居中的效果
ps:
1.行内元素虽然具有盒子模型,但是padding-top,padding-bottom和margin-top,margin-bootom都是无效的,
它们都只有左右的边距有效,前者是在没有父元素的情况下,通过自身填充相同数值的左右内边距实现水平居中,
注意:在我实验后在父元素有具体宽度的情况下margin-left,right有效,但是margin:0 auto,对于行内元素和内联块无效,无法实现水平居中,
margin:0 auto只适用于有固定宽度的块级元素
具体原因我自己表达不清,找到的答案链接附在后面,感兴趣的自己去看看
并且:行内元素padding-bottom不是直接失效,它呈现了效果,但是没有实际内容挤走其他盒子,即实际上他并没有撑开盒子高度,内容是虚的
如dome中行内元素padding:100ppx,水平居中,padding-top无效,padding-bottom没有挤开黄色的块级元素
2.
要特别注意img是一个特例，它虽然是行内元素，但也是置换元素，所以它的性质不同于行内元素。对于img设置padding和margin都是有效的。
为了更加直观,在img外包裹一个盒子,背景橙色,宽高img撑开
img背景颜色绿色,
可以看到img用内边距水平垂直居中,它的父元素因为是div块元素,不舍宽度的情况下,宽度默认其父元素(视口)100%,
为它添加内联块属性,可以看到img同样可以设置margin水平垂直居中
2.flex布局
flex.html
(父元素有固定的宽高,自适应子元素居中)
.father {
display: flex;
justify-content: center;
/*主轴居中*/
align-items: center;
/*交叉轴居中*/
width: 400px;
height: 300px;
border: 2px solid;
margin: auto;
}
.son {
width: 200px;
height: 200px;
background: red;
}
显示demo如下
flex.html
3.相对定位,绝对定位
1.知道父元素和资元素的宽高
.father-1{
width: 400px;
height: 300px;
position: relative;
border: 2px solid;
margin:auto;
}
.son-1{
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
margin:auto;
width: 200px;
height: 200px;
background: red;
}
显示demo
position.html
计算:
父元素宽度:子元素宽度,内边距,外边距,left,right
2.知道父元素宽高,元素宽高未知(即子元素不设具体宽高由内容撑开)
.father-2 {
width: 400px;
height: 300px;
position: relative;
border: 2px solid;
margin: auto;
}
.son-2{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
border: 2px solid;
}
显示内容为子元素撑开,用文本感受更加直观,自适应水平垂直居中,最大宽度为父元素的一半
（3）常见问题：
1.使用一个div包裹一个img， 发现图片与div之间有间隙。
padding.html
取消margin,可以看到图片底部有一条缝隙
原因:
来是因为在H5文档声明下，块状元素内部的内联元素的行为表现所致，简单地说就好像块状元素内部有个看不见的没有宽度的空白节点。
而不设置vertical-align属性，vertical-align默认是baseline。
解决方法;
1.在图片的类中,vertical-align:bottom;//top和bottom都可以
2.由于baseline是设置行内元素(inline)或者表格单元素(table-cell)的垂直对齐方式，
所以可以将img转换成块级元素,display：block，
3.把父元素的font-size设为0
ps:
1.我在找方法时有些是display:inline-block,结果无效
2. vertical-align 属性设置元素的垂直对齐方式
该属性定义行内元素的基线相对于该元素所在行的基线的垂直对齐。
默认值：
baseline
就是有这个默认值所以才会有间隙,所以消除的方法之一,就是重新设置vertical-align,覆盖默认样式
设置属性无效
(4)解决方案
同上
（5）编码实战：
demo
(6）拓展思考：
有些居中满足某种前提,如父元素不设置高度,
了解HTML可以将元素分类方式分为行内元素、块状元素和行内块状元素三种
因为有些垂直居中标签只在某一种元素中生效,所以在设置居中属性之前需要了解,标签到底是行内元素还是块级元素,
所以我把垂直居中分为行内元素和块级元素两部分讲解.
在实际应用中,根据在2中的划分,分门别类,对号入座,并且和可以通过
(1)display:inline;转换为行内元素
(2)display:block;转换为块状元素
(3)display:inline-block;转换为行内块状元素
相互转换灵活运用,不过一般根据实际需求还是行内转化为块级居多
遇到问题:
1.行内元素margin:auto,没看明白,暂时先死记住
2.基础不牢,好多东西对我来说就是新的,因为要讲出来,所以必须自己先理解,搞了两天
收获:关于水平垂直居中有了系统的了解,以及跟居中相关联的知识
明日计划:讲完小课堂,就继续task15
返回列表
评论