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_ ...
随机推荐
- 为openstack制作CoreOS虚拟机镜像(基于CoreOS官方提供镜像)
OpenStack源码交流群: 538850354 1.下载CoreOS镜像(633.1.0版本) CoreOS官网已经有openstack使用的虚拟机镜像,可以直接下载,然后进行修改 http:// ...
- 基于k8s集群部署prometheus监控ingress nginx
目录 基于k8s集群部署prometheus监控ingress nginx 1.背景和环境概述 2.修改prometheus配置 3.检查是否生效 4.配置grafana图形 基于k8s集群部署pro ...
- springboot项目搭建及常用技术整合
一.在你建立的工程下创建 Module 选择Spring initializr创建. 二.在Type处选择: Maven Project(项目的构建工具) 三.创建依赖时勾上web,mybatis,m ...
- Python sorted 函数用法
1.背景 在python中,通常需要使用排序函数.而对字典针对一个键值进行排序会经常使用到.记录sorted 函数的键值排序用法. 2.代码 data 一个list,list 中的元素由字典组成 ...
- C++中与类有关的注意事项（更新中~~~）
关于构造函数的调用次序,见下列代码 #include<iostream> using namespace std; class A { private: int x; public: A( ...
- Makefile学习二
今天继续对Makefile进行研究,话不多说,进入正题: make常用内嵌函数: 下面利用上面的知识点来实现一个多级目录的Makefile,如下: 多级目录Makefile: 这个例子的目录结构如下: ...
- 07 Node.js安装及环境配置
二.安装Node.js步骤 1.下载对应你系统的Node.js版本:https://nodejs.org/en/download/2.选安装目录进行安装3.环境配置4.测试 开始安装 1.下载完成后, ...
- Centos7 源码安装PostgreSQL Citus集群 （转载）
citus的分布式集群目前在苏宁大规模应用,苏宁陈华军也做了很多技术分享和博客介绍.目前所有的教程都是rpm和pg一起安装,个人不喜欢,毕竟citus定位是个插件,我想在我已安装的pg上源码装一个ci ...
- js使用WebUploader做大文件的分块和断点续传
1 背景 用户本地有一份txt或者csv文件,无论是从业务数据库导出.还是其他途径获取,当需要使用蚂蚁的大数据分析工具进行数据加工.挖掘和共创应用的时候,首先要将本地文件上传至ODPS,普通的小文件通 ...
- FTP与HTTP上传文件的对比
许多站点,比如facebook或一些博客等都允许用户上传或下载文件,比如论坛或博客系统的图片. 在这种情况下,通常有两种选择上传文件到服务器,那就是FTP协议和HTTP协议. 以下列出了一些两者的不同 ...