对样式overflow的学习

你是不是在网页设计中遇到过内容过长或过宽而破坏整体页面的美观的情况，呵呵呵，今天我遇到了——采用滚动条的办法很好的解决了（尽管我研究的方向不是网页制作）。为了采用滚动条就需要对overflow样式有所了解：

1、overflow有什么用？

overflow用于当内容溢出时设置对象是否显示滚动条。

2、overflow值有哪些，分别有什么作用？

visible：默认值，无论"width"和"height"的值是多少，无论标签中的内容是否超出"width"和"height"设定的范围，内容都会被强制显示出来；

hidden：它效果与visible相反，即任何超出"width"和"height"设定范围的内容都会不显示；
scroll：无论内容是否超出"width"和"height"设定的范围，都会显示滚动条，只不过没有超出范围的滚动条不能滑动——即如果内容超出了"width"设定范围，则x轴方向变会出现带滑动的滚动条，否则该滚动条没有滑动的功能；如果内容超出了"height"设定范围，则y轴方向变会出现带滑动的滚动条，否则该滚动条没有滑动的功能；
auto：当内容超出范围时，自动显示滚动条，否则不显示——即如果内容超出了"width"设定范围，则x轴方向变会出现可滑动的滚动条，否则不显示滚动条；如果内容超出了"height"设定范围，则y轴方向变会出现可滑动的滚动条，否则不显示滚动条；

3、注意点是什么？

其实overflow的用法很简单，需要注意的地方很少，（呵呵呵，还是有的）overflow一般和"width"与"height"共用，如果不使用"width"，则x轴方向永远没有滚动条，如果不使用"height"，则y轴方向永远没有滚动条;

4、拓展

（1）、在学习overflow的同时无意间发现了overflow-x与overflow-y，其中overflow-x用来设置水平方向内容溢出时滚动条的效果；overflow-y用来设置垂直方向内容溢出时滚动条的效果。它们它们也有visible、scroll、hidden、auto这四个值，并且各个值的功能是一样的，现以例子说明：

网页窗口不显示水平滚动条：<body style="overflow-x:hidden">

网页窗口不显示垂直滚动条：<body style="overflow-y:hidden">

网页窗口不显示滚动条：<body style="overflow-x:hidden;overflow-y:hidden">（此时相当于<body style="overflow:hidden">）

设定textarea 标签不显示水平滚动条：<textarea style="overflow-x:hidden"></textarea>

设定textarea 标签不显示垂直滚动条：<textarea style="overflow-y:hidden"></textarea>

设定textarea 标签不显示滚动条：<textarea style="overflow-x:hidden;overflow-y:hidden"></textarea>（此时相当于<body style="overflow:hidden"></textarea>）

（2）、滚动条的颜色是可以设定的，例子：

5、例子

0分下载例子

对样式overflow的学习相关推荐

class h5 点击后样式变化_H5学习笔记
目录什么是HTML: 头部标签 H5视频 H5音频 H5拖放 H5Web存储 H5应用缓存 H5画布SVG H5画布canvas 全局属性: 事件属性: 颜色.样式和阴影线条样式矩形路径转换 ...
jquery 使用animate来改变高度自动添加样式overflow:hidden的问题
Another way is to declare the element as !important in css. For example. .somediv { overflow: visibl ...
「后端小伙伴来学前端了」Element修改默认样式 | 记录自己学习前端踩坑日记
一.Element修改下拉框角标就比如我最近遇上的一个问题,想要重定义 element 组件库中的下拉选择框的角标,一直不知道怎么覆盖才好. 最后才知道是由伪元素做的. 如果我们想要重定义eleme ...
android样式文件,Android学习笔记样式资源文件
样式资源和主题资源都是写在styles.xml文件里面的 30sp #06F 18sp 在activity_main.xml中引用 android:layout_width="wrap_co ...
CSS基础——CSS字体样式属性【学习笔记】
CSS字体样式属性调试工具 font字体 CSS外观属性快捷操作emmet语法练习案例-体育页面 1.font字体 1.1 font-size:大小作用: font-size属性用于设置字号 p ...
前端基础 CSS 第十一章使用CSS样式表 ----暑假学习第七、八天
第十一章使用CSS样式表通过CSS样式定义,可以将网页制作得更加绚丽多彩.采用CSS技术,可以有效地对页面的布局.字体.颜色.背景和其他效果实现更加精确地控制.用CSS不仅可以做出令浏览者赏心悦目 ...
jQuery框架学习第四天：使用jQuery操作元素的属性与样式
jQuery框架学习第一天:开始认识jQuery jQuery框架学习第二天:jQuery中万能的选择器 jQuery框架学习第三天:如何管理jQuery包装集 jQuery框架学习第四天:使用jQu ...
FsFont--通过学习细粒度局部样式生成少样本字体
Abstract 通过少量示例生成新字体的FFG (few -shot font generation),因大幅降低人工成本而受到越来越多的关注.典型的FFG管道将标准字体库中的字符视为内容字形,并通 ...
css 文字重叠_学习过CSS，那你知道BFC是什么吗？
虽然可能你没听过BFC是什么,但是你一定用过,其是一种在CSS中存在的技术,你可能只是一直不知道有这样一个专业名词,本文就来介绍一下到底什么是BFC. 一起来理解BFC的作用! 一.什么是BFC 首先 ...
前端学习之CSS模块
目录 CSS基础语法 CSS基本样式基本样式内联样式与内部样式外部样式及两种写法 CSS中的颜色表示法 CSS背景样式 CSS边框样式 CSS文字样式字体大小粗细样式 CSS段落样式 CSS复 ...

对样式overflow的学习

对样式overflow的学习相关推荐

最新文章

热门文章