超级重点:CSS精准定位(position)

一.

①CSS定位基本概念:如果说, float浮动关键在一个 “浮起来” 字上面，那么我们的position定位关键在于一个 “精准位” 上。

②CSS定位目的上，如果说，浮动的主要目的是让多个块级元素一行显示，那么定位的主要价值就是移动位置，让盒子到我们想要的"任意坐标"位置上去。

③CSS定位本质上: 不仅能像float浮动一样,可以脱离文档流束缚的情况下将元素放在你想放置的位置,还可以帮助你快速精准,。就跟高德地图精确的定位系统一样，输入"起始坐标"就可以轻松搞定。

④CSS浮动和定位的细微区别:float浮动流虽然脱离标准文档流,但还是有自己的文档流标准的,只能多元素一行显示或者分隔左右,但position定位就不一样了,他可以去任意的地方,不仅脱离的标准文档流,而且还自己开辟一个没有束缚轨道世界层级,可以任意精准定位飞翔,想去哪就去哪

⑤定位和浮动就像是在浏览器标准文档流页面上再覆盖一层新的自己的文档流白纸，自己玩自己的

⑥举例CSS定位在网页中的应用(也非常常用)

四种定位总结表:(先熟悉)

1.脱标和不脱标的区别就在于:脱标之后会不会浮起来变为块元素然后去任何地方.(因此为什么说relative不脱标,因此他不会使元素变为块元素,因此行内元素使用相对定位时,要先转为块元素先(display:block或者float浮动起来),再相对定位相对于自身盒子左上角去移动)

2.标准文档流和相对定位区别在于:共同点都是不脱离标准文档流,属性但标准文档流内的元素不能在标准文档流内随意移动(必须从左到右,从上到下一行一行来),而设置相对定位属性是可以让元素在标准文档流内随意移动(而初始位置还留着,不给其他元素进位鸠占鹊巢)

3.浮动和绝对定位和相对定位的区别?

①浮动是脱标的,去飘起来去结构父级的左右上角对齐(如果前面有文档流会被挤下去),

②相对定位不脱标,只是飘起来去结构父盒子左上角的,只是相对于自身盒子左上角去在结构父级盒子原来文档流位置开始内随意移动,相对定位和浮动会不会忽略父级盒子的padding,在父级盒子的padidng内移动**

③而绝对定位是脱标,飘起来去定位父级盒子的四个角,开始随意移动,注意绝对会忽略父级padding,直接奔去左上角.

4.一个元素只写上了=position:relative代表这个元素没啥改变的,不用怕,因为不脱离标准文档流,相对于自身盒子左上角去在结构父级盒子原来文档流位置开始内随意移动

(①如下图:全部元素写上相对定位后不移动情况下,看第三个盒子清除相对定位之后即变回标准流,是和其他三个盒子使用相对定位是一样顺序的,这说明了当使用相对定位时，其实就是和之前的标准文档流的规则时一样的,相对定位不会让元素变为块元素,只是能飘起来,但是后面元素不能进位,保持标准流的排版)
②父级元素使用相对定位的好处(相比绝对): 因为不脱标,占有位置,让页面结构不会散架,而父级元素需要在常规文档流中占据位置(通常用于保持外层盒子父级结构之间的整体性和结构不塌陷)
**相对定位缺点(相比绝对)

自学前端第十八天:CSS精准定位position相关推荐

html消除绝对定位的影响,css定位常用属性 CSS清除定位position
css中定位position有哪几个属性值? absolute,生成绝对定位的元素,相对于 static 定位以外的第一个父元素进行定位: 元素的位置通过 "left", &quo ...
跨浏览器的CSS固定定位{position:fixed}
不知道您是否留意了,浏览本站时,浏览器右下角有一个标着top的黑色直角三角形,可以点击它返回到正在浏览的网页页眉.当滚动网页时,它的位置一直没有任何改变,您感觉它怎么样?这就是通过CSS的定位属性{p ...
CSS基础——定位 (position)【学习笔记】
定位(position) 1. CSS 布局的三种机制网页布局的核心 -- 就是用 CSS 来摆放盒子位置. CSS 提供了 3 种机制来设置盒子的摆放位置,分别是普通流.浮动和定位,其中: 普通流 ...
CSS中定位position 和 transform 移动元素的比较
主要解决问题: 在使用 transform: translate(50%,50%); 平移元素后,再用 offsetLeft 和offsetTop 获取该元素距离 body 左侧距离时,无法获取经 t ...
CSS的定位 position属性的 absolute relative static fixed的区别及用法
CSS中position一般是跟盒子结合做出效果的,浮动可以实现盒子在横向上的排列,但是如何实现在盒子上重叠另一个盒子的效果呢?就需要CSS的position来实现 position属性有四个,分别有 ...
CSS 固定定位 position fixed
简单描述:固定定位是将某个元素固定在浏览器的某个确定的位置,不随滚动条的移动而变化: 注意:固定定位的位置是相对当前浏览器窗口的: 代码示例: 1.我们先在页面中输出一个标准情况下的 div ...
css粘性定位position:sticky
前言: css3中有一个很有趣的属性position:sticky,粘性属性,效果是一个吸顶效果,可以说是相对定位relative和固定定位fixed的结合:它主要用在对scroll事件的监听上:简单 ...
自学前端——day4
自学前端-day 4 CSS部分 margin 设置所有外边距属性. margin:10px 5px 15px 20px;上外边距是 10px 右外边距是 5px 下外边距是 15px 左外边距是 2 ...
前端基础入门之css定位 position
定位的简介需求分析按照我们之前所学知识,可以怎么实现呢? 应该来说不难,很容易实现 .box2 {width: 200px;height: 200px;background-color: yell ...

自学前端第十八天:CSS精准定位position

超级重点:CSS精准定位(position)

一.

①CSS定位基本概念:如果说, float浮动关键在一个 “浮起来” 字上面，那么我们的position定位关键在于一个 “精准位” 上。

⑥举例CSS定位在网页中的应用(也非常常用)

四种定位总结表:(先熟悉)

3.浮动和绝对定位和相对定位的区别?

4.一个元素只写上了=position:relative代表这个元素没啥改变的,不用怕,因为不脱离标准文档流,相对于自身盒子左上角去在结构父级盒子原来文档流位置开始内随意移动

自学前端第十八天:CSS精准定位position相关推荐

最新文章

热门文章

自学前端第十八天:CSS精准定位position

超级重点:CSS精准定位(position)

一.

①CSS定位基本概念:如果说, float浮动关键在一个 “浮起来” 字上面， 那么 我们的position定位关键在于一个 “精准位” 上。

⑥举例CSS定位在网页中的应用(也非常常用)

四种定位总结表:(先熟悉)

3.浮动和绝对定位和相对定位的区别?

4.一个元素只写上了=position:relative代表这个元素没啥改变的,不用怕,因为不脱离标准文档流,相对于自身盒子左上角去在结构父级盒子原来文档流位置开始内随意移动

自学前端第十八天:CSS精准定位position相关推荐

最新文章

热门文章

①CSS定位基本概念:如果说, float浮动关键在一个 “浮起来” 字上面，那么我们的position定位关键在于一个 “精准位” 上。