推广 热搜: WEB前端教程  雅思培训班  雅思培训 

WEB前端教程:CSS浮动定位

   日期:2019-04-22     浏览:965    
核心提示:1.定义定义元素框相对于其正常位置应该出现的位置2.分类普通流定位浮动定位相对定位绝对定位固定定位浮动定位指将元素排除在普通

1.定义

定义元素框相对于其正常位置应该出现的位置

2.分类

普通流定位

浮动定位

相对定位

绝对定位

固定定位

浮动定位指

将元素排除在普通流之外

元素将不在页面中占据空间

将浮动元素放置在包含框的左边或者右边

浮动元素依旧位于包含框之内

浮动的框可以向左或者向右移动,直到他的外边缘碰到包含框或另一个浮动框的边框为止


浮动元素的外边缘不会超过其父元素的内边缘

浮动元素不会互相重叠

浮动元素不会上下浮动

行内元素浮动后会变为块级元素

语法:float:none/left/right;


CSS 清除浮动:

描述:清除浮动是在使用了浮动之后必不可少的,为了网站布局的效果,清除浮动也变得非常麻烦。

属性:clear

值:left、right、both

清除浮动的常用方式:

1.结尾处加空div标签 clear:both (或在下一个元素上加clear:both;)

2.浮动元素的父级div定义 伪元素::after

3.浮动元素的父级div定义 overflow:hidden

4.浮动元素的父元素定高

display属性

根据CSS规范的规定,每一个网页元素都有一个display属性,用于确定该元素的类型,每一个元素都有默认的display属性值,比如div元素,它的默认display属性值为“block”,称为块元素,而span元素的默认display属性值为“inline”,称为“行内”元素。

块元素与行元素是可以转换的,也就是说display的属性值可以由我们来改变 。

display常见属性值

1. none:隐藏对象

2. inline:指定对象为内联元素

3. block:指定对象为块元素

4. inline-block:指定对象为内联块元素

5. table-cell:指定对象作为表格单元格

6. flex:弹性盒

visibility:hidden和display:none和opacity:0的区别:

1.visibility:hidden和opacity:0会将元素隐藏,但是物理空间实际存在2.display:none 影藏元素,不保留物理空间

网页中大部分对象默认是占用文档流,也有一些对象是不占文档流的,比如表单中隐藏域。当然我们也可以让占用文档流的元素转换成不占文档流,这就要用到CSS中属性position、float、display来控制。默认情况下,所有元素都处在文档流中,四种情况将使得元素离开文档流:浮动float、绝对定位absolute、固定定位fixed、元素不显示display:none,这种情况不占文档流的空间,而普通元素的位置基于文档流。

z-index堆叠顺序

一旦修改了元素的定位方式,则元素可能会发生堆叠

可以使用z-index属性来控制元素框出现的重叠顺序

z-index仅能在定位的元素上生效

z-index属性:

值为数值,数值越大表示堆叠顺序越高,即离用户越近

可以设置为负值,表示离用户更远 ,一般不要设置

Z-index 仅能在定位元素上奏效


 
标签: WEB前端教程
打赏
 
更多>同类资讯

推荐图文
推荐资讯
点击排行
网站首页  |  关于我们  |  联系方式  |  使用协议  |  版权隐私  |  网站地图  |  排名推广  |  广告服务  |  网站留言  |  RSS订阅  |  违规举报  |  粤ICP备19057289号-9