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 ...
随机推荐
- [转帖] 从零开始编写自己的C#框架（27）——什么是开发框架
从零开始编写自己的C#框架(27)——什么是开发框架 http://www.cnblogs.com/EmptyFS/p/4105713.html 没写过代码 一直不清楚 框架的含义 不过看了一遍 也没 ...
- [转帖] linux下面 vim 数字键无法插入的解决办法
感谢原作者: https://blog.csdn.net/guoyuqi0554/article/details/11477597 这个问题困扰自己好久了.. 刚才解决了 rlwrap的问题 这会儿 ...
- Delphi中根据分类数据生成树形结构的最优方法
一. 引言: TreeView控件适合于表示具有多层次关系的数据.它以简洁的界面,表现形式清晰.形象,操作简单而深受用户喜爱.而且用它可以实现ListView.ListBox所无法实现的很多功能 ...
- Linux管理用户和组
用户管理相关命令useradd 添加用户adduser 添加用户userdel 删除用户passwd 为用户设置密码usermod ...
- Maven概述（一）
Maven是什么? Apache Maven is a software project management and comprehension tool. Based on the concept ...
- BZOJ3510 首都（LCT）
即动态维护树的重心.考虑合并后的新重心一定在两棵树的重心的连线上.于是对每个点维护其子树大小,合并时在这条链的splay上二分即可.至于如何维护子树大小,见https://blog.csdn.net/ ...
- 【ZOJ2278】Fight for Food（dp）
BUPT2017 wintertraining(16) #4 F ZOJ - 2278 题意 给定一个10*10以内的地图,和p(P<=30000)只老鼠,给定其出现位置和时间T(T<=1 ...
- loj#2009.「SCOI2015」小凸玩密室
题目链接 loj#2009. 「SCOI2015」小凸玩密室 题解 树高不会很高<=20 点亮灯泡x,点亮x的一个子树,再点亮x另外的子树, 然后回到x的父节点,点亮父节点之后再点亮父节点的其他 ...
- Codeforces Round #487 (Div. 2) E. A Trance of Nightfall (矩阵优化)
题意 有一个平面 , 给你 \(n\) 个点构成一个点集 \(S\) , 一开始可以选择一个平面上任意点 \(P\) . 存在一种操作 : 1 选择一条至少 通过 \(S\) 中任意两个点以及 \(P ...
- Watchdogs利用Redis实施大规模挖矿，常见数据库蠕虫如何破？
背景 2月20日17时许,阿里云安全监测到一起大规模挖矿事件,判断为Watchdogs蠕虫导致,并在第一时间进行了应急处置. 该蠕虫短时间内即造成大量Linux主机沦陷,一方面是利用Redis未授权访 ...