每日3题(34)

2020/4/9

问题

HTML:img的alt与title有何异同？strong与em的异同？

CSS:水平居中，水平垂直居中

JavaScript:你所忽略的隐式转换

HTML:img的alt与title有何异同？strong与em的异同？

alt:为不能显示图像时显示出来的提示文本。title:鼠标移入时显示的提示文本

strong:粗体强调标签，强调，表示内容的重要性，em:斜体强调标签，更强烈强调，表示内容的强调点

CSS:水平居中，水平垂直居中

水平居中

1.已知宽度的块元素

marigin:0 auto;

div{
    width: 200px;
    height: 100px;
    background: salmon;
    margin: 0 auto;
}
<div></div>

效果图

2.未知宽度，但是有fit-content

扫描二维码关注公众号，回复： 11032695 查看本文章

设置宽度为fit-content，可以使块元素像inline-block那样实现收缩宽度包裹内容的效果

兼容性差一些

div{
    width: fit-content;
    height: 100px;
    background: salmon;
    margin: 0 auto;
}
<div>我是box</div>

效果图

水平垂直居中

1.确定元素宽高

这种方法必须确定宽高,可以把宽高去掉看看

div {
    position: absolute;
    width: 300px;
    height: 300px;
    margin: auto;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    background-color: pink;
}
<div>我是box</div>

效果图

2.元素宽高有无不影响(万能)

transform: translate(-50%, -50%);

div {
    width: 100px;
    height: 100px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: pink;
}
<div>我是box</div>

效果图

3.display:flex实现

这里的父元素必须有高度，否则就是水平居中,子元素宽高有无均可

.container {
    height: 500px;
    border: 1px solid rebeccapurple;
    display: flex;
    align-items: center;
    /* 垂直居中 */
    justify-content: center;
    /* 水平居中 */

}

.container div {
    background-color: pink;
}
<div class="container">
  <div>我是inner</div>
</div>

效果图

css参考原文

JavaScript:你所忽略的隐式转换

隐式转换