CSS简单总结

开始我的前端之路，路漫漫其修远兮。。。

1.版心和布局

最近跟着视频练习了纯css某东的网页，然后自己开练，那版心和布局不想讲了，乖乖搜索一波。。。我觉得这个解释最好,链接一个
?版心和布局

2.为什么要清除浮动

首先，浮动的本质:用来做一些文字混排效果的
但是被我们拿来做布局用，则会有很多的问题出现，但是，你不能说浮动不好,
由于浮动元素不再占用原文档流的位置，所以它会对后面的元素排版产生影响，为了解决这些问题，此时就需要在该元素中清除浮动。准确地说，并不是清除浮动，而是清除浮动后造成的影响。
清除浮动的本质
清除浮动主要为了解决父级元素因为子级浮动引起内部高度为0 的问题。
清除浮动的方法
其实本质叫做闭合浮动更好一些, 记住，清除浮动就是把浮动的盒子圈到里面，让父盒子闭合出口和入口不让他们出来影响其他元素。在CSS中，clear属性用于清除浮动，其基本语法格式如下：

选择器{clear:属性值;}   clear 清除    

额外标签法

是W3C推荐的做法是通过在浮动元素末尾添加一个空的标签例如 
，或则其他标签br等亦可。

优点： 通俗易懂，书写方便
缺点： 添加许多无意义的标签，结构化较差。

父级添加overflow属性方法
可以通过触发BFC的方式，可以实现清除浮动效果。

可以给父级添加： overflow为 hidden|auto|scroll  都可以实现。

优点： 代码简洁
缺点： 内容增多时候容易造成不会自动换行导致内容被隐藏掉，无法显示需要溢出的元素。

使用after伪元素清除浮动
:after 方式为空元素的升级版，好处是不用单独加标签了
使用方法：

 .clearfix:after {  content: ""; display: block; height: 0; clear: both; visibility: hidden;  }   

 .clearfix {*zoom: 1;}   /* IE6、7 专有 */

优点： 符合闭合浮动思想 结构语义化正确
缺点： 由于IE6-7不支持:after，使用 zoom:1触发 hasLayout。
代表网站： 百度、淘宝网、网易等
注意： content:"" 尽量不带点

使用before和after双伪元素清除浮动
使用方法：

.clearfix:before,.clearfix:after { 
  content:"";
  display:table;  /* 这句话可以出发BFC BFC可以清除浮动,BFC我们后面讲 */
}
.clearfix:after {
 clear:both;
}
.clearfix {
  *zoom:1;
}

优点： 代码更简洁
缺点： 由于IE6-7不支持:after，使用 zoom:1触发 hasLayout。
代表网站： 小米、腾讯等

3.定位（position）

子盒子没有定位时

	
		
		
		
	
	
		

			

				子
			
		
	

子盒子有加绝对定位，父盒子没有定位

	
		
		
		
	
	
		

			

				子
			
		
	

子盒子加绝对定位，父盒子加相对定位

	
		
		
		
	
	
		

			

				子
			
		
	

4.CSS权重问题

关于CSS权重，我们需要一套计算公式来去计算，这个就是 CSS Specificity，我们称为CSS 特性或称非凡性，它是一个衡量CSS值优先级的一个标准 具体规范入如下：
specificity用一个四位的数 字串(CSS2是三位)来表示，更像四个级别，值从左到右，左面的最大，一级大于一级，数位之间没有进制，级别之间不可超越。

权重是可以叠加的
比如的例子：

注意：
数位之间没有进制 比如说： 0,0,0,5 + 0,0,0,5 =0,0,0,10 而不是 0,0, 1, 0， 所以不会存在10个div能赶上一个类选择器的情况。

1. 继承的 权重是 0
2. 使用了 !important声明的规则。
3. 内嵌在 HTML 元素的 style属性里面的声明。
4. 使用了 ID 选择器的规则。
5. 使用了类选择器、属性选择器、伪元素和伪类选择器的规则。
6. 使用了元素选择器的规则。
7. 只包含一个通用选择器的规则。
8. 同一类选择器则遵循就近原则。

总结：权重是优先级的算法，层叠是优先级的表现

5.图片自动缩放的问题

有时候我们的盒子太小，但是图片分辨率太大，就像下面这样

通过下面代码解决

6.背景问题

语法：

background-position : length || length
background-position : position || position 
background-size: length|percentage|cover|contain;/*规定背景图像尺寸*/

参数：
length : 　百分数 | 由浮点数字和单位标识符组成的长度值。请参阅长度单位
position : 　top | center | bottom | left | center | right
说明：
设置或检索对象的背景图像位置。必须先指定background-image属性。默认值为：(0% 0%)。
如果只指定了一个值，该值将用于横坐标。纵坐标将默认为50%。第二个值将用于纵坐标。
注意：

1. position 后面是x坐标和y坐标。 可以使用方位名词或者 精确单位。
2. 如果和精确单位和方位名字混合使用，则必须是x坐标在前，y坐标后面。比如 background-position: 15px top; 则 15px 一定是 x坐标 top是 y坐标。

例如这个白色框内的logo位置

实际工作用的最多的，就是背景图片居中对齐了。

背景附着
语法：

background-attachment : scroll | fixed 

参数：
scroll : 　背景图像是随对象内容滚动
fixed : 　背景图像固定
说明：
设置或检索背景图像是随对象内容滚动还是固定的。