教你玩转CSS Overflow
CSS 布局 - Overflow
CSS overflow 属性用于控制内容溢出元素框时显示的方式。
- <style>
- #overflowTest {
- background: #4CAF50;
- color: white;
- padding: 15px;
- width: 80%;
- height: 100px;
- overflow: scroll;
- border: 1px solid #ccc;
- }
- </style>
- <div id="overflowTest">
- <p>这里的文本内容是可以滚动的,滚动条方向是垂直方向。</p>
- <p>这里的文本内容是可以滚动的,滚动条方向是垂直方向。</p>
- <p>这里的文本内容是可以滚动的,滚动条方向是垂直方向。</p>
- <p>这里的文本内容是可以滚动的,滚动条方向是垂直方向。</p>
- <p>这里的文本内容是可以滚动的,滚动条方向是垂直方向。</p>
- <p>这里的文本内容是可以滚动的,滚动条方向是垂直方向。</p>
- </div>
CSS Overflow
CSS overflow 属性可以控制内容溢出元素框时在对应的元素区间内添加滚动条。
overflow属性有以下值:
值 | 描述 |
visible | 默认值,内容不会被修剪,会呈现在元素框之外 |
hidden | 内容会被修剪,并且其余内容是不可见的 |
scroll | 内容会被修剪,但是浏览器会显示滚动条以便查看其余的内容 |
auto | 如果内容被修剪,则浏览器会显示滚动条以便查看其余的内容 |
inherit | 规则应该从父元素继承overflow属性的值 |
注意:overflow 属性只工作于指定高度的块元素上。
注意: 在 OS X Lion ( Mac 系统) 系统上,滚动条默认是隐藏的,使用的时候才会显示 (设置 “overflow:scroll” 也是一样的)。
overflow: visible
默认情况下,overflow 的值为 visible, 意思是内容溢出元素框:
代码演示:
- <style>
- div.visible {
- padding: 4px;
- background-color: #eee;
- width: 200px;
- height: 100px;
- overflow: visible;
- xborder: 1px dotted red;
- }
- </style>
- <div class="visible">
- <p>这里的文本内容会溢出元素框。</p>
- <p>这里的文本内容会溢出元素框。</p>
- <p>这里的文本内容会溢出元素框。</p>
- <p>这里的文本内容会溢出元素框。</p>
- <p>这里的文本内容会溢出元素框。</p>
- </div>
效果演示:
教你玩转CSS Overflow的更多相关文章
- 教你玩转CSS Position(定位)
CSS Position(定位) position 属性指定了元素的定位类型. position 属性的五个值: static relative fixed absolute sticky 元素可以使 ...
- 教你玩转CSS 居中
1.元素居中对齐 要水平居中对齐一个元素(如 <div>), 可以使用 margin: auto;. 设置到元素的宽度将防止它溢出到容器的边缘. 元素通过指定宽度,并将两边的空外边距平均分 ...
- monyer教你玩电脑——CSS、HTML、JS、XML的关系
首先Monyer还是有必要提一句:这是一篇低中等难度的文章.如果你是高手或被认为是高手,那么请pass掉这篇文章:如果你是新手,甚至不知道什么是css(譬如百度模版)等,那么请pass掉这篇文章.谢谢 ...
- 教你玩转CSS border(边框)
边框样式 边框样式属性指定要显示什么样的边界. border-style属性用来定义边框的样式 border-style的值 代码演示: <!DOCTYPE html> <html ...
- 教你玩转CSS 伪元素
一.CSS 伪元素 CSS伪元素是用来添加一些选择器的特殊效果. 语法 伪元素的语法: selector:pseudo-element {property:value;} CSS类也可以使用伪元素: ...
- 手把手教你玩转 CSS3 3D 技术
css3的3d起步 要玩转css3的3d,就必须了解几个词汇,便是透视(perspective).旋转(rotate)和移动(translate).透视即是以现实的视角来看屏幕上的2D事物,从而展现3 ...
- 手把手教你玩转CSS3 3D技术
手把手教你玩转 CSS3 3D 技术 要玩转css3的3d,就必须了解几个词汇,便是透视(perspective).旋转(rotate)和移动(translate).透视即是以现实的视角来看屏幕上 ...
- 手把手教你玩转SOCKET模型之重叠I/O篇(下)
四. 实现重叠模型的步骤 作 了这么多的准备工作,费了这么多的笔墨,我们终于可以开始着手编码了.其实慢慢的你就会明白,要想透析重叠结构的内部原理也许是要费点功夫,但是只是学会 如何来使用它,却 ...
- 转:CSS Overflow 属性
原文:CSS Overflow 属性译自:The CSS Overflow Property版权所有,转载请注明出处,多谢!! 根据CSS的盒模型概念,页面中的每个元素,都是一个矩形的盒子.这些盒子的 ...
随机推荐
- XCTF-easydex
前期工作 查壳,无.安装打开黑屏. 逆向分析 用jadx打开看看 什么都没有,但可以看一下AndroidManifest 可以看到这个是个纯C/C++写的,没有Java代码,是个NativeActiv ...
- 十三:SpringBoot-基于Yml配置方式,实现文件上传逻辑
SpringBoot-基于Yml配置方式,实现文件上传逻辑 1.文件上传 2.搭建文件上传界面 2.1 引入页面模板Jar包 2.2 编写简单的上传页面 2.3 配置页面入口 3.SpringBoot ...
- ssh登陆时,参数直接加入密码
参考: [随笔]ssh登录时如何直接在参数中加入登录密码 安装 sshpass
- shell(shell简介)
1.shell 简介 Shell 是一个 C 语言编写的脚本语言,它是用户与 Linux 的桥梁,用户输入命令交给 Shell 处理,shell是一个命令解释器,是一个工具箱, Shell 将相应的操 ...
- kafka背着你做了什么?
Kafka中有broker.主题.分区.副本等概念,底层有日志和日志分片. 我们先简单介绍一下这些概念,做个类比. broker可以简单理解为一台物理机,其实一台机器上可以有多个broker进程,但是 ...
- Kibana,Logstash 和 Cerebro 的安装运行
公号:码农充电站pro 主页:https://codeshellme.github.io 1,安装 Kibana Kibana 用于数据可视化,我们可以进入到 Kibana 下载页面下载 Kibana ...
- P3384 [模板] 树链剖分
#include <bits/stdc++.h> using namespace std; typedef long long ll; int n, m, rt, mod, cnt, to ...
- 神奇C语言的字串处理库函数
头文件:#incldue<string.h> 定义:strstr(str1,str2) 函数用于判断字符串str2是否是str1的子串.如果是,则该函数返回str2在str1中首次出现的地 ...
- codeforces 632F. Magic Matrix (最小生成树)
You're given a matrix A of size n × n. Let's call the matrix with nonnegative elements magic if it i ...
- 找新朋友 HDU - 1286 欧拉函数模板题
题意: 求出来区间[1,n]内与n互质的数的数量 题解: 典型的欧拉函数应用,具体见这里:Relatives POJ - 2407 欧拉函数 代码: 1 #include<stdio.h> ...