一、CSS属性

  1.文本溢出是否“...”显示属性:text-overflow:clip(不显示省略标记)/ellipsis(文本溢出时“...”显示)

  定义此属性有四个必要条件:1)须有容器宽度:width:value;

               2)强制文本在一行内显示:white-space:nowrap;

               3)溢出内容隐藏:overflow:hidden;

               4)溢出文本显示“...”:text-overflow:ellipsis;

  2.溢出属性:overflow:visible(默认值,不会被隐藏)

        hidden(内容隐藏)

        auto(如果内容隐藏,则浏览器内显示滚动条)

        scroll(内容会隐藏并显示滚动条)

        inherit(规定应该从父元素继承overflow属性的值)

        注:overflow-x:hidden;隐藏横向滚动条

          overflow-y:hidden;隐藏纵向滚动条

  3.空余空间属性 (该属性用来设置如何处理元素内的空白;):white-space:normal/pre/nowrap/pre-wrap /pre-line /inherit

      normal(默认值,空白会被浏览器忽略)

      nowrap(文本不会换行,文本会在同一行上继续,直到遇到标签<br />为止)

      pre(空白会被浏览器保留,其行为方式类似HTML中的pre标签)

      pre-wrap(保留空白符序列,但是正常的进行换行)

      pre-line(合并空白符序列,但是保留换行符)

      inherit(规定应该从父元素继承White-space属性的值(ie浏览器不支持此属性值))

  拓展:overflow内容溢出时的设置

    属性:overflow 水平及垂直方向内容溢出时的设置

       overflow-x 水平方向内容溢出时的设置

       overflow-y 垂直方向内容溢出时的设置

    以上三个属性设置的属性值:visible、scroll、hidden、auto;

       visible 默认值。使用该值时,无论设置的"width"和"height"的值是多少,其中的内容无论是否超出范围都将被强制显示。

       hidden 效果与visible相反。任何超出"width"和"height"的内容都会不可见。

        scroll 无论内容是否超越范围,都将显示滚动条。

       auto 当内容超出范围时,显示滚动条,否则不显示。

    应用:

      1)没有水平滚动条:

        <div style="overflow-x:hidden">test</div>

      2)没有垂直滚动条 :

        <div style="overflow-y:hidden">test</div>

      3)没有滚动条 :

        <div style="overflow-x:hidden;overflow-y:hidden" 或 style="overflow:hidden">test</div>

      4)自动显示滚动条:

        <div  style="height:100px;width:100px;overflow:auto;">test</div>

    自己定义滚动条的颜色

      Body {

        scrollbar-arrow-color: #f4ae21; /*图6,三角箭头的颜色*/

        scrollbar-face-color: #333; /*图5,立体滚动条的颜色*/

        scrollbar-3dlight-color: #666; /*图1,立体滚动条亮边的颜色*/

        scrollbar-highlight-color: #666; /*图2,滚动条空白部分的颜色*/

        scrollbar-shadow-color: #999; /*图3,立体滚动条阴影的颜色*/

        scrollbar-darkshadow-color: #666; /*图4,立体滚动条强阴影的颜色*/

        scrollbar-track-color: #666; /*图7,立体滚动条背景颜色*/

        scrollbar-base-color:#f8f8f8; /*滚动条的基本颜色*/

        }

HTML学习笔记Day5的更多相关文章

  1. Python学习笔记——Day5(转载)

    python 编码转换 主要介绍了python的编码机制,unicode, utf-8, utf-16, GBK, GB2312,ISO-8859-1 等编码之间的转换. 常见的编码转换分为以下几种情 ...

  2. Python学习笔记-Day5

    冒泡算法: 实现1: a = [,,,,,,,,,,,,,,] def bubble(badlist): sort = False while not sort: sort = True ): ]: ...

  3. Python学习笔记day5

    模块 1.自定义模块 自定义模块就是在当前目录下创建__init__.py这个空文件,这样外面的程序才能识别此目录为模块包并导入 上图中libs目录下有__init__.py文件,index.py程序 ...

  4. 学习笔记day5:inline inline-block block区别

    1. block元素可以包含block元素和inline元素:但inline元素只能包含inline元素.要注意的是这个是个大概的说法,每个特定的元素能包含的元素也是特定的,所以具体到个别元素上,这条 ...

  5. JS学习笔记Day5

    一.变量的作用域 1.作用域:变量的作用范围 2.全局变量:变量在整个程序都是有效的(从程序开始到程序结束变量均有效)在函数体外部定义的变量都是全局变量:在函数体内部 没有用var定义的变量也有可能是 ...

  6. sqli-labs学习笔记 DAY5

    DAY 5 sqli-labs lesson 26a 闭合符号为单引号和括号,并且不回显错误,如果服务器是Linux,尝试%a0代替空格,这里尝试使用布尔型 数据库名长度:?id=1')&&a ...

  7. Python学习笔记 - day5 - 文件操作

    Python文件操作 读写文件是最常见的IO操作,在磁盘上读写文件的功能都是由操作系统提供的,操作系统不允许普通的程序直接操作磁盘(大部分程序都需要间接的通过操作系统来完成对硬件的操作),所以,读写文 ...

  8. 商业爬虫学习笔记day5

    一. 发送post请求 import requests url = "" # 发送post请求 data = { } response = requests.post(url, d ...

  9. 【目录】Python学习笔记

    目录:Python学习笔记 目标:坚持每天学习,每周一篇博文 1. Python学习笔记 - day1 - 概述及安装 2.Python学习笔记 - day2 - PyCharm的基本使用 3.Pyt ...

随机推荐

  1. 牛客网-2018年湘潭大学程序设计竞赛-F

    题目链接:https://www.nowcoder.com/acm/contest/105/F 解题思路:这道题第一眼直接思路就是搜索,但想了半天没想到有什么好办法搜,然后就转成最短路写了, 因为多入 ...

  2. 【转】微信小程序开发之图片等比例缩放 获取屏幕尺寸图片尺寸 自适应

    原文[https://blog.csdn.net/qq_31383345/article/details/53127804] 早上在论坛上看到有人写了关于图片等比例缩放的文章,只是判断了图片宽是否大于 ...

  3. BZOJ2618[Cqoi2006]凸多边形——半平面交

    题目描述 逆时针给出n个凸多边形的顶点坐标,求它们交的面积.例如n=2时,两个凸多边形如下图: 则相交部分的面积为5.233. 输入 第一行有一个整数n,表示凸多边形的个数,以下依次描述各个多边形.第 ...

  4. The Embarrassed Cryptographer POJ - 2635 同余模+高精度处理 +线性欧拉筛(每n位一起处理)

    题意:给出两数乘积K(1e100) 和 一个数L(1e6)  问有没有小于L(不能等于)的素数是K的因数 思路:把数K切割 用1000进制表示   由同余模公式知   k%x=(a*1000%x+b* ...

  5. bzoj 1086: [SCOI2005]王室联邦 (分块+dfs)

    Description “余”人国的国王想重新编制他的国家.他想把他的国家划分成若干个省,每个省都由他们王室联邦的一个成员来管理.他的国家有n个城市,编号为1..n.一些城市之间有道路相连,任意两个不 ...

  6. 微信开发使用webstorm&phpstrom 配置

    材料: 下载链接:https://pan.baidu.com/s/1pLn6jFl 密码:fgo5  -----(将其中的wecharCode.jar 下载下来,然后在webStorm 的 File ...

  7. PHP require php > 5.3.0

    项目版本要求 在5.3版本以上,如果是用 phpStudy 环境,那么直接切换版本即可

  8. 测试工作常用SQL查询语句

    一.查询数值型数据: SELECT * FROM tb_name WHERE sum > 100; 查询谓词:>,=,<,<>,!=,!>,!<,=>, ...

  9. VSIX 插件右键菜单(2)

    编译项目然后发布 // 获取当前右击的活动项目 EnvDTE.Project activeProj = ProjectHelpers.GetActiveProject(); // 获取 编译选项 Re ...

  10. 「SCOI2015」小凸想跑步 解题报告

    「SCOI2015」小凸想跑步 最开始以为和多边形的重心有关,后来发现多边形的重心没啥好玩的性质 实际上你把面积小于的不等式列出来,发现是一次的,那么就可以半平面交了 Code: #include & ...