码迷,mamicode.com
首页 > Web开发 > 详细

关于清除浮动、css定位的学习

时间:2017-10-23 19:24:35      阅读:238      评论:0      收藏:0      [点我收藏+]

标签:mes   自己   现象   根据   lang   应用   span   z-index   状态   

浮动及清除浮动

浮动最初的目的:实现文字环绕;

浮动具有破坏性,会破坏父元素高度(类似的还有:display:none;position:absolute/fixed/sticky)

浮动适合流体布局:

 

.mib_head_a { width: 56px; float: left; }  

/* 下面这个是固定布局写法 */

.mib_feed_fixed { width: 484px; float: right; }

/* 下面这个是流体布局写法 */

.mib_feed_flow { margin-left: 76px; }

 

css清除浮动的属性:clear属性   

属性:left(清除左侧浮动元素)

      right(清除右侧浮动元素)

      both(清除两侧浮动元素)

      none(不清除浮动元素)

clear通常的应用形式:

1)HTML block水平元素底部

-<div> </div>

2)CSS after伪元素底部生产

-.clearfix:after{}

【应用在包含浮动子元素的父元素上】

浮动清除:BFC/haslayout

 

 

 

 

CSS定位(与float属性协同作用)

Position 中文意为位置,css定位的核心属性(CSS-P)

Position属性取值:

   static(静态)

   absolute(绝对)

   relative(相对)

   fixed(固定)

 

静态定位(static)

默认状态下元素确定自身位置,无法通过坐标值(up、bottom、left、righ)来改变其位置。

 

绝对定位(absolute)

将元素拖出文档流,根据某个参照物坐标来定位其位置。绝对定位可结合坐标值(up、bottom、left、righ)进行精确定位,结合z-index属性排列元素的覆盖顺序,结合clip和visiblity属性裁切、显示或隐藏元素对象或部分区域。

Ps:clip 用来设置元素形状(如裁剪图片),语法举例

         object.style.clip:rect(top,right,bottom,left);

   visiblity规定元素是否可见,语法举例

         object.style.visiblity=“hidden”;

 

相对定位(relative)

使元素在不脱离文档流,却能通过坐标值以原始位置为参照物今夕偏移。

相对定位元素虽然偏移了原始位置,但其原始位置所占据的空间任然保留。

相对定位元素遇见文档流对象,他就会覆盖文档流中的对象。并且,相对元素间也会存在覆盖现象。

 

 

固定定位(fixed)

定位的一种特殊形式,以浏览器的窗口为参照物来定义网页元素。元素若以固定显示,则不受文档流影响,不受包含块位置的影响,始终以浏览器窗口来定位自己的显示位置。(网页中那些烦人的、关不掉的小广告0.0)

 

 

定位参照(参照物和坐标值)

 

不仅是浏览器,所有被定义了相对定位、绝对定位的元素都可以作为CSS定位参照物来确定其坐标。

Sometimes,我们把具备CSS定位参照物的元素称为包含块。

 

关于清除浮动、css定位的学习

标签:mes   自己   现象   根据   lang   应用   span   z-index   状态   

原文地址:http://www.cnblogs.com/hejianing/p/7718432.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!