秒懂救命貼

<!DOCTYPE html>
<html>
    <head>
        <meta name="robots" content="noindex,nofollow" />
        <style>
 /* Copyright (c) 2010, Yahoo! Inc. All rights reserved. Code licensed under the BSD License: http://developer.yahoo.com/yui/license.html */
 html{color:#000;background:#FFF;}body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td{margin:0;padding:0;}table{border-collapse:collapse;border-spacing:0;}fieldset,img{border:0;}address,caption,cite,code,dfn,em,strong,th,var{font-style:normal;font-weight:normal;}li{list-style:none;}caption,th{text-align:left;}h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal;}q:before,q:after{content:'';}abbr,acronym{border:0;font-variant:normal;}sup{vertical-align:text-top;}sub{vertical-align:text-bottom;}input,textarea,select{font-family:inherit;font-size:inherit;font-weight:inherit;}input,textarea,select{*font-size:100%;}legend{color:#000;}
 html { background: #eee; padding: 10px }
 img { border: 0; }
 #sf-resetcontent { width:970px; margin:0 auto; }
 .sf-reset { font: 11px Verdana, Arial, sans-serif; color: #333 }
 .sf-reset .clear { clear:both; height:0; font-size:0; line-height:0; }
 .sf-reset .clear_fix:after { display:block; height:0; clear:both; visibility:hidden; }
 .sf-reset .clear_fix { display:inline-block; }
 .sf-reset * html .clear_fix { height:1%; }
 .sf-reset .clear_fix { display:block; }
 .sf-reset, .sf-reset .block { margin: auto }
 .sf-reset abbr { border-bottom: 1px dotted #000; cursor: help; }
 .sf-reset p { font-size:14px; line-height:20px; color:#868686; padding-bottom:20px }
 .sf-reset strong { font-weight:bold; }
 .sf-reset a { color:#6c6159; cursor: default; }
 .sf-reset a img { border:none; }
 .sf-reset a:hover { text-decoration:underline; }
 .sf-reset em { font-style:italic; }
 .sf-reset h1, .sf-reset h2 { font: 20px Georgia, "Times New Roman", Times, serif }
 .sf-reset .exception_counter { background-color: #fff; color: #333; padding: 6px; float: left; margin-right: 10px; float: left; display: block; }
 .sf-reset .exception_title { margin-left: 3em; margin-bottom: 0.7em; display: block; }
 .sf-reset .exception_message { margin-left: 3em; display: block; }
 .sf-reset .traces li { font-size:12px; padding: 2px 4px; list-style-type:decimal; margin-left:20px; }
 .sf-reset .block { background-color:#FFFFFF; padding:10px 28px; margin-bottom:20px;
 -webkit-border-bottom-right-radius: 16px;
 -webkit-border-bottom-left-radius: 16px;
 -moz-border-radius-bottomright: 16px;
 -moz-border-radius-bottomleft: 16px;
 border-bottom-right-radius: 16px;
 border-bottom-left-radius: 16px;
 border-bottom:1px solid #ccc;
 border-right:1px solid #ccc;
 border-left:1px solid #ccc;
 }
 .sf-reset .block_exception { background-color:#ddd; color: #333; padding:20px;
 -webkit-border-top-left-radius: 16px;
 -webkit-border-top-right-radius: 16px;
 -moz-border-radius-topleft: 16px;
 -moz-border-radius-topright: 16px;
 border-top-left-radius: 16px;
 border-top-right-radius: 16px;
 border-top:1px solid #ccc;
 border-right:1px solid #ccc;
 border-left:1px solid #ccc;
 overflow: hidden;
 word-wrap: break-word;
 }
 .sf-reset a { background:none; color:#868686; text-decoration:none; }
 .sf-reset a:hover { background:none; color:#313131; text-decoration:underline; }
 .sf-reset ol { padding: 10px 0; }
 .sf-reset h1 { background-color:#FFFFFF; padding: 15px 28px; margin-bottom: 20px;
 -webkit-border-radius: 10px;
 -moz-border-radius: 10px;
 border-radius: 10px;
 border: 1px solid #ccc;
 }
        </style>
    </head>
    <body>
 <div id="sf-resetcontent" class="sf-reset">
 <h1>Whoops, looks like something went wrong.</h1>
 
 </div>
    </body>
</html>

海無涯，不要沉浸在知識的海洋里，迷失自己。

要知道自己想要什么，抓住重點，不忘初心。

這個世界上百分之20的人，掌握著百分之80的財富。

接下來一系列教程，就帶領大家抓住重點，一起做那百分之20的人。

往期知識點回顧：

重點屬性-display

重點屬性-position

重點屬性-float

重點屬性-flex

重點屬性-overflow

重點屬性-media

重點屬性background

CSS 背景這里指通過background對對象設置背景屬性，如通過CSS設置背景各種樣式。

background-color

設置顏色作為對象背景顏色

background-image

設置圖片作為背景圖片

background-repeat

設置背景平鋪重復方向

background-attachment

設置或檢索背景圖像是隨對象內容滾動還是固定的。

background-position

設置或檢索對象的背景圖像位置。

Background

背景樣式的值是復合屬性值組合，也就是背景單詞的值可以跟多個屬性值，值與值之間使用一個空格間隔鏈接上即可。

background背景作用：

1、設置純色背景。背景background可以設置對象純色的背景顏色，

2、設置圖為背景。可以設置對象背景為圖片，如果背景是圖片可以讓圖片重復平鋪橫鋪，或將圖片作為對象背景固定在對象任何位置。

Background分析解析

屬性解析

A.設置背景具體顏色值

B.這是背景的具體圖片路徑

C.設置圖片是否平鋪

no-repeat:不重復

repeat-x:水平方向（橫向）重復平鋪

repeat-y:垂直方向（豎向）重復平鋪

如果不設置，為全背景平鋪

D.具體左右上下的距離

left 圖片靠左

right 圖片靠右

top 圖片靠上

bottom 圖片靠下

E.背景圖片固定，還是隨上下滾動條滾動

fixed 圖片固定

scroll 背景圖片內容滾動

代碼實踐

<!DOCTYPE html>
<html lang="en">
<head>    
   <meta charset="UTF-8">  
   <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
   <meta http-equiv="X-UA-Compatible" content="ie=edge">  
   <title>flex布局css</title>   
   <style>       
       .container{     
            background: #FFF url(https://image.baidu.com/beijing.gif) no-repeat 0 0 fixed    
       }    
   </style>
</head>
<body>  
   <div class="container">     
   背景圖    
   </div>
</body>
</html>
復制代碼

面試題：

CSS無法顯示背景顏色問題分析解決

1、由使用float浮動造成浮動產生無法顯示css背景顏色

2、高度不夠而產生背景無法顯示

3.如果是float造成：解決方法有三種，一個是設置clear清除浮動、設置css高度、設置css overflow樣式。

4.如果是高度原因：解決方案如下，設置夠高的高度，或取消刪除高度樣式即可。

動

目前PC網站大多使用float布局，從成本上考慮大改的概率很小，所以不要說浮動無用，總是會有機會讓你維護的！代表網站：淘寶、騰訊、百度，好吧BAT都到齊了。

浮動聽得多了，博客園上關于用浮動布局的介紹也非常的多。浮動原本用于文本環繞，但卻在布局被發揚光大，這就是命！我的理解：浮動布局的核心就是讓元素脫離普通流，然后使用width/height，margin/padding將元素定位。脫離普通流的元素，就像脫離地心引力一樣，與普通流不在一個高度上。這個跟圖層的概念類似。高度不同所以可以疊在其他元素上面產生重疊或者使用負邊距跑到父元素外，理解了這一點浮動布局就很好理解了。

下面用個圣杯布局的例子說明一下，理解了這個之后其他布局更加簡單：

left，寬度固定,高度可固定也可由內容撐開

right，寬度固定，高度可固定也可由內容撐開

center，可以自適應瀏覽器寬度，高度可固定也可由內容撐開。

原理非常簡單，左右側邊欄定寬并浮動，中部內容區放最后不浮動、默認width：auto并設置相應外邊距，讓左右側邊欄浮動到上面。注意：子元素設置為浮動之后，父對象的高度就坍塌了，需要設置父對象后的元素清除浮動，這樣父對象的高度才能被浮動子元素撐起來了。

當然，我們也要問一下，為啥父對象高度會坍塌呢？上面也說過了，浮動元素已經脫離了普通流，父對象所在的普通流比喻成地表，那浮動元素就已經上天了。但是父對象還在地表啊，從外太空看浮動元素在父對象里面，但是其實并不在，又怎么能撐開父對象呢？寬度如果我們不設置的話，其實也是為0的，因為父對象里面空空如也，所以寬高為0。要撐開的辦法就兩個:

辦法1:是讓父對象也上天 2是把浮動元素的邊框邊界拉下來。父對象也上天（即浮動）的話，那就不能實現寬度自適應了。因為float元素的width：auto是包裹內容的，參考前面說的！

辦法2:就是在后面的元素里加一個clear語句。說到這個問題就要扯到clear與BFC了，我就不獻丑了。傳送門：https://developer.mozilla.org/zh-CN/docs/Web/CSS/clear

這個三列布局還有個雙飛翼的變種，就是在HTML中center部分也就是內容區提到最前面，也就是內容先行渲染。在網絡不好的時候，左右雙翼能不能出來不要緊，先讓主體內容出來！這種想法是優秀工程師思維

思路：

1)既然HTML里面要讓center放前面，為了讓left跑到center前面，那center也必須浮動了，否則因為都是塊元素他們會分兩行。

2)浮動之后還要讓center寬度自適應，那明顯width只能100%，然后在父元素中設width:auto，還有兩側margin，其實也就是父對象寬度自適應，center只是繼承content的寬度。

3)對left使用負的margin讓他們浮動到上方去。

代碼里面我用到了一個calc()，這個CSS3帶來的計算函數簡直酷斃了！本例里如果不使用calc函數，那么就需要wrap左邊距為0，left左邊距-100%，然后center多加一層子塊DIV設置margin-left：100px，可以達到同樣的效果！calc函數與百分比配合就足以實現自適應的要求！目前所有的自適應布局都在利用瀏覽器來為我們計算尺寸，但是有了calc之后我們就可以自己制定規則！

總結：

使用浮動來進行布局，一個比較大的問題是清除浮動。這個可以使用一個after偽類來清除。更大的問題是浮動性像水一樣向上流動，難以把握。在元素較多而且元素高度尺寸不一的情況下，單純使用浮動只能實現上端對齊，這對于適應多種設備的布局就顯得力不從心了。目前的做法是犧牲一部分內容，將元素做成等高排列，從美觀上看也當然也是極好的，比參差不齊的排列要美觀。

參考位置：https://blog.csdn.net/three_bird/article/details/51468817?utm_source=blogxgwz11

在線咨詢

上一篇：HTML DOM Dialog 對象
下一篇：如何制作樂高培訓機構網站，兒童智力開發學校網站搭建全

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商