精华内容
下载资源
问答
  • text-overflow文本溢出的全兼容CSS代码

    千次阅读 2017-08-29 16:04:41
    text-overflow文本溢出的浏览器全兼容CSS代码。

    废话不多说,一下代码可以运行在所有的浏览器中,包括IE8,至于谷歌和火狐能兼容到最低几,这个我没做测试。

    <style>
    .IE_clamp{
    	white-space: nowrap; 
    	overflow: hidden;
    	display: -webkit-box;
    	text-overflow: ellipsis;
    	-webkit-line-clamp: 1;
    	display: -moz-box;
    	display:block;
    	-webkit-box-orient: vertical;
    	-moz-box-orient: vertical;
    	}
    </style>


    长度需要自己设置。该样式只支持单行,若谷歌内核可以通过设置-webkit-line-clamp后面的数字来达到显示 几行溢出的效果,可自行测试。

    注意:网上有些方法中会多出word-break的样式,但是这个样式会让IE无法显示文本溢出,所以不可引入。

    下面是我做的大致的兼容性测试截图。

    这是谷歌:


    这是火狐:


    这是edge:


    IE7:


    IE8:


    IE9:


    IE10:


    IE11:



    展开全文
  • 关于网页前端中的 overflow溢出处理

    千次阅读 2018-07-20 16:16:51
     <title>overflow溢出处理    * {  /*word-break规定自动换行的处理方法  normal 使用浏览器默认的换行规则。  break-all 允许在单词内换行。  keep-all 只能在半角空格或连字符处换行*/  word-...

    <!DOCTYPE html>
    <html>

        <head>
            <meta charset="UTF-8">
            <link rel="shortcut icon" href="img/mynote.ico"/>
            <title>overflow溢出处理</title>
            <style type="text/css">
                * {
                    /*word-break规定自动换行的处理方法
                    normal    使用浏览器默认的换行规则。
                    break-all    允许在单词内换行。
                    keep-all    只能在半角空格或连字符处换行*/
                    word-break: normal;
                    overflow: hidden;
                    /*text-overflow规定当文本溢出包含元素时发生的事情
                    clip    修剪文本
                    ellipsis    显示省略符号来代表被修剪的文本
                    string    使用给定的字符串来代表被修剪的文本*/
                    text-overflow: ellipsis;
                }
                
                #div1 {
                    width: 400px;
                    height: 400px;
                    background: gold;
                    /*hidden    内容会被修剪,并且其余内容是不可见的。
                    scroll    内容会被修剪,但是浏览器会显示滚动条以便查看其余的内容。
                    auto    如果内容被修剪,则浏览器会显示滚动条以便查看其余的内容。*/
                    overflow: hidden;
                }
                #div2{
                    width: 50px;
                    height: 50px;
                }
            </style>
        </head>

        <body>
            <p>overflow 属性规定当内容溢出元素框时发生的事情</p>
            <div id="div1">
                <img src="img/少女.png" />
            </div>
            <div id="div2" title="shndjashdskadhsadkhsadjshak">
                shndjashdskadhsadkhsadjshak
            </div>
        </body>

    </html>

    展开全文
  • css overflow 溢出

    2020-10-09 09:05:24
    ** overflow:auto 当内容没有溢出容器时不出现滚动条,当内容溢出容器时出现滚动条,按需出现滚动条。此为body对象和textarea的...overflow_CSS参考手册_web前端开发参考手册系列</title> <meta name="aut

    **

    overflow:auto

    当内容没有溢出容器时不出现滚动条,当内容溢出容器时出现滚动条,按需出现滚动条。此为body对象和textarea的默认值。
    **

    <!DOCTYPE html>
    <html lang="zh-cmn-Hans">
    <head>
    <meta charset="utf-8" />
    <title>overflow_CSS参考手册_web前端开发参考手册系列</title>
    <meta name="author" content="Joy Du(飘零雾雨), dooyoe@gmail.com, www.doyoe.com" />
    <style>
    .test {
    	overflow: auto;
    	width: 200px;
    	height: 100px;
    	background: #eee;
    }
    </style>
    </head>
    <body>
    <div class="test">
    	<p>苏打速度</p>
    	<p>苏打速度</p>
    	<p>苏打速度</p>
    	<p>苏打速度</p>
    	<p>苏打速度</p>
    </div>
    </body>
    </html>
    

    在这里插入图片描述
    **

    overflow:hidden

    隐藏溢出容器的内容且不出现滚动条。

    **

    <!DOCTYPE html>
    <html lang="zh-cmn-Hans">
    <head>
    <meta charset="utf-8" />
    <title>overflow_CSS参考手册_web前端开发参考手册系列</title>
    <meta name="author" content="Joy Du(飘零雾雨), dooyoe@gmail.com, www.doyoe.com" />
    <style>
    .test {
    	overflow: hidden;
    	width: 200px;
    	height: 100px;
    	background: #eee;
    }
    </style>
    </head>
    <body>
    <div class="test">
    	<p>苏打速度</p>
    	<p>苏打速度</p>
    	<p>苏打速度</p>
    	<p>苏打速度</p>
    	<p>苏打速度</p>
    </div>
    </body>
    </html>
    

    在这里插入图片描述

    overflow:visible

    对溢出内容不做处理,内容可能会超出容器。

    <!DOCTYPE html>
    <html lang="zh-cmn-Hans">
    <head>
    <meta charset="utf-8" />
    <title>overflow_CSS参考手册_web前端开发参考手册系列</title>
    <meta name="author" content="Joy Du(飘零雾雨), dooyoe@gmail.com, www.doyoe.com" />
    <style>
    .test {
    	overflow: visible;
    	width: 200px;
    	height: 100px;
    	background: #eee;
    }
    </style>
    </head>
    <body>
    <div class="test">
    	<p>苏打速度</p>
    	<p>苏打速度</p>
    	<p>苏打速度</p>
    	<p>苏打速度</p>
    	<p>苏打速度</p>
    </div>
    </body>
    </html>
    

    在这里插入图片描述

    overflow:scroll

    隐藏溢出容器的内容,溢出的内容将以卷动滚动条的方式呈现。

    <!DOCTYPE html>
    <html lang="zh-cmn-Hans">
    <head>
    <meta charset="utf-8" />
    <title>overflow_CSS参考手册_web前端开发参考手册系列</title>
    <meta name="author" content="Joy Du(飘零雾雨), dooyoe@gmail.com, www.doyoe.com" />
    <style>
    .test {
    	overflow: scroll;
    	width: 200px;
    	height: 100px;
    	background: #eee;
    }
    </style>
    </head>
    <body>
    <div class="test">
    	<p>苏打速度</p>
    	<p>苏打速度</p>
    	<p>苏打速度</p>
    	<p>苏打速度</p>
    	<p>苏打速度</p>
    </div>
    </body>
    </html>
    

    在这里插入图片描述

    展开全文
  • 1 溢出属性overflow overflow属性规定当内部内容溢出元素框时发生的事情。 overflow: visible (默认值)内容不会被修剪,会呈现在元素框之外。 overflow: hidden 内容会被修剪,并且其余内容是不可见的。 overflow:...

    前端

    1 溢出属性overflow

    标签内部的内容超出了标签自身的范围会造成内容的溢出。
    overflow属性规定当内部内容溢出元素框时发生的事情。

    overflow: visible (默认值)内容不会被修剪,会呈现在元素框之外。
    overflow: hidden 内容会被修剪,并且其余内容是不可见的。
    overflow: scroll 内容会被修剪,但是浏览器会显示滚动条以便查看其余的内容。
    overflow: auto 如果内容被修剪,则浏览器会显示滚动条以便查看其余的内容。
    overflow: inherit 规定应该从父元素继承overflow属性的值。

    案例:制作圆形头像

    <!DOCTYPE html>
    <html>
    <head>
    	<title></title>
    	<style type="text/css">
    		body {
    			margin: 0;
    			background-color: #4e4e4e;
    		}
    		#d1 {
    			height: 200px;
    			width: 200px;
    			border-radius: 50%;  /* 圆形 */
    			border: 5px solid white;
    			margin: 0 auto;
    			overflow: hidden;  /* 超出的图片部分会被修剪。*/
    		}
    		#d1>img {
    			width: 100%;  /* 图片在div中间,大小合适。*/
    		}
    	</style>
    </head>
    <body>
    	<div id="d1">
    		<img src="2.png">
    	</div>
    </body>
    </html>
    

    2 定位

    position属性

    position: static 静态(默认值)按照标准文档流定位,无法改变位置;
    position: relative 相对定位 相对于标签原来的位置做移动;
    position: absolute 绝对定位 相对于已经定位过的父标签做移动,如果没有父标签那么就以body为参照;
    position: fixed 固定定位 相对于浏览器窗口做移动。

    如果标签的position属性设置为非静态的,可以使用属性 left / right / top / bottom 修改位置。
    即使没有移动,仅将标签的position属性设置为非静态,例如relative,该标签的性质也已经改变了,从没有定位过的标签变为了已经定位过的标签。

     #d4 {
    	position: fixed;  /* fixed,定位依据浏览器窗口 */
    	bottom: 10px;
    	right: 20px;
        height: 50px;
        width: 100px;
        background-color: white;
        border: 3px solid black;
    }
    

    3 浮动和定位是否脱离文档流

    可以通过标签原来的位置是否还保留来判断。

    1. 不脱离文档流
      相对定位
    2. 脱离文档流
      浮动
      绝对定位
      固定定位

    4 z-index和模态框

    模态框(Modal)是覆盖在父窗体上的子窗体,用于在不离开父窗体的情况下显示一些内容,进行一些互动操作等。

    z-index属性用于设置元素的堆叠顺序,拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。

    案例:三层结构登陆页面

    1. 最底部是正常父窗体的内容 z=0 底层
    2. 灰色的半透明区域 z=99 中间层
    3. 白色的注册区域 z=100 模态框
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <style>
            body {
                margin: 0;
            }
            .cover {
                position: fixed;
                left: 0;
                top: 0;
                right: 0;
                bottom: 0;
                background-color: rgba(0,0,0,0.5);
                z-index: 99;
            }
            .model {
                background-color: white;
                width: 400px;
                height: 200px;
                position: fixed;
                left: 50%;
                top: 50%;
                z-index: 100;
                margin-left: -200px;  /* width/2 */
                margin-top: -100px;  /* height/2 */
    
            }
        </style>
    </head>
    <body>
    	<div>这是最底层的页面内容</div>
    	<div class="cover"></div>
    	<div class="model">
    	    <h1>登陆页面</h1>
    	    <p>username:<input type="text"></p>
    	    <p>password:<input type="text"></p>
    	    <button>点击登录</button>
    	</div>
    </body>
    </html>
    

    5 透明度 opacity

    opacity属性设置元素的不透明级别。

    rgba只能修改颜色的透明度;
    opacity可以修改颜色和字体的透明度。

    6 JavaScript

    6.1 介绍

    1. JavaScript也是一门编程语言,是一种轻量级的脚本语言。
      nodejs支持js代码在后端服务器上运行。
    2. JavaScript与java没有任何关系。
    3. ECMAScript与JavaScript的关系。
      ECMAScript是JavaScript的规格,JavaScript是ECMAScript的一种实现。

    6.2 注释

    // 单行注释
    
    /*
    多行注释1
    多行注释2
    多行注释3
    */
    

    6.3 两种引入方式

    1. script标签内部直接书写js代码;
    2. script标签的src属性引入外部js代码。

    6.4 语法结构

    js是以分号作为语句的结束,通常可以省略分号,但建议使用分号。

    6.5 变量 var let

    使用关键字 var 和 let 声明变量。

    var 和 let 的区别:
    var:存在变量提升现象,即无论声明在何处,都会被提至其所在作用域的顶部;
    let:无变量提升现象,即未到let声明时,是无法访问该变量的。

    1. 使用未声明的变量,表现不同
    console.log(varTest);  // 输出undefined (注意要注释掉下面一行才能运行)
    console.log(letTest);  // 直接报错:ReferenceError: letTest is not defined.
    
    var varTest = 'Test var.';
    let letTest = 'Test let.';
    
    1. 重复声明同一个变量时,表现不同
    var varTest = 'Test var.';
    let letTest = 'Test let.';
    
    var varTest = 'varTest changed.';
    let letTest = 'letTest changed.';  // 直接报错:SyntaxError: Identifier 'letTest' has already been declared.
    
    1. 变量作用范围不同
    var varTest = 'Test var.';
    let letTest = 'Test let.';
    
    {
    	var varTest = 'varTest changed.';
        let letTest = 'letTest changed.';
    }
    
    console.log(varTest);  // 输出"varTest changed.",内部"{}"中声明的varTest变量会覆盖外部声明的varTest变量。
    console.log(letTest);  // 输出"Test let.",内部"{}"中声明的letTest和外部声明的letTest不是同一个变量。
    

    6.6 常量 const

    const pi = 3.14
    

    7 练习

    <!doctype html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport"
              content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>我的主页</title>
    	<link rel="stylesheet" href="main.css">
    </head>
    <body>
    	<div class="sidebar">
    		<div class="avatar">
    			<img src="avatar.jpg" alt="">
    		</div>
    		<div class="blog-info">
    			<p class="blog-title">放逐之刃的博客</p>
    			<p class="blog-info">曾担任诺克萨斯军队剑士长的锐雯,如今在那片她曾要征服的土地上流浪。她通过自己信念的力量和野蛮的行事风格在军中不断晋升,因此获得了一把传奇的符文之刃和自己的战团作为奖赏——然而在艾欧尼亚的前线上,锐雯对祖国的信仰遭到了考验,并最终粉碎。她切断了与帝国的一切关联,在分崩离析的世界中找寻自己的归宿,即使纷飞的谣言传说着诺克萨斯已经重铸.…</p>
    		</div>
    		<div class="blog-link">
    			<ul>
    				<li><a href="#">关于我</a></li>
    				<li><a href="#">微博</a></li>
    				<li><a href="#">微信公众号</a></li>
    			</ul>
    		</div>
    		<div class="blog-tag">
    			<ul>
    				<li><a href="#">折翼之舞</a></li>
    				<li><a href="#">镇魂怒吼</a></li>
    				<li><a href="#">勇往直前</a></li>
    				<li><a href="#">放逐之锋</a></li>
    			</ul>
    		</div>
    	</div>
    	<div class="main">
    		<div class="article">
    			<div class="article-head">
    				<span class="article-title">中单盖伦</span>
    				<span class="article-date">2017-02-06</span>
    			</div>
    			<div class="article-body">
    				<p>一代版本一代神,代代版本玩盖伦。</p>
    				<p>文能挂机喷队友,武能越塔送人头;</p>
    				<p>进可孤身一挑五,退可坐等二十投;</p>
    				<p>前能飞脚救残敌,后能放墙堵队友;</p>
    				<p>静则百年不见人,动则千里送超神;</p>
    				<p>英勇闪现送一血,卖起队友不回头;</p>
    				<p>顺风浪,逆风投;</p>
    				<p>问君能有几多愁,恰似五人四坑二十投。</p>
    			</div>
    			<div class="article-foot">
    				<span>#光速QA</span>
    				<span>#二十投</span>
    			</div>
    		</div>
    		<div class="article">
    			<div class="article-head">
    				<span class="article-title">小黑刷新球</span>
    				<span class="article-date">2017-02-06</span>
    			</div>
    			<div class="article-body">
    				<p>跳刀躲梅肯,塔下意识粉;</p>
    				<p>残血A回复,反补世界树;</p>
    				<p>推推吃盲压,疯脸A刃甲;</p>
    				<p>TP切假腿,一级冲泉水;</p>
    				<p>山岭憋蝴蝶,巨魔买羊刀;</p>
    				<p>地精合大炮,宙斯出辉耀。</p>
    				<p>黑暗游侠刷新球,深渊领主输出流;</p>
    				<p>一个红血五人撵,死在地图同一点;</p>
    				<p>羊刀巨魔祭品猴,大炮光法狂战牛;</p>
    				<p>手持达贡火枪手,胸怀黯灭撼地牛;</p>
    				<p>问君能有几多愁,敌法幻刺坚韧球;</p>
    				<p>开局无鸡无眼球,火枪电魂裸鞋流;</p>
    				<p>奶妈疯狂把兵补,潮汐留大拿人头;</p>
    				<p>屠夫钻野打后期,幽鬼开大送人头;</p>
    				<p>复仇之魂脑进水,换进一只撼地牛;</p>
    				<p>还有那个骷髅王,不出狂战不露头;</p>
    				<p>火枪自称很牛比,被人打成提款机;</p>
    				<p>电魂自命很风流,被人日的像猪头;</p>
    				<p>幻刺敌法曰莫愁,保我后期救地球;</p>
    				<p>龙骨鬼狗未出手,三路老家已没有;</p>
    				<p>越塔杀人被塔杀,奶妈无耻抢人头;</p>
    				<p>千辛万苦开一场,莫名秒退是七楼。</p>
    				<p>君不见,</p>
    				<p>家中起火火烧楼,队友都没回城轴;</p>
    				<p>孤身独挡三军路,队友遥望喊加油;</p>
    				<p>遗产流,速推流,不敌自家内讧流; </p>
    				<p>四人黑,六人黑,路人一进九人黑;</p>
    				<p>三路走,三路刷,三路被抓三路挂;</p>
    				<p>五人打,五人差,五人团战都没大;</p>
    				<p>对面隐形不插眼,真视掉了没人拣;</p>
    				<p>一个红血五人撵,死在地图同一点;</p>
    				<p>潮汐团战不放大,他说他在抠鼻屎;</p>
    				<p>后来团战又不放,他说抠完要擦纸。</p>
    				<p>Dota能有几多愁,恰似一人独守,</p>
    				<p>两眼相望,三路天兵,四人皆掉,</p>
    				<p>对五员猛将,诸葛再世也无谋。</p>
    			</div>
    			<div class="article-foot">
    				<span>#网吧五连坐</span>
    				<span>#从来没赢过</span>
    			</div>
    		</div>
    	</div>
    </body>
    </html>
    
    /*这是博客园首页的样式文件*/
    
    /*通用样式*/
    html {
        height: 100%;
    }
    body {
        margin: 0;
        background-color: #000;
        height: 100%;
        color: white;
    }
    a {
        text-decoration: none;
    }
    ul {
        list-style-type: none;
        padding-left: 0;
    }
    
    /*左侧样式*/
    .sidebar {
        width: 30%;
        height: 100%;
        float: left;
        position: fixed;
        background-color: #101010;
    }
    .avatar {
        height: 200px;
        width: 200px;
        border-radius: 50%;
        border: 10px solid #ff9900;
        margin: 0 auto;
        overflow: hidden;
    }
    .avatar>img {
        width: 100%;
    }
    .blog-info>.blog-title {
        margin: 20px auto;
        text-align: center;
        font-weight: bolder;
        font-size: 24px;
    }
    .blog-info>.blog-info {
        margin: 10px;
        text-indent: 2em;
    }
    .blog-link {
        margin: 10px 0px;
    }
    .blog-tag {
        margin-top: 100px;
        left: 10px;
    }
    .blog-link ul li, .blog-tag ul li {
        text-align: center;
        margin-top: 20px;
    }
    
    .blog-link a:link, .blog-link a:visited, .blog-tag a:link, .blog-tag a:visited {
        color: white;
    }
    .blog-link a:hover, .blog-link a:active, .blog-tag a:hover, .blog-tag a:active {
        color: #ff9900;
        font-weight: bolder;
    }
    /*右侧样式*/
    .main {
        width: 70%;
        height: 100%;
        float: right;
        font-weight: bolder;
    
    }
    .article {
        margin: 30px;
        box-shadow: 5px 5px 5px rgba(255, 153, 0, 0.9);
    }
    .article-title {
        font-size: 36px;
        border-left: 10px solid #ff9900;
        padding-left: 10px;
    }
    .article-date {
        float: right;
        margin: 20px 20px;
        font-weight: bolder;
    }
    .article-body {
        padding-left: 10px;
    }
    .article-foot {
        padding: 10px;
        border-top: 1px solid #ff9900;
    }
    .article-foot span {
        padding-right: 20px;
    }
    

    在这里插入图片描述

    8 知识回顾

    8.1 什么是python的垃圾回收机制

    垃圾回收机制,是解释器专门用来回收不可用的变量值所占用的内存空间的一种处理方法。
    包括引用计数,标记-清除 和 分代回收。

    8.2 单例模式

    单例模式是一个软件的设计模式,为了保证一个类,无论调用多少次产生的实例对象都指向同一个内存地址,仅仅只有一个实例(对象)。

    五种单例:
    模块
    装饰器
    元类
    __new__
    类方法: classmethod
    
    # 方式一: @classmethod 通过类方法来实现单例
    class Foo(object):
        # 定义了一个类的数据属性,
        # 用于接收对象的实例,判断对象的实例是否只有一个
        _instance = None  # obj1
    
        def __init__(self, name, age):
            self.name = name
            self.age = age
    
        @classmethod
        def singleton(cls, *args, **kwargs):
            # 判断类属性_instance是否有值,有代表已经有实例对象
            # 没有则代表没有实例对象,则调用object的__init__获取实例对象
            if not cls._instance:
                # object.__new__(cls): 创造对象
                # 没有参数情况下
                # cls._instance = object.__new__(cls, *args, **kwargs)
    
                # 有参数的情况下
                cls._instance = cls(*args, **kwargs)  # Foo()
    
            # 将已经产生的实例对象  直接返回
            return cls._instance
    
    
    obj1 = Foo.singleton('tank', '123')
    obj2 = Foo.singleton('tank', '123')
    
    # 方式二: 元类
    class MyMeta(type):
    
        # 1、先触发元类里面的__init__
        def __init__(self, name, base, attrs):  # self --> Goo
            # *** 造空的对象, 然后赋值给了Goo类中的_instance类属性
            self._instance = object.__new__(self)
            # 将类名、基类、类的名称空间,传给type里面的__init__
            super().__init__(name, base, attrs)
            # type.__init__(self, name, base, attrs)
    
        # 2、当调用Goo类时,等同于调用了由元类实例化的到的对象
        def __call__(self, *args, **kwargs):
            # 判断调用Goo时是否传参
            if args or kwargs:
                init_args = args
                init_kwargs = kwargs
    
                # 1)通过判断限制了用于传入的参数必须一致,然后返回同一个对象实例
                if init_args == args and init_kwargs == kwargs:
                    return self._instance
    
                # 2) 若不是同一个实例,则新建一个对象,产生新的内存地址
                obj = object.__new__(self)
                self.__init__(obj, *args, **kwargs)
                return obj
    
            return self._instance
    
    
    class Goo(metaclass=MyMeta):  # Goo = MyMeta(Goo)
        # _instance = obj
        def __init__(self, x):
            self.x = x
    
    
    g1 = Goo('1')
    g2 = Goo('1')
    
    # 方式三: __new__实现 通过调用类方法实例化对象时,自动触发的__new__来实现单例
    class Aoo(object):
        _instance = None
    
        def __new__(cls, *args, **kwargs):
            if not cls._instance:
                cls._instance = object.__new__(cls)
    
            return cls._instance
    
    
    a1 = Aoo()
    a2 = Aoo()
    
    # 方式四: 装饰器实现 通过调用类方法实例化对象时,自动触发的__new__来实现单例
    # 单例装饰器
    def singleton_wrapper(cls):  # cls ---> Too
        # 因为装饰器可以给多个类使用,所以这里采用字典
        # 以类作为key, 实例对象作为value值
        _instance = {
            # 伪代码: 'Too': Too的示例对象
        }
    
        def inner(*args, **kwargs):
            # 若当前装饰的类不在字典中,则实例化新类
            # 判断当前装饰的Too类是否在字典中
            if cls not in _instance:
                # obj = cls(*args, **kwargs)
                # return obj
                # 不在,则给字典添加 key为Too, value为Too()---> 实例对象
                # {Too: Too(*args, **kwargs)}
                _instance[cls] = cls(*args, **kwargs)
    
            # return 对应的实例对象cls(*args, **kwargs)
            return _instance[cls]
    
        return inner
    
    
    @singleton_wrapper  # singleton_wrapper(Too)
    class Too(object):
        pass
    
    
    t1 = Too()
    t2 = Too()
    
    # 方式五: 模块导入实现
    import cls_singleton
    
    s1 = cls_singleton.instance
    s2 = cls_singleton.instance
    
    print(s1 is s2)  # True
    

    8.3 Python中常用模块及主要功能

    1. 时间模块
    time模块,datetime模块
    时间戳 格式化时间 结构化时间
    2. random模块 
    用于产生随机值。
    3. os模块
    os模块主要提供与操作系统相关的功能。
    4. sys模块
    sys模块主要提供与Python解释器相关的功能。
    5. shutil模块
    对文件,文件夹提供了许多高级操作,包括压缩包等,特别是提供了支持文件复制和删除的函数。
    6. json&pickle模块
    用于序列化与反序列化操作。
    7. configparser模块
    用来解析配置文件的模块。
    8. hashlib模块
    用于哈希算法加密操作。
    9. subprocess模块
    subprocess模块允许你启动一个新的进程,连接输入/输出/错误的管道, 获得子进程的返回码。
    10. 日志模块
    用于记录日志。
    11. re模块
    操作正则表达式,可以用来检查检查一个字符串是否与某种模式匹配。
    
    展开全文
  • https://www.cnblogs.com/jiangxi/p/5106568.html
  • white-space 文字换行 ...text-overflow 文字溢出 设置或检索是否使用一个省略号标记(…)标识对象内文本的溢出 text-overflow: clip; -不显示省略标记(…),只是简单的剪裁 text-overflow: ellipsis; 当对象文本溢
  • overflow属性,此溢出非彼溢出

    千次阅读 2019-08-15 22:29:54
    overflow属性有四个值:visible(默认值),scroll,hidden和auto。 scroll值能阻止内容溢出,但会增加出滚动条,通过拉动滚动条可以浏览所有内容。 auto - 如果内容溢出被限制,则会添加一个滚动条,使超出的内容...
  • 详细代码块 请点击这里!!!
  • 溢出就出现滚动条 纵向横向都出现滚动条 当你内容多时,就出现可拖拽的滚动条,而内容少时,就会出现不可拖拽的滚动条 overflow: auto; 纵向出现滚动条 当你内容多时,就出现可拖拽的滚动条,而内容少时,就会不会...
  • css元素溢出 overflow

    2019-10-09 00:53:48
    当子元素的尺寸超过父元素的尺寸时,需要设置父元素显示溢出的子元素的方式,设置的方法是通过overflow属性来设置。 overflow的设置项: 1、visible 默认值。内容不会被修剪,会呈现在元素框之外。 2、hidden 内容会...
  • 深入理解CSS溢出overflow

    千次阅读 2019-10-16 13:50:19
    前面的话 当一个元素固定为某个特定大小,但内容在元素中放不下。此时就可以利用overflow属性来控制这种情况 定义 overflow溢出 值: visible | hidden | sc...
  • 溢出隐藏overflow:hidden

    2021-01-02 13:20:22
    <p>html 图片 overflow:hidden可以控制单个方向溢出隐藏吗</p>
  • CSS 文本溢出 - overflow 使用 verflow 属性:定义溢出元素内容区的内容会如何处理 语法: { overflow: visible / hidden / scroll / auto / inherit; } 说明: visible: 默认值,内容不会被修剪,会出现在元素框...
  • 显示隐藏元素之overflow 《小猪佩奇》,又名《粉红猪小妹》(台湾名为粉红猪),英文名为《Peppa Pig》,是由英国人阿斯特利(Astley)、贝克(Baker)、《小猪佩奇》,又名《粉红猪小妹》(台湾名为粉红猪),英文...
  • CSS的内容溢出和剪裁:overflow

    千次阅读 2017-04-13 15:25:16
    CSS的内容溢出和剪裁:overflow
  • 你别往后退了,我不再向前就是...如果文本被修剪了,那么文本溢出时显示滚动条,注意,不溢出时候不会出现滚动条。 4.scroll;内容会被隐藏,但是即使文本不超过元素框,也会有滚动条一直存在。 <!DOCTYPE html&.
  • 深入理解:overflow:hidden——溢出,坍塌,清除浮动

    万次阅读 多人点赞 2016-05-02 22:08:04
    深入理解:overflow:hidden——溢出,坍塌,清除浮动overflow:hidden是overflow属性的一个神奇用法,它可以帮助我们隐藏溢出的元素,清除浮动和解除坍塌。当某一个属性拥有这么多的功能时,难免使人难以把握,不过...
  • 前端文字溢出问题

    2019-09-28 15:18:41
    溢出文字隐藏溢出文字隐藏溢出文字隐藏溢出文字隐藏溢出文字隐藏溢出文字隐藏溢出文字隐藏溢出文字隐藏 p > body > html > 【2】js判断字的个数 str = str.length > 50? str.substr(0,str.length-3) ...
  • [css] CSS的overflow属性定义溢出元素内容区的内容会如何处理呢 visible(默认值):溢出的内容会照常显示在元素内容区之外; hidden:溢出的内容会被裁剪; scroll:溢出的内容会出现在滚动区,通过滚动条滚动...
  • 前端文本的溢出隐藏

    2020-04-16 16:30:12
    单行文本的溢出隐藏 overflow:hidden; //溢出隐藏 text-overflow:ellipsis;//超出显示省略号 white-space:nowrap;//强制文本在一行内显示 多行文本的溢出隐藏 overflow: hidden; text-overflow: ellipsis; // ...
  • IITG计算器溢出 描述 我们希望将拥有知识的人与需要知识的人联系起来。 作为一个由 5 名开发人员组成的团队,我们构建了这个问答门户,以帮助其他开发人员获得并分享对问题的见解。 技术栈 [MERN] 前端 前端框架: ...
  • 溢出处理 设置宽高,可能溢出。 解决: overflow, scroll/hidden/auto/visible(默认,可视) white-space属性–取值normal(默认忽略空白),pre(类比pre预格式),nowrap(单行不换行)。 text-overflow属性–取值...
  • 前面的话 CSS3新增了一些关于文本的样式,其中text-overflow文本溢出和text-shadow文本阴影有些特别。因为它们有对应的overflow溢出属性和box-shadow盒子阴影属...
  • 同学们在前端开发过程中可能会遇到需要将多行文本溢出部分隐藏并替换为省略号的情况,这里小千就来给大家介绍一下解决方案。 单行文本溢出及省略 众所周知,在CSS3中单行文本省略一般使用text-overflow实现:text-...
  • 前端页面显示时,文本部分的文字如果太多,有可能会导致文字溢出,大大影响页面的美观度。本人在虚拟机上做一个个人博客时,遇到一个很诡异的问题,跟大家分享一下。 本来要这样的效果: 结果却得到了这样的效果: ...
  • overflow:hidden的几种常用用法:溢出隐藏、清除浮动和消除图片底部留白。
  • [前端]文字溢出处理

    千次阅读 2018-09-28 21:08:13
    三部曲: 1、使文字溢出部分不换行 white-space:nowrap; 2、使溢出部分隐藏 overflow:hidden; 3、超出部分使用...代替 text-overflow:ellipsis;

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 9,964
精华内容 3,985
关键字:

overflow前端溢出