前端,字体图标,盒子显隐,2d形变,盒子阴影
---恢复内容开始---
字体图标
1.将font-awesome-4.7.0文件夹放入项目内
2.在html head中连接
3.在body中导入
盒子显隐
1.使用高度显隐
<p>---恢复内容结束---</p>
<style>
div{
width: 100px;
height: 100px;
background-color: cyan;
margin-top: 10px;
font:900 18px/100px "STsong";
text-align: center;
}
.div1{
position: relative;
}
.div2{
height:0;
overflow: hidden;
position: absolute;
transition: .3s;
}
/*此处不设置兄弟标签的话设置不了div2*/
.div1:hover ~ .div2{
height:100px
}
</style>
</head>
<body>
<div class="div1">1</div>
<div class="div2">2</div>
</body>
2.使用display显隐
.div2{
display: none;
position: absolute;
}
/*此处不设置兄弟标签的话设置不了div2*/
.div1:hover ~ .div2{
display: block;
}
</style>
3.使用opacity(透明度)
.div2{
opacity: 0;
position: absolute;
transition: 0.3s;
}
/*此处不设置兄弟标签的话设置不了div2*/
.div1:hover ~ .div2{
opacity: 1;
}
总结:display消失的时候不占位,显示的时候占位
opacity消失,显示都占位
height显示的时候占位
height和opacity有动画效果,display没有
overflow
解决: 超出盒子规定的显示区域外的内容的处理方式
/*将超出规定区域的内容隐藏, 隐藏掉的内容无法直接查看*/
/*overflow: hidden;*/
/*不超出正常，超出滚动 两种不同的处理方式来处理超出规定区域的内容*/
/*overflow: auto;*/
/*一直以滚动方式处理超出规定区域的内容*/
/*overflow: scroll;*/
伪类边框
设计边框=>在页面中不占位=>让其定位处理=>脱离文档流=>不占位层级结构复杂
设计一个不占位的边框=>伪类:before|after
.box {
width: 200px;
height: 200px;
background-color: red;
/*给伪类边框提供定位参考系*/
position: relative;
}
.box:before {
content: "";
/*上下边框*/
width: 180px;
height: 1px;
background-color: green;
/*控制边框位置*/
position: absolute;
bottom:0px;
left: 10px;
}
#只能设置两个伪类边框
盒子阴影
box-shadow: x轴偏移 y轴偏移 虚化程度 阴影宽度 阴影颜色, ...;
一个盒子可以拥有多套阴影
2d形变
# 形变参考点
transform-origin: x轴坐标 y轴坐标
# 形变属性
transform: rotate() translate() scale();
# 旋转角度(deg) 偏移距离(px) 缩放比例(无单位)前端,字体图标,盒子显隐,2d形变,盒子阴影的更多相关文章
- day50 盒子显隐2D形变
复习 1.浮动布局 解决block盒子同行显示 => 不完全脱离文档流 => 不再撑开父级高度 脱离文档流: 不在页面中占位(显示层次高于文档流) 不完全: 可以通过清浮动操作, 让子级重 ...
- 字体图标,盒子显隐,overflow属性,伪类设计边框,盒子阴影2d形变
字体图标 ''' fa框架: http://fontawesome.dashgame.com/ 下载 => 引入css文件 引入字体图标库 <link rel="styleshe ...
- 盒子显隐，伪类边框，盒子阴影,2d平面形变
-盒子显隐 显隐的盒子尽量不影响其他盒子的布局 display:none; 消失的时候不占位置,显示的时候占位 opacity:0-1; 盒子透明度 overflow: hidden; 超出部分隐藏 ...
- Python12/11--盒子的显隐/布局/z-index/流式布局思想
1.盒子的显隐 display:none 在页面中不占位,采用定位布局后,显示隐藏都不会影响其他标签,不需要用动画处理时,一般用这个 opacoity : 0 在页面中占位,采 ...
- 前端学习_04_font-awesome字体图标
使用font-awesome字体图标库 font-awesome是一个比较大的矢量图标库,包含大部分IT类公司logo和常用的一些小图标,通过使用font-awesome提供的css样式集,可以在网页 ...
- CSS学习笔记----CSS3自定义字体图标
响应式网页字体图标 作者:大漠 日期:2014-01-28 点击:3220 @font-face Responsive 本文由大漠根据Jason的<Responsive Webfont Icon ...
- 【Web】网页字体图标的使用
字体图标介绍 网页中图片有很多优点,但也有很多缺点,会增加文件的大小以及增加http请求.这时候就需要用的字体图标(iconfont).字体图标的优点,可以跟图片一样改变透明度.旋转等,本质上是文字, ...
- 007：CSS字体图标
目录 理论 一:字体图标 图片是有诸多优点的,但是缺点很明显,比如图片不但增加了总文件的大小,还增加了很多额外的"http请求",这都会大大降低网页的性能的.更重要的是图片不能很好 ...
- 字体图标iconfont
字体图标的作用: 1. 可以做出图片一样可以做的事情, 改变透明度, 旋转度,等... 2. 但是本质其实是文字,可以很随意的改变颜色, 产生阴影,透明效果等 3. 本身体积更小,但携带的信息并没有消 ...
随机推荐
- 设置导航栏 self.navigationItem.titleView 居中
喜欢交朋友的加:微信号 dwjluck2013-(void)viewDidLayoutSubviews{ [self setDisplayCustomTitleText:@"每日头条&quo ...
- Dubbo端口占用错误信息
SEVERE: Exception sending context initialized event to listener instance of class com.common.SysCont ...
- VUE注意事项（建项目）
1>删除空格影响的:删除掉框中的代码 2>不需要新建,直接打开APP.vue,在此文件上进行修改,(注意:index.html最好不要进行修改) 3>修改APP.vue为自己需要的页 ...
- mavon-editor 存储md文件以及md文件解析成html文件
一.md文件的存储 因为是vue-cli项目,所以使用的是mavonEditor. github地址:https://github.com/hinesboy/mavonEditor 使用方法: 首先安 ...
- spring 配置多个properties
复制多份,保证有效的配置文件,属性时true就行 <bean class="org.springframework.beans.factory.config.PropertyPlace ...
- 洛谷P1036 选数
题目描述 已知 n 个整数 x1,x2,…,xn,以及一个整数 k(k<n).从 n 个整数中任选 k 个整数相加,可分别得到一系列的和.例如当 n=4,k＝3,4 个整数分别为 3,7,12, ...
- docker配置国内镜像
1. 配置 root@ros-OptiPlex-3050:~# cat /etc/docker/daemon.json { "graph": "/mnt/docke ...
- 推荐一个yaml文件转json文件的在线工具
YAML的全称是YAML Ain't Markup Language,是一种简洁的非标记语言,以数据为中心,使用空白,缩进,和分行组织数据,从而使得表示更加简洁易读. YAML如今广泛应用于微服务开发 ...
- ConCurrent in Practice小记 （4）
ConCurrent in Practice小记 (4) Executors Callable && Future <T> Callable:此接口有一个call()方法. ...
- TCP的三次握手与四次挥手详解
TCP的三次握手与四次挥手是TCP创建连接和关闭连接的核心流程,我们就从一个TCP结构图开始探究中的奥秘 序列号seq:占4个字节,用来标记数据段的顺序,TCP把连接中发送的所有数据字节都编上一个序 ...