码迷,mamicode.com
首页 > 其他好文 > 详细

position和display的取值和用法

时间:2019-09-10 18:03:17      阅读:260      评论:0      收藏:0      [点我收藏+]

标签:ini   bottom   padding   pad   nbsp   hid   常用   initial   元素   

position设置对象的定位方式,可以让布局层容易位置绝对定位,控制盒子对象更加准确

position的值和作用:

position的所有值:static(默认)、relative、absolute、fixed、inherit、(initial、unset、sticky) 

1.static:始终处于文档流给予的位置,可以快速取消定位,让top,right,bottom,left的值失效

2.relative:绝对定位,定位原点relative是相对于它在正常流中的默认位置偏移,它原本占据的空间任然保留

3.absolute:脱离了正常文档流,不占据空间位置,不会将父类撑开。其父类的该属性值要注意,而且overflow:hidden也不能乱设置,因为不属于正常文档流,不会占据父类的高度,也就不会有滚动条

4.fixed: 旧版本IE不支持,定位原点相对于浏览器窗口,而且不能变。常用于header,footer,或者一些固定的悬浮div,随滚动条滚动又稳定又流畅,比JS好多了

5.inherit:规定从父类继承position属性的值。但是任何版本的IE都不支持该属性值

6.(①initial 关键字用于设置 CSS 属性为它的默认值,可作用于任何 CSS 样式;②unset 关键字我们可以简单理解为不设置。其实,它是关键字 initial 和 inherit 的组合,如果某属性是默认继承属性,该值等同于 inherit,否则等同于initial;③sticky元素效果完全受制于父级元素们,它是关键字relativeposition:fixed的结合体,当元素在屏幕内,表现为relative,就要滚出显示器屏幕的时候,表现为fixed)

 

display属性规定元素应该生成的框的类型。文档内任何元素都是框,块框或行内框

display的值和作用:

display属性取值:none、inline、inline-block、block、flex、inherit

1.none:hidden可以隐藏div,不占据文档空间

2.visiability:hidden可以隐藏div,占据文档控件

3.display:inline和block,又叫行内元素和块级元素。表现出来的区别就是block独占一行,在浏览器中通常垂直布局,可以用margin来控制块级元素之间的间距;而inline以水平方式布局,垂直方向的margin和padding都是无效的,大小跟内容一样,且无法设置宽高。inline就像塑料袋,内容怎么样,就长得怎么样;block就像盒子,有固定的宽和高。

4.inline-block就介于两者之间

5.flex:弹性盒布局模型,设为Flex布局以后,子元素的float、clear和vertical-align属性将失效

position和display的取值和用法

标签:ini   bottom   padding   pad   nbsp   hid   常用   initial   元素   

原文地址:https://www.cnblogs.com/start-from-today/p/11498667.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!