overflow

  • 当子元素的尺寸超过父元素的尺寸时，需要设置父元素显示溢出的子元素的方式
  • 通过 overflow 属性来设置
  • 概览
参数 释义
visible（默认值） 内容不会被修剪
会呈现在元素框之外
hidden 内容会被修剪
其余内容是不可见的
此属性还有清除浮动、清除 margin-top 塌陷的功能
scroll 内容会被修剪
浏览器会显示滚动条，以便查看其余的内容
auto 如果内容被修剪，浏览器会显示滚动条以便查看其余的内容
inherit 规定应该从父元素继承 overflow 属性的值
  • 举例
<!DOCTYPE html>

<html>

    <head>

        <meta charset="utf-8">

        <title>test</title>

        <link rel="stylesheet" type="text/css" href="./static/CSS/test.css">

    </head>

    <body>

        <div class="box">box</div>

    </body>

</html>


.box{

    width: 200px;

    height: 200px;

    /*overflow: visible;*/

    /*overflow: hidden;*/

    overflow: scroll;

    /*overflow: auto;*/

    /*overflow: inherit;*/

}
  • 效果截图

参考：w3school

[Web 前端] 012 css 元素溢出的更多相关文章

  1. 好程序员web前端分享CSS元素类型

    好程序员web前端分享CSS元素类型 目标 1.元素类型分类依据和元素类型分类 2.元素类型的转换 3.inline-block元素类型的应用 4.置换和非置换元素的概念和应用案例 一.元素类型分类依 ...

  2. [Web 前端] 016 css 元素的转换

    三种元素之间的转换 display 属性是用来设置元素的类型及隐藏的 常用的属性有 none 元素隐藏且不占位置 block 元素以块元素显示 inline 元素以内联元素显示 inline-bloc ...

  3. WEB前端开发CSS基础样式全面总结

    Web前端开发css基础样式全面总结 颜色和单位的使用 颜色 用颜色的名字表示颜色,比如:red 用16进制表示演示 比如:#FF0000 用rgb数值表示颜色,rgb(红,绿,蓝),每个值都在0-2 ...

  4. Python web前端 02 CSS

    Python web前端 02 CSS 一.选择器 1.CSS的几种样式(CSS用来修饰.美化网页的) #建立模板 复制内容--->SETTING---> Editor -----> ...

  5. Python web前端 03 CSS属性

    Python web前端 03 CSS属性 一.文字.文本属性 1.文字属性 font-family #字体类型浏览器默认的字体是微软雅黑,字体中有多个字体的时候,如果前面的字体没有就使用后面的字体 ...

  6. 好程序员web前端分享css常用属性缩写

    好程序员web前端分享css常用属性缩写,使用缩写可以帮助减少你CSS文件的大小,更加容易阅读.css缩写的主要规则如下: 颜色 16进制的色彩值,如果每两位的值相同,可以缩写一半,例如: #0000 ...

  7. css 元素溢出

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

  8. 1+x 证书 Web 前端开发 css 专项练习

    官方QQ群 1+x 证书 Web 前端开发 css 专项练习 http://blog.zh66.club/index.php/archives/192/

  9. Web前端温故知新-CSS基础

    一.CSS定义与编写CSS 1.1 CSS的定义 全名:Cascading Style Sheets -> 层叠样式表 定义:CSS成为层叠样式表,它主要用于设置HTML页面中的文本内容(字体. ...

随机推荐

  1. CPU指令重排序与MESI缓存一致性

    一.重排序场景 class ResortDemo { int a = 0; boolean flag = false; public void writer() { a = 1; //1 flag = ...

  2. CF506E Mr. Kitayuta's Gift

    这道题神仙到让我面临着买不到冰皮月亮蛋糕的风险来写题解 (蛋糕真好吃呜呜呜) 这篇题解参考了CQzhangyu神仙的做法. (目测比标程科学好写) 限制是要回文,根据我们做字符串计数的常识,一定是尽量 ...

  3. MongoDB的安装以及启动

    1.首先什么是MongoDB? MongoDB是一个基于分布式文件存储的数据库,是由c++语言编写的.为web应用提供可扩展的高性能数据的存储方案.是一个介于关系型数据库和非关系型数据库 的中间产品, ...

  4. [REPRINT]Properties vs. Getters and Setters

    http://www.python-course.eu/python3_properties.php Our new class means breaking the interface. The a ...

  5. php XDebug配置和使用

    已本机php 5.5nts为例,php.ini配置如下: [XDebug] xdebug.profiler_append = 0 xdebug.profiler_enable = 1 xdebug.p ...

  6. 6.25考试整理：江城唱晚&&不老梦&&棠梨煎雪——题解

    按照旧例,先安利一下主要作者:一扶苏一 以及扶苏一直挂念的——银临姐姐:银临_百度百科 (滑稽) 好哒,现在步入正题: 先看第一题: 题解: 在NOIP范围内,看到“求方案数”,就说明这个题是一个计数 ...

  7. Oracle Select语句

    Oracle Select语句 作者:初生不惑 Oracle基础 评论:0 条 Oracle技术QQ群:175248146 在本教程中,将学习如何使用Oracle SELECT语句从单个表中查询数据. ...

  8. Alexa TOP 100万的域名列表

    Alexa是一家专门发布网站世界排名的网站,是亚马逊公司的一家子公司.Alexa每天在网上搜集多达几十亿的网址链接,而且为其中的每一个网站进行了排名. Alexa通过Alexa官网查询好像TOP 50 ...

  9. idea创建项目和依赖

    创建项目和依赖 项目搭建完成后打开web.xml可看到如图使用的是servlet2.3,但版本太老,servlet2.3 jsp  的el表达式不工作,所以我们需要切换新版本. 切换新版本方法:打开t ...

  10. 在ubuntu12.4上安装minigui3.0.12

      在ubuntu12.4上安装minigui3.0.12 一下载源文件 移植所需的文件可以从minigui官网下载:http://www.minigui.org/en/download/ 主要文件有 ...