一、浮动
http://vrg123.com/
文档流:网页中元素排列顺序。
标准文档流(默认):从上到下,从左到右
浮动流:
左浮动:从左到右,从上到下;右浮动:从右到左,从上到下
浮动原理:
1、浮动元素将脱离标准文档流,浮动元素后面的标准元素会依次向上填充
2、浮动元素不会遮挡行内元素
3、浮动元素变成行内块级元素,内容有多宽它就有多宽
4、不允许浮动元素覆盖文字
浮动带来的问题:父盒子塌陷
如何解决父盒子塌陷(扩展盒子高度/清除浮动的影响):
1、设置父盒子高度
2、使用overflow:visible | hidden | scroll属性来清除浮动(绝对定位不生效);值为默认值visible时,是没有清除浮动的作用的。
3、clear:left | right | both
4、让父元素与子元素一起浮动(不推荐)
5、使用after伪类(clear属性)
overflow与clear在清除浮动时的区别:
- overflow属性添加在父级上,绝对定位时不能实现清除浮动
- clear属性:应用在浮动元素后面,clear添加一个新的标签
省略号:
div{
border: 1px solid red;
height: 24px;
width: 150px;
overflow: hidden;
text-overflow:ellipsis;
white-space: nowrap;
/* 妙用:扩展盒子的高度, visible: 不生效*/
}
伪类选择器:
伪类:相当于一个类
伪元素:相当于一个元素
a标签的四个伪类:
link:未点击
visited:已点击
hover:悬停
active:激活状态
注:hover,active:是所有元素都有的伪类。
盒子的计算方式:
-
盒子总尺寸 = 内容+内边距+外边距
-
标准模式:设置的宽高+padding+border+margin
-
怪异模式:设置的宽高+margin
http://bugshouji.com/bbs-read-run?tid=86
指定计算方式:
box-sizing: border-box;
设置这个属性可以解决给盒子设置border、padding后盒子变大问题。
二、定位
position:
static:没有定位(默认)
relative:相对定位
absolute:绝对定位
fixed:固定定位
相对定位原理:
不论是标准元素还是浮动元素,相对于它没有定位前的位置进行偏移。
绝对定位原理:
会脱离标准文档流,变成行内块级元素。如果有已经定位的祖先元素,以最近的祖先元素为准;没有定位的祖先元素,以页面可视内容为准进行设置。
固定定位原理:
会脱离标准文档流,变成行内块级元素。相对于浏览器窗口进行设置
z-index:值;
作用:指定层叠顺序,值越大,优先级越高。
值:-1~999
默认值:auto(如果父元素有z-index,就和父元素一样,不然就为零)
注:z-index要和position一起使用。否则无效
透明度:
opacity:0-1,越小越透明
过滤器:
filter:alpha(opacity=x):0-100;
值越小越透明
word-break:默认单词不换行
display:
none:隐藏
inline:行内
block:块级
inline-block:行内块级