CSS（overflow+高度塌陷问题+透明度+层级选择符+写前端项目的注意事项）

CSS复习

---

overflow

说明：声明如何处理溢出容器的内容（注意：只能对中文起作用）

属性：

visible/hidden(隐藏)/scroll/auto(自动)/inherit(继承);

visible:     默认值，内容不会被修剪，会出现在元素框之外；
hidden：     内容会被修剪，并且其余内容是不可见的;
scroll：     内容会被修剪，但是浏览器会显示滚动条，以便查看其余的内容;
auto：       如果内容被修剪，则浏览器会显示滚动条，以便查看其他的内容;
inherit：    规定应该从父元素继承overflow属性的值。

visible效果：

hidden效果：

---

高度塌陷问题

没有指定父元素高度时，父元素的大小是被子元素撑开的
当子元素写了浮动后，父元素会发生高度塌陷

子元素加上margin属性后，父元素会一同移动

下面给出集中常见的解决方案：

1、给父元素添加声明 overflow：hidden

优点：代码少、简单

缺点：1、只适用于高版本游览器，IE6不支持。

2、不能和position定位配合使用，超出的尺寸会被隐藏

2、在浮动元素下方添加空div，并给元素声明 clear：both

优点：代码少，浏览器兼容好，只需要兼容 IE 浏览器。
	 因为在IE兼容部分块元素会自带16px的高度，需要添加 height: 0;overflow: hidden;

缺点：需要添加多余的空标签并添加属性

3、万能清除浮动法

优点：浏览器支持好

缺点：代码多

加一段：
父元素::after{
		content: "";
		display: block;
        clear: both;
        /* height: 0;overflow: hidden; 为了解决 IE 浏览器的兼容问题 */
 		height: 0;
		overflow: hidden;
        /* visibility:hidden;为了去隐藏content中的内容 */
		visibility: hidden;
	}

---

透明度

其中

{
	background:#000; 
	filter:alpha(opacity:30);//为了适配ie浏览器 
	opacity:0.3;
}

为关键代码，当 opacity 值为1时，表示完全不透明，为0时表示完全透明。

---

CSS层级选择符>,+,~

直接后代选择器 >

使用大于号 >（子结合符），比如E > F，匹配E元素的所有直接子元素F

提示：子选择器指选择某元素的直接后代，或者你可以理解为作用于其 =第一代子元素=。
	 而后代选择器是作用于其= 所有子后代元素=。后代选择器通过 空格 来进行选择，子控制器是通过 > 进行选择

相邻兄弟选择器 +

使用加号 + ，比如E + F，匹配E元素之后的 一个 同级元素F（直接相邻）

通用兄弟选择器

通用兄弟选择器使用波浪号 ~ ，比如E ~ F，匹配E元素之后的=所有=同级元素F（无论直接相邻与否）

---

写页面的注意事项：

任何线上案例都需要在书写css之前做3步准备工作；

1.清空默认的边距和列表样式；

2.设置正文的全局样式----指的就是给body设置文字三属性；

3.设置超链接的默认样式；

这是写任何网站都必须要设置的3步工作；

下面是初始化模板：

/*===============reset部分=================*/
body,
h1,
h2,
h3,
h4,
p,
ol,
ul,
li,
a,
p,
span,
img,
input,
dl,
dd,
dt {
    padding: 0;
    margin: 0;
}

ul,
ol {
    list-style: none;
}

img {
    display: block;
    border: 0;
}

input {
    outline: none;
}

body {
    font-size: 12px;
    color: #666;
    font-family: "微软雅黑";
    background: url(../images/bg.jpg) no-repeat #f3f3f3 top;
}

a {
    text-decoration: none;
}

a:hover {
    color: #53cac3;
}