心得经验
1.所有行内元素或行内块元素 如果想让它文字去到右边 直接用text-align
2.ctrl +g 定位行号
3.假如元素 没有设置宽
一个盒子你不给它宽度它是默认和父亲盒子宽度一样。但是假如这个你没有设宽度的盒子 你让它浮动了 或绝对定位了 或者是inline-block了，那么这个盒子会和内容一样宽。
4.z-index 要提 就提父亲
5.只要有背景图的盒子，我们都要给盒子加宽高，不然背景图显示不全
6.如果给一个盒子加了绝对定位 ，但是却不写 left ,top 这些，那么盒子就按照原来默认的标准流位置
7.同时写left:0 rigth:0 它是不冲突的， 很特殊 。 即是同时写了，它会优先 先左很右 ，先上后下
8.要是子盒子 设了position:absoulute ，父盒子没设position ，那么它会一直寻找祖父盒子是否有，一直找
9.行内块元素 都用text-align 来居中对齐
10.浏览器ctrl+ 0 是恢复百分之100%
11.小技巧：一般文字加图标那种， 可以在父盒子里先用padding 挤开文字，然后在那块不能写内容的地方 用绝对定位 添上图标
12.其实，清除浮动 就相当于创建了一个BFC区域。 BFC区域：简单说，就是这块地放特立独有，里面发生什么都不会影响外面
13.如果其他盒子 浮动，而有个兄弟盒子是不浮动的，兄弟盒子里面又有文字，且没设高度。 会被那写浮动的盒子 间隔撑大兄弟盒子高度，即使你设了高度 它也一样会间隔撑大高度。高度根据浮动盒子怎么拦住你的文字而定。
鼠标样式
Cursor: pointer 鼠标变成小手
Cursor: default; 小白
Cursor : move; 移动
Cursor : text ; 文本输入
Border-radius
圆角矩形
border-radius: 7px 7px 7px 0;
Border-radius: 左上 右上 右下 左下； 顺时针
标签嵌套
- 块级元素 --- 任何元素可以的。
- 行内元素 -- 行内元素 只 嵌套元素 b u span i - s
- P 不能放 div 。
- a 无所不能 。 a里面不能放 a input 等
================================================================================
Z-index 层级 div 层
只有 定位的盒子 （除了static） 才有 z-index
如果都是定位 他们默认的z-index 是 0
最后的一个 靠上
示例：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
/* .test {
150px;
height: 300px;
border: 1px solid #ccc;
margin-top: 100px;
float: left;
margin-left: -1px;
}
.test:hover {
border: 1px solid #f40;
position: relative;
} */
.test {
150px;
height: 300px;
border: 1px solid #ccc;
margin-top: 100px;
float: left;
margin-left: -1px;
position: relative;
}
.test:hover {
border: 1px solid #f40;
z-index: 1;
}
</style>
</head>
<body>
<div class="test"></div>
<div class="test"></div>
<div class="test"></div>
<div class="test"></div>
<div class="test"></div>
</body>
</html>
背景半透明
CSS3
**Background: rgba(0,0,0,0.5); **
Opacity: 0.5; 让盒子半透明 里面的内容也半透明