---恢复内容开始---

字体图标
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形变,盒子阴影的更多相关文章

  1. day50 盒子显隐2D形变

    复习 1.浮动布局 解决block盒子同行显示 => 不完全脱离文档流 => 不再撑开父级高度 脱离文档流: 不在页面中占位(显示层次高于文档流) 不完全: 可以通过清浮动操作, 让子级重 ...

  2. 字体图标,盒子显隐,overflow属性,伪类设计边框,盒子阴影2d形变

    字体图标 ''' fa框架: http://fontawesome.dashgame.com/ 下载 => 引入css文件 引入字体图标库 <link rel="styleshe ...

  3. 盒子显隐，伪类边框，盒子阴影,2d平面形变

    -盒子显隐 显隐的盒子尽量不影响其他盒子的布局 display:none; 消失的时候不占位置,显示的时候占位 opacity:0-1; 盒子透明度 overflow: hidden; 超出部分隐藏 ...

  4. Python12/11--盒子的显隐/布局/z-index/流式布局思想

    1.盒子的显隐 display:none      在页面中不占位,采用定位布局后,显示隐藏都不会影响其他标签,不需要用动画处理时,一般用这个 opacoity : 0        在页面中占位,采 ...

  5. 前端学习_04_font-awesome字体图标

    使用font-awesome字体图标库 font-awesome是一个比较大的矢量图标库,包含大部分IT类公司logo和常用的一些小图标,通过使用font-awesome提供的css样式集,可以在网页 ...

  6. CSS学习笔记----CSS3自定义字体图标

    响应式网页字体图标 作者:大漠 日期:2014-01-28 点击:3220 @font-face Responsive 本文由大漠根据Jason的<Responsive Webfont Icon ...

  7. 【Web】网页字体图标的使用

    字体图标介绍 网页中图片有很多优点,但也有很多缺点,会增加文件的大小以及增加http请求.这时候就需要用的字体图标(iconfont).字体图标的优点,可以跟图片一样改变透明度.旋转等,本质上是文字, ...

  8. 007：CSS字体图标

    目录 理论 一:字体图标 图片是有诸多优点的,但是缺点很明显,比如图片不但增加了总文件的大小,还增加了很多额外的"http请求",这都会大大降低网页的性能的.更重要的是图片不能很好 ...

  9. 字体图标iconfont

    字体图标的作用: 1. 可以做出图片一样可以做的事情, 改变透明度, 旋转度,等... 2. 但是本质其实是文字,可以很随意的改变颜色, 产生阴影,透明效果等 3. 本身体积更小,但携带的信息并没有消 ...

随机推荐

  1. Python标准库time

    原文:http://www.cnblogs.com/qq78292959/archive/2013/03/22/2975786.html Python官方文档 在程序中,免不了和时间打交道,要学习ti ...

  2. python 基础(十三) time模块

    日期和时间 一.time模块 import time 时间戳: 时间戳是指格林威治时间1970年1月1日0时0分0秒至现在的秒数   s(秒).ms(毫秒).μs(微秒).ns(纳秒), ​ 其中:1 ...

  3. AKOJ-1265-输出二叉树

    链接:https://oj.ahstu.cc/JudgeOnline/problem.php?id=1265 题意: 我们知道二叉树的先序序列和中序序列或者是中序和后序能够唯一确定一颗二叉树.现在给一 ...

  4. 关于ViewPager高度自适应（随着pager页的高度改变Viewpager的高度）

    该博客借鉴的是某位大神的博客 我只是写一下用后感和总结 博客链接地址 http://blog.csdn.net/qq_34972666/article/details/52386999?locatio ...

  5. [已读]javascript语言精粹

    又是一本广为赞颂的好书,当时才刚开始学,啃这本书的时候于是比较困难.记得是有介绍一些js中的“精华”与“糟粕”.

  6. 洛谷 P2362 围栏木桩

    题目描述 某农场有一个由按编号排列的n根木桩构成的首尾不相连的围栏.现要在这个围栏中选取一些木桩,按照原有的编号次序排列之后,这些木桩高度成一个升序序列.所谓的升序序列就是序列中的任何一个数都不小于它 ...

  7. OpenGL Frustum参数设置

    opengl中使用Frustum来设置透视投影,函数原型: frustum(float left, float right, float buttom, float top, float near, ...

  8. CPP-STL：STL备忘

    STL备忘(转) 1. string.empty() 不是用来清空字符串,而是判断string是否为空,清空使用string.clear(); 2. string.find等查找的结果要和string ...

  9. C#导入有道词典单词本到扇贝

    由于扇贝查词没有有道方便,所以很多时候添加生词都是在使用有道词典,然后顺手就保存到了有道单词本,不过在扇贝记单词可以打卡,记单词更方便,进入扇贝页面后发现扇贝单词批量导入居然一次只支持10个,查了扇贝 ...

  10. OpenCV2:介绍

    一.OpenCV简介 OpenCV所有的类和函数都在cv命名空间里面,可以用 using namespace cv; #include "opencv2/opencv.hpp" 1 ...