内联元素:
内联元素不能设置宽高,设了也无效【重点】
水平内外边距和边框都支持,垂直方向上都不太好使
display:
行内不能设置上下左右,但可以通过display来修改元素性质
block:设置元素为块元素
inline:设置元素为行内元素
inline-block:设置元素为行内块元素
none:隐藏元素(元素将在页面中完全消失)
visibility:用于元素是否可见(隐场后依旧占位)
visible:可见的
hidden:隐藏的
(注:display:none和visibility:hidden的区别,前者不占位,后者占位)
overflow:控制内容溢出情况
visible:默认值
scroll:添加滚动条
auto:根据需要添加滚动条
hidden:隐藏超出盒子的内容
文档流:文档中可现实的对象在排列时所占用的位置(类似图层最底层)
高度默认被内容撑开、宽度100%、内联占自身大小
浮动:使元素脱离原来的文本流,在父元素中浮动起来(会一直向上,直到碰到父元素边界或其他浮动元素)
行内元素浮动后自动变为块级元素,设置display:inline也不管用
浮动会使元素完全脱离文本流,不再在文档中再占用位置
浮动元素完全脱离文档流,不会撑开父元素
float:none:不浮动(为默认值)
left:向左浮动
right:向右浮动
清除浮动:清除浮动对元素的影响,即元素不会因为上方出现浮动元素改变位置
clear:left:忽略左侧浮动
right:忽略右侧浮动
both:忽略全部浮动
none:不忽略浮动,默认值
定位:
position:
static
relative
absolute
fixed
相对定位:相对于一个位置对元素进行移动
当“position:relative;”则开启了元素的相对定位
开启相对定位后可使用(top、right、bottom、left)属性
绝对定位:元素相对于html元素或离他最近 的祖先定位元素进行定位
当“position:absolute;”则开启了元素的相对定位
开启绝对定位后可使用(top、right、bottom、left)属性
会使元素完全脱离文本流
绝对定位的块元素的宽度会被其内容撑开
固定定位:元素会被锁定在屏幕的某个位置上,网页滚动时保持不动
当“position:fixed;”则开启了元素的相对定位
开启固定定位后可使用(top、right、bottom、left)属性
z-index:元素开启定位后可使用,可提升定位元素所在的层级
可指定一个整数作为参数,值越大优先级越高,显示在网页上层