摘要:最近在慕课网学习了网页布局基础和固定层效果,都是由声音甜美的婧享人生老师所录制,视频详细讲解了中的用法,在此把学习笔记分享给大家。
最近在慕课网学习了 网页布局基础 和 固定层效果 ,都是由声音甜美的 婧享人生 老师所录制,视频详细讲解了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属性
绝对定位-偏移参考基准未设置偏移量时,无论是否存在已定位的祖先元素,都保持在元素初始位置
已设置偏移量时,无已定位祖先元素,以为偏移参考基准
已设置偏移量时,有已定位祖先元素,以距其最近的已定位祖先元素为偏移参考基准
绝对定位-常见问题没有设置宽度时,元素的宽度根据内容进行调节
左右布局时,柱子层的高度,一定要大于绝对定位元素的高度
固定定位(也属于绝对定位)位置固定,不会随滚动条变化
被他遮盖的元素,可以从其下层穿过
固定定位-偏移参考基准未设置偏移量时,无已定位祖先元素,以浏览器窗口为基准定位
未设置偏移量时,有已定位祖先元素,以祖先元素为基准定位
已设置偏移量时,无论是否存在已定位的祖先元素,均以浏览器窗口为基准定位
欢迎来到 石佳劼的博客,如有疑问,请在「原文」评论区 留言,我会尽量为您解答。
文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。
转载请注明本文地址:https://www.ucloud.cn/yun/115187.html
摘要:下文称位置属性即为。注意,不会脱离文档流,具体见下面的图示。直译为修正,简单粗暴,直接相对浏览器窗口显示区域定位。 Position定位 个人觉得position这个属性真的算是CSS的见面杀了。尤其是absolute,当年可是被虐的不轻。当然了,现在爱上了这个属性,谁用谁知道。 position属性 position是CSS的一个属性,地位较高,也是我们重点要说的一个属性。 对应了四...
摘要:下文称位置属性即为。注意,不会脱离文档流,具体见下面的图示。直译为修正,简单粗暴,直接相对浏览器窗口显示区域定位。 Position定位 个人觉得position这个属性真的算是CSS的见面杀了。尤其是absolute,当年可是被虐的不轻。当然了,现在爱上了这个属性,谁用谁知道。 position属性 position是CSS的一个属性,地位较高,也是我们重点要说的一个属性。 对应了四...
摘要:不管你是滚动页面还是背景设置的元素,它都会保持在相同的位置。当滚动元素时,背景会随之滚动。目录 一.css三种引用方式 1.行间式 2.内联式 3.外联式 4.三种方式的优先级 二.样式与长度颜色 1.基本样式 2.长度...
摘要:前段时间写过一篇基础知识之,当时对的理解不太准确,被慕课网多名读者指出原文已修正,如有误导实在抱歉。浮动的基础知识浮动有个属性左浮动右浮动不浮动继承。浮动元素脱离了标准文档流,文字和行级元素会环绕该元素,块级元素则不受影响。 前段时间写过一篇CSS基础知识之position,当时对float的理解不太准确,被慕课网多名读者指出(原文已修正,如有误导实在抱歉)。现对float进行更深入的...
阅读 1824·2021-11-25 09:43
阅读 2111·2021-11-19 09:40
阅读 3347·2021-11-18 13:12
阅读 1706·2021-09-29 09:35
阅读 600·2021-08-24 10:00
阅读 2464·2019-08-30 15:55
阅读 1679·2019-08-30 12:56
阅读 1756·2019-08-28 17:59