CSS魔法(四)常用属性
元素的显示与隐藏 display、visibility、overflow
在CSS中有三个显示和隐藏的单词比较常见,我们要区分开,他们分别是 display、visibility 和 overflow。
display: none;隐藏某个元素 不保留位置
display: block 显示某个元素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
div {
width: 200px;
height: 100px;
background-color: pink;
display: none;/* display: none隐藏某个元素,不保留位置;display: block显示某个元素 */
}
p {
width: 200px;
height: 100px;
background-color: red;
}
</style>
</head>
<body>
<div></div>
<p>测试</p>
</body>
</html>
visibility: hidden; 隐藏某个元素 保留位置
visibility: visible; 显示某个元素
最常用的是display
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
a {
display: block;
width: 448px;
height: 252px;
margin: 100px;
position: relative;
}
.mask {
width: 100%;
height: 100%;
background:rgba(0, 0, 0, .4) url(images/arr.png) no-repeat center;
position: absolute;
top: 0;
left: 0;
display: none; /* 首先正常情况下 是隐藏的*/
} /*什么时候出来? 鼠标放到 a 身上 是a 里面的 mask 出来*/
a:hover .mask { /*:hover 鼠标经过a 然后 a 里面的 mask 就显示出来 所以这里用 后代选择器*/
display: block; /*显示出来*/
} </style>
</head>
<body>
<a href="#">
<img src="data:images/tudou.jpg" height="252" width="448" alt="">
<div class="mask"></div>
</a>
<a href="#">
<img src="data:images/tudou.jpg" height="252" width="448" alt="">
<div class="mask"></div>
</a>
<a href="#">
<img src="data:images/tudou.jpg" height="252" width="448" alt="">
<div class="mask"></div>
</a>
</body>
</html>
overflow
检索或设置当对象的内容超过其指定高度及宽度时如何管理内容。
visible : 不剪切内容也不添加滚动条。
auto : 超出自动显示滚动条,不超出不显示滚动条
hidden : 不显示超过对象尺寸的内容,超出的部分隐藏掉
scroll : 不管超出内容否,总是显示滚动条
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
div {
width: 200px;
height: 200px;
border: 1px solid red;
/*overflow: hidden; 溢出隐藏*/
overflow: scroll; /*scroll 滚动条 */
overflow: auto; /*auto 自动 */
}
</style>
</head>
<body>
<div>
文字文字文字文字文字文字文字文字文字文字文字文字文字
文字文字文字文字文字文字文字文字文字文字文字文字文字
文字文字文字文字文字文字文字文字文字文字文字文字文字
文字文字文字文字文字文字文字文字文字文字文字文字文字
文字文字文字文字文字文字文字文字文字文字文字文字文字
文字文字文字文字文字文字文字文字文字文字文字文字文字
文字文字文字文字文字文字文字文字文字文字文字文字文字
文字文字文字文字文字文字文字文字文字文字文字文字文字
</div>
</body>
</html>
鼠标样式cursor
cursor : default 小白
cursor : pointer 小手
cursor : move 移动
cursor : text 文本
textarea
<!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(images/s.png) no-repeat 180px center;
}
textarea {
resize: none; /*防止拖拽*/
outline: none; /*取消蓝色边框*/
}
</style>
</head>
<body>
<input type="text">
<textarea name="" id="" cols="30" rows="10"></textarea>
</body>
</html>
dl标签与table标签
https://blog.csdn.net/zhenyu5665/article/details/54909686
vertical-align 垂直对齐
baseline
top
middle
bottom
使用vertical-align: middle可消除缝隙。(产生缝隙的原因是图片默认和文字基线对齐)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
img {
vertical-align: middle;
/* display: block; */
}
div {
border: 2px solid red;
}
</style>
</head>
<body>
<div>
<img src="data:images/tudou.jpg" height="252" width="448" alt="">
my name
</div>
</body>
</html>
使用display: block将img标签转为块级元素,可消除缝隙。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
img {
/* vertical-align: middle; */
display: block;
}
div {
border: 2px solid red;
}
</style>
</head>
<body>
<div>
<img src="data:images/tudou.jpg" height="252" width="448" alt="">
<!-- my name -->
</div>
</body>
</html>
text-overflow 文字溢出
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
body {
padding: 30px;
}
li {
list-style: none;
width: 200px;
height: 30px;
border: 1px solid pink;
white-space: nowrap;
/*1.强制在同一行内显示所有文本,直到文本结束或者遭遇br标签对象才换行*/
overflow: hidden; /* 2. 超出的部分 隐藏*/
text-overflow: ellipsis; /* 3. 溢出的部分用省略号替代*/
line-height: 30px;
}
</style>
</head>
<body>
<ul>
<li>文字内容文字内容文字内容文字内容文字内容</li>
<li>文字内容文字内容文字内容文字内容文字内容</li>
<li>文字内容文字内容文字内容文字内容文字内容</li>
<li>文字内容文字内容文字内容文字内容文字内容</li>
<li>文字内容文字内容文字内容文字内容文字内容</li>
</ul>
</body>
</html>
nowrap禁止文字自动换行
white-space: nowrap;/*1.强制在同一行内显示所有文本,直到文本结束或者遭遇br标签对象才换行*/
overflow: hidden; /* 2. 超出的部分 隐藏*/
text-overflow: ellipsis; /* 3. 溢出的部分用省略号替代*/
精灵技术(sprite)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
span {
display: inline-block;
background: url(images/abcd.jpg) no-repeat;
}
.aa {
width: 108px;
height: 110px;
background-position: 0 -9px; }
.n {
width: 112px;
height: 110px;
background-position: -255px -276px;
}
.d {
width: 97px;
height: 107px;
background-position: -363px -8px;
}
.y {
width: 110px;
height: 110px;
background-position: -367px -556px;
}
</style>
</head>
<body>
<span class="aa"></span>
<span class="n"></span>
<span class="d"></span>
<span class="y"></span>
</body>
</html>
滑动门效果
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
a {
margin: 100px;
height: 33px;
display: inline-block;
background: url(images/to.png) no-repeat;
color: #fff;
text-decoration: none;
line-height: 33px;
padding-left: 15px;
}
span {
display: inline-block;
height: 33px;
background: url(images/to.png) no-repeat right;
padding-right: 15px;
}
</style>
</head>
<body>
<a href="#">
<span>首页12345678</span>
</a>
</body>
</html>
微信滑动门
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
body {
background: url(images/wx.jpg) repeat-x;
}
.nav li {
float: left;
}
.nav a {
/*1. a 左边放 左圆角 但是文字需要往右走 15px*/
height: 33px;
line-height: 33px;
color: #fff;
text-decoration: none;
background: url(images/to.png) no-repeat;
display: inline-block;
padding-left: 15px;
}
.nav span {
/*2. span 右边放右圆角 但是文字需要往左走 15px*/
background: url(images/to.png) no-repeat right;
display: inline-block;
height: 33px;
padding-right: 15px; }
/*.nav a:hover {
background-image: url(images/ao.png);
} .nav a:hover span { /*鼠标经过之后 ,span 凹下去
background-image: url(images/ao.png);
}*/ .nav a:hover, .nav a:hover span {
background-image: url(images/ao.png);
}
</style>
</head>
<body>
<ul class="nav">
<li>
<a href="#">
<span>首页</span>
</a>
</li>
<li>
<a href="#">
<span>三个字</span>
</a>
</li>
<li>
<a href="#">
<span>新闻客户端</span>
</a>
</li> </ul>
</body>
</html>
CSS魔法(四)常用属性的更多相关文章
- CSS中的常用属性
一 CSS文字属性:color : #999999; /*文字颜色*/font-family : 宋体,sans-serif; /*文字字体*/font-size : 9pt; /*文字大小*/fon ...
- CSS学习笔记04 CSS文字排版常用属性
字体样式属性 font-size:字号大小 font-size属性用于设置字号,该属性的值可以使用相对长度单位,也可以使用绝对长度单位.其中,相对长度单位比较常用,推荐使用像素单位px,绝对长度单位使 ...
- CSS 温故而知新 background常用属性
1.background-repeat 不用说,常用直接no-repeat 2.background-size 常用的分为两个,一个是铺满:cover, 另一个是使图像适应宽高:contain 3.b ...
- 前端学习之路之CSS (四)
Infi-chu: http://www.cnblogs.com/Infi-chu/ CSS盒子模型 概念:CSS盒模型本质上是一个盒子,封装周围的HTML元素,它包括:边距,边框,填充,和实际 ...
- CSS样式常用属性整理
web工程师是最近5年刚刚兴起的一门高薪职业,人们的专注度越来越高. 那么前端除了学习html标签之外还需要掌握什么知识点呢? 为大家整理了一个和HTML标签密不可分的知识要点--<CSS样式常 ...
- CSS的常用属性
刚开始学习前段的我,还处于初级阶段,一些东西还是会有搞不明白的时候,还是要大家多多理解.今说就一些关于CSS的常用属性吧! 一.CSS常用选择器 CSS选择器应该说是一个非常重要的工具吧,选择器用得好 ...
- css常用属性1
1 背景相关 背景颜色 background-color = 颜色名称/rgb值/十六进制值 背景图片 background-image = url('') 背景图片平铺方式 backgro ...
- 好程序员web前端分享css常用属性缩写
好程序员web前端分享css常用属性缩写,使用缩写可以帮助减少你CSS文件的大小,更加容易阅读.css缩写的主要规则如下: 颜色 16进制的色彩值,如果每两位的值相同,可以缩写一半,例如: #0000 ...
- 02: css常用属性
目录: 1.1 设置样式的七个选择器 1.2 css常见属性浅析 1.3 css布局中常用方法 1.1 设置样式的七个选择器返回顶部 1.其中选择器介绍 1. 直接在标签里的style标签写样式 2. ...
- 1+x证书学习日志——css常用属性
## css常用属性: 1:文本属性: 文本大小: font-size:18px; 文本颜色 colo ...
随机推荐
- [转帖]什么是Asp.net Core?和 .net core有什么区别?
什么是Asp.net Core?和 .net core有什么区别? https://www.cnblogs.com/itzhangxp/p/8322364.html 知道微软开始用 kestrel了 ...
- 通过反射来读取XML格式的ControlTemplate
在之前的一个WPF项目中,由于设置控件模板在前台xaml中读取失败,由此想到了通过反射的形式来读取该模板,首先将该模板写入一个xml文件中,然后再读取该xml文件,在这里首先介绍一下:资源和嵌入式资源 ...
- js對象構造
創建對象的3種方式: 1. var a=new Object() a.attributes=“1”: 2. var a={attributes:"1",aa:"2&quo ...
- SQL Server 公用表表达式(CTE)实现递归
公用表表达式简介: 公用表表达式 (CTE) 可以认为是在单个 SELECT.INSERT.UPDATE.DELETE 或 CREATE VIEW 语句的执行范围内定义的临时结果集.CTE 与派生表类 ...
- [Caffe]:关于*** Aborted at 1479432790 (unix time) try "date -d @1479432790" 错误的另一种原因
问题:设置solver.prototxt时,lr_policy:"step",运行时出现下面问题 *** Aborted at (unix time) try "date ...
- VMware配置Linux虚拟机访问外网
[虚拟机版本] 系统版本 : Centos 6.8 [连接方法] 网络模式:桥接模式 ps:本人比较喜欢用桥接,直接NAT也是可以的 [配置步骤] 1.配置网卡 #配置命令 vi /etc/sysco ...
- 分布式 NewSQL 对比
1.TiDB: 说明: PingCAP 公司基于 Google Spanner / F1 论文实现的开源分布式 NewSQL 数据库. 开源分布式 NewSQL 关系型数据库 TiDB 是新一代开源分 ...
- OCIEnvCreate 失败,返回代码为 -1,但错误消息文本不可用
解决方案:oracle 版本太低,请装11G或以上版本..
- 【POJ 3176】Cow Bowling(DP)
题 Description The cows don't use actual bowling balls when they go bowling. They each take a number ...
- 【题解】 bzoj3450 JoyOI1952 Easy (期望dp)
题面戳我 Solution 期望的题目真心不太会 定义状态\(f[i]\)表示到第\(i\)期望长度,\(dp[i]\)表示期望分数 如果上一步的持续\(o\)长度为\(L\),那么贡献是\(L^2\ ...