021 CSS高级特性
一：元素的显示与影藏
1.比较常见的单词
dispaly，visibility，overflow
2.display案例
如果影藏了，这个元素就看不见了，然后也不保留位置
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
div {
width: 200px;
height: 100px;
background-color: pink;
/*display: none;*/
}
</style>
</head>
<body>
<div></div>
<h3>123</h3>
</body>
</html>
效果：
影藏：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
div {
width: 200px;
height: 100px;
background-color: pink;
display: none;
}
</style>
</head>
<body>
<div></div>
<h3>123</h3>
</body>
</html>
效果：
3.visibility
参数有
inherit
visible
hidden
4.visibility案例
影藏之后，位置会留下来。
显示案例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
div {
width: 200px;
height: 100px;
background-color: pink;
visibility: visible;
/*visibility: hidden;*/
}
</style>
</head>
<body>
<div></div>
<h3>123</h3>
</body>
</html>
效果：
影藏案例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
div {
width: 200px;
height: 100px;
background-color: pink;
/*visibility: visible;*/
visibility: hidden;
}
</style>
</head>
<body>
<div></div>
<h3>123</h3>
</body>
</html>
效果：
5.实践
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
a {
display: block;
width: 445px;
height: 320px;
margin: 50px;
position: relative;
}
.mask {
display: none; /*先影藏*/
width: 100%;
height: 100%;
background: rgba(0,0,0,0.4) url(51.png) no-repeat center;
position: absolute;
top: 0;
left: 0;
}
a:hover .mask{
/*鼠标经过a的时候，里面的mask显示*/
display: block;
}
</style>
</head>
<body>
<a href="#">
<img src="237.png" width="445" height="320">
<div class="mask"></div>
</a>
</body>
</html>
效果：
鼠标经过：
6.overflow溢出
属性
visible
auto
hidden：溢出影藏
scroll：不管超出没超出都显示滚动条
7.案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
div {
width: 200px;
height: 200px;
border: 1px solid red;
/*overflow: scroll;*/
overflow: visible;
}
</style>
</head>
<body>
<div>文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字</div>
</body>
</html>
效果：
二：用户界面样式
1.鼠标样式curcor
属性
defalt
pointer：小手
text：变成选择
move：移动的，十字架
2.案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
li {
cursor: move;
}
</style>
</head>
<body>
<ul>
<li>11111111111</li>
<li>22222222222</li>
<li>333333333</li>
</ul>
</body>
</html>
3.轮廓outline
属性
outline-color
outline-style
outline-width
4.案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
input { }
</style>
</head>
<body>
<input type="text">
</body>
</html>
效果：
去除轮廓：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
input {
outline: none;
}
</style>
</head>
<body>
<input type="text">
</body>
</html>
效果：
优化：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
input {
outline: none;
border: 1px solid #ccc;
width: 200px;
height: 25px;
background: url(resize.png) no-repeat 160px center;
}
</style>
</head>
<body>
<input type="text">
</body>
</html>
效果：
5.textarea去掉拖拽
案例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<textarea name="" id="" cols="60" rows="10"></textarea>
</body>
</html>
效果：
去除案例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
textarea {
resize: none;
}
</style>
</head>
<body>
<textarea name="" id="" cols="60" rows="10"></textarea>
</body>
</html>
效果：
三：垂直居中
1.vertical-align
属性值
baseline：默认，文字和图片基线对齐
sub
super
top
text-top
middle
bottom
text-bottom
2.和基线对齐
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div>
my pictureg
<img src="237.png" alt="">
</div>
</body>
</html>
效果：
3. 居中
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
img {
vertical-align: middle;
}
</style>
</head>
<body>
<div>
my pictureg
<img src="237.png" alt="">
</div>
</body>
</html>
4.去除图片底侧的空白缝隙
因为图片会和基线对齐
解决方式：
vertical-align：top
display:block
案例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
img {
vertical-align: top;
}
div {
border: 1px solid red;
}
</style>
</head>
<body>
<div>
my pictureg
<img src="237.png" alt="">
</div>
</body>
</html>
效果：
四：溢出文字隐藏
1.white-space
强制一行显示内容
normal：默认方式
nowrap：强制在一行显示文本，直到文字结束或者遭遇br换行
2.案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
div {
width: 200px;
height: 20px;
border: 1px solid red;
white-space: nowrap;
}
</style> </head>
<body>
<div>诺不移，情不变，才不会，用一生，绕一圈<br>
诺不移，情不变，才不会，用一生，绕一圈</div>
</body>
</html>
3.效果
4.文字溢出
超出可以影藏：overflow：hideden
还可以使用text-overflow
属性有：
clip：简单的裁切
ellipsis：省略号，需要配合使用
5.案例
下面一行都不能少。
11 text-overflow: ellipsis;
12 white-space: nowrap;
13 overflow: hidden;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
div {
width: 215px;
height: 20px;
border: 1px solid red;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
}
</style> </head>
<body>
<div>诺不移，情不变，才不会，用一生，绕一圈<br>
诺不移，情不变，才不会，用一生，绕一圈</div>
</body>
</html>
效果：
021 CSS高级特性的更多相关文章
- CSS高级知识
1.CSS变换 2.CSS动画 3.CSS高级特性及兼容性:http://caniuse.com/
- VQuery高级特性
VQuery高级特性 css方法 同时设置多个--for in 链式操作 链式操作 函数,链式操作 css 方法链式操作 json的使用 阻止冒泡,默认事件 VQuery插件 插件机制 可以扩展库的功 ...
- 【LESS系列】高级特性
前面我已经有一篇文章是写 LESS 的基础语法的. 那么这一次我们来看一下 LESS 的高级特性. 说起高级特性,首先也必须要一提的是模式匹配. 虽然个人觉得模式匹配的实用度其实也是一般般,但在关键时 ...
- 你应该知道的Vue高级特性
本文使用的Vue版本:2.6.10 Vue为我们提供了很多高级特性,学习和掌握它们有助于提高你的代码水平. 一.watch进阶 从我们刚开始学习Vue的时候,对于侦听属性,都是简单地如下面一般使用: ...
- CSS 三大特性 层叠 继承 优先级
css三大特性 层叠性: 如果一个属性通过两个相同选择器设置到同一个元素上,相同的属性就会出现冲突,那么这个时候一个属性就会将另一个属性层叠掉,采用的是就近原则 继承性: 子标签会继承父标签的某些样式 ...
- ActiveMQ中的Destination高级特性(一)
---------------------------------------------------------------------------------------- Destination ...
- Python3学习（二）-递归函数、高级特性、切片
##import sys ##sys.setrecursionlimit(1000) ###关键字参数(**关键字参数名) ###与可变参数不同的是,关键字参数可以在调用函数时,传入带有参数名的参数, ...
- 云端卫士实战录 | Java高级特性之多线程
<实战录>导语 一转眼作为一名Java开发者已经四年多时间了,说长不长说短不短,对于java的感情还是比较深的,主要嘛毕竟它给了我饭吃.哈哈,开个玩笑.今天我想借此机会来和大家聊聊Java ...
- javascript高级特性
01_javascript相关内容02_函数_Arguments对象03_函数_变量的作用域04_函数_特殊函数05_闭包_作用域链&闭包06_闭包_循环中的闭包07_对象_定义普通对象08_ ...
随机推荐
- linux网卡名称修改
vim /etc/sysconfig/grub ,在倒数第二行添加如下代码 net.ifnames=0 biosdevname=0 GRUB_TIMEOUT=5 GRUB_DISTRIBUTOR=&q ...
- CV2识别图片A,B,C,D
这个模型是经过简单训练,只能识别四个英文字母:ABCD,是我为了提取答案才训练的,因为科大,百度,以及腾讯的识别不是很准,所以自己训练自己使用,希望能够给你带来方便.下面是训练好的model,如多你感 ...
- 运维开发笔记整理-Django模型语法
运维开发笔记整理-Django模型语法 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.模型基本概念 1>.什么是模型 模型是你的数据唯一的,权威的信息源.它包含你所存储数 ...
- POST请求接口实列
通过响应状态来判断是否读取数据与抛出异常,然后通过判断获取的字节数去读取数据或抛出异常 /** * 发送HttpPost请求 * @param strURL * 服务地址 * @param param ...
- 常见的监控JVM的几个Linux命令和使用
jps [root@xxx bin]# jps -l 2007bash: jps: command not found [root@xxx bin]# /opt/jdk1.8.0_181/bin/jp ...
- 【转】spring 自定义注解（annotation）与 aop获取注解
首先我们先介绍Java自定义注解. 在开发过程中,我们实现接口的时候,会出现@Override,有时还会提示写@SuppressWarnings.其实这个就是Java特有的特性,注解. 注解就是某种注 ...
- 使用Visual Studio快速开发STM32F4-Discovery探索板入门
本本将主要介绍如何使用Visual Studio创建一个基于STM32F4-Discovery探索板的简单工程. 本文使用以下硬件和软件: ● Microsoft Visual Studio ...
- linux系统编程综合练习-实现一个小型的shell程序(二)
上节minishell当中,已经初步实现了一个简单命令的解析,这节来继续对更加复杂命令进行解析,包含:输入重定向的解析.管道行的解析.输出重定向的解析以及是否有后台作业的解析,如下: 下面对其进行实现 ...
- 完美字符子串 单调队列预处理+DP线段树优化
题意:有一个长度为n的字符串,每一位只会是p或j.你需要取出一个子串S(注意不是子序列),使得该子串不管是从左往右还是从右往左取,都保证每时每刻已取出的p的个数不小于j的个数.如果你的子串是最长的,那 ...
- sublime+python3 中文环境
工具-编译系统-新编译系统 { "cmd": ["C:/Program Files (x86)/Python36-32/python.exe","-u ...