HTML学习笔记Day5
一、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的更多相关文章
- Python学习笔记——Day5(转载)
python 编码转换 主要介绍了python的编码机制,unicode, utf-8, utf-16, GBK, GB2312,ISO-8859-1 等编码之间的转换. 常见的编码转换分为以下几种情 ...
- Python学习笔记-Day5
冒泡算法: 实现1: a = [,,,,,,,,,,,,,,] def bubble(badlist): sort = False while not sort: sort = True ): ]: ...
- Python学习笔记day5
模块 1.自定义模块 自定义模块就是在当前目录下创建__init__.py这个空文件,这样外面的程序才能识别此目录为模块包并导入 上图中libs目录下有__init__.py文件,index.py程序 ...
- 学习笔记day5:inline inline-block block区别
1. block元素可以包含block元素和inline元素:但inline元素只能包含inline元素.要注意的是这个是个大概的说法,每个特定的元素能包含的元素也是特定的,所以具体到个别元素上,这条 ...
- JS学习笔记Day5
一.变量的作用域 1.作用域:变量的作用范围 2.全局变量:变量在整个程序都是有效的(从程序开始到程序结束变量均有效)在函数体外部定义的变量都是全局变量:在函数体内部 没有用var定义的变量也有可能是 ...
- sqli-labs学习笔记 DAY5
DAY 5 sqli-labs lesson 26a 闭合符号为单引号和括号,并且不回显错误,如果服务器是Linux,尝试%a0代替空格,这里尝试使用布尔型 数据库名长度:?id=1')&&a ...
- Python学习笔记 - day5 - 文件操作
Python文件操作 读写文件是最常见的IO操作,在磁盘上读写文件的功能都是由操作系统提供的,操作系统不允许普通的程序直接操作磁盘(大部分程序都需要间接的通过操作系统来完成对硬件的操作),所以,读写文 ...
- 商业爬虫学习笔记day5
一. 发送post请求 import requests url = "" # 发送post请求 data = { } response = requests.post(url, d ...
- 【目录】Python学习笔记
目录:Python学习笔记 目标:坚持每天学习,每周一篇博文 1. Python学习笔记 - day1 - 概述及安装 2.Python学习笔记 - day2 - PyCharm的基本使用 3.Pyt ...
随机推荐
- 牛客网-2018年湘潭大学程序设计竞赛-F
题目链接:https://www.nowcoder.com/acm/contest/105/F 解题思路:这道题第一眼直接思路就是搜索,但想了半天没想到有什么好办法搜,然后就转成最短路写了, 因为多入 ...
- 【转】微信小程序开发之图片等比例缩放 获取屏幕尺寸图片尺寸 自适应
原文[https://blog.csdn.net/qq_31383345/article/details/53127804] 早上在论坛上看到有人写了关于图片等比例缩放的文章,只是判断了图片宽是否大于 ...
- BZOJ2618[Cqoi2006]凸多边形——半平面交
题目描述 逆时针给出n个凸多边形的顶点坐标,求它们交的面积.例如n=2时,两个凸多边形如下图: 则相交部分的面积为5.233. 输入 第一行有一个整数n,表示凸多边形的个数,以下依次描述各个多边形.第 ...
- The Embarrassed Cryptographer POJ - 2635 同余模+高精度处理 +线性欧拉筛(每n位一起处理)
题意:给出两数乘积K(1e100) 和 一个数L(1e6) 问有没有小于L(不能等于)的素数是K的因数 思路:把数K切割 用1000进制表示 由同余模公式知 k%x=(a*1000%x+b* ...
- bzoj 1086: [SCOI2005]王室联邦 (分块+dfs)
Description “余”人国的国王想重新编制他的国家.他想把他的国家划分成若干个省,每个省都由他们王室联邦的一个成员来管理.他的国家有n个城市,编号为1..n.一些城市之间有道路相连,任意两个不 ...
- 微信开发使用webstorm&phpstrom 配置
材料: 下载链接:https://pan.baidu.com/s/1pLn6jFl 密码:fgo5 -----(将其中的wecharCode.jar 下载下来,然后在webStorm 的 File ...
- PHP require php > 5.3.0
项目版本要求 在5.3版本以上,如果是用 phpStudy 环境,那么直接切换版本即可
- 测试工作常用SQL查询语句
一.查询数值型数据: SELECT * FROM tb_name WHERE sum > 100; 查询谓词:>,=,<,<>,!=,!>,!<,=>, ...
- VSIX 插件右键菜单(2)
编译项目然后发布 // 获取当前右击的活动项目 EnvDTE.Project activeProj = ProjectHelpers.GetActiveProject(); // 获取 编译选项 Re ...
- 「SCOI2015」小凸想跑步 解题报告
「SCOI2015」小凸想跑步 最开始以为和多边形的重心有关,后来发现多边形的重心没啥好玩的性质 实际上你把面积小于的不等式列出来,发现是一次的,那么就可以半平面交了 Code: #include & ...