页面布局display

Posted 2021-12-12 dumenglong

静态页面布局其实就是大区域包小区域，大色块包着小的色块，最后我们再添加内容

通常可以用display来规定页面的展示

1、display可以设置标签的特性：block块标签  inline-block行内块 inline行内标签

blcok标签常见的有div、p、h1-h6、ul、li 这些标签都独占一行，不和其他元素待在同一行

2、inline-block行内块标签 常见的有img、input 可以设置宽高和大小

3、inline行内标签 常见的有a、font、br、span 对其设置宽度和高度是无效的

4、显示隐藏的四种方式

display：none 隐藏 本身位置没了

visibility：hidden 隐藏 本身位置还有

宽度设为0

高度设为0 

5、定位

 

position定位 通常与top、buttom、left、right

fixed 绝对定位 根据窗口定位 本身的位置没了

relative 相对自身定位 本身位置还有 主要用于微调   限制子元素的position
绝对定位

absolute 绝对定位 根据body定位 本身位置没了 相对窗口定位 根据最近的有position属性的父标签
最上层是body