HTML与CSS中的定位个人分享

sihai 发布于2019-08-02 16:31 / 1857人阅读

摘要：定位默认值几乎不用了解就可以绝对定位不为元素预留空间脱离文档流如果当前元素的父级元素是元素的话是相对于当前页面的定位如果当前元素的父级不是元素的话父级元素没有开启定位则是相对于页面的定位如果当前元素的父级不是元素的话父级元素开启定位

定位

static - 默认值 (几乎不用,了解就可以)

absolute - 绝对定位,不为元素预留空间,脱离文档流:

如果当前元素的父级元素是元素的话 -> 是相对于当前页面的定位

如果当前元素的父级不是元素的话,父级元素没有开启定位 -> 则是相对于页面的定位

如果当前元素的父级不是元素的话,父级元素开启定位 -> 则是相对于父级元素定位

fixed - 固定定位,不为元素预留空间:

是相对于窗口来定位元素位置,脱离文档流

relative - 相对定位,不脱离文档流

相对定位是相对于自身元素原来的位置的定位

定位的方式解析图:

堆叠

z-index属性值大的在上方,小的在下方,就是所z-index属性值大的覆盖小的

堆叠分析图:

继承于层叠 继承

继承就是父级元素的属性,子级元素使用可以不用设置直接使用

注意: CSS属性中不是所用属性都可以继承

CSS的样式属性:

可继承的属性 - 指定元素的样式,同时作用其后代元素

不可继承的属性 - 只能作用在指定的元素

备注: 继承中有一个inherit值 - 就是是继承于祖先元素属性的意思,当子级元素的属性设置inherit值时代表继承父级元素使用的属性值.

一花一世界,一叶一孤城

继承于层叠分析图

层叠

就是选择器的优先级别,当为某个选择器设置 !important 时该选择器优先级别最大

注意: 为某个选择器设置!important时会打乱原本选择器的优先级别的规则可能会影响整个页面布局,所以能不用就不用,知道有这个东西就行

GPU云服务器云服务器 css与html html与css html与css区别 css与html的区别

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

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

HTML与CSS中的定位个人分享

摘要：定位默认值几乎不用了解就可以绝对定位不为元素预留空间脱离文档流如果当前元素的父级元素是元素的话是相对于当前页面的定位如果当前元素的父级不是元素的话父级元素没有开启定位则是相对于页面的定位如果当前元素的父级不是元素的话父级元素开启定位定位 static - 默认值 (几乎不用,了解就可以) absolute - 绝对定位,不为元素预留空间,脱离文档流: 如果当前元素的父级元素是元素...

SillyMonkey 2019-08-29 16:30 评论0 收藏0
HTML与CSS中的,链接与图像个人分享

摘要：链接与图像链接元素元素表示链接元素作用从当前页面跳转到指定页面属性设置指定跳转页面的路径路径分类相对路径相对于当前页面的路径绝对路径访问的路径地址不变化示例代码相对路径的链接文本阴影案例他是链接绝对路径的链接他也链接与图像链接元素 < a >元素 - 表示链接元素作用 - 从当前html页面跳转到指定html页面属性 href - 设置指定跳转html页面的路径 ...

cocopeak 2019-08-29 16:34 评论0 收藏0
HTML与CSS中的,链接与图像个人分享

摘要：链接与图像链接元素元素表示链接元素作用从当前页面跳转到指定页面属性设置指定跳转页面的路径路径分类相对路径相对于当前页面的路径绝对路径访问的路径地址不变化示例代码相对路径的链接文本阴影案例他是链接绝对路径的链接他也链接与图像链接元素 < a >元素 - 表示链接元素作用 - 从当前html页面跳转到指定html页面属性 href - 设置指定跳转html页面的路径 ...

elisa.yang 2019-08-02 11:21 评论0 收藏0
css基础系列

摘要：盒子模型边框，外边距，内部距，内容，宽度。盒子模型和标准盒子模型行内块元素，元素呈现为具有相依特性元素不会被显示。文字基线属性设置元素中文本行高语法长度值百分比浏览器有默认的行高，不同浏览器默认行高不一样。盒子模型： border边框，margin外边距，padding内部距，content内容，width宽度。高度： height: 长度值|百分比|auto 最大高度: m...

SexySix 2019-04-22 16:12 评论0 收藏0
css基础系列

摘要：盒子模型和标准盒子模型行内块元素，元素呈现为具有相依特性元素不会被显示。文字基线属性设置元素中文本行高语法长度值百分比浏览器有默认的行高，不同浏览器默认行高不一样。盒子模型盒子模型的概念高和宽的设置边框的设置内边距的设置外边距的设置盒子的计算元素显示的方式盒子模型： border边框，margin外边距，padding内部距，content内容，width宽度。 ...

shiina 2019-04-23 11:40 评论0 收藏0