CSS3总结(干货)

1、css3中好用的选择器  

:target       //突出显示活动的HTML锚

::after / ::before{content:" ";}  //content必须有,若无内容,用空格占位

2、文字

  a.导入字体: @font-face

  b.文字阴影:text-shadow

  ps:相关css

    a.white-space: nowrap;    //段落文本不换行

    b.text-overflow:ellipsis;     //文本修剪(ellipsis变为省略号)

    c.word-break: break-all    //断字点换行

3、边框

  a.border-radius    //圆角

  b.box-shadow       //阴影

    制作三角形方法   

1   #div1{
2             width: 0;
3             border-width: 50px;
4             border-style: solid;
5             border-left-color: #f00;
6             border-top-color: #0f0;
7             border-right-color: #ff0;
8             border-bottom-color: #00f;
9         }

4、背景

  a.background-clip    //对背景图片进行切割,不完整背景(border-box, padding-box, content-box)

  b.background-origin   //对背景图片设置起始点,完整背景(border-box, padding-box, content-box)

5.弹性盒模型

  a.box-flex        //在一个div中占几份

  b.box-ordinal-group    //div的显示次序(包含在含有css display:box;中)

  c.flex-direction       //元素排列顺序【row:主轴与行内轴方向作为默认的书写模式。即横向从左到右排列(左对齐)。row-reverse:对齐方式与row相反。column:主轴与块轴方向作为默认的书写模式。即纵向从上往下排列(顶对齐)。column-reverse:对齐方式与column相反。】(与display:flex;同时使用)

6、新旧弹性盒模型比较

  a.在使用弹性盒模型的时候父元素必须要加display:box 或 display:inline-box:

    新版弹性盒模型:flex:display : flex

    老版弹性盒模型:box : display : -webkit-box

  b.使用box-orient 定义盒模型的主轴方向

    新版:flex:flex-direction: row / column

    老版:box : -webkit-box-orient:

          horizontal 水平显示

           vertical 垂直方向  

  c.box-direction 元素排列顺序

    新版:flex : flex-direction: row-reverse / column-reverse;

    老版:box : -webkit-box-direction:

         normal 正序

         reverse 反序

  d.box-pack 主轴方向空闲空间设置

     新版:flex : justify-content : flex-start / flex-end / center / space-between / space-around;

     老版:box : -webkit-box-pack

        start 所有子元素在盒子左侧显示,富裕空间在右侧

        end 所有子元素在盒子右侧显示,富裕空间在左侧

        center 所有子元素居中

        justify 富裕空间在子元素之间平均分布

  e.box-align 侧轴方向方向空闲空间设置

    新版:flex : align-items : flex-start / flex-end / center / baseline

    老版:box : -webkit-box-align

        start  所有子元素居顶

        end 所有子元素居底

        center 所有子元素居中

  f.box-flex 定义盒子的弹性空间

    新版:flex : flex-grow

    老版:box : -webkit-box-flex

  g.box-ordinal-group 设置元素的具体位置

    新版:flex : order

    老版:box : -webkit-box-ordinal-group

 

  ps:css3兼容:

      -webkit-

      -moz-

      -ms-

      -o-

      属性

7、transform常用用法

  transform: rotate(45deg);  //2D旋转

  transform: translate(x, y);  //2D移动

  transform:scale(x,y):    //2D缩放

  transform:skew(xdeg,ydeg):  //2D扭曲(平行四边形)

  transform:rotate(x,y,z)      //需要perspective属性改变视图(视角)

8、translation

  translation: 哪个属性过度(eg:width) 过渡完成需要时间 速度 何时开始

 

 


更多专业前端知识,请上 【猿2048】www.mk2048.com

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/361740.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

关于Java泛型和擦除

“编译期间擦除泛型”是常识&#xff08;好吧&#xff0c;类型参数和实参实际上就是被擦除的&#xff09;。 这是由于“类型擦除”而发生的。 但这是错误的&#xff0c;正如许多开发人员所假设的那样&#xff0c;删除了<..>符号内指定的所有内容。 请参见下面的代码&…

关于软件测试学习心得

软件测试是软件开发过程中最重要环节&#xff0c;在进行测试之前需要写测试计划&#xff0c;测试计划需要哪几个部分呢&#xff1f;在郁莲老师的课上教导如何做测试计划。 目录 1 引言 1.1 编写目的 1.2 项目背景和产品简介 1.3 专业术语 2 测试目标 3. 测试范围 3.1 功能性测试…

使用JGit API探索Git内部

您是否想过提交及​​其内容如何存储在Git中&#xff1f; 好吧&#xff0c;我有&#xff0c;在上一个下雨的周末&#xff0c;我有一些空闲时间&#xff0c;所以我做了一些研究。 因为我对Java的感觉比对Bash的感觉要多&#xff0c;所以我使用了JGit和一些学习测试来探索提交的…

介绍 Spring 3.1 M1 中的缓存功能

介绍 Spring 3.1 M1 中的缓存功能- 中文版 (转) Spring 3.1 提供了对已有的 Spring 应用增加缓存的支持&#xff0c;这个特性对应用本身来说是透明的&#xff0c;通过缓存抽象层&#xff0c;使得对已有代码的影响降低到最小。 该缓存机制针对于 Java 的方法&#xff0c;通过给定…

Html5 布局方式

在Html5之前&#xff0c;统一采用的是Div css的方式进行布局&#xff0c;但是却和开发人员的命名方式&#xff0c;喜好有关。在新的Html5中&#xff0c;布局却显得更加人性化&#xff0c;更易理解了。如增加了Header&#xff0c;Footer&#xff0c;Section&#xff0c;Aside标签…

PrimeFaces Mobile入门

介绍 如果您已经开发了利用PrimeFaces的应用程序&#xff0c;或者打算开发可在台式机和移动设备上使用的Web应用程序&#xff0c;请考虑将PrimeFaces Mobile用于您的移动实施。 这篇博客文章将介绍一些基础知识&#xff0c;以帮助您开始为现有的PrimeFaces应用程序开发移动界面…

Netty中的策略者模式

策略者模式的特点 在设计类的继承体系时,我们会刻意的把公共的部分都提取到基类中 比如先设计Person类,把人类都具有的行为放到这个Person,特有的行为设计成抽象方法,让子类具体去实现, 这样后续无论我们再去构造学生,还是构造老师,大家都继承Person,就达到了代码复用的目的 但…

attachEvent和addEventListener

attachEvent和addEventListener在前端开发过程中经常性的使用&#xff0c;他们都可以用来绑定脚本事件&#xff0c;取代在html中写 obj.οnclickmethod。相同点&#xff1a; 它们都是DOM对象的方法&#xff0c;可以实现一种事件绑定多个事件处理函数。 obj document.getElemen…

java多线程总结一:线程的两种创建方式及优劣比较

1、通过实现Runnable接口线程创建 (1).定义一个类实现Runnable接口&#xff0c;重写接口中的run()方法。在run()方法中加入具体的任务代码或处理逻辑。 (2).创建Runnable接口实现类的对象。 (3).创建一个Thread类的对象&#xff0c;需要封装前面Runnable接口实现类的对象。&…

如果删除github上项目的文件

1. 你要有前面一章的开发平台和github插件&#xff0c;下面就是基于前面来做的。 如何删掉你github上的文件呢&#xff1f;想必你的电脑有一个下载的git工具了&#xff0c;如果还是没有的话&#xff0c;请用npm下载一个git。这是我已经下载好的。 2. 然后打开这个git&#xff…

在WildFly和OpenShift上的WebSocket聊天

聊天是解释WebSocket的最典型示例之一。 它是一个相当常用的界面&#xff0c;可以很容易地解释WebSocket的基本概念。 当然&#xff0c;Java EE 7 WebSocket也有一个&#xff0c; 在这里可用 &#xff01; 您可以使用以下步骤在WildFly上轻松运行它&#xff1a; curl -O http:…

recv, recvfrom, recvmsg

recv,recvfrom,recvmsg函数用于从套接字接收信息。 ssize_t recv (int s, void *buf, size_t len, int flags);ssize_t recvfrom (int s, void * restrict buf, size_t len, int flags, struct sockaddr * restrict from, socklen_t * restrict fromlen);ssize_t recvmsg (int…

[解决]电信彩信网关开发错误-SOAP_VERSIONMISMATCH

上一个文章&#xff1a;[求救]电信彩信网关开发错误&#xff0d;SOAP_VERSIONMISMATCH 说的问题<messageId>SVC0001</messageId> <text>SOAP_VERSIONMISMATCH</text> 已经解决&#xff0c;主要是查看了网上的一个同学的帖子&#xff0c;非常感谢。再来…

Ubuntu20.04纯命令配置PCL(点云库)

Ubuntu20.04纯命令配置PCL&#xff08;点云库&#xff09; 最近在学习点云库&#xff08;PCL&#xff09;的使用&#xff0c;第一步就是在自己的电脑安装配置PCL。 首先&#xff0c;对于ubuntu 16.04以上版本&#xff0c;可以直接使用命令进行安装&#xff0c;新建好一个文件夹…

css html应用实例1:滑动门技术的简单实现

关于滑动门&#xff0c;现在的页面中好多地方都会用到滑动门&#xff0c;一般用作于导航背景&#xff0c;它的官方解释如下&#xff1a; 滑动门&#xff1a;根据文本自适应大小&#xff0c;根据背景的层叠性制作&#xff0c;并允许他们在彼此之上进行滑动&#xff0c;以创造出…

魔戒1

转载于:https://www.cnblogs.com/moonlightpeng/p/11240880.html

得到python默认的帮助文档

python的help文档很好&#xff0c;就是有时候help一下给出好几页来&#xff0c;甚至有些帮助根本就看不到了(我想应该有其他方法可以解决&#xff0c;只是我不想去查了)&#xff0c;因为这个可以通过一个很简单的python脚本搞定。这里举例为证&#xff0c;比如我想得到Tkinter的…

如何在Java中将图像上传到DropBox

本教程介绍了如何将图像上传到放置框并获取上传图像的公共URL。 首先&#xff0c;我们必须使用应用程序控制台创建一个DropBox API应用程序 。 创建应用程序后&#xff0c;您可以在应用程序属性中获取应用程序密钥和秘密密钥。 现在在您的pom文件中添加以下依赖项。 <dep…

css3动画整理

css3动画主要常用的属性有 变形&#xff08;transform&#xff09;&#xff0c;转换&#xff08;transition&#xff09;&#xff0c;动画&#xff08;animation&#xff09;三种。 变形&#xff08;transform&#xff09;主要有以下几种方式&#xff1a; 旋转rotate&#xff1…

jQuery应用实例2:简单动画

效果&#xff1a; 代码&#xff1a; 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">2 <html xmlns"http://www.w3.org/1999/xhtml">3 <head>…