CSS知识点整理

1、定位有哪几种,有什么区别?

    a)static定位(普通流定位),元素的默认定位方法。此时 top, right, bottom, left 和 z-index 属性无效。

    b)float定位(浮动定位),取值为:left or right。float样式规则的元素是脱离文档流的,它的父元素的高度并不能有它撑开。因此若想要撑开父级元素,需要清除浮动。清除浮动的方法:

        1)如果父级元素高度固定且已知,直接为父级元素设置高度即可。

        2)在浮动元素后面多加一行代码,并添加css属性,clear:both 清除浮动。(会造成代码冗余)

        3)为父元素设置属性overflow:hidden。(如果不想让子元素溢出隐藏,此方案不可行)

        4):after。直接为父级元素添加:after属性,eg:

                .parent:after{

                        content: ' ';

                        display: block;

                        claer: both;

                 }

    c)relative定位(相对定位)。position:relative; 定位元素本身没有脱离文档流,相对于其正常位置进行定位,可以设置z-index。

    d)absolute定位(绝对定位)。position:absolute; 定位元素本身脱离文档流,相对于其最近已定位的父元素。绝对定位的元素可以设置外边距(margins),且不会与其他边距合并。绝对定位元素的定位值发生冲突时的解决方法 如果同时指定 top 和 bottom(非 auto),优先采用 top。 如果同时指定 left 和 right,若 direction 为 ltr(英语、汉语等),则优先采用 left;若 direction 为 rtl(阿拉伯语、希伯来语等),则优先采用 right。

    e)fixed(固定定位)。position:fixed;定位元素本身脱离文档流,相对于浏览器窗口进行定位。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 13,842评论 1 92
  • 学会使用CSS选择器熟记CSS样式和外观属性熟练掌握CSS各种选择器熟练掌握CSS各种选择器熟练掌握CSS三种显示...
    七彩小鹿阅读 6,357评论 2 66
  • 1. 前言 前端圈有个“梗”:在面试时,问个css的position属性能刷掉一半人,其中不乏工作四五年的同学。在...
    YjWorld阅读 4,598评论 5 15
  • 1.CSS基本概念 1.1 CSS的定义 CSS(Cascading Style Sheets)层叠样式表,主要用...
    寥寥十一阅读 1,900评论 0 6
  • 近期因为工作需要,开始学习和写爬虫,学习到了很多内容,就整理了一下发上来。 需求 这里爬虫的目的是检测网站的漏洞,...
    M954阅读 2,243评论 0 3