css 元素溢出
css元素溢出：
当子元素的尺寸超过父元素的尺寸时，需要设置父元素显示溢出的子元素的方式，设置的方法是通过overflow属性来设置。
overflow的设置项：
（1）visible 默认值 内容不会被修剪，会呈现在元素框之外
（2）hidden 内容会被修剪，并且其余内容是不可见的，此属性还有清除浮动、清除margin-top塌陷的功能。
（3）scroll 内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。(不管有没有溢出都会有滚动条）
（4）auto 如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。（只有溢出时有滚动条，不溢出时没有滚动条）
（5）inherit 规定应该从父元素继承overflow属性的值。（很少用）
代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>元素溢出</title>
<style type="text/css">
.box{
width: 300px;
height: 150px;
border:1px solid black;
margin:50px auto 0px;
background-color: gold;
line-height:30px; /*overflow:visible; /* 默认 会溢出 */
/*overflow:hidden; /* 不会溢出，把多余的清除 */
/*overflow:scroll; /* 显示滚动条来查看其余的部分(不好看）,不管是否溢出都显示滚动条 */
overflow:auto; /* 溢出有滚动条，不溢出没有滚动条 */
/*overflow:inherit; 不常用 */ }
</style>
</head>
<body>
<div class="box">当子元素的尺寸超过父元素的尺寸时，需要设置父元素显示溢出的子元素的方式，设置的方法是通过overflow属性来设置。
overflow的设置项：
（1）visible 默认值 内容不会被修剪，会呈现在元素框之外
（2）Hidden 内容会被修剪，并且其余内容是不可见的，
此属性还有清除浮动、清除margin-top塌陷的功能。</div>
</body>
</html>
页面显示效果：
css 元素溢出的更多相关文章
- [Web 前端] 012 css 元素溢出
overflow 当子元素的尺寸超过父元素的尺寸时,需要设置父元素显示溢出的子元素的方式 通过 overflow 属性来设置 概览 参数 释义 visible(默认值) 内容不会被修剪会呈现在元素框之 ...
- css元素溢出
当子元素的尺寸超过父元素的尺寸时,需要设置父元素显示溢出的子元素的方式,设置的方法是通过overflow属性来设置. overflow的设置项: 1.visible 默认值.内容不会被修剪,会呈现在元 ...
- 18 12 27 css 盒模型使用 以及相关技巧问题 元素溢出 块元素、内联元素、内联块元素
盒子模型的实际尺寸 盒子的width和height设置的是盒子内容的宽和高,不是盒子本身的宽和高,盒子的真实尺寸计算公式如下: 盒子宽度 = width + padding左右 + border左右 ...
- css盒子模型基础，margin-top塌陷，元素溢出
现在布局不用table,一般用盒子模型来布局,也就是通常说的div+css,一个页面就是多个盒子的拼接 一. 初识盒子模型 例子1,测试盒子各属性设置 <head> <s ...
- HTML+CSS教程（五）外联样式、组选择器、圆角边框、样式优先级、伪类、盒子模型、元素溢出
一.外联样式 通过link标签引入外部css文件夹中的xxx.css文件到head标签中 例: 二. 1.组选择器 选择器名称1,选择器名称2,选择器名称3,…{属性:属性值;属性;属性值} 例: & ...
- CSS 文本溢出时显示省略标记
如标题所示... <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.o ...
- Css - 元素的显示模式
Css - 元素的显示模式 块元素(block) 块元素是指: 1.独占一行,每个div上下之间没有留白,上面的div的底部与下面的div的顶部紧紧靠在一起没有任何缝隙 2.可设置宽高,默认宽度是父元 ...
- 您可能不知道的CSS元素隐藏“失效”以其妙用——张鑫旭
一.CSS元素隐藏 在CSS中,让元素隐藏(指屏幕范围内肉眼不可见)的方法很多,有的占据空间,有的不占据空间:有的可以响应点击,有的不能响应点击.后宫选秀——一个一个看. { display: non ...
- CSS元素的显示与隐藏
CSS元素的显示与隐藏 我们访问某些网站的时候,经常可以看到一些广告弹出来,点击关闭就不见了,但是重新刷新页面后,广告又会重新弹出来.这就是元素的显示和隐藏的一个应用. 1. display属性 di ...
随机推荐
- Tomcat 服务器
1 相关概念 1 软件的架构 1 c/s 客服端/服务端 2 b/s 浏览器/服务器 2 资源的分类 1 静态资源 所有用户访问后 得到的资源是一样的 称为静态资源 html css js 静态资源可 ...
- windows上编译zlib-1.2.8
MSVC编译 使用VS(x86)命令行工具进入到zlib根目录,执行 nmake -f win32/Makefile.msc ,在根目录下生成:zlib.lib(静态库) zdll.lib(动态库的 ...
- Sass学习第一天
Sass学习 网站学习地址: Sass中文网:https://www.sass.hk/docs/#t7-3 Airen的博客:https://www.w3cplus.com/preprocessor/ ...
- [再寄小读者之数学篇](2014-06-20 求极限-H\"older 不等式的应用)
设非负严格增加函数 $f$ 在区间 $[a,b]$ 上连续, 有积分中值定理, 对于每个 $p>0$ 存在唯一的 $x_p\in (a,b)$, 使 $$\bex f^p(x_p)=\cfrac ...
- java -jar参数携带问题
方式一 -DpropName=propValue的形式携带,要放在-jar参数前面,亲测,放在它后面好像取不到值 java -fileName=JOURNAL_TREENODE_DATA-201904 ...
- Django之form表单
https://www.cnblogs.com/liwenzhou/p/8747872.html 1. form组件的介绍 之前web开发的模式,以注册为例: 1. 要有一个注册的页面,页面里面要有f ...
- 「luogu3258」[JLOI2014] 松鼠的新家
https://www.luogu.org/problemnew/show/P3258 (树剖裸题 树上差分 = = 差分 + lca 1. 树上差分基本思想:和差分一样,用前缀和的思想来处理解(操作 ...
- liblensfun 在 mingw 上编译时遇到的奇怪问题
ffmpeg 2018.07.15 增加 lensfun 滤镜; 这个滤镜需要 liblensfun 库; Website: http://lensfun.sourceforge.net/ Sourc ...
- 【easy】202. Happy Number
happy number Write an algorithm to determine if a number is "happy". A happy number is a n ...
- QPS/TPS/并发量/系统吞吐量概念和公式
1.概念 我们在日常工作中经常会听到QPS/TPS这些名词,也会经常被别人问起说你的系统吞吐量有多大.一个系统的吞度量(承压能力)与request对CPU的消耗.外部接口.IO等等紧密关联,单个req ...