秒懂救命贴

<!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小时内与您取得联系。

整合营销服务商