首页 > 其他分享 >css布局溢出 overflow

css布局溢出 overflow

时间:2022-09-26 18:55:53浏览次数:46  
标签:滚动条 添加 内容 css overflow 剪裁 溢出

overflow 属性指定在元素的内容太大而无法放入指定区域时是剪裁内容还是添加滚动条。

overflow 属性可设置以下值:

  • visible - 默认。溢出没有被剪裁。内容在元素框外渲染(内容仍然会显示,但是会在边框外显示)

  • hidden - 溢出被剪裁,其余内容将不可见

    溢出部分会被裁剪掉,看不到。

  • scroll - 溢出被剪裁,同时添加滚动条以查看其余内容   在规定的边框范围内滚轮显示全部内容
  • auto - 与 scroll 类似,但仅在必要时添加滚动条

    不如,若加一个垂直滚定条能解决的,就不会添加水平滚动条。

注释:overflow 属性仅适用于具有指定高度的块元素。

      • overflow-x 指定如何处理内容的左/右边缘。 overflow-x:hidden;  //隐藏水平滚动栏 overflow-y:scroll;    //添加垂直滚动条  
  • overflow-y 指定如何处理内容的上/下边缘。

标签:滚动条,添加,内容,css,overflow,剪裁,溢出
From: https://www.cnblogs.com/sunkai6815618/p/16731943.html

相关文章

  • Webpack之抽离压缩css
    使用 mini-css-extract-plugin插件的内置loader替换style-loader使用 terser-webpack-plugin插件压缩js代码使用 optimize-css-assets-webpack-plugin插件压缩cs......
  • Blazor中CSS隔离无法用在Masa Blazor组件上
    最近新学了Blazor,使用了MasaBlazor。Blazor的CSS隔离是个很好的东西,如图,只需添加一个与Razor组件同名的CSS文件,这个文件中的CSS样式只会在同名的Razor组件中使用。原理......
  • css 外边距塌陷问题
    两个块级元素嵌套,如果里面的元素没有设置border属性,在内层的元素使用margin时会把父元素节点也会跟着移动,故外边距塌陷问题,解决方法,可以给父元素添加border,或者给......
  • 博客园背景css代码
    #google_ad_c1, #google_ad_c2 {display:none;}.syntaxhighlighter a, .syntaxhighlighter div, .syntaxhighlighter code, .syntaxhighlighter table, .synta......
  • 为什么开发人员不喜欢 CSS?
    为什么开发人员不喜欢CSS?PeterGriffin—AmericanDad对我来说,写我的第一篇关于这个流行短语的Web集成文章似乎很明显:“我不喜欢CSS”谁以前没有听过或说过这......
  • css 清除浮动的方式
    <!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metahttp-equiv="X-UA-Compatible"content="IE=edge"><metaname="viewport"conten......
  • css实现tooltip效果
      <!--html代码--><divclass="wrap"><h1>TOOLTIP提示</h1><p>鼠标移动到<spanclass="tooltip"tooltip-data="提示框内容">这里</span>查......
  • 每个网页设计师都应该知道的 CSS 技巧
    每个网页设计师都应该知道的CSS技巧1.字体速记像往常一样,我们将字体样式编写如下字体粗细:粗体;字体样式:斜体;字体变体:小型大写;字体大小:1em;行高:1.5em;......
  • 从 CSS 开始
    从CSS开始了解如何让您的网页充满活力。**什么是CSS?**通过它的翻译,它是级联样式表;换句话说,您可以设置html标签的样式。例如,CSS允许您编辑关于标签的太多内容;更......
  • 一些最流行的 CSS 文本动画
    一些最流行的CSS文本动画让我们向您展示这些流行的CSS文本动画是如何工作的什么是动画?动画是一种按顺序创建动作的方法。什么是CSS动画?CSS动画用于动画从一种......