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. caffe与tensorflow中的pooling

    两个框架对poolin的处理方式不同,这就导致在转模型时容易踩雷 tensorflow通过“VALID”和“SAME”参数来控制 caffe 通过pad值来控制 参考:https://blog.csd ...

  2. GUI学习之二十九—QFileDialog学习总结

    今天学习的是文件对话框——QFileDialog 一.描述 QFileDialog提供了一个对话框,允许用户选择文件或者目录,也允许用户遍历文件系统,用以选择一个或多个文件或者目录. QFileDia ...

  3. 第二组_学生会管理系统_APP端个人感想

    一:相关链接 1.相关源码链接: 1.学生会管理系统APP端:Code 2.学生会管理系统WEB端:Code 3.学生会管理系统后台:COde 2.相关文档和博客: 1.前期接口文档以及需求文档Doc ...

  4. mac下安装 rabbitMq

    1.安装HomeBrew,如果已经安装这一步跳过. 2.用brew install rabbitmq指令即可进行rabbitmq服务的自动安装. 3.安装完成之后会出现一下提示:   rabbit安装 ...

  5. python 使用wxpy实现获取微信好友列表 头像 群成员

    最近在学习 python 突然想要试试能不能把微信里面的微信群和好友取出来 结果百度了一下 找到了 wxpy 这怎么能不试一下呢 用到 wxpy.threading.os.time 四个库 第一步 判 ...

  6. JS 图片转blob 转base64

    //转换为blob有跨域限制 var loadImageToBlob = function (url, callback) { if (!url || !callback) return false; ...

  7. 多对多关系表的创建方式、forms组件

    目录 多对多关系表的三种创建方式 1.全自动,Django自动创建 2.纯手撸 3.半自动(推荐使用) forms组件 小例子 forms组件 校验器 钩子函数 局部钩子 全局钩子 forms组件常用 ...

  8. 【bzoj4551】【NOIP2016模拟7.11】树

    题目 在2016年,佳媛姐姐刚刚学习了树,非常开心.现在他想解决这样一个问题:给定一颗有根树(根为1),有以下 两种操作:1. 标记操作:对某个结点打上标记(在最开始,只有结点1有标记,其他结点均无标 ...

  9. postman—UI测试

    思路 发送请求去拿到网站的响应->html 解析HTML标签,判断一些元素是否显示 目的 快速检查UI是否正确 测试地址 http://www.itest.info/courses 我们接下来要 ...

  10. php array_unshift()函数 语法

    php array_unshift()函数 语法 作用:用于向数组插入新元素.新数组的值将被插入到数组的开头.富瑞华 语法:array_unshift(array,value1,value2,valu ...