css的定位机制

css中的定位机制有3中,分别是标准文档流、浮动定位和绝对定位

1.标准文档流(Normal flow)
(1)对于行级元素,比如span,strong(字体加粗),img,input等,都是按照从左到右的方式进行排版;

(2)对于块级元素,比如div,ul,li,di,dt,p等,都是按照从上往下的方式进行排版;

(3)盒子模型:边框(border),外边框(margin),内边距(padding);

(4)盒子3D模型:由顶到底为border,content+padding(内容+内边距),background-image,background-color,margin;

注意:margin的属性,三个值:第一个值表示top,第二个值表示left和right,第三个值表示bottom;

   两个值:第一个值表示top和bottom,第二个值表示left和right;

   一个值:表示四个方向属性值相同。

2.浮动定位(Float)

float有两个属性值,left表示向左浮动,right表示向右浮动,一般设为float属性,会影响紧随其后的元素的位置以及父包含块的位置,以此必须要有清除浮动的措施。

清除浮动措施:(1)clear属性——常用clear:both; 或clear:left; 或clear:right;

    (2)width:100%(或固定宽度)+overflow:hidden(两个要同时写才起作用)

3.绝对定位(Absolute positioning)

position的4个定位属性值有:静态定位static(默认状态,处于标准文档流中),相对定位relative,绝对定位absolute,固定定位fixed。

(1)相对定位relative:相对于自身原有位置进行偏移,仍处于标准文档流中,想要设置相对偏移基准,则将父级元素设为相对定位。

(2)绝对定位absolute:建立了以包含块为基准的定位,完全脱离了标准文档流,如果没有已经定义的祖先元素,则以<html>为偏移参照基准,有已定位祖先元素,以距其最近           的元素为参照基准。

(3)固定定位fixed:若要元素固定不动,不随着鼠标的上下滑动或左右滑动而移动,则设为fixed属性。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 14,696评论 1 92
  • 浮动 CSS允许浮动任何元素。 浮动元素 首先,会以某种方式将浮动元素从文档的正常流中删除,不过它还是会影响布局。...
    exialym阅读 4,993评论 0 6
  • 学习CSS的最佳网站没有之一 http://www.w3school.com.cn/tags/index.asp ...
    Amyyy_阅读 4,744评论 0 1
  • 目录 内容 一. 我对标签、元素、盒子的理解 相信很多人和我之前一样,对于web的许多概念也都知道是什么意思,大家...
    科研者阅读 4,030评论 2 2
  • 普通 UI 设计师与顶级 UI 设计师的区别是什么? - 用户界面设计 - 知乎 【UI启蒙课】UI交互手册 知乎...
    靖兰亭阅读 3,276评论 0 51

友情链接更多精彩内容