有人考了我一道CSS题目

这篇文章发布于 2018年10月21日,星期日,21:22,归类于 CSS相关。 阅读 50511 次, 今日 1 次 20 条评论

 

一、有人考了我一道CSS题目

前段时间@快叫我韩大人私信我考了我下面这个题目:

题目

截图中的字略小,我重新整理了下:

题目要求:

  1. P标签的最大宽度不可以大于H2标签文字宽度的10%

    这里应该是P标签的最大宽度由前面的匿名内联元素宽度(就是大字号文字宽度)决定,可参见最后期望效果GIF示意。

  2. H2标签不能失去高度(h2 文字高度+p 标签高度 = h2 标签高度)

HTML结构(不允许修改)

<h2>
IPHONE XR<br>
IS THE FUCKING<br>
BEST EVER MADE
<p>iPhone XR has not been authorized as required by the rules of the Federal Communications Commission. iPhone XR is not, and may not be, offered for sale or lease, or sold or leased, until authorization is obtained.</p>
</h2>

基础CSS样式

h2{
    font-size: 52px;
    font-weight: bold;
    color: #000;
}
p{
    font-size: 12px;
    color: #333;
}

初始效果

初始GIF效果

期望效果

预期效果gif截图

请问在座的各位有没有实现思路,可以将对应CSS代码写在这个在线demo页面的(Chrome浏览器打开)“你的CSS”区域,可以看到实时效果:

输入你的CSS代码到“你的CSS”


大家现在可以开动脑筋想想怎么实现了……
·
·
·
·
·
·
如果没有思路,或者想看看别人的实现,可以接续往下看。

二、几个布局实现方法

先展示下我的实现:

h2 {
    width: min-content;
    white-space: nowrap;
}
p {
    white-space: normal;
}

您可以狠狠地点击这里:min-content下的布局实现demo

效果如下截图:

min-content下的布局效果截图

width:min-content表示宽度收缩到最小,如果是默认状态,宽度应该是最窄单词的宽度,由于设置了white-space:nowrap,因此,宽度就是最长的那一行字符宽度(如果不太理解,可以买本《CSS世界》,内有深入讲解),由于P标签设置了white-space:normal,因此,最终宽度就是大字号标题的最长的那一行的宽度,最终实现预期效果。如果对min-content还不太了解,可以参见“理解CSS3 max/min-content及fit-content等width值”这篇文章。


下面这个是出题人的实现:

h2 {
    display: table;
}
p {
    display: table-caption;
    caption-side: bottom;
}

您可以狠狠地点击这里:min-content下的布局实现demo

效果如下截图:

min-content下的布局效果截图

这个方法要更好,兼容性更强(IE8+)。

display:table-caption表示元素的display水平表现为表格标题,自动自适应于外部表格容器宽度,caption-side:bottom可以设置表格标题在底部,而display:table元素的宽度为auto的时候表现为“包裹性”(“shrink-to-fit”),因此,达到符合预期的效果。

三、欢迎补充你的实现方法

CSS各种属性就像构成世界的基本元素,要实现某一种效果,往往会有多种组合方式,各有优劣,相信这里的布局实现也会有其他方法的,欢迎补充,不吝赐教。

当然,如果你有自认为不错的CSS技巧,也欢迎和我交流,出题考我也是可以的!

考我CSS题目

(本篇完)

分享到:


发表评论(目前20 条评论)

  1. seasonley说道:

    请教一下,我试了换行的时候white-space:pre 和pre-wrap 表现一样。但官网说pre应该no-wrap的,是为什么?https://developer.mozilla.org/en-US/docs/Web/CSS/white-space

  2. cosmolin说道:

    我对第一个要求理解为:p标签长度比h2文本长度长10%以内,故在张哥代码基础上加一句margin-right: -10%,以达成图中效果
    h2 {
    width: min-content;
    white-space: nowrap;
    }
    p {
    white-space: normal;
    margin-right: -10%;
    }

  3. zwing说道:

    不知道有没有什么例外
    h2 {
    display: grid;
    grid-template-columns: 1fr 9fr;
    white-space: nowrap;
    }
    p{
    white-space: normal;
    grid-column-start: 1;
    }

  4. 匿名说道:

    css 世界的封面鲸鱼竟然不是用css写的, 差评。/滑稽

  5. tongzhg说道:

    标签被替换掉了,重发一次

    1. 第一种方法我也想到了。因为我看过你的《CSS世界》(还没看完)
    2. 如果允许改动p的html结构就有其它的方法,p中加一个span,把“iPhone XR…”放到span中

  6. 北纬32度说道:

    就在这里向张大师提个问题吧:
    已知div,宽>高(但都未知,且不可固定),div中包含1个span,如何只使用CSS让这个span与div等高,且span的宽高比为1:1,即正方形?

    • 张 鑫旭说道:

      改变容器writing-mode然后span padding:50%。这个最兼容。

      • wanglaing01说道:

        张大师,按您的说法,试了下,可以实现span为正方形,但是好像超出父容器高度了,将padding改为25%就满足题意了,这里想问下,这里面实现的原理是什么?或者单独写个博客让大伙明白一下

        • 光源说道:

          其实不难理解的,哈哈,如果你买本《css世界》立马就懂,这儿padding是相对于父容器的宽度计算的,同时,如果改变了writing-mode(元素渲染顺序,默认是从左往右,改变之后就变成上往下了),这儿padding就是相对于父容器高度计算了

  7. skky123说道:

    h2 {
    display:table-caption;white-space:nowrap;
    }
    p {
    display: table-cell; white-space:normal;
    }

  8. freedom说道:

    h2{
    display: inline-block;
    position: relative;
    }
    p{
    width: 90%;
    position: absolute;
    }

  9. 流浪者说道:

    我想这个题目想考察的应该就是相对于父级的单位em, 英文按照单词换行,其他的好像没有什么必要纠结.

  10. zy说道:

    h2 {
    width: 9em;
    }
    p {

    }

    想到用em来设置宽度 误打误撞居然成了
    貌似字数最多的一行与设定的值不匹配(14个字符,9em) 请张大大解释下呢

  11. 匿名说道:

    出题者语死早

  12. erlking说道:

    不超出10%,我觉得应该解读为p最大宽度为h2的110%,直接解读为不超出h2似乎不妥当。