1、什么定位

元素该出现的位置 分为以下几类:

普通流定位(文档流定位)

浮动定位

相对定位

绝对定位

固定定位

2、普通流定位 页面默认的定位方式

块级元素:从上到下显示

行内元素:从左到右显示

3、浮动定位

1、什么是浮动定位

元素会脱离默认文档流,在页面上不会占据空间 浮动定位的元素会放置在包含框的左边或者右边 浮动的元素依然在包含框内 当浮动元素碰到其他浮动元素时,就会停止浮动

2、浮动定位解决的问题 实现特殊的定位方式,比如:让多个块级元素在同一行内显示

3、属性 float 取值:

left : 左浮动

right : 右浮动

none : 无浮动

清除浮动所带来的影响:

属性: clear:left,right,both;

4、元素一旦浮动起来的话,那么都将成为块级元素

1、浮动 元素 对 父层元素带来的影响

影响:一个元素内如果包含了浮动元素,那么该元素的高度可能会变成0。

原因:浮动元素 脱离了 文档流,理论上讲,就不在父层容器内

解决方案:

1、显示设置父层元素的高度

2、通过overflow:hidden 来撑起父层元素的高度

1、显示方式

1、块级元素 <div></div> hn p

变成行级元素: display:inline-block

特点:单独占一行

2、内联元素/行内元素 span , b , i , u , s , a

变成块级元素:display:block

总结:

1. 假如某个div元素A是浮动的,如果A元素上一个元素也是浮动的, 那么A元素会跟随在上一个元素的后边(如果一行放不下这两个元素,那么A元素会被挤到下一行); 如果A元素上一个元素是标准流中的元素, 那么A的相对垂直位置不会改变,也就是说A的顶部总是和上一个元素的底部对齐。

2. 清除浮动可以理解为打破横向排列。

3. 对于CSS的清除浮动(clear),这个规则只能影响使用清除的元素本身,不能影响其他元素。

posted on 2017-10-23 21:54  缥缥缈  阅读(133)  评论(0编辑  收藏  举报