CSS position引发的问题

背景:实现如下顶部导航栏

将第一行位置设置为fixed,元素被移出正常文档流。第二行被第一行挡住

相关文档解释:

fixed元素会被移出正常文档流,并不为元素预留空间,而是通过指定元素相对于屏幕视口(viewport)的位置来指定元素位置。元素的位置在屏幕滚动时不会改变。打印时,元素会出现在的每页的固定位置。fixed 属性会创建新的层叠上下文。当元素祖先的 transformperspective 或 filter 属性非 none 时,容器由视口改为该祖先。

更多:
static该关键字指定元素使用正常的布局行为,即元素在文档常规流中当前的布局位置。此时 toprightbottomleft 和 z-index 属性无效。

relative该关键字下,元素先放置在未添加定位时的位置,再在不改变页面布局
的前提下调整元素位置(因此会在此元素未添加定位时所在位置留下空白)。
position: relative 对 table-*-group, table-row, table-column, table-cell, table-caption 元素无效。

absolute元素会被移出正常文档流,并不为元素预留空间,通过指定元素相对于最近的非 static 定位祖先元素的偏移,来确定元素位置。绝对定位的元素可以设置外边距(margins),且不会与其他边距合并。

sticky元素根据正常文档流进行定位,然后相对它的最近滚动祖先(nearest scrolling ancestor)和 containing block (最近块级祖先 nearest block-level ancestor),包括table-related元素,基于toprightbottom, 和 left的值进行偏移。偏移值不会影响任何其他元素的位置。该值总是创建一个新的层叠上下文(stacking context)。注意,一个sticky元素会“固定”在离它最近的一个拥有“滚动机制”的祖先上(当该祖先的overflow 是 hiddenscrollauto, 或 overlay时),即便这个祖先不是真的滚动祖先。这个阻止了所有“sticky”行为(详情见Github issue on W3C CSSWG)。

解决:position改为relative

mat-toolbar {
box-shadow: 0 3px 5px -1px rgba(0,0,0,.2), 0 6px 10px 0 rgba(0,0,0,.14), 0 1px 18px 0 rgba(0,0,0,.12);
position: relative;
z-index: 2;
}

JSON to URL Parameters

I need convert json object to url form like: “parameter=12&asd=1”

I done with this:

        var data = {
            'action':'actualiza_resultado',
            'postID': 1,
            'gl': 2,
            'gl2' : 3
        };

        var string_=JSON.stringify(data);

        string_=string_.replace(/{/g, "");
        string_=string_.replace(/}/g, "");
        string_=string_.replace(/:/g, "=")
        string_=string_.replace(/,/g, "&");
        string_=string_.replace(/"/g, "");

But i wonder if there any function in javascript or in JSON object to do this?

jQuery provides param that does exactly that. If you don’t use jquery, take at look at the source.

Basically, it goes like this:

url = Object.keys(data).map(function(k) {
    return encodeURIComponent(k) + '=' + encodeURIComponent(data[k])
}).join('&')

2019 update: there’s now a built-in object URLSearchParams for this type of thing:

let myParams = {'foo': 'hi there', 'bar': '???'};

let u = new URLSearchParams(myParams).toString();

console.log(u);

https://stackoverflow.com/questions/14525178/is-there-any-native-function-to-convert-json-to-url-parameters

前端回车(换行)显示成空格

请求到的字符串渲染到html页面,换行通常没有我们想要的换行效果 ,除非你把字符串放在<pre>标签中 ,这是因为文本中的回车是'\n''\n\r',而html中的回车是<br />

但是<pre>标签通常会出现一个致命的问题,在手机端没法响应式(responsive)的显示,我的解决方法是添加white-space属性。

<p style="white-space: pre-line">
  {{text}}
</p>

关于white-space用法: https://www.w3school.com.cn/cssref/pr_text_white-space.asp