CSS定位和浮动

文档流的概念指什么?有哪种方式可以让元素脱离文档流?

  • 将窗体自上而下分成一行行, 并在每行中按从左至右的顺序排放元素,即为文档流.
  • 浮动,绝对定位,固定定位可以让元素脱离文档流.

有几种定位方式,分别是如何实现定位的,使用场景如何?

  • position:relative相对定位:相对于其正常位置进行定位。在使用相对定位时,无论是否进行移动,元素仍然占据原来的空间。因此,移动元素会导致它覆盖其它元素。
    参考点为元素原来位置
  • position:absolute绝对定位:相对于static(默认值,没有定位)以外的第一个父元素进行定位。根据定位点的padding偏移
    参考点为第一个父元素
  • position:fixed固定定位:相对于浏览器窗口进行定位。
    参考点为浏览器窗口
    定位为元素border外边到父容器border的内边.

z-index 有什么作用? 如何使用?

z-index用来控制层叠元素的显示优先级,值越大优先级越高。

position:relative和margin都可以使元素位置发生偏移?二者有什么区别。

  • position:relative其文档流的位置没有发生改变,其他元素的位置也不会相应的发生偏移
  • margin进行位置偏移的时候会影响跟他相近的元素也发生偏移

如何让一个固定宽高的元素在页面上垂直水平居中?

页面居中.png

浮动元素有什么特征?对其他浮动元素、普通元素、文字分别有什么影响?

浮动使元素脱离文档流

  • 对其他浮动元素:同级的非浮动元素会跟随其后
  • 对普通元素:会占据浮动元素的位置
  • 对文字:文字会环绕浮动元素

清除浮动指什么? 如何清除浮动?

清除浮动是指对浮动元素所产生的影响其他元素的浮动效果予以清除

  • 对于同级元素可添加clear : left | right |both清除
  • 对于父元素同级元素的影响可通过伪类元素after来实现
      .father:after{
        display: block;
        content: "";
        clear:both;
      }
      .father{
       *zoom: 1; /* for ie 6,7*/
      }
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 14,683评论 1 92
  • 浮动 CSS允许浮动任何元素。 浮动元素 首先,会以某种方式将浮动元素从文档的正常流中删除,不过它还是会影响布局。...
    exialym阅读 4,974评论 0 6
  • 一、文档流的概念指什么?有哪些方式可以让元素脱离文档流? 文档里指元素在文档中的位置由元素在html里的位置决定,...
    dengpan阅读 3,526评论 0 3
  • 一,浮动元素有什么特征?对父容器、其他浮动元素、普通元素、文字分别有什么影响? 浮动模型是一种可视化格式模型,浮动...
    DeeJay_Y阅读 4,388评论 0 4
  • 浮动元素的特征及影响 特征: 浮动模型也是一种可视化格式模型,浮动的框可以左右移动(根据float属性值而定),直...
    Joey的企鹅阅读 4,396评论 0 0