跳到主要内容

补充样式

overflow

  • 当子元素大小超过父元素内容区时,子元素会从父元素中溢出(overflow),在css通过overflow这个样式,来处理溢出内容
  • 设置元素如何处理溢出内容
  • 可选值
    • visible 默认值 溢出内容直接在元素以外的位置显示
    • hidden 隐藏溢出的内容
    • scroll 生成双方向滚动条,通过滚动条来查看完整内容
    • auto 根据需要生成滚动

display

  • 用来设置元素的类型
  • 可选值:
    • inline 将元素设置为行内元素
    • block 将元素设置为块元素
    • inline-block 行内块元素
      • 行内块兼具行内元素和块元素的特点
      • 不独占一行,又可以设置宽高
      • 注意:行内块的特点和文本很像,所以布局时少用
    • none隐藏元素

visibility

  • 用来设置一个元素的可见性
  • 可选值:
    • visible 默认值 元素可见
    • hidden 元素是隐藏的在页面中不可见,但是依然占据页面的位置

其他

  • outline 轮廓线
    • 和边框非常像,但是outline不会影响到元素可见框的大小
  • border-radius 圆角
  • box-shadow 可以用来为元素指定阴影
    • 取值:
      • box-shadow: x轴偏移量 y轴偏移量 模糊半径 扩散半径 阴影颜色
      • 可以设置一个inset来表示内部阴影