CSS基础知识之position

xiaowugui666 发布于2019-08-30 12:56 / 1686人阅读

摘要：最近在慕课网学习了网页布局基础和固定层效果，都是由声音甜美的婧享人生老师所录制，视频详细讲解了中的用法，在此把学习笔记分享给大家。

最近在慕课网学习了网页布局基础和固定层效果，都是由声音甜美的婧享人生老师所录制，视频详细讲解了CSS中position的用法，在此把学习笔记分享给大家。

CSS定位机制

标准文档流（Normal flow）

浮动定位（Floats）

绝对定位（Absolute positioning）

标准文档流

从上到下，从左到右，输出文档内容

由块级元素和行级元素组成

块级元素

从左到右撑满页面，独占一行

触碰到页面边缘时，会自动换行

常见的标签有：div、ul、li、di、dt、p

行级元素

能在同一行内显示

不会改变HTML文档结构

常见的标签有：input、span、label、strong、img

盒子模型

边框（border）

外边距（margin）

内边距（padding）

盒子中的内容（content）

盒子模型尺寸=边框+外边距+内边距+盒子中内容的尺寸

盒子3D模型

第一层：border

第二层：content + padding

第三层：background-image

第四层：background-color

第五层：margin

浮动定位

三个属性：left（左浮动）、right（右浮动）、none（不浮动）

元素会左移、或右移、直到碰到容器为止

虽然脱离了标准文档流，但情况有些特殊，详情见CSS基础知识之float

清除浮动的常用方法

clear属性，常用clear:both;（当父包含块缩成一条时无效）

同时设置width:100%（或固定宽度）+overflow:hidden;

相对定位

相对于自身原有位置进行偏移

仍处于标准文档流中

随即拥有偏移属性和z-index属性

绝对定位

建立了以包含块为基准的定位

完全脱离了标准文档流

随即拥有偏移属性和z-index属性

绝对定位-偏移参考基准

未设置偏移量时，无论是否存在已定位的祖先元素，都保持在元素初始位置

已设置偏移量时，无已定位祖先元素，以为偏移参考基准

已设置偏移量时，有已定位祖先元素，以距其最近的已定位祖先元素为偏移参考基准

绝对定位-常见问题

没有设置宽度时，元素的宽度根据内容进行调节

左右布局时，柱子层的高度，一定要大于绝对定位元素的高度

固定定位（也属于绝对定位）

位置固定，不会随滚动条变化

被他遮盖的元素，可以从其下层穿过

固定定位-偏移参考基准

未设置偏移量时，无已定位祖先元素，以浏览器窗口为基准定位

未设置偏移量时，有已定位祖先元素，以祖先元素为基准定位

已设置偏移量时，无论是否存在已定位的祖先元素，均以浏览器窗口为基准定位

欢迎来到石佳劼的博客，如有疑问，请在「原文」评论区留言，我会尽量为您解答。

GPU云服务器云服务器 position，css position属性，css 之基础篇黑客基础之DOS

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/115187.html

天坑，CSS之定位Position（六分之五）

摘要：下文称位置属性即为。注意，不会脱离文档流，具体见下面的图示。直译为修正，简单粗暴，直接相对浏览器窗口显示区域定位。 Position定位个人觉得position这个属性真的算是CSS的见面杀了。尤其是absolute，当年可是被虐的不轻。当然了，现在爱上了这个属性，谁用谁知道。 position属性 position是CSS的一个属性，地位较高，也是我们重点要说的一个属性。对应了四...

anRui 2019-08-02 10:56 评论0 收藏0
天坑，CSS之定位Position（六分之五）

摘要：下文称位置属性即为。注意，不会脱离文档流，具体见下面的图示。直译为修正，简单粗暴，直接相对浏览器窗口显示区域定位。 Position定位个人觉得position这个属性真的算是CSS的见面杀了。尤其是absolute，当年可是被虐的不轻。当然了，现在爱上了这个属性，谁用谁知道。 position属性 position是CSS的一个属性，地位较高，也是我们重点要说的一个属性。对应了四...

xuweijian 2019-08-30 15:54 评论0 收藏0
前端之CSS

摘要：不管你是滚动页面还是背景设置的元素，它都会保持在相同的位置。当滚动元素时，背景会随之滚动。目录一.css三种引用方式 1.行间式 2.内联式 3.外联式 4.三种方式的优先级二.样式与长度颜色 1.基本样式 2.长度...

raise_yang 2019-04-23 13:22 评论0 收藏0
CSS基础知识之float

摘要：前段时间写过一篇基础知识之，当时对的理解不太准确，被慕课网多名读者指出原文已修正，如有误导实在抱歉。浮动的基础知识浮动有个属性左浮动右浮动不浮动继承。浮动元素脱离了标准文档流，文字和行级元素会环绕该元素，块级元素则不受影响。前段时间写过一篇CSS基础知识之position，当时对float的理解不太准确，被慕课网多名读者指出（原文已修正，如有误导实在抱歉）。现对float进行更深入的...

wuyangchun 2019-08-30 13:06 评论0 收藏0