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_ ...
随机推荐
- python 编码设置
py 文件设置编码: # -*- coding: utf-8 -*- #coding=utf-8 两种方式任选一种即可 输出到浏览器设置编码: import io import sys sys.std ...
- IP和网络互联
IP和网络互联 IP网络互连机制: IP地址分类方法及原因: CIDR地址(无分类地址): IP分组首部格式: 数据分片方法: IP分组传输思路:
- DNS子域授权，区域传送
dig 命令 +recurse 递归查询 默认 +norecurse 不递归查询 dig +recurse -t A www.baidu.com @127.0.0.1 dig -t a ...
- 基于Java+Selenium的WebUI自动化测试框架（十二）-----读取Excel文件（POI）（2）
上一篇我们讲了怎么利用Java的反射机制,将Excel的读取到的数据,赋值给我们构造函数中定义的变量. 接下来就简单了,我们将实际实现这个读取的简单过程.来看下面一段代码. private stati ...
- javaweb-servlet获取给定文件在服务器上的绝对路径的方法
1.通过ServletContext获取 在tomcat5,6,7版本中我们可以通过ServletContext来获取给定文件在服务器上的绝对路径. ServletContext context = ...
- LG4723 【模板】常系数线性递推
P4723 [模板]常系数齐次线性递推 题目描述 求一个满足$k$阶齐次线性递推数列${a_i}$的第$n$项. 即:$a_n=\sum\limits_{i=1}^{k}f_i \times a_{n ...
- Python3和Python2中 int 和 long的区别？
int(符号整数):通常被称为是整数或整数,没有小数点的正或负整数: long(长整数):无限大小的整数,这样写整数和一个大写或小写的L.
- 【CSP-S 2019】【洛谷P5666】树的重心【主席树】【树状数组】【dfs】
题目: 题目链接:https://www.luogu.com.cn/problem/P5666 小简单正在学习离散数学,今天的内容是图论基础,在课上他做了如下两条笔记: 一个大小为 \(n\) 的树由 ...
- [Flutter] Create a Customer widget
For example, we want to have to button, looks similar to FloatingActionButton: But in the doc, it sa ...
- CentOS 7.5静默安装oracle 11g
1.安装前环境准备 1.1.配置本地yum源 #因公司内网环境,没有互联网,所以需要配置本地yum源,安装所需依赖包等. #挂载ios镜像centos7.5-1804 [root@oracle ~]# ...