注册登录

标签语义和自适应图片（类似电商购物栏图片）

标签语义和自适应图片（类似电商购物栏图片)

标签语意

<body></body>
body标签自带margin：8px；
<div></div>
div作用：定义一个盒子；自带display：block
<span></span>
span标签无语意，包裹文本内容，加display属性能定义
<h1><h1>
hq-h6标签定义文档标题、区域标题（字体大小em是父级的多少倍）
<p></p>
p标签自带margin-top:1em;margin-bottom:1em;
<ul></ul>
ul标签margin(top/bottom有1em的值，padding-left:40px;)
标签设置display:table-cell;后可以使用vertical-aligin：middle；
大专栏  标签语义和自适应图片（类似电商购物栏图片）de>
知识兔h2 id="自适应图片">自适应图片
html:
<div style="width: 30vw;background: #fff">
    <div style="height: 180px;border:1px solid ;overflow: hidden;">
        <div style="height:178px;display: table;text-align: center;width: 100%">
            <a href="https://zhishitu.com" style="height:180px;display: table-cell;vertical-align: middle;">
                <img style="max-width: 100%;max-height:100%;" src="http://img4.duitang.com/uploads/item/201508/11/20150811194252_BjcQe.jpeg" alt="">
            </a>
        </div>
    </div>
</div>
知识兔
计算机