css 布局技巧

声明

圆角边距、盒子阴影、文字阴影见《css-网络布局》

显示隐藏

• display
  • 设置如何显示
  • display:none隐藏元素=》看不见+不再占有原位置
  • display:block=》显示元素，模式转换为block
• visibility
  • visibility:visible=》元素可视
  • visibility:hidden=》看不见+继续占有原位置
• overflow
  • 对溢出部分显示隐藏
  • overflow:hidden=》溢出部分隐藏
  • overflow:visible=》显示溢出（默认属性值）
  • overflow:scroll=》始终显示滚动条
  • overflow:auto=》溢出则显示滚动条。 如：一栏标签导航栏 在不同款的屏幕上溢出情况不同（当然也可选择flex布局）
  • • 一般情况隐藏
  • 定位的情况下慎用hidden（可能定位就是为了超出部分）

注意（小技巧）

有遮盖的：先考虑底层，再考虑盖子

经过盒子A让里面的B显示：

A:hover B{

​	display:block;

}

实例

overflow:auto属性

.tabs-switch-page{
    display: flex;
    align-items:center;
    height: 80px;
    background-color:#fff;
    overflow:hidden;
  }

.tabs-switch-page{
    display: flex;
    align-items:center;
    height: 80px;
    background-color:#fff;
    overflow:hidden;
  }