标签：范围 position 转化 标记 ott 滚动 浮动 over back
<title></title>
<style type="text/css">
*{
padding: 0;
margin: 0;
}
li{
list-style: none;
/*float: left;*/
float: right; /*一直在包含块最右边*/
/*脱离文档流*/
border: 1px solid black;
}
ul{
border: 1px dashed red;
/*触发BFC(块级格式下上下文：block formatting context)自动找回*/
overflow: hidden;
}
/*子级浮动导致父级高度塌陷*/
a{
float: left;
}
/*行内元素设置浮动自动转化为块级元素*/
p{
float: left;
/*浮动文本类的标记，如果没有设置宽度，则自动折叠到最小宽度*/
}
.big{
width: 400px;
height: 400px;
border: 1px solid black
}
.small{
width: 200px;
height: 200px;
background: red;
float: left;
/*子级只在父级内浮动*/
/*不会穿越到内边距里*/
}
.small_two{
width: 200px;
height: 200px;
background: blue;
}
/*浮动会影响别的元素*/
/*如果父级没有足够的空间让子级浮动，子级则自动换行*/
</style>
<ul>
<li>11</li>
<li>22</li>
<li>33</li>
<li>44</li>
</ul>
<ul>
<li>qq</li>
<li></li>
<li></li>
</ul>
<a href="">行内a</a>
<p>p标签</p>
<div class="big">
<div class="small">
</div>
<div class="small_two">
</div>
</div>
word-break:break all(控制英文单词不超出范围)
box-sizeing:border-box(改变成IE盒模型)
默认字体在不同电脑可能造成换行
1.相对定位
positon:relative;
left:20px;
2.绝对定位:绝对定位的视角位于 浏览器的 （0，0） 点（或者是body的 （0，0） 点）
position:absolute
top:10px;
left:10px;
3.非静态定位（相对、绝对、固定）：为父级（或者是上上级）设置相对定位，为子级设置绝对定位。 元素会以包含它的（非静态定位）的 （0，0）点开始移动。
4.浮动和绝对定位脱离文档流，使行内元素变块级元素。
5.固定定位:
position:fixed;
left、right、top:10px;
6.静态定位：默认的属性
position:static
两个元素重叠时用定位。
1.是一个环境，一个隔离的独立容器，与布局相关，写了html标签他就已经是一个BFC，BFC形成后，里面内容和布局和外面互不干扰。
1.img之间有空隙，可给父级设置font-size：0；
2.为选择器添加：hover 并且添加文字变大的效果，最好给宽高定死。不然会影响下面的元素。
3.选择器 类选择器 [空格] 伪类选择器 [空格] 类选择器
步骤：
<style type="text/css">
.box1{
width: 600px;
height: 400px;
position: relative;
overflow: hidden;
}
.box1 img{
width: 600px;
height: 400px;
}
.mb{
width: 600px;
height: 100px;
outline: 1px solid black;
background: rgba(22,333,0,.2);
position: absolute;
bottom: 0;
}
.mb:hover{
transition:all linear 2s; 渐变
bottom: -100px;
}
.mb-right{
width: 100px;
height: 400px;
outline: 1px solid black;
background: rgba(111,999,444,.6);
position: absolute;
right:0;
bottom: 0;
}
.mb-right:hover {
transition:all linear 2s;
right:-100px;
}
同时动时选择父容器
.box1:hover .mb{
transition:all linear 2s;
bottom: -100px;
}
.box1:hover .mb-right{
transition:all linear 2s;
right:-100px;
}
</style>
<body>
<div class="box1"> 主容器
<img src="images/NBA11.jpg"> 背景图
<div class="mb">· 蒙板
12312
</div>
<div class="mb-right"> 蒙板
</div>
</div>
</body> 标签：范围 position 转化 标记 ott 滚动 浮动 over back
原文地址：http://www.cnblogs.com/tjboke/p/7141897.html
