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. python之shelve模块详解

    一.定义 Shelve是对象持久化保存方法,将对象保存到文件里面,缺省(即默认)的数据存储文件是二进制的. 二.用途 可以作为一个简单的数据存储方案. 三.用法 使用时,只需要使用open函数获取一个 ...

  2. [物理学与PDEs]第3章第4节 磁流体力学方程组的数学结构

    1.  在流体存在粘性.热传导及 $\sigma\neq \infty$ 时, 磁流体力学方程组是一个拟线性对称双曲 - 抛物耦合组. 2.  在流体存在粘性.热传导但 $\sigma=\infty$ ...

  3. [物理学与PDEs]第2章习题6 有旋的 Navier-Stokes 方程组

    试证明: 由 Navier-Stokes 方程组描述的流体运动一般总是有旋的, 即若 $\rot{\bf u}={\bf 0}$, 则 Navier-Stokes 方程组 (3. 4)-(3. 5) ...

  4. [物理学与PDEs]第2章第4节 激波 4.2 熵条件

    1.  R.H. 条件仅仅给出了越过激波时的能量守恒定律, 即热力学第一定律; 但客观的流体运动过程还需满足热力学第二定律, 即越过激波是个熵增过程: $$\bex S_1>S_0\quad(0 ...

  5. Angular7_获取异步方法里面的数据

    1.回调函数 getName() { return '张三'; } getAsyncName() { setTimeout(() => { return 'async_张三'; }, ); } ...

  6. POJ 1410 Intersection （线段和矩形相交）

    题目: Description You are to write a program that has to decide whether a given line segment intersect ...

  7. Linux下间隔多少秒 (即以秒为单位) 去执行某条命令或某个shell脚本的操作方法【转】

    在日常运维工作中, 经常会碰到以秒为单位去定时执行某些命令或监控脚本的需求. 说到定时任务就要用到crontab,通常来说,crontab的最小单位是分钟级别,要想实现秒级别的定时任务,就要进行特殊设 ...

  8. [51nod1965]奇怪的式子

    noteskey 怎么说,魔性的题目...拿来练手 min_25 正好...吧 首先就是把式子拆开来算贡献嘛 \[ANS=\prod_{i=1}^n \sigma_0(i)^{\mu(i)} \pro ...

  9. 第二周 数据分析之展示 Matplotlib基础绘图函数实例

    Pyplot基础图表函数 Pyplot饼图的绘制: Pyplot直方图的绘制: Pyplot极坐标图的绘制: Pyplot散点图的绘制: 单元小结: import numpy as np import ...

  10. eclipse创建maven——初学

    1.进入eclipse→File→new→other→搜索maven,如下图: 2.选择一个工作空间,点击Next 3.进入如下页面 4.填写Grop id和Artifact id,Version默认 ...