CSS中大于号空格的区别

空格作用于所有的后裔

大于号作用于第一层后裔

<html>
<style>
    div { border: 1px solid black; margin-bottom: 10px; }
    .a b { color: red; } /* 所有的John是红色 */
    .b > b { color: red; } /* 只有John3和John4是红色 */
</style>
<body>
    <div class="a">
        <p>
            <b>John1</b>
        </p>
        <p>
            <b>John2</b>
        </p>
        <b>John3</b>
        <b>John4</b>
    </div>

    <div class="b">
        <p>
            <b>John1</b>
        </p>
        <p>
            <b>John2</b>
        </p>
        <b>John3</b>
        <b>John4</b>
    </div>
</body>
</html>

参考


CSS

这篇文章: 有用 无用
创建 2018-04-20 09:01:28 / 更新 2018-04-20 09:03:09

图片显示 MIME::Base64

一个图片的数据可以被encode成base64的字符串,这个base64的字符串也可以被decode成图片数据

所以如果我们有base64的字符串,在Catalyst中我们可以:

use MIME::Base64;
my $binary = MIME::Base64::decode_base64($base64_str);
$c->res->body($binary);
$c->res->content_type('image/jpeg');

这样可以返回图片

在html中,我们可以:

<img src="data:image/jpeg;base64,$base64_str"> # html 标签中
background: url("data:image/jpeg;base64,$base64_str") # css 中

Catalyst CSS

这篇文章: 有用 无用
创建 2016-09-27 08:56:29 / 更新 2018-04-20 08:49:17

css 控制换行的属性

white-space: normal # 空白会被浏览器忽略。
white-space: nowrap # 空白会被浏览器忽略,不换行,直到遇到 <br> 标签为止

white-space: pre  # 空白会保留,不换行,直到遇到 <br> 标签为止
white-space: pre-wrap # 空白会保留,正常换行 
white-space: pre-line # 空白会合并,正常换行 NOTE: 测试和normal一样

CSS

这篇文章: 有用 无用
创建 2016-09-26 05:18:08 / 更新 2018-04-20 08:49:17