CSS知识

CSS清除浮动

           

          1.清除浮动的方法 - 额外标签法

           

           2.清除浮动的方法 - 单伪元素清除法

           

         3.清除浮动的方法 - 双伪元素清除法

           

        4.清除浮动的方法 - 给父元素设置overflow:hidden

           

CSS定位

         网页常见布局方式

         

        1.使用定位的步骤

             

                   

             

                 

        2.相对定位

           

            1.占有原来的位置

            2.任然具有标签原有显示模式的特点

            3.改变位置参照自己原来的位置

            如果left和right都有,以left为准;top和bottom都有,以top为准

       3.绝对定位

           先找已经定位的父级,如果有这样的父级就以这个父级为参照物进行定位

           有父级但这个父级没有定位,以浏览器窗口为参照物进行定位

           

           1.脱标,不占位

           2.改变标签显示模式的特点:具有行内块的特点(在一行共存,宽高生效)

           绝对定位查找父级的方式:就近找定位的父级,如果逐层查找不到这样的父级,

                                                   就以浏览器窗口为参照进行定位

           

           

       4.固定定位

           

           1.脱标,不占位置

           2.改变位置参考浏览器窗口

           3.具备行内块特点

CSS元素层级问题

         

           

CSS装饰

         1.基线:浏览器文字类型元素排版中存在用于对齐的基线(baseline)

           

            浏览器把行内和行内块标签当做文字处理,默认基线对齐

        2.垂直对齐方式

           

       3.光标类型 

           

      4.边框圆角

           

           

       5.overflow溢出部分显示效果

           

       6.元素本身隐藏

           

          visibility -  占位隐藏

          display -  不占位隐藏

      7.元素整体透明度

         

CSS精灵图

           

         精灵图使用步骤

         

         

本文转载于网络 如有侵权请联系删除

相关文章

  • 生成式预训练模型之BART

    每天给你送来NLP技术干货!写在前面在文本理解任务(NaturalLanguageUnderstanding)上,预训练模型已经取得了质的飞跃,语言模型预训练+下游任务fine-tune基本上已经成为标配。很多人曾经尝试将BERT等预训练语言模型应用于文本生成任务(NaturalLanguageGeneration),然而结果并不理想。究其原因,是在于预训练阶段和下游任务阶段的差异。BART这篇文章提出的是一种符合生成任务的预训练方法,BART的全称是BidirectionalandAuto-RegressiveTransformers,顾名思义,就是兼具上下文语境信息和自回归特性的Transformer。那么它的细节和效果如何呢,就让我们一起来看看吧论文名称:《BART:DenoisingSequence-to-SequencePre-trainingforNaturalLanguageGeneration,Translation,andComprehension》 论文链接:https://arxiv.org/pdf/1910.13461.pdf1.从GPT,BERT到BARTGP

  • 用Single-spa 创建基于 React 和 Vue 的微型前端

    //每日前端夜话第411篇 //正文共:1400字 //预计阅读时间:7分钟 复制SingleSPASingleSPA是一个用于前端微服务的javascript框架。它使你可以在单页应用中使用多个框架,这样就可以按功能拆分代码,并能使Angular、React、Vue.js程序一起运行。你可能已经习惯了React和Vue的CLI,通过这些工具可以快速创建项目,并准备好webpack的配置、依赖项和样板代码等。如果你已经习惯了这种操作,那么你可能会觉得本文的前半部分有些繁琐。因为我们要从头创建所有内容,包括安装所需的所有依赖项以及从零创建webpack和babel配置。环境与配置首先在终端下创建一个新目录并进入其中:mkdirsingle-spa-app cdsingle-spa-app 复制接下来初始化package.json文件:npminit-y 复制然后安装项目所需的所有依赖项。为了让大家清楚的知道都安装了些什么,在这里我把它们分解成单独的步骤。安装依赖项安装常规依赖项npminstallreactreact-domsingle-spasingle-spa-reactsingl

  • 数据库PostrageSQL-服务器配置资源消耗

    19.4.资源消耗19.4.1.内存shared_buffers(integer) 设置数据库服务器将使用的共享内存缓冲区量。默认通常是128兆字节(128MB),但是如果你的内核设置不支持(在initdb时决定),那么可以会更少。这个设置必须至少为128千字节(BLCKSZ的非默认值将改变最小值)。不过为了更好的性能,通常会使用明显高于最小值的设置。如果有一个专用的1GB或更多内存的数据库服务器,一个合理的shared_buffers开始值是系统内存的25%。即使更大的shared_buffers有效,也会造成一些工作负载,但因为PostgreSQL同样依赖操作系统的高速缓冲区,将shared_buffers设置为超过40%的RAM不太可能比一个小点值工作得更好。为了能把对写大量新的或改变的数据的处理分布在一个较长的时间段内,shared_buffers更大的设置通常要求对max_wal_size也做相应增加。如果系统内存小于1GB,一个较小的RAM百分数是合适的,这样可以为操作系统留下足够的空间。huge_pages(enum) 控制是否为主共享内存区域请求巨型页。有效值是try(

  • Thrift 跨服务开发框架

    Thrift概述 Thrift是一个软件框架,用来进行可扩展且跨语言的服务的开发。它结合了功能强大的软件堆栈和代码生成引擎,以构建在C++,Java,Python,PHP, Ruby,Erlang,Perl,Haskell,C#,Cocoa,JavaScript,Node.js,Smalltalk,andOCaml等等编程语言间无缝结合的、高效的服务。复制代码生成工具命令:“thrift-*.exe"-r-genjava./*.thrift生成gen-java目录复制1.服务端编码基本步骤: *实现服务处理接口impl *创建TProcessor//读入,写出 *创建TServerTransport *创建TProtocol *创建TServer *启动Server 2.客户端编码基本步骤: *创建Transport *创建TProtocol *基于TTransport和TProtocol创建Client *调用Client的相应方法 3.数据传输协议 *TBinaryProtocol:二进制格式. *TCompactProtocol:压缩格式 *TJSONPro

  • SpringCloud微服务项目实战 - API网关Gateway详解实现

    前面讲过zuul的网关实现,那为什么今天又要讲SpringCloudGateway呢?原因很简单。就是SpringCloud已经放弃NetflixZuul了。现在SpringCloud中引用的还是Zuul1.x版本,而这个版本是基于过滤器的,是阻塞IO,不支持长连接。Zuul2.x版本跟1.x的架构大一样,性能也有所提升。既然SpringCloud已经不再集成Zuul2.x了,那么我今天也就再讲解一下SpringCloudGateway了。1.API网关 API网关是一个服务器,是系统的唯一入口。从面向对象设计的角度看,它与外观模式类似。API网关封装了系统内部架构,为每个客户端提供一个定制的API。它可能还具有其它职责,如身份验证、监控、负载均衡、缓存、请求分片与管理、静态响应处理。API网关方式的核心要点是,所有的客户端和消费端都通过统一的网关接入微服务,在网关层处理所有的非业务功能。通常,网关也是提供REST/HTTP的访问API。网关应当具备以下功能:性能:API高可用,负载均衡,容错机制。安全:权限身份认证、脱敏,流量清洗,后端签名(保证全链路可信调用),黑名单(非法调用的限

  • 网红读心术揭秘,学好数学少上当!

    数学读心术!最近在抖音上看到很多读心术,今天悠爸也要大显身手试一试!接下来,用你左手的牌 乘以5,再加上8,再把这个数加上它自己,再加上你右手的牌,就能得出一个终极密码。只要告诉我这个密码,我就能知道你手里分别是什么牌!接下来,就是见证奇迹的时刻!3!2!1!读心完成!读心术很精彩,不过你知道悠爸是怎么做到的吗?看你那跟小悠一样迷离的小眼神,这个问题还是我来揭秘吧!解决思路有很多种,我们这里只做一个简单的推算。首先第一步:我们把小悠左右手的牌分别给一个代号,左手的扑克牌为A,右手的扑克牌为B。然后按照悠爸所说的,把文字转化为数学语言,得到以下公式: 发现秘诀了吗?因为两张牌上的数字最大不超过9,所以……这次的数字大了不少,不过只要梳理清楚,相信机智如你依然是可以发现其中的奥秘滴~好了好了,不难为你了,且听我细细道来:先把一开始任选的数字设为X,根据提示得到下面的公式:(X×2+5)×50+1769/1768-出生年份100X+250+1769/1768-出生年份精彩的部分来了!250+1769/1768正好等于2019/2018!嘿嘿,也就是说没过生日的用去年的年份减去出生年份,过了生

  • 腾讯多媒体实验室商世东:腾讯会议背后的实时语音端到端解决方案

    导语:受疫情影响,很多企业开启了线上办公模式,视频会议成为刚需、高频的办公工具。用户爆发式的增长,让各远程办公应用面临了巨大挑战,除扩容服务器等硬件设施外,保证高品质的通话体验、降低端到端的延迟技术架构,成了保证远程会议体验的关键点。面对这次高并发流量的冲击,腾讯会议通过融合经典信号处理、心理听觉和深度学习理论,针对端到端音视频通信链路上的复杂特性,对音视频在云端和用户终端的网络传输环境进行了优化,为用户提供了清晰流畅的语音服务。近日,腾讯多媒体实验室高级总监商世东受云+社区沙龙online邀请,为大家全面揭秘了腾讯会议背后的实时语音端到端解决方案。一、语音通信系统的演进与腾讯会议背后的技术支撑近三十年,语音通信系统经历了三个主要变化,一是从模拟到数字,二是从固定电话到移动电话,三是从电路交换到分组变换,首先我们先回顾一下语音通信系统的演进历史。1、语音通信系统变化开端:从PSTN模拟电话到ISDN数字电话的转换数字相对模拟电话的优势是显而易见的,尤其在通话语音质量上抗干扰,抗长距离信号衰减的能力明显优于模拟电话和系统,所以电话系统演进的第一步就是从终端从模拟电话升级到了数字电话,网络

  • drf源码save以及response

    drf源码save以及response一.save其中蛮重要的一段ifself.instanceisnotNone: self.instance=self.update(self.instance,validated_data) assertself.instanceisnotNone,( '`update()`didnotreturnanobjectinstance.' ) else: self.instance=self.create(validated_data) assertself.instanceisnotNone,( '`create()`didnotreturnanobjectinstance.' ) returnself.instance复制这里呢很明显就可以看出save我们传参instance的由于决定了他后续是运行create还是updata方法我们也可以不用save,可以自定义create方法和updata方法因为他本质就是调用create和updata方法注意点:我们自定义优先级必须大于drf自带的方法的优先级,所有我

  • Qt 常用类 (9)—— QWidget

    http://blog.csdn.net/hmsiwtv/article/details/7562015    QWidget类代表一般的窗口,其他窗口类都是从QWidget类继承出来的。而QWidget类则同时继承了QObject类和QPaintDevice类,也就是说,窗口类都是Qt对象类。这里的QPaintDevice类则是所有可绘制的对象的基类。    常用窗口类的继承关系如图所示:    构造    QWidget类的构造函数如下:[plain]viewplaincopyQWidget(QWidget *parent = 0, Qt::WindowFlags f = 0);       其中参数parent指向父窗口,如果这个参数为0,则窗口就成为一个顶级窗口    参数f是构造窗口的标志,主要用于控制窗口的类型和外观等,有以下常用值。    1)Qt::FramelessWindowHint:没有边框的窗口。    2)Qt::WindowStaysOnTopHint:总是最上面的窗口。    3)Qt::CustomizeWindowHint:自定义窗口标题栏,以下标志必

  • jsp中的JSTL与EL表达式用法及区别(一)

    对于JSTL和EL之间的关系,这个问题对于初学JSP的朋友来说,估计是个问题,下面来详细介绍一下JSTL和EL表达式他们之间的关系,以及JSTL和EL一些相关概念!JSTL是什么 JSTL(JSPStandardTagLibrary,JSP标准标签库)是一个不断完善的开放源代码的JSP标签库,是由apache的jakarta小组来维护的。JSTL1.0由四个定制标记库(core、format、xml和sql)和一对通用标记库验证器组成。core标记库提供了定制操作,通过限制了作用域的变量管理数据,以及执行页面内容的迭代和条件操作。它还提供了用来生成和操作URL的标记。format标记库定义了用来格式化数据(尤其是数字和日期)的操作。它还支持使用本地化资源束进行JSP页面的国际化。xml库包含一些标记,这些标记用来操作通过XML表示的数据,而sql库定义了用来查询关系数据库的操作。两个JSTL标记库验证器允许开发人员在其JSP应用程序中强制使用编码标准。如果要使用JSTL,则必须引用jstl.jar和standard.jar两个包。 为什么要用JSTL 我们JSP用于开发信息展现页非常方

  • 腾讯云RayData网页版常见问题

    RayData网页版是如何计费的?RayData网页版按照版本和使用时长来计费,采用包年包月的计费模式。详情请参见 购买指南。绑定腾讯云账号后是否支持解绑或更换绑定?绑定后暂不支持解绑及更换绑定,请谨慎操作。绑定后是否支持使用RayData账号登录腾讯云官网?绑定仅建立于腾讯云账号和RayData账号的关联,暂不支持使用RayData账号登录到腾讯云官网。绑定失败该怎样处理?您可以保留相关截图,并联系腾讯云客服或RayData客服进行处理。注册RayData账号密码提示错误密码必须包含数字、大小写字母、特殊符号。购买RayData网页版会员是否一定需要绑定腾讯云账号?购买RayData网页版会员时,需要将RayData账号与腾讯云账号绑定,否则会影响您的正常下单。购买后是否支持退款或升降配?现版本暂不支持退款或改变配置,如果需要更改配置,请等待现有版本过期后再次进行购买。下单失败该怎样进行处理?以下情况会造成购买失败:1.当前账号未与腾讯云账号关联。2.当前账号已开通的会员与正在购买的会员版本不一致。如果检查后排除上述情况,您可以保存截图并联系腾讯云或RayData客服人员协助处理。如

  • httpwebrequest调用webservice

    客户端代码: usingSystem; usingSystem.Collections.Generic; usingSystem.IO; usingSystem.Linq; usingSystem.Net; usingSystem.Text; usingSystem.Threading.Tasks; usingSystem.Xml; namespaceTest2.CallWebservice { classProgram { staticvoidMain(string[]args) { MyServiceReference.MyTestSoapClientmyTestSoapClient=newMyServiceReference.MyTestSoapClient(); //Console.WriteLine(myTestSoapClient.getvalue(1,2)); Console.WriteLine(HttpPost("http://localhost:8082/MyTest.asmx/getvalue")); Console.ReadLine(); } private

  • IE7下图片缩放失真可用-Ms-Interpolation-Mode解决

    img{-ms-interpolation-mode:bicubic;} 这个在做实时缩放图片、缩略图的时候用处挺大。IE7Only 这个属性在ie8之后的版本已经不需要了。可以说是ie7专用了,ie6该属性无效果。 ,还有另一个值 -ms-interpolation-mode:nearest-neighbor 参考:http://www.aoao.org.cn/blog/2009/03/img-ms-interpolation-mode/

  • C++类与对象(类中的六大默认成员函数)

    文章目录 类的默认成员函数构造函数概念特征自己定义构造函数类中编写传参方法 编译器自动生成的构造函数定义变量方式初始化规则 析构函数概念特性自己定义析构函数编译器自动生成的析构函数 拷贝构造函数概念特性调用方法自己定义拷贝构造函数编译器自己生成的拷贝构造函数 运算符重载(含赋值运算符重载)概念特性使用方法赋值重载函数自己定义赋值重载函数编译器自己生成的赋值重载函数拷贝构造与赋值重载的区别 取地址及const取地址操作符重载概念操作符重载const成员 类的默认成员函数 如果一个类中,什么成员都没有,我们称之为空类。但是空类中也并不是什么都没有,编译器会自动生成6个默认成员函数,如果我们去实现默认成员函数,编译器就不会默认生成。默认成员函数存在的意义在于防止我们忘记进行一些必要的操作。 构造函数 概念 构造函数是一个特殊成员函数,名字与类名相同,创建对象时由编译器自动调用,并且在对象的声明周期中只出现一次。需要注意的是,构造函数虽然名为构造,但不是创建对象,而是初始化对象。构造函数体现在,只要变量被创建就会调用该函数,以及其特殊的传参方式。 特征 1.函数名与类名相

  • 研发多项目管理难点分析

    随着企业的业务规模不断扩大,多项目同时运作成为创新型企业的常态,研发管理者每天都要面对不同的项目,并进行有效的管理,如何有效的从整体上进行多项目管理,成为了现代企业能否取得成功的关键。    但大部分的企业在进行研发多项目管理时还存在以下的问题: 多项目之间争抢资源的情况非常严重,资源不足; 多项目的执行与公司战略脱节,不能达成战略目标; 忽视多项目之间的依赖关系,项目与项目之间沟通不畅; 项目的优先级次序不明确; 产品开发和平台的关系缺乏梳理; 项目风险控制能力弱,如项目进度、质量、性能等。 项目作为公司实现业务目标的载体,是企业运作成功的关键。因此,实现多项目管理的有效性和高质量,是企业赖以生存的基础。共创力咨询认为,要解决PMO在进行多项目管理的问题,需要从以下几个方面的去考虑:(八个重点和四个支撑)  01  项目、项目群、项目组合管理的区别   项目群(Program)是一组相互关联且被协调管理的项目,由多个项目所构成。协调管理是为了获得对单个项目分别管理所无法实现的利益和控制; 项目组合(ProjectPor

  • Dubbo与Zookeeper、SpringMVC整合和使用(负载均衡、容错)

     互联网的发展,网站应用的规模不断扩大,常规的垂直应用架构已无法应对,分布式服务架构以及流动计算架构势在必行,Dubbo是一个分布式服务框架,在这种情况下诞生的。现在核心业务抽取出来,作为独立的服务,使前端应用能更快速和稳定的响应。 第一:介绍Dubbo背景 大规模服务化之前,应用可能只是通过RMI或Hessian等工具,简单的暴露和引用远程服务,通过配置服务的URL地址进行调用,通过F5等硬件进行负载均衡。 (1) 当服务越来越多时,服务URL配置管理变得非常困难,F5硬件负载均衡器的单点压力也越来越大。 此时需要一个服务注册中心,动态的注册和发现服务,使服务的位置透明。 并通过在消费方获取服务提供方地址列表,实现软负载均衡和Failover,降低对F5硬件负载均衡器的依赖,也能减少部分成本。 (2) 当进一步发展,服务间依赖关系变得错踪复杂,甚至分不清哪个应用要在哪个应用之前启动,架构师都不能完整的描述应用的架构关系。 这时,需要自动画出应用间的依赖关系图,以帮助架构师理清理关系。 (3) 接着,服务的调用量越来越大,服务的容量问题就暴露出

  • 最小生成树模板

    1#include<bits/stdc++.h> 2usingnamespacestd; 3intpre[5005],n,m,ans,cnt; 4structlhy 5{ 6intx,y,cost; 7}glq[200005]; 8 9voidinit() 10{ 11for(inti=1;i<=5005;i++)pre[i]=i; 12} 13intfind(intt) 14{ 15while(t!=pre[t])t=pre[t]=pre[pre[t]]; 16returnt; 17} 18boolcmp(lhya,lhyb) 19{ 20returna.cost<b.cost; 21} 22voidkruskal() 23{ 24sort(glq+1,glq+m+1,cmp); 25for(inti=1;i<=m;i++) 26{ 27intlhy_zz=find(glq[i].x),glq_zz=find(glq[i].y); 28if(lhy_zz==glq_zz)continue; 29ans+=glq[i].cost; 30pre[lhy_

  • iptables详解

    如果没有安装iptables可以直接用yum安装 yuminstall-tiptables复制 检查iptables服务的状态, serviceiptablesstatus复制 如果出现“iptables:Firewallisnotrunning”,说明没有启动或没有规则启动iptables服务 serviceiptablesstart复制 第一次配置前消除默认的规则 #这个一定要先做,不然清空后可能会悲剧 iptables-PINPUTACCEPT #清空默认所有规则 iptables-F #清空自定义的所有规则 iptables-X #计数器置0 iptables-Z复制 配置规则  #如果没有此规则,你将不能通过127.0.0.1访问本地服务,例如ping127.0.0.1 iptables-AINPUT-ilo-jACCEPT #开启ssh端口22 iptables-AINPUT-ptcp--dport22-jACCEPT #开启FTP端口21 iptables-AINPUT-ptcp--dport21-jACCEPT #开启web

  • wifi驱动总结(1)

    一、wifi平台设备驱动注册过程Path:Rtw_android.c(rk3399\kernel\drivers\net\wireless\rockchip_wlan\rtl8723au\os_dep\linux);StaticstructPlatform_driverwifi_device= {  .probe=wifi_probe  .remove=wifi_remove  .suspend=wifi_supend  .resume=wifi_resume  .driver= {   .name=“bcmdhd_wlan” } } 二、wifi设备注册简单流程1、设备初始化:staticstructplatform_devicemahimahi_wifi_device;2、设备注册:platform_device_register(&mahimahi_wifi_device); 三、wifi设备初始化wifi平台设备驱动在注册时,成功匹配了wifi设备后,会调用的函数wifi_probe(),从而实现wifi设备的初始化;Path:Rtw_androi

  • sql注入

    一.原理 SQL注入攻击指的是通过构建特殊的输入作为参数传入Web应用程序,而这些输入大都是SQL语法里的一些组合,通过执行SQL语句进而执行攻击者所要的操作,其主要原因是程序没有细致地过滤用户输入的数据,致使非法数据侵入系统。SQL注入是比较常见的网络攻击方式之一,是针对程序员编写时的疏忽,通过SQL语句,实现无账号登录,甚至篡改数据库。 二.过程 1.判断网站是否存在注入点 (1)加入单引号'提交 结果:如果出现错误提示,则该网站可能存在注入漏洞 (2)数字型判断是否有注入 语句:and1=1;and1=2 结果:分别返回不同的页面,说明存在注入漏洞 (3)字符型判断是否有注入 语句:'and'1'=1;'and'1=2 结果:分别返回不同的页面,说明存在注入漏洞 分析:加入'and'1'=1返回正确页面,加入'and'1=2返回错误页面,说明有注入漏洞 2.利用错误消息提取信息 (1)利用数据类型错误提取数据 如果试图将一个字符串与非字符串比较,或者将一个字符串转换为另一个不兼容的类型,那么SQL编辑器将会抛出异常。 例如: SELECT*FROMuserWHEREuserna

  • linux下的加压和解压

    linux下tar.xz结尾的文件解压方法:   tar-xvfJ文件名.tar.xz   tar-xvf解压文件tar.gz 加压的方法:   格式为:tar-czvf压缩包名.tar.gz/gzip文件名

相关推荐

推荐阅读