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 元素溢出的更多相关文章

  1. [Web 前端] 012 css 元素溢出

    overflow 当子元素的尺寸超过父元素的尺寸时,需要设置父元素显示溢出的子元素的方式 通过 overflow 属性来设置 概览 参数 释义 visible(默认值) 内容不会被修剪会呈现在元素框之 ...

  2. css元素溢出

    当子元素的尺寸超过父元素的尺寸时,需要设置父元素显示溢出的子元素的方式,设置的方法是通过overflow属性来设置. overflow的设置项: 1.visible 默认值.内容不会被修剪,会呈现在元 ...

  3. 18 12 27 css 盒模型使用 以及相关技巧问题 元素溢出 块元素、内联元素、内联块元素

    盒子模型的实际尺寸 盒子的width和height设置的是盒子内容的宽和高,不是盒子本身的宽和高,盒子的真实尺寸计算公式如下: 盒子宽度 = width + padding左右 + border左右 ...

  4. css盒子模型基础,margin-top塌陷,元素溢出

    现在布局不用table,一般用盒子模型来布局,也就是通常说的div+css,一个页面就是多个盒子的拼接   一. 初识盒子模型   例子1,测试盒子各属性设置   <head> <s ...

  5. HTML+CSS教程(五)外联样式、组选择器、圆角边框、样式优先级、伪类、盒子模型、元素溢出

    一.外联样式 通过link标签引入外部css文件夹中的xxx.css文件到head标签中 例: 二. 1.组选择器 选择器名称1,选择器名称2,选择器名称3,…{属性:属性值;属性;属性值} 例: & ...

  6. CSS 文本溢出时显示省略标记

    如标题所示... <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.o ...

  7. Css - 元素的显示模式

    Css - 元素的显示模式 块元素(block) 块元素是指: 1.独占一行,每个div上下之间没有留白,上面的div的底部与下面的div的顶部紧紧靠在一起没有任何缝隙 2.可设置宽高,默认宽度是父元 ...

  8. 您可能不知道的CSS元素隐藏“失效”以其妙用——张鑫旭

    一.CSS元素隐藏 在CSS中,让元素隐藏(指屏幕范围内肉眼不可见)的方法很多,有的占据空间,有的不占据空间:有的可以响应点击,有的不能响应点击.后宫选秀——一个一个看. { display: non ...

  9. CSS元素的显示与隐藏

    CSS元素的显示与隐藏 我们访问某些网站的时候,经常可以看到一些广告弹出来,点击关闭就不见了,但是重新刷新页面后,广告又会重新弹出来.这就是元素的显示和隐藏的一个应用. 1. display属性 di ...

随机推荐

  1. (二叉树 BFS) leetcode102. Binary Tree Level Order Traversal

    Given a binary tree, return the level order traversal of its nodes' values. (ie, from left to right, ...

  2. c语言中堆栈和静态空间

    什么是堆空间.栈空间与静态空间 堆空间:由程序员自己分配空间,如malloc需要指定分配多少个多大的字节空间,不用的时候需要自己释放 栈空间:栈空间是由系统自动分配与释放,如int,char等大小都已 ...

  3. GO语言系列(二)- 基本数据类型和操作符

    一.文件名 & 关键字 & 标识符 1.所有go源码以.go结尾 2.标识符以字母或下划线开头,大小写敏感 3._是特殊标识符,用来忽略结果 4.保留关键字 二.Go程序的基本结构 p ...

  4. JAVA实现C/S结构小程序

    程序功能: 客户端向服务器发送一个本地磁盘中的文件, 服务器程序接受后保存在其他位置. 客户端实现步骤: 创建一个客户端对象Socket,构造方法中绑定服务器的IP地址 和 端口号 使用Socket对 ...

  5. 前端面试题整理—JavaScript篇(二)

    1.使用js实现一个可持续的动画 2.实现一个可以自由拖动的悬浮框 3.实现一个倒计时效果 4.使用js仿写一个原生下拉列表框 5.创建10个<a>标签,点击的时候弹出对应的序号 6.实现 ...

  6. Vorticity directions 1: self-improving property of the vorticity

    在 [Li, Siran. "On Vortex Alignment and Boundedness of $ L^ q $ Norm of Vorticity." arXiv p ...

  7. H5——弹性盒

    [flex 弹性盒布局] * 1.给父容器添加display:flex/inline-flex;属性 * 2.父容器可以使用的属性值有: * ① flex-direction 属性决定主轴的方向(即项 ...

  8. Contest1874 - noip基础知识五:动态规划(背包、树dp、记忆化、递推、区间、序列dp、dp优化)

    传送门 T1  dp[n][m]=dp[n-1][m-1]+dp[n-m][m] T2  ans=cat(n)*(n!)2  卡特兰数 T3  dp[i][j]=sigma(dp[i-1][j-a[i ...

  9. 安装vs2017后造成无法打开xproj项目无法打开

    安装vs2017后,再用vs2015打开xproj项目的时候会报错: Error MSB4019 The imported project "C:\Program Files\dotnet\ ...

  10. 机器学习爱好者 -- 翻译吴恩达老师的机器学习课程字幕 http://www.ai-start.com/

    机器学习爱好者 -- 翻译吴恩达老师的机器学习课程字幕 GNU Octave    开源  MatLab http://www.ai-start.com/ https://zhuanlan.zhihu ...