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 ...
随机推荐
- [CB转帖]台湾晶圆厂产能居全球第一 大陆排名第五但增长最多
台湾晶圆厂产能居全球第一 大陆排名第五但增长最多 据台湾地区媒体报道,近日市场调查机构IC Insights发布了各个地区或国家晶圆厂月产能排名,其中台湾地区排名第一,韩国排名第二,日本排名第三,美国 ...
- [书摘]图解HTTP 状态码
状态码类别: 1XX informational 信息性状态码 2XX Suess 成功状态码 3XX Redirection 重定向状态码 4XX Client error 客户端错误状态码 5 ...
- static方法
http://www.cnblogs.com/dolphin0520/p/3799052.html 方便在没有创建对象的情况下来进行调用(方法/变量). 虽然在静态方法中不能访问非静态成员方法和非静态 ...
- Angular 添加路由
var app=angular.module('kaifanla',['ng','ngRoute']);app.config(function($routeProvider){ //添加路由 $rou ...
- delphi获取一个窗口的所有子窗口(包括嵌套)
unit Unit1; interface usesWindows, Messages, SysUtils, Variants, Classes, Graphics, Controls, Forms, ...
- Galaxy S10使用几乎零黑边框的OLED显示屏
2019年的首波安卓旗舰中,目前关于三星Galaxy S10的爆料是最多的,在销量连续萎缩后,外界对手机一哥的“发力之作”充满期待. 据TheElec报道,Galaxy S10正面使用的是一块几乎零黑 ...
- MT【57】2017联赛一试解答倒数第二题:一道不等式的最值
注:康拓诺维奇不等式的应用
- 【刷题】AtCoder Regular Contest 002
A.うるう年 题意:判断闰年 做法:.. #include<bits/stdc++.h> #define ui unsigned int #define ll long long #def ...
- Mysql读写分离php脚本
<?php/*php如何连接mysql*/ /*$link = mysql_connect(‘localhost‘, ‘root‘, ‘‘);if (!$link) {die(‘Could no ...
- NodeJS - Express 4.0错误：Cannot read property 'Store' of undefined
按着<NodeJS开发指南>里的第五章建立microblog的例子操作,使用node.js 的express框架配置将session存储到mongodb时出错:TypeError: Can ...