css overflow用法

最新推荐文章于 2024-03-21 22:47:30 发布
最新推荐文章于 2024-03-21 22:47:30 发布
阅读量97 收藏
点赞数
原文链接：http://www.cnblogs.com/knuzy/p/9470754.html
版权

1. overflow-y: auto

侧边栏滚动效果：overflow-y:auto

 2. overflow-y: scroll

如果使用overflow:scroll的话，滚动条就一直都在，页面不美观，最好设置成auto，在需要的时候才出现滚动条。

3. overflow-y: hidden

页面无法滚动

转载于:https://www.cnblogs.com/knuzy/p/9470754.html

weixin_30681615
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
浅谈CSS中overflow清除浮动的用法
01-21
overflow清除浮动以下面的XHTML代码为例： ...我以前用的方法是（CSS代码）： CSS Code复制内容到剪贴板 #container{ width:1000px; overflow:hidden; background:#999999; } #left{ wi
css溢出属性：overflow属性介绍
YY的博客
09-08 1万+
text-overflow、overflow：hidden、overflow：scroll、overflow：auto
CSS中的overflow，
m0_67737085的博客
10-08 3444
相比于1，2的属性，over:scroll;会裁剪内容，浏览器会形成滚动条便于查看超出元素框的文本内容。这里是overflow的基本默认属性，文本不会被修剪，直接超出元素框。这里比较上面的属性，同样的元素框，但是溢出部分却已经被裁剪且无法显示。这个属性内容会被修剪，但是溢出的内容是无法看到的。
CSS系列之详解overflow
老__L的博客
02-01 9205
本文主要介绍CSS的overflow、overflow-x、overflow-y属性。详解overflow
浅析CSS中的overflow属性
热门推荐
孤云博客
01-04 2万+
随时随地阅读更多技术实战干货，获取项目源码、学习资料，请关注源代码社区公众号(ydmsq666)、博主微信（guyun297890152）、QQ技术交流群(183198395)。 overflow属性的作用是规定当内容溢出元素框时发生的事情，定义溢出元素内容区的内容会如何处理。 overflow有下面几种属性值，分别如下： 1.visible：默认值。内容不会被修剪，会呈现在元素框之外。...
CSS中overflow的多种用法
Lxydzh的博客
08-04 1626
CSS中overflow的用法： 1.基本用法：超出父元素部分如何显示？——— overflow:hidden(隐藏） scroll(以滚动条形式显示) 2.延伸用法：当article作为父元素且不设置高度情况下，其高度由子元素内容决定，但当为子元素设 置浮动之后，article“无高度消失”。可设置overflow:hidden解决。 3.延伸用法：解决父子级外边距合并问题。给父元素设置overflow：hidden属性（注：sticky中不可使用）。 ...
使用CSS的overflow属性防止float撑开div的方法
09-24
解决“浮动塌陷”的方法之一就是使用`overflow`属性。`overflow`属性控制当内容溢出一个元素的框时会发生什么。默认情况下，它是`visible`，意味着内容可以溢出元素的边界。但是，如果我们设置`overflow`为`hidden`...
css使用overflow属性控制滚动条的样式
09-22
接下来，我们将深入探讨`overflow`属性的不同用法及其对滚动条样式的影响。 1. `overflow: auto` 当设置`overflow`为`auto`时，浏览器会在内容溢出容器边界时自动添加滚动条。这意味着只有在内容实际需要滚动的...
深入理解CSS overflow:hidden——溢出,坍塌,清除浮动
09-22
在CSS布局中，`overflow:hidden` 是一个非常重要的属性，它可以解决多种布局问题，包括隐藏溢出的内容、清除浮动以及防止margin坍塌。本文将详细解释这三个方面。 1. **隐藏溢出** 当元素的内容超出了其指定的...
css overflow属性及使用方法（场景）
从事前端，不断积累经验，学习新的技术。头像不是本人是莉莉崽（美貌、可爱集于一身的小姐姐，小仙女），一个宝藏博主，值得喜欢！
12-02 1万+
overflow这个属性还是挺实用的比如，一个div展示文字，想让超出部分隐藏就可以使用overflow:hidden,想让显示的画就用overflow:scroll; 1.overflow的属性 值 描述 visible 默认值。内容不会被修剪，会呈现在元素框之外。 hidden 内容会被修剪，并且其余内容是不可见的。 scroll 内容会被修剪，但是浏览...
解析css中的overflow属性
m0_68845148的博客
11-10 7500
overflow 属性规定当内容溢出时发生的事情overflow有以下几种属性值：不裁剪超出盒子的部分将超出盒子部分的内容隐藏横轴强制出现滚动条4.overflow-y:scroll 纵轴强制出现滚动条5.overflow：scroll x轴和y轴都有滚动条自动判断是否出现滚动条从父元素继承overflow属性的值overflow属性值中visible和hidden是对立的，scroll和auto是对立的。inherent是继承父级元素的overflow属性值，默认是scroll。
学透CSS- 再了解CSS中的overflow以及应用场景，零基础学习web前端
最新发布
03-21 709
下面的所有例子都依赖于：div{默认值。内容不会被修剪，会呈现在元素框之外内容会被修剪，并且其余内容不可见内容会被修剪，浏览器会显示滚动条以便查看其余内容，无论内容是否超出，均会显示滚动条浏览器自己决定是否显示滚动条，如果内容没有超出则不会显示滚动条。规定从父元素继承overflow属性的值。
css 之overflow 用法
a695005548的博客
04-08 857
css 之overflow用法 通过overflow 可以设置父元素中内容溢出的问题。 创建一个父div 和一个子div。父div 宽高各200px，子div 宽100、高300px。则垂直方向父元素内容溢出。 <style type="text/css"> .div1{ width: 200px; height: 200px; background-color: #0000FF; } .div2{ width: 100px; height: 500px
CSS中overflow的用法是什么
hdxx2022的博客
01-15 198
意思就是，应用了overflow(auto或hidden)的元素，将会扩展到它需要的大小以包围它里面的浮动的子元素(而不是叠了起来(collapsing))，假设未定义高度。设置一个盒子的overflow值为scroll将会隐藏掉渲染到盒子之外的内容，但是它将会提供一个滚动条在盒子内部滚动，从而可以查看剩下的内容。比如有的用户设置他们的浏览器的默认字体比你预期的要大些，你会将一些文字推到盒子的外面然后完全的隐藏之……这里需要记住的重要的事情是，尽管盒子外面的内容是可见的，内容并不会影响页面的工作流。
CSS中的 overflow 属性
CyberPlayer的博客
02-13 2033
overflow 属性指定在元素的内容太大而无法放入指定区域时是剪裁内容还是添加滚动条。 overflow 属性可设置以下值： visible- 默认。溢出没有被剪裁。内容在元素框外渲染 hidden- 溢出被剪裁，其余内容将不可见 scroll- 溢出被剪裁，同时添加滚动条以查看其余内容 auto- 与scroll类似，但仅在必要时添加滚动条 注意：overflow 属性仅适用于具有指定高度的块元素。 ...
Css里overflow是什么意思
努力后等着收获
12-03 3390
overflow从字面意义上来讲就是溢出的意思，换句话说，你有个层，但是里面的内容，图片或者文字要比层大，overflow就是针对这种情况进行处理的。     包含4个属性值，visible,hidden,auto,scroll     visible就是超出的内容仍然正常被显示出来。     hidden就是超出的内容被隐藏。     auto是默认值，根据内容剪切或者加滚动条。     scr
css中overflow的那些坑
卜小娴的博客
07-31 1万+
元素的overflow属性是用来规定当内容溢出元素框时发生的事情，设置单个方向的overflow-x和overflow-y同理，它有五个值，visible（默认），hidden，scroll，auto，inherit，现在我们先来简单说下这几个属性值： visible：默认值，它会把内容完全展现出来，即使内容超出已定义的父元素大小，它还是会超出部分按正常显示，但是也不会影响其他元素的布局。 hi
CSS深入理解之overflow
muzi187的博客
12-25 1986
慕课学习-->前端开发-->HTML/CSS-->CSS深入理解之overflow overflow 一、overflow基本属性 1、overflow的基本属性值： visible（默认），hidden（不是裁剪是隐藏），scroll（水平和垂直方向都有滚动条轨道），auto（超出容器的方向出现滚动条），inherit（IE8+） 2、Overflow-x和overflow-y
css overflow使用总结
lsjweiyi的博客
04-22 1391
overflow是个很强大的样式，在非常多的场合需要用到它，比如区域滚动。下面一一列举下使用。 不使用overflow 我给父元素设置了固定的高度，然后添加过多的文字， <view style="height: 100px; background-color: red"> <view style="word-break: break-all; font-size: xx-large"> 测试文字测试文字测试文字测试文字测试文字测试文字测
cssoverflow
08-25
引用和引用[2]提供了关于CSS中overflow属性的两个例子。overflow属性用于控制内容溢出时的处理方式。当内容超出元素框时，可以使用不同的取值来决定是否修剪内容以及是否显示滚动条。 引用中的代码展示了overflow属性取值为scroll的情况。该属性会裁剪内容并在元素框上显示滚动条，以便查看超出的文本内容。 引用中的代码展示了overflow属性取值为hidden的情况。该属性同样会修剪内容，但超出的内容是无法看到的。 综合以上两个例子的解释，可以得出以下结论： - overflow属性的取值scroll会修剪内容并显示滚动条； - overflow属性的取值hidden会修剪内容但不显示滚动条。 需要注意的是，这些只是overflow属性的一些基本用法。在CSS中还有其他取值，如visible、auto等，它们可以进一步控制元素框内内容的显示和修剪。 因此，根据用户提供的引用内容，可以得出以下回答： cssoverflow是CSS中的一个属性，用于控制元素框内内容的溢出处理方式。其中，取值为scroll会修剪内容并显示滚动条，取值为hidden会修剪内容但不显示滚动条。当然，还有其他取值可以用来进一步控制内容的显示和修剪。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* *2* [CSS中的overflow，](https://blog.csdn.net/m0_67737085/article/details/127202153)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] - *3* [CSS的overflow属性简析](https://blog.csdn.net/weixin_41740463/article/details/107334836)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] [ .reference_list ]
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值