轉載自?前端面試常考系列六

一、為什么重置瀏覽器默認樣式，如何重置

每種瀏覽器都有一套默認的樣式表，即user agent stylesheet，網頁在沒有指定的樣式時，按瀏覽器內置的樣式表來渲染。這是合理的，像word中也有一些預留樣式，可以讓我們的排版更美觀整齊。由于不同瀏覽器甚至同一瀏覽器不同版本的默認樣式是不同的，所以，為了解決出現的兼容問題，我們需要重置瀏覽器默認樣式。

重置方法

a、最簡單的辦法：（不推薦使用）*{margin: 0;padding: 0;}。

b、使用CSSReset可以將所有瀏覽器默認樣式設置成一樣。

c、normalize：也許有些cssreset過于簡單粗暴，有點傷及無辜，normalize是另一個選擇。bootstrap已經引用該css來重置瀏覽器默認樣式，比普通的cssreset要精細一些，保留瀏覽器有用的默認樣式，支持包括手機瀏覽器在內的超多瀏覽器，同時對HTML5元素、排版、列表、嵌入的內容、表單和表格都進行了一般化。

二、如何理解怪異模式

從IE6開始，引入了Standards模式，標準模式中，瀏覽器嘗試給符合標準的文檔在規范上的正確處理達到在指定瀏覽器中的程度。

在IE6之前CSS還不夠成熟，所以IE5等之前的瀏覽器對CSS的支持很差，IE6將對CSS提供更好的支持，然而這時的問題就來了，因為有很多頁面是基于舊的布局方式寫的，而如果IE6?支持CSS則將令這些頁面顯示不正常，如何在即保證不破壞現有頁面，又提供新的渲染機制呢？

在寫程序時我們也會經常遇到這樣的問題，如何保證原來的接口不變，又提供更強大的功能，尤其是新功能不兼容舊功能時。遇到這種問題時的一個常見做法是增加參數和分支，即當某個參數為真時，我們就使用新功能，而如果這個參數?不為真時，就使用舊功能，這樣就能不破壞原有的程序，又提供新功能。IE6也是類似這樣做的，它將DTD（文檔類型定義）當成了這個“參數”，因為以前的頁面大家都不會去寫DTD，所以IE6就假定，如果寫了DTD，就意味著這個頁面將采用對CSS支持更好的布局，而如果沒有，則采用兼容之前的布局方式。這就是Quirks模式（怪癖模式，詭異模式，怪異模式）。

三、怪異模式和標準模式之間有什么區別

總體會有布局、樣式解析和腳本執行三個方面的區別。

盒模型：在W3C標準中，如果設置一個元素的寬度和高度，指的是元素內容的寬度和高度，而在Quirks模式下，IE的寬度和高度還包含了padding和border。

設置行內元素的高寬：在Standards模式下，給<span>等行內元素設置wdith和height都不會生效，而在quirks模式下，則會生效。

設置百分比的高度：在

standards模式下，一個元素的高度是由其包含的內容來決定的，如果父元素沒有設置百分比的高度，子元素設置一個百分比的高度是無效的。

用margin:0?auto設置水平居中：使用margin:0?auto在standards模式下可以使元素水平居中，但在quirks模式下卻會失效。

四、box-sizing屬性如何使用

abox-sizing:content-box

padding和border不被包含在定義的width和height之內。對象的實際寬度等于設置的width值和border、padding之和，即 ( Element width = width + border + padding，但占有頁面位置還要加上margin ) 此屬性表現為標準模式下的盒模型。

box-sizing:border-box

padding和border被包含在定義的width和height之內。對象的實際寬度就等于設置的width值，即使定義有border和padding也不會改變對象的實際寬度，即 ( Element width = width ) 此屬性表現為怪異模式下的盒模型。

五、外邊距折疊式如何觸發的，如何解決

觸發條件

兩個或多個毗鄰的普通流中的塊元素垂直方向上的?margin 會折疊。

1.兩個或多個

說明其數量必須是大于一個，又說明，折疊是元素與元素間相互的行為，不存在?A 和 B 折疊，B 沒有和 A 折疊的現象。

2.毗鄰

是指沒有被非空內容、padding、border 或 clear 分隔開，說明其位置關系。

注意一點，在沒有被分隔開的情況下，一個元素的margin-top 會和它普通流中的第一個子元素(非浮動元素等)的margin-top相鄰；只有在一個元素的height是"auto"的情況下，它的margin-bottom 才會和它普通流中的最后一個子元素(非浮動元素等)的margin-bottom相鄰。

3.垂直方向

指的是具體的方位，只有垂直方向的margin才會折疊，也就是說，水平方向的margin不會發生折疊的現象。

解決方法

1.浮動元素、inline-block 元素、絕對定位元素的 margin 不會和垂直方向上其他元素的 margin 折疊（注意這里指的是上下相鄰的元素）。
?2.創建了塊級格式化上下文的元素，不和它的子元素發生margin 折疊，注意這里指的是創建了BFC的元素和它的子元素不會發生折疊。

六、HTML中內聯元素和塊級元素有什么區別

對于html各種標簽/元素，可以從塊的層面做一個分類：要么是block(塊元素)，要么是inline(內聯元素)。

block元素的特點

??總是另起一行開始；
??高度，行高以及頂、底邊距都可控制；
? 寬度缺省是它所在容器的100%，除非設定一個寬度。

inline元素的特點

? 和其它元素都在一行上；
? 高度，行高以及頂、底邊距不可改變；
? 寬度就是它所容納的文字或圖片的寬度，不可改變。

七、css如何隱藏元素

方法一

display

使用none值會讓元素從文檔中直接刪除，”直接消失不見了”

用法：display:none

優點：簡單暴力，不需要多余代碼。不占空間，對布局沒影響。

缺點：元素從文檔刪除，不利seo

方法二

? text-indent

一般是首行縮2個中文字的用法是text-indent:2em。但當給他一個足夠大的負值，大到一般我們瀏覽器無法顯示。

用法：text-indent:-999em

優點：利于搜索引擎。

缺點：它的作用其實就是把文字提到段落前面，不讓我們看見，不影響寬度，但是會影響布局。

方法三

Position

假如說一個元素的距離我們的視窗（電腦顯示屏幕）足夠大，大到我們瀏覽器也無法顯示出來，那么它也是“消失”的。但是這種做法一般適用于比較寫死的東西。

用法：position:absolute;top:-999em或者left:-999em或position:absolute; visibility:hidden;

優點：信手拈來，隨意擺放。

缺點：用法太死，不能隨意修改，比較死板。

方法四

? Visibility

只是“看不見”而已，所以元素依然會影響到布局

用法：visibility:hidden

優點：利于SEO優化

缺點：該屬性會繼承，假如祖先用了visibility:hidden，那么子元素也是直接顯示不見，想要子元素顯示讓用戶看見，還要必須再多寫visibility：visible。

八、如何理解BFC與IF

BFC（Block Formatting Context）即“塊級格式化上下文”， IFC（Inline Formatting Context）即行內格式化上下文。常規流（也稱標準流、普通流）是一個文檔在被顯示時最常見的布局形態。

BFC是W3C CSS 2.1 規范中的一個概念，它決定了元素如何對其內容進行定位，以及與其他元素的關系和相互作用。當涉及到可視化布局的時候，Block Formatting Context提供了一個環境，HTML元素在這個環境中按照一定規則進行布局。一個環境中的元素不會影響到其它環境中的布局。比如浮動元素會形成BFC，浮動元素內部子元素的主要受該浮動元素影響，兩個浮動元素之間是互不影響的。也可以說BFC就是一個作用范圍。

在普通流中的Box(框)屬于一種formatting context(格式化上下文)，類型可以是block，或者是inline，但不能同時屬于這兩者。并且Block boxes(塊框)在block formatting context(塊格式化上下文) 里格式化，Inline boxes(塊內框) 則在Inline Formatting Context(行內格式化上下文) 里格式化。

九、說說你對頁面中使用定位(position)的理解

使用css布局position非常重要，語法如下：
??position：static | relative | absolute | fixed | center | page | sticky
默認值：static，center、page、sticky是CSS3中新增加的值。

static?

可以認為靜態的，默認元素都是靜態的定位，對象遵循常規流。此時4個定位偏移屬性不會被應用，也就是使用left，right，bottom，top將不會生效。

relative

相對定位，對象遵循常規流，并且參照自身在常規流中的位置通過top，right，bottom，left這4個定位偏移屬性進行偏移時不會影響常規流中的任何元素。

absolute?

絕對定位，對象脫離常規流，此時偏移屬性參照的是離自身最近的定位祖先元素，如果沒有定位的祖先元素，則一直回溯到body元素。盒子的偏移位置不影響常規流中的任何元素，其margin不與其他任何margin折疊。

元素定位參考的是離自身最近的定位祖先元素，要滿足兩個條件，第一個是自己的祖先元素，可以是父元素也可以是父元素的父元素，一直找，如果沒有則選擇body為對照對象。第二個條件是要求祖先元素必須定位，通俗說就是position的屬性值為非static都行。

fixed

固定定位，與absolute一致，但偏移定位是以窗口為參考。當出現滾動條時，對象不會隨著滾動。

center

與absolute一致，但偏移定位是以定位祖先元素的中心點為參考。盒子在其包含容器垂直水平居中。（CSS3）

page?

與absolute一致。元素在分頁媒體或者區域塊內，元素的包含塊始終是初始包含塊，否則取決于每個absolute模式。（CSS3）

sticky

對象在常態時遵循常規流。它就像是relative和fixed的合體，當在屏幕中時按常規流排版，當卷動到屏幕外時則表現如fixed。該屬性的表現是現實中你見到的吸附效果。（CSS3）。

十、介紹一下頁面布局方式

雙飛翼布局

經典三列布局，也叫做圣杯布局【Holy Grail of Layouts】是Kevin Cornell在2006年提出的一個布局模型概念，在國內最早是由淘寶UED的工程師傳播開來，在中國也有叫法是雙飛翼布局。

多欄布局

欄柵格系統：就是利用浮動實現的多欄布局，在bootstrap中用的非常多。

多列布局：柵格系統并沒有真正實現分欄效果（如word中的分欄），CSS3為了滿足這個要求增加了多列布局模塊。

彈性布局

CSS3引入了一種新的布局模式——Flexbox布局，即伸縮布局盒模型（Flexible Box），用來提供一個更加有效的方式制定、調整和分布一個容器里項目布局，即使它們的大小是未知或者動態的，這里簡稱為Flex。

Flexbox布局常用于設計比較復雜的頁面，可以輕松的實現屏幕和瀏覽器窗口大小發生變化時保持元素的相對位置和大小不變，同時減少了依賴于浮動布局實現元素位置的定義以及重置元素的大小。

瀑布流布局

瀑布流布局是流式布局的一種。是當下比較流行的一種網站頁面布局，視覺表現為參差不齊的多欄布局，隨著頁面滾動條向下滾動，這種布局還會不斷加載數據塊并附加至當前尾部。最早采用此布局的網站是Pinterest，逐漸在國內流行開來。

流式布局

固定布局和流式布局在網頁設計中最常用的兩種布局方式。固定布局能呈現網頁的原始設計效果，流式布局則不受窗口寬度影響，流式布局使用百分比寬度來限定布局元素，這樣可以根據客戶端分辨率的大小來進行合理的顯示。

響應式布局

響應式布局是Ethan Marcotte在2010年5月份提出的一個概念，簡而言之，就是一個網站能夠兼容多個終端——而不是為每個終端做一個特定的版本。這個概念是為解決移動互聯網瀏覽而誕生的。

十一、雙飛翼布局有什么要求

? 1、三列布局，中間寬度自適應，兩邊定寬；?
? 2、中間欄要在瀏覽器中優先展示渲染；?
? 3、允許任意列的高度最高；
? 4、要求只用一個額外的DIV標簽；?
? 5、要求用最簡單的CSS、最少的HACK語句。

十二、多個元素重疊問題如何解決

使用z-index屬性可以設置元素的層疊順序。

z-index屬性的語法：z-index: auto | <integer>

默認值：auto

適用于：定位元素。即定義了position為非static的元素
取值。?

auto：元素在當前層疊上下文中的層疊級別是0。元素不會創建新的局部層疊上下文，除非它是根元素。?

整數：用整數值來定義堆疊級別。可以為負值。?

說明：檢索或設置對象的層疊順序。?
z-index用于確定元素在當前層疊上下文中的層疊級別，并確定該元素是否創建新的局部層疊上下文。當多個元素層疊在一起時，數字大者將顯示在上面。

一、為什么重置瀏覽器默認樣式，如何重置

每種瀏覽器都有一套默認的樣式表，即user agent stylesheet，網頁在沒有指定的樣式時，按瀏覽器內置的樣式表來渲染。這是合理的，像word中也有一些預留樣式，可以讓我們的排版更美觀整齊。由于不同瀏覽器甚至同一瀏覽器不同版本的默認樣式是不同的，所以，為了解決出現的兼容問題，我們需要重置瀏覽器默認樣式。

重置方法

a、最簡單的辦法：（不推薦使用）*{margin: 0;padding: 0;}。

b、使用CSSReset可以將所有瀏覽器默認樣式設置成一樣。

c、normalize：也許有些cssreset過于簡單粗暴，有點傷及無辜，normalize是另一個選擇。bootstrap已經引用該css來重置瀏覽器默認樣式，比普通的cssreset要精細一些，保留瀏覽器有用的默認樣式，支持包括手機瀏覽器在內的超多瀏覽器，同時對HTML5元素、排版、列表、嵌入的內容、表單和表格都進行了一般化。

二、如何理解怪異模式

從IE6開始，引入了Standards模式，標準模式中，瀏覽器嘗試給符合標準的文檔在規范上的正確處理達到在指定瀏覽器中的程度。

在IE6之前CSS還不夠成熟，所以IE5等之前的瀏覽器對CSS的支持很差，IE6將對CSS提供更好的支持，然而這時的問題就來了，因為有很多頁面是基于舊的布局方式寫的，而如果IE6?支持CSS則將令這些頁面顯示不正常，如何在即保證不破壞現有頁面，又提供新的渲染機制呢？

在寫程序時我們也會經常遇到這樣的問題，如何保證原來的接口不變，又提供更強大的功能，尤其是新功能不兼容舊功能時。遇到這種問題時的一個常見做法是增加參數和分支，即當某個參數為真時，我們就使用新功能，而如果這個參數?不為真時，就使用舊功能，這樣就能不破壞原有的程序，又提供新功能。IE6也是類似這樣做的，它將DTD（文檔類型定義）當成了這個“參數”，因為以前的頁面大家都不會去寫DTD，所以IE6就假定，如果寫了DTD，就意味著這個頁面將采用對CSS支持更好的布局，而如果沒有，則采用兼容之前的布局方式。這就是Quirks模式（怪癖模式，詭異模式，怪異模式）。

三、怪異模式和標準模式之間有什么區別

總體會有布局、樣式解析和腳本執行三個方面的區別。

盒模型：在W3C標準中，如果設置一個元素的寬度和高度，指的是元素內容的寬度和高度，而在Quirks模式下，IE的寬度和高度還包含了padding和border。

設置行內元素的高寬：在Standards模式下，給<span>等行內元素設置wdith和height都不會生效，而在quirks模式下，則會生效。

設置百分比的高度：在

standards模式下，一個元素的高度是由其包含的內容來決定的，如果父元素沒有設置百分比的高度，子元素設置一個百分比的高度是無效的。

用margin:0?auto設置水平居中：使用margin:0?auto在standards模式下可以使元素水平居中，但在quirks模式下卻會失效。

四、box-sizing屬性如何使用

abox-sizing:content-box

padding和border不被包含在定義的width和height之內。對象的實際寬度等于設置的width值和border、padding之和，即 ( Element width = width + border + padding，但占有頁面位置還要加上margin ) 此屬性表現為標準模式下的盒模型。

box-sizing:border-box

padding和border被包含在定義的width和height之內。對象的實際寬度就等于設置的width值，即使定義有border和padding也不會改變對象的實際寬度，即 ( Element width = width ) 此屬性表現為怪異模式下的盒模型。

五、外邊距折疊式如何觸發的，如何解決

觸發條件

兩個或多個毗鄰的普通流中的塊元素垂直方向上的?margin 會折疊。

1.兩個或多個

說明其數量必須是大于一個，又說明，折疊是元素與元素間相互的行為，不存在?A 和 B 折疊，B 沒有和 A 折疊的現象。

2.毗鄰

是指沒有被非空內容、padding、border 或 clear 分隔開，說明其位置關系。

注意一點，在沒有被分隔開的情況下，一個元素的margin-top 會和它普通流中的第一個子元素(非浮動元素等)的margin-top相鄰；只有在一個元素的height是"auto"的情況下，它的margin-bottom 才會和它普通流中的最后一個子元素(非浮動元素等)的margin-bottom相鄰。

3.垂直方向

指的是具體的方位，只有垂直方向的margin才會折疊，也就是說，水平方向的margin不會發生折疊的現象。

解決方法

1.浮動元素、inline-block 元素、絕對定位元素的 margin 不會和垂直方向上其他元素的 margin 折疊（注意這里指的是上下相鄰的元素）。
?2.創建了塊級格式化上下文的元素，不和它的子元素發生margin 折疊，注意這里指的是創建了BFC的元素和它的子元素不會發生折疊。

六、HTML中內聯元素和塊級元素有什么區別

對于html各種標簽/元素，可以從塊的層面做一個分類：要么是block(塊元素)，要么是inline(內聯元素)。

block元素的特點

??總是另起一行開始；
??高度，行高以及頂、底邊距都可控制；
? 寬度缺省是它所在容器的100%，除非設定一個寬度。

inline元素的特點

? 和其它元素都在一行上；
? 高度，行高以及頂、底邊距不可改變；
? 寬度就是它所容納的文字或圖片的寬度，不可改變。

七、css如何隱藏元素

方法一

display

使用none值會讓元素從文檔中直接刪除，”直接消失不見了”

用法：display:none

優點：簡單暴力，不需要多余代碼。不占空間，對布局沒影響。

缺點：元素從文檔刪除，不利seo

方法二

? text-indent

一般是首行縮2個中文字的用法是text-indent:2em。但當給他一個足夠大的負值，大到一般我們瀏覽器無法顯示。

用法：text-indent:-999em

優點：利于搜索引擎。

缺點：它的作用其實就是把文字提到段落前面，不讓我們看見，不影響寬度，但是會影響布局。

方法三

Position

假如說一個元素的距離我們的視窗（電腦顯示屏幕）足夠大，大到我們瀏覽器也無法顯示出來，那么它也是“消失”的。但是這種做法一般適用于比較寫死的東西。

用法：position:absolute;top:-999em或者left:-999em或position:absolute; visibility:hidden;

優點：信手拈來，隨意擺放。

缺點：用法太死，不能隨意修改，比較死板。

方法四

? Visibility

只是“看不見”而已，所以元素依然會影響到布局

用法：visibility:hidden

優點：利于SEO優化

缺點：該屬性會繼承，假如祖先用了visibility:hidden，那么子元素也是直接顯示不見，想要子元素顯示讓用戶看見，還要必須再多寫visibility：visible。

八、如何理解BFC與IF

BFC（Block Formatting Context）即“塊級格式化上下文”， IFC（Inline Formatting Context）即行內格式化上下文。常規流（也稱標準流、普通流）是一個文檔在被顯示時最常見的布局形態。

BFC是W3C CSS 2.1 規范中的一個概念，它決定了元素如何對其內容進行定位，以及與其他元素的關系和相互作用。當涉及到可視化布局的時候，Block Formatting Context提供了一個環境，HTML元素在這個環境中按照一定規則進行布局。一個環境中的元素不會影響到其它環境中的布局。比如浮動元素會形成BFC，浮動元素內部子元素的主要受該浮動元素影響，兩個浮動元素之間是互不影響的。也可以說BFC就是一個作用范圍。

在普通流中的Box(框)屬于一種formatting context(格式化上下文)，類型可以是block，或者是inline，但不能同時屬于這兩者。并且Block boxes(塊框)在block formatting context(塊格式化上下文) 里格式化，Inline boxes(塊內框) 則在Inline Formatting Context(行內格式化上下文) 里格式化。

九、說說你對頁面中使用定位(position)的理解

使用css布局position非常重要，語法如下：
??position：static | relative | absolute | fixed | center | page | sticky
默認值：static，center、page、sticky是CSS3中新增加的值。

static?

可以認為靜態的，默認元素都是靜態的定位，對象遵循常規流。此時4個定位偏移屬性不會被應用，也就是使用left，right，bottom，top將不會生效。

relative

相對定位，對象遵循常規流，并且參照自身在常規流中的位置通過top，right，bottom，left這4個定位偏移屬性進行偏移時不會影響常規流中的任何元素。

absolute?

絕對定位，對象脫離常規流，此時偏移屬性參照的是離自身最近的定位祖先元素，如果沒有定位的祖先元素，則一直回溯到body元素。盒子的偏移位置不影響常規流中的任何元素，其margin不與其他任何margin折疊。

元素定位參考的是離自身最近的定位祖先元素，要滿足兩個條件，第一個是自己的祖先元素，可以是父元素也可以是父元素的父元素，一直找，如果沒有則選擇body為對照對象。第二個條件是要求祖先元素必須定位，通俗說就是position的屬性值為非static都行。

fixed

固定定位，與absolute一致，但偏移定位是以窗口為參考。當出現滾動條時，對象不會隨著滾動。

center

與absolute一致，但偏移定位是以定位祖先元素的中心點為參考。盒子在其包含容器垂直水平居中。（CSS3）

page?

與absolute一致。元素在分頁媒體或者區域塊內，元素的包含塊始終是初始包含塊，否則取決于每個absolute模式。（CSS3）

sticky

對象在常態時遵循常規流。它就像是relative和fixed的合體，當在屏幕中時按常規流排版，當卷動到屏幕外時則表現如fixed。該屬性的表現是現實中你見到的吸附效果。（CSS3）。

十、介紹一下頁面布局方式

雙飛翼布局

經典三列布局，也叫做圣杯布局【Holy Grail of Layouts】是Kevin Cornell在2006年提出的一個布局模型概念，在國內最早是由淘寶UED的工程師傳播開來，在中國也有叫法是雙飛翼布局。

多欄布局

欄柵格系統：就是利用浮動實現的多欄布局，在bootstrap中用的非常多。

多列布局：柵格系統并沒有真正實現分欄效果（如word中的分欄），CSS3為了滿足這個要求增加了多列布局模塊。

彈性布局

CSS3引入了一種新的布局模式——Flexbox布局，即伸縮布局盒模型（Flexible Box），用來提供一個更加有效的方式制定、調整和分布一個容器里項目布局，即使它們的大小是未知或者動態的，這里簡稱為Flex。

Flexbox布局常用于設計比較復雜的頁面，可以輕松的實現屏幕和瀏覽器窗口大小發生變化時保持元素的相對位置和大小不變，同時減少了依賴于浮動布局實現元素位置的定義以及重置元素的大小。

瀑布流布局

瀑布流布局是流式布局的一種。是當下比較流行的一種網站頁面布局，視覺表現為參差不齊的多欄布局，隨著頁面滾動條向下滾動，這種布局還會不斷加載數據塊并附加至當前尾部。最早采用此布局的網站是Pinterest，逐漸在國內流行開來。

流式布局

固定布局和流式布局在網頁設計中最常用的兩種布局方式。固定布局能呈現網頁的原始設計效果，流式布局則不受窗口寬度影響，流式布局使用百分比寬度來限定布局元素，這樣可以根據客戶端分辨率的大小來進行合理的顯示。

響應式布局

響應式布局是Ethan Marcotte在2010年5月份提出的一個概念，簡而言之，就是一個網站能夠兼容多個終端——而不是為每個終端做一個特定的版本。這個概念是為解決移動互聯網瀏覽而誕生的。

十一、雙飛翼布局有什么要求

? 1、三列布局，中間寬度自適應，兩邊定寬；?
? 2、中間欄要在瀏覽器中優先展示渲染；?
? 3、允許任意列的高度最高；
? 4、要求只用一個額外的DIV標簽；?
? 5、要求用最簡單的CSS、最少的HACK語句。

十二、多個元素重疊問題如何解決

使用z-index屬性可以設置元素的層疊順序。

z-index屬性的語法：z-index: auto | <integer>

默認值：auto

適用于：定位元素。即定義了position為非static的元素
取值。?

auto：元素在當前層疊上下文中的層疊級別是0。元素不會創建新的局部層疊上下文，除非它是根元素。?

整數：用整數值來定義堆疊級別。可以為負值。?

說明：檢索或設置對象的層疊順序。?
z-index用于確定元素在當前層疊上下文中的層疊級別，并確定該元素是否創建新的局部層疊上下文。當多個元素層疊在一起時，數字大者將顯示在上面。

總結

以上是生活随笔為你收集整理的前端面试常考系列六的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。