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 ...
随机推荐
- 详解Windows不重启使环境变量修改生效(经典)
在“我的电脑”->“属性”->“高级”->“环境变量”中增加或修改环境变量后,需重启系统才能使之生效.有没有什么方法可让它即时生效呢?下面介绍一种方法: 以修改环境变量“PATH”为 ...
- 自省 另外一种python 生成随机在base36 之间的兑换码生成。
放假无聊,翻看自己博客的时候发现自己前面写的 那个base36兑换码在翻阅的时候 想到一个更简单的办法实现.但是随机上来说可能没有前者那么高 但是觉得也没有多大的问题 发上来 自己再想想 import ...
- SVG to Image in js
SVG to Image in js SVG to Image https://image.online-convert.com/convert-to-svg https://stackoverflo ...
- html5 视频和音频
视频:html5支持视屏文件或者视屏流. html5使用video元素来播放视屏,支持的类型有OGG,MEPG 4,webM,但是不同的浏览器支持类型不同. src可以放置视屏文件的路径,可以使用元素 ...
- 机器学习--Logistic回归
logistic回归 很多时候我们需要基于一些样本数据去预测某个事件是否发生,如预测某事件成功与失败,某人当选总统是否成功等. 这个时候我们希望得到的结果是 bool型的,即 true or fals ...
- Network of Schools POJ - 1236(强连通+缩点)
题目大意 有N个学校,这些学校之间用一些单向边连接,若学校A连接到学校B(B不一定连接到A),那么给学校A发一套软件,则学校B也可以获得.现给出学校之间的连接关系,求出至少给几个学校分发软件,才能使得 ...
- 【 Gym - 101138J 】Valentina and the Gift Tree(树链剖分)
BUPT2017 wintertraining(15) 4 D Gym - 101138J 数据 题意 n个节点的一棵树,每个节点的权值为g,q个询问,树上的节点U-V,求U到V的路径的最大子段和. ...
- 洛谷P1516 青蛙的约会（扩展欧几里德）
洛谷题目传送门 很容易想到,如果他们相遇,他们初始的位置坐标之差\(x-y\)和跳的距离\((n-m)t\)(设\(t\)为跳的次数)之差应该是模纬线长\(l\)同余的,即\((n-m)t\equiv ...
- 自学Linux Shell4.2-监测磁盘空间mount umount df du
点击返回 自学Linux命令行与Shell脚本之路 4.2-监测磁盘空间mount umount df du 1. 挂载存储媒体mount 移除存储媒体umount ls命令用于显示文件目录列表, ...
- 【BZOJ4821】[SDOI2017]相关分析（线段树）
[BZOJ4821][SDOI2017]相关分析(线段树) 题面 BZOJ 洛谷 题解 看看询问要求的东西是什么.把所有的括号拆开,不难发现要求的就是\(\sum x,\sum y,\sum xy,\ ...