开始我的前端之路，路漫漫其修远兮。。。
1.版心和布局
最近跟着视频练习了纯css某东的网页，然后自己开练，那版心和布局不想讲了，乖乖搜索一波。。。我觉得这个解释最好,链接一个
?版心和布局
2.为什么要清除浮动
首先，浮动的本质:用来做一些文字混排效果的
但是被我们拿来做布局用，则会有很多的问题出现，但是，你不能说浮动不好,
由于浮动元素不再占用原文档流的位置，所以它会对后面的元素排版产生影响，为了解决这些问题，此时就需要在该元素中清除浮动。准确地说，并不是清除浮动，而是清除浮动后造成的影响。
清除浮动的本质
清除浮动主要为了解决父级元素因为子级浮动引起内部高度为0 的问题。
清除浮动的方法
其实本质叫做闭合浮动更好一些, 记住，清除浮动就是把浮动的盒子圈到里面，让父盒子闭合出口和入口不让他们出来影响其他元素。在CSS中，clear属性用于清除浮动，其基本语法格式如下：
选择器{clear:属性值;} clear 清除
额外标签法
是W3C推荐的做法是通过在浮动元素末尾添加一个空的标签例如 <div style=”clear:both”></div>，或则其他标签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）
子盒子没有定位时
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>子绝父相</title>
<style>
*{
margin: 0;
padding: 0;
}
.f {
width: 600px;
height: 600px;
background-color: pink;
margin: 100px auto;
}
.z {
width: 200px;
height: 200px;
background-color: lightskyblue;
font-size: 40px;
}
</style>
</head>
<body>
<div class="f">
<div class="z">
子
</div>
</div>
</body>
</html>
子盒子有加绝对定位，父盒子没有定位
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>子绝父相</title>
<style>
*{
margin: 0;
padding: 0;
}
.f {
width: 600px;
height: 600px;
background-color: pink;
margin: 100px auto;
}
.z {
width: 200px;
height: 200px;
background-color: lightskyblue;
font-size: 40px;
position: absolute;
top: 200px;
left: 200px;
}
</style>
</head>
<body>
<div class="f">
<div class="z">
子
</div>
</div>
</body>
</html>
子盒子加绝对定位，父盒子加相对定位
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>子绝父相</title>
<style>
*{
margin: 0;
padding: 0;
}
.f {
width: 600px;
height: 600px;
background-color: pink;
margin: 100px auto;
position: relative;
}
.z {
width: 200px;
height: 200px;
background-color: lightskyblue;
font-size: 40px;
position: absolute;
top: 200px;
left: 200px;
}
</style>
</head>
<body>
<div class="f">
<div class="z">
子
</div>
</div>
</body>
</html>
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能赶上一个类选择器的情况。
- 继承的 权重是 0
- 使用了 !important声明的规则。
- 内嵌在 HTML 元素的 style属性里面的声明。
- 使用了 ID 选择器的规则。
- 使用了类选择器、属性选择器、伪元素和伪类选择器的规则。
- 使用了元素选择器的规则。
- 只包含一个通用选择器的规则。
- 同一类选择器则遵循就近原则。
总结：权重是优先级的算法，层叠是优先级的表现
5.图片自动缩放的问题
有时候我们的盒子太小，但是图片分辨率太大，就像下面这样
通过下面代码解决
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style >
.bg{
width: 1000px;
height: 1000px;
border: 3px solid #ccc;
background-color: pink;
}
.bg img {
width: 100%;/*图片适应盒子大小*/
height: 100%;
height: auto;/*图片本身自动调试到合适大小*/
}
</style>
</head>
<body>
<div class="bg">
<a href="#">
<img src="img/花痴.png"/>
</a>
</div>
</body>
</html>
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%。第二个值将用于纵坐标。
注意：
- position 后面是x坐标和y坐标。 可以使用方位名词或者 精确单位。
- 如果和精确单位和方位名字混合使用，则必须是x坐标在前，y坐标后面。比如 background-position: 15px top; 则 15px 一定是 x坐标 top是 y坐标。
例如这个白色框内的logo位置
实际工作用的最多的，就是背景图片居中对齐了。
背景附着
语法：
background-attachment : scroll | fixed
参数：
scroll : 背景图像是随对象内容滚动
fixed : 背景图像固定
说明：
设置或检索背景图像是随对象内容滚动还是固定的。
112
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
