构建静态页面之 [ 定位 ]

ISherry 发布于2019-08-02 16:31 / 2391人阅读

摘要：定位属性表示设置定位绝对定位固定定位相对定位绝对定位表示设置绝对定位绝对定位的注意设置绝对定位后，当前元素脱离文档流如果指定元素的父级元素是元素该元素就是相对于当前页面的定位如果指定元素的父级元素不是元素，父级元素没有开启定位该元素就

定位 position属性

表示设置定位

绝对定位

固定定位

相对定位

绝对定位

position : absolute - 表示设置绝对定位

绝对定位的注意

设置绝对定位后，当前元素脱离文档流

如果指定元素的父级元素是元素 - 该元素就是相对于当前页面的定位

如果指定元素的父级元素不是元素，父级元素没有开启定位 - 该元素就是相对于当前页面的定位

如果指定元素的父级元素不是元素，父级元素开启定位 - 该元素就是相对于父级元素的定位


    
    绝对定位

固定定位

position: fixed - 表示设置固定定位

设置固定定位的元素会脱离文档流

固定定位是相对于浏览器显示窗口定位显示位置

设置固定定位的元素，不会跟着页面滚动而滚动


    
    固定定位

相对定位

position: relative - 表示设置相对定位

设置相对定位的元素不会脱离文档流

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


    
    相对定位

堆叠

表示元素之间出现的重叠效果

z-index属性 - 表示设置堆叠的显示

z-index属性只能出现在开启定位的元素中

z-index属性值大的覆盖z-index属性值小

z-index属性的属性值为数字值


    
    堆叠

继承

表示CSS的样式属性可以作用在指定元素的后代元素上

CSS的样式属性分为

可继承的属性 - 表示指定元素的样式可以作用在其所有的后代元素上

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

inherit - 表示可以选择是否为继承属性

继承

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam, architecto asperiores aspernatur, beatae dolor esse excepturi fuga iusto labore mollitia odit quae quisquam rem repellat sit unde velit? Magnam, rem!

云服务器 GPU云服务器定位页面 jsp 设置页面之 php定位页面位置静态页面

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

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

构建静态页面之 [ 定位 ]

摘要：定位属性表示设置定位绝对定位固定定位相对定位绝对定位表示设置绝对定位绝对定位的注意设置绝对定位后，当前元素脱离文档流如果指定元素的父级元素是元素该元素就是相对于当前页面的定位如果指定元素的父级元素不是元素，父级元素没有开启定位该元素就定位 position属性表示设置定位绝对定位固定定位相对定位绝对定位 position : absolute - 表示设置绝对定位...

bingchen 2019-08-29 16:31 评论0 收藏0
构建静态页面之 [ 浮动 ]

摘要：浮动描述是对页面布局的一种表现方式设置浮动的元素会脱离文档流设置浮动的元素会改变后面元素的显示位置属性表示设置元素浮动属性值表示设置元素左浮动属性值表示设置元素右浮动设置浮动的元素会脱离文档流，指定元素后面的元素会自动向前，形成重叠的显浮动描述是对页面布局的一种表现方式设置浮动的元素会脱离文档流设置浮动的元素会改变后面元素的显示位置 float属性表示设置元素浮动 ...

snowell 2019-08-29 16:32 评论0 收藏0
构建静态页面之 [ 浮动 ]

摘要：浮动描述是对页面布局的一种表现方式设置浮动的元素会脱离文档流设置浮动的元素会改变后面元素的显示位置属性表示设置元素浮动属性值表示设置元素左浮动属性值表示设置元素右浮动设置浮动的元素会脱离文档流，指定元素后面的元素会自动向前，形成重叠的显浮动描述是对页面布局的一种表现方式设置浮动的元素会脱离文档流设置浮动的元素会改变后面元素的显示位置 float属性表示设置元素浮动 ...

Scliang 2019-08-02 11:21 评论0 收藏0
构建静态页面之 [ 布局 ]

摘要：布局描述表示对页面中的显示效果进行一些排列水平方向居中垂直方向居中居中布局水平方向居中第一种方式水平居中行内块级元素水平居中的第一种方法该方法需作用在父子结构中为父级设置属性为子级设置属性注意的问题属性是设置文本内容对齐方式的布局描述表示对页面中的显示效果进行一些排列水平方向居中垂直方向居中居中布局水平方向居中第一种方式水平居中 + 行内块级元素（text-a...

andot 2019-08-29 16:31 评论0 收藏0
构建静态页面之 [ 布局 ]

摘要：布局描述表示对页面中的显示效果进行一些排列水平方向居中垂直方向居中居中布局水平方向居中第一种方式水平居中行内块级元素水平居中的第一种方法该方法需作用在父子结构中为父级设置属性为子级设置属性注意的问题属性是设置文本内容对齐方式的布局描述表示对页面中的显示效果进行一些排列水平方向居中垂直方向居中居中布局水平方向居中第一种方式水平居中 + 行内块级元素（text-a...

JessYanCoding 2019-08-02 16:31 评论0 收藏0