CSS中知

1CSS特性

   1.3优先级

     

   1.4权重叠加计算

       

2Chrome调试工具

    2.1查错流程

       

3CSS盒子模型

   

   3.1内容的宽度和高度

       

   3.2边框(border)-连写形式

       

      solid---实线        dashed---虚线         dotted---点线

   3.3边框(border)-单方向设置

       

   3.4边框(border)-单个属性

       

   3.5新浪导航案例

       

       从外到内:先宽高背景色,放内容,调节内容的位置,控制文字细节

   3.6盒子模型:自动内减 

       

   3.7清除默认内外边框

     

         

   3.8外边距折叠现象 - note1:合并现象

           3.9外边距折叠现象 - note2:塌陷现象                行内元素内外边框问题:margin和padding只可改变水平方向距离,不能改变垂直方向距离                                             若想改变垂直方向的距离要用line-height 4CSS结构伪类选择器               5CSS伪元素     6CSS浮动     1.前期:图文环绕     2.后期:网页布局(块级元素在一行排列)    6.1浮动的特点                   7CSS书写顺序(浏览器执行效率更高)     1.浮动/display     2.盒子模型:margin  border  padding 宽度高度背景色     3.文字样式  

 

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

相关文章

  • dotnet 从零开始写一个人工智能 从一个神经元开始

    现在小伙伴说的人工智能都是弱智能,可以基于神经网络来做。而神经网络是有多层网络,每一层网络都有多个神经元。那么最简单的神经网络就是只有一层,而这一层只有一个神经元,也就是整个神经网络只是有一个神经元。一个神经元可以用来做什么?可以用来做基础的与或逻辑运算器。在我没有告诉神经元与或的逻辑时,只是通过我传输的输入的值和输出的值,此时神经元经过训练就能自己学会与或的逻辑。本文就在不使用现成的人工智能框架下一步步和大家写这一个神经元和告诉大家这是如何运行的。本文特别适合小伙伴入门神经网络,或者适合小伙伴入手写代码在所有逻辑开始之前,先要了解一下在代码可以如何组织。很多时候都不需要整个逻辑都了解就可以开始写代码了,一边写一边修改才是最具小项目效率的。在开始之前,先约定好本文要做的内容,本文就是来写一个神经网络,这个神经网络其实只有一个神经元而这个网络做的事情就是训练出一个或逻辑的计算库什么是或运算呢?其实就是输入两个布尔值,只要存在一个值是1那么输出就是1除非两个输入都是0才能输出0的值。那么什么时布尔值呢?就是表示一个数字只有两个取值,在本文这里就使用0和1两个值。所以或运行就是输入两个值,这

  • React篇(043)-什么是非受控组件?

    非受控组件是在内部存储其自身状态的组件,当需要时,可以使用ref查询DOM并查找其当前值。这有点像传统的HTML。在下面的UserProfile组件中,我们通过ref引用name输入框:classUserProfileextendsReact.Component{ constructor(props){ super(props) this.handleSubmit=this.handleSubmit.bind(this) this.input=React.createRef() } handleSubmit(event){ alert('Anamewassubmitted:'+this.input.current.value) event.preventDefault() } render(){ return( <formonSubmit={this.handleSubmit}> <label> {'Name:'} <inputtype="text"ref={this.input}/>

  • 设计模式之设计原则

    设计模式之设计原则相关设计原则图设计原则下面我们来看它们的使用的相关场景:1.单一职责原则单一职责原则:类的职责单一,不能将太多的职责放在一个类中,该原则是实现高内聚、低耦合的指导方针比如:进行登录操作需要经过用户请求、参数校验、查找用户、连接数据库、操作数据库等这些操作publicclassLogin1{ //登录,用户请求该方法 publicStringlogin(Stringusername,Stringpassword){ Booleanbo=validate(username,password);//参数校验 Objectuser=findUser(username,password);//查找用户 if(user==null){ return"登录失败"; } return"SUCCESS"; } //参数校验 publicBooleanvalidate(Stringusername,Stringpassword){ returntrue; } //查找用户信息 publicObjectfindUser(Stringuserna

  • 从3D人脸到自动驾驶,CVPR2020十个顶级开源数据集

    CVPR2020数据集CVPR2020上开源的十个最有用的数据集,用数据来构建更好的人工智能,数据搬运工从来不应该缺席!下面就是十个数据集的分别解释:01FaceScape一个大规模高质量的3D人脸数据集,包括18760站高质量3D人脸模型,对938名自愿者实现20种表情采集,该数据训练可以实现对单张图像预测3D人脸的细节。适应于非商业开源项目。数据集下载地址:https://facescape.nju.edu.cn/复制02OASIS全称是开放的单图表面标注,是大规模的单图三维表面数据集。该数据集采用了14万张的互联网图像,人工标注实现了三维表面像素级重建。该数据集可以在深度估算、三维表面重建、边缘检测、实例分割等方向上帮助研究者。https://oasis.cs.princeton.edu/复制03Waymo开放数据集来自谷歌母公司旗下Waymo开源的大规模、高质量、自动驾驶数据集。该数据包含大量高质量手动标注的3D与2D图像,包含了1150个场景,涵盖雷达与相机导航数据,城市与乡村道路。数据集下载地址:https://waymo.com/open复制04landmarks数据集来

  • 设计师要懂的用户思维

    我们都听过这样的一句话:从群众中来,到群众中去。而在产品世界中,我们也应该是从用户中来,到用户中去。用户思维,顾名思义,就是“站在用户的角度来思考问题”的思维。或者更广泛地说,就是站在对方的角度、换位思考。在产品设计领域,具备用户思维至关重要。马化腾说过,“产品经理最重要的能力是把自己变傻瓜”,周鸿祎也提出“一个好的产品经理必须是白痴傻瓜状态”。产品经理能够随时将大脑从“专业模式、专家模式”切换到“用户模式”或者“傻瓜模式”,就是用户思维的体现。除此之外,用户思维在市场营销以及生活工作当中,也是同样重要。如果没有把握好用户思维,就会造成种种不良后果。下面,我们分别通过一些案例,来看看产品思维在“产品设计、市场营销、日常生活”当中的体现。用户思维的体现 产品设计领域的体现 没有把握好用户思维,导致路由器销售受阻。周鸿祎曾经分享过360路由器设计中的一个用户思维的案例。最开始,他们设计出的路由器是鹅卵石形状,外形小巧优美,并在保证信号强度的前提下采用了内置天线。此外,通过用户调研发现,大部分用户都是无线接入。于是,他们就只保留了2个网线接口。但这样看似完美的产品,却遭受了销售的困境。其原因

  • 『 Vue小Case 』- 如何动态绑定多个事件(内附源码解析)

    本文阅读时间约为16分钟,其中有一段苦涩的代码,如懒得看的话,可直接跳至最后一部分查收总结。最近遇到这样一个需求,需要在抽象出来的组件上绑定用户传入的事件及其处理函数,并且事件名、数量不定,也就是动态绑定多个事件。印象中,文档中没有提到过类似的用法。所以Google一下。然后就遇到了下面这样一个可爱的故事。一、“可爱”的故事在搜索的过程中,看到了这样一条结果“初学vue,请问怎么在元素上绑定多个事件”[1],并且还是Vue的Issue,那我当然得优先看看了。Issue中具体的内容如下:透过屏幕感受到了尤雨溪大佬的一丝丝严厉。心疼小哥3秒,不知道会不会因此想过放弃Vue,放弃前端?。不过大佬就是要这么有威严不是嘛。严厉的同时还不忘给我们指一条“明路”。我们可以按照图中的方式试一下(示例1[2]),会发现好像并不可行。这是为什么呢?当然不是说大佬给我们“瞎指路”,这其实应该是某个版本迭代中支持的功能,只不过在现在的版本中不支持了(示例中试了1.0,2.0好像也不行),现在的版本中会有新的写法,具体内容下面会详述。好了,可爱的故事到此结束,下面我们一起讨论下如何实现动态绑定多个事件。二、如何

  • Java实现简单的区块链

    1.概述本文中,我们将学习区块链技术的基本概念。也将根据概念使用Java来实现一个基本的应用程序。进一步,我们将讨论一些先进的概念以及该技术的实际应用。2.什么是区块链?因此,让我们首先了解到底什么是区块链...它的起源可以追溯到2008年SatoshiNakamoto在比特币上发布的白皮书。区块链是一个分散的信息分类账。它由通过使用密码学连接的数据块组成。它属于通过公共网络连接的节点网络。当我们稍后尝试构建一个基本教程时,我们会更好地理解这一点。有一些我们必须要明白的重要属性,所以让我们来看看它们:Tamper-proof[加密摘要]:首先也是最重要的,**数据作为块的一部分是防篡改的。**每个块都由加密摘要引用,通常称为哈希,使块防篡改。Decentralized[分散化]:整个区块链是完全分散在网络上的。这意味着没有主节点,网络中的每个节点都有相同的副本。Transparent[透明的,显而易见的]:每个参与网络的节点都通过与其他节点的协商一致来验证并向其链添加一个新块。因此,每个节点都具有完整的数据可视性。3.区块链如何工作?现在,让我们了解区块链如何工作。区块链的基本单位是块

  • leetcode-太平洋大西洋水流问题

    每日一题太平洋大西洋水流问题 信息卡片时间:2019-08-16题目链接:https://leetcode-cn.com/problems/pacific-atlantic-water-flowtag:DP,BackTracking题目描述给定一个mxn的非负整数矩阵来表示一片大陆上各个单元格的高度。“太平洋”处于大陆的左边界和上边界,而“大西洋”处于大陆的右边界和下边界。规定水流只能按照上、下、左、右四个方向流动,且只能从高到低或者在同等高度上流动。请找出那些水流既可以流动到“太平洋”,又能流动到“大西洋”的陆地单元的坐标。提示:输出坐标的顺序不重要m和n都小于150测试用例给定下面的5x5矩阵: 太平洋~~~~~ ~1223(5)* ~323(4)(4)* ~24(5)31* ~(6)(7)145* ~(5)1124* *****大西洋 返回: [[0,4],[1,3],[1,4],[2,2],[3,0],[3,1],[4,0]](上图中带括号的单元). 复制题目理解水流既可以流动到“太平洋"意思是:从任意位置出发,能达到大陆的左边界和上边界就可以。(~~~)水流动

  • golang-os文件操作

    golang-os文件操作 packagemain import( "fmt" "os" ) //funcmain(){ //f,err:=os.Create("/home/landv/testOne.txt") //iferr!=nil{ //fmt.Println("createerr:",err) //return //} //deferf.Close() //fmt.Println("successful") //} //funcmain(){ //f,err:=os.Open("/home/landv/testOne.txt")//以只读方式打开 //iferr!=nil{ //fmt.Println("createerr:",err) //return //} //deferf.Close() //_,err=f.WriteString("这是一个One测试文件#######") //iferr!=nil{ //

  • 云问荣获HR tech高峰论坛科技产品奖

    HRtechChina10月17日,由HRTechChina发起的中国人力资源科技年度峰会在北京金茂万丽酒店举行,活动集结了多家知名企业。其中,南京云问科技产品荣获“2018数字人力资源科技奖”,云问科技联合创始人茆传羽在现场和与会嘉宾分享了云问企业助手的产品理念。 Chatbot助HR工作高效轻松云问科技受邀参加此次人力资源科技年度峰会,在HRTech的分会场中,由云问科技联合创始人茆传羽为大家首先带来了主题为《Chatbot助HR工作高效轻松》的精彩演讲,茆传羽表示随着人工智能变得越来越强大,人力资源聊天机器人正在重新定义企业员工的体验。随着技术的迭代,企业需求日渐多样化,传统的企业HR软件+Excel表格的人力资源管理方式,已无法满足公司业务高效率运转需求。HRChatbot将简化和解答人力资源流程问题,包括对招聘入职常见问题解答、员工培训、员工福利、年度审核等。云问HR智能助理赋能场景云问产品荣获峰会大奖云问致力于使用核心技术驱动企业智能服务,通过机器+人工协同合作,帮助企业高效生产。在当天峰会上,云问科技也将“2018数字人力资源科技奖(产品奖)”收入囊中。云问企业助理机器人

  • iOS 多国语言本地化与App内语言切换(Swift)写在前面前言准备工作storyboard/xib本地化纯代码本地化语言切换后记

    写在前面本文同步个人博客简书掘金慕课 使用Xcode9.3Swift4.1前言语言本地化大家肯定都多少都听过,今天我要分享的是快速实现语言本地化,与App内语言切换 核心内容主要是三个部分storyboard/xib本地化纯代码本地化语言切换准备工作项目中添加语言storyboard/xib本地化storyboard/xib做本地化Xcode基本上是一键搞定了。 很简单 只要勾勾选选就可以了 这边只涉及到一个更新的问题 通过ibtools命令可以使storyboard/xib生成新的代码 首先cd到stroyboard/xib目录 执行ibtoolxxx.storyboard--generate-strings-filenew.strings 打开new.strings将新内容手动复制到原来的string上。纯代码本地化创建string文件勾选语言,把几种全部勾上,包括Base(为下文使用脚本生成代码做准备)参考此篇文章进行脚本添加iOS中多语言本地化流程的优化添加脚本将脚本执行移动到编译上方移动位置添加脚本#Localizable.strings文件路径 localizableFil

  • Masonry的层层进阶1 基础写法:2 进阶写法3 自动装箱的写法4 Masonry的练习4.1 设置居中5. 更新及重建约束6. Masonry的两个宏

    Masonry的官方是这么描述自己的。Masonryisalight-weightlayoutframeworkwhichwrapsAutoLayoutwithanicersyntax.MasonryhasitsownlayoutDSLwhichprovidesachainablewayofdescribingyourNSLayoutConstraintswhichresultsinlayoutcodethatismoreconciseandreadable.MasonrysupportsiOSandMacOSX.Howeverifyou'reusingSwiftinyourproject,werecommendusingSnapKitasitprovidesbettertypesafetywithasimplerAPI. Masonry:https://github.com/SnapKit/Masonry SnapKit:https://github.com/SnapKit/SnapKit2.1BasicGrammarmas_makeConstraints mas_upda

  • 史上最全Jetson TX1使用介绍

    什么是JetsonTX1JetsonTX1是NVIDIA第二代嵌入式平台开发者套件,虽然只有信用卡大小,但JetsonTX1GPU模块的浮点运算能力却达到1Teraflops,相比JetsonTK1有巨幅提升。如此强大的性能,JetsonTX1显然是智能无人机、机器人最理想的嵌入式解决方案。 JetsonTX1核心模块别看核心模块只有信用卡大小,身体里可暗藏玄机:内建256个CUDA核心的NVIDIAMaxwellGPU,64位ARMA57CPU,4GBLPDDR4内存、16GB闪存、蓝牙、802.11acWi-Fi模块和千兆以太网卡,运行LinuxforTegra操作系统。 JetsonTX1开发者套件配上坐骑后的JetsonTX1是这个样子的。主板提供了USB3.0TypeA、USB2.0、HDMI、M.2KeyE、PCI-Ex4、千兆以太网、SD、SATA数据和供电等接口,俨然是台全功能的PC;既然是开发者套件,怎能少了针对硬件创客的扩展接口:GPIO、I2C、I2S、SPI、带流控制的TTLUART、显示器扩展头和摄像头扩展头一个不少。作为上一代JetsonTK1的用户,自然不

  • 腾讯云小程序安全获取诊断任务报告链接api接口

    1.接口描述接口请求域名:mmps.tencentcloudapi.com。 获取翼扬诊断任务报告链接地址 默认接口请求频率限制:20次/秒。 APIExplorer提供了在线调用、签名验证、SDK代码生成和快速检索接口等能力。您可查看每次调用的请求内容和返回结果以及自动生成SDK调用示例。 2.输入参数以下请求参数列表仅列出了接口请求参数和部分公共参数,完整公共参数列表见公共请求参数。 参数名称 必选 类型 描述 Action 是 String 公共参数,本接口取值:DescribeFlySecMiniAppReportUrl。 Version 是 String 公共参数,本接口取值:2020-07-10。 Region 否 String 公共参数,本接口不需要传递此参数。 TaskID 是 String 任务id MiniAppID 是 String 小程序appid Mode 是 Integer 诊断方式1:基础诊断,2:深度诊断 ReportType 否 Integer 诊断报告类型0:基础诊断报告,1:总裁版诊断报告,2

  • 腾讯云前端性能监控获取QueryDataapi接口

    1.接口描述接口请求域名:rum.tencentcloudapi.com。 转发monitor查询 默认接口请求频率限制:20次/秒。 APIExplorer提供了在线调用、签名验证、SDK代码生成和快速检索接口等能力。您可查看每次调用的请求内容和返回结果以及自动生成SDK调用示例。 2.输入参数以下请求参数列表仅列出了接口请求参数和部分公共参数,完整公共参数列表见公共请求参数。 参数名称 必选 类型 描述 Action 是 String 公共参数,本接口取值:DescribeData。 Version 是 String 公共参数,本接口取值:2021-06-22。 Region 否 String 公共参数,本接口不需要传递此参数。 Query 是 String 查询字符串 ID 是 Integer 项目ID 3.输出参数 参数名称 类型 描述 Result String 返回字符串 RequestId String 唯一请求ID,每次请求都会返回。定位问题时需要提供该次请求的RequestId。 4.示例示例1转发

  • The owner of /home/linuxidc/.config/ibus/bus is not root

    Ubuntu终端提示Theownerof/home/linuxidc/.config/ibus/busisnotroot解决办法 [日期:2018-01-22] 来源:Linux社区 作者:Linux [字体:大中小]   Ubuntu17.10在启动Samba图形界面时出错sudosystem-config-samba,在(gedit:3366):IBUS-WARNING**:Theownerof~/.config/ibus/busisnotroot!找到原因 解决办法 这是因为在修改系统文件时我们不能使用sudo命令去修改,必须使用系统内置的管理员权限。最简单的方法是使用gksudo命令启用root编辑或是sudo-i切换。 当然你可以把你的账户权限添加到管理员权限中也是可以的,具体做法如下: 修改/etc/sudoers这个文件,内容如下: ##ThisfileMUSTbeeditedwiththe'visudo'commandasroot.##Pleaseconsideraddinglocalcontentin/etc/sudoers.d

  • 常量(Constant)

     常量通常指的是一个固定的值,例如:1、2、3、’a’、’b’、true、false、”helloWorld”等。    在Java语言中,主要是利用关键字final来定义一个常量。常量一旦被初始化后不能再更改其值。 声明格式为: finaltypevarName=value; 复制 常量的声明及使用 publicclassTestConstants{ publicstaticvoidmain(String[]args){ finaldoublePI=3.14; //PI=3.15;//编译错误,不能再被赋值! doubler=4; doublearea=PI*r*r; doublecircle=2*PI*r; System.out.println("area="+area); System.out.println("circle="+circle); } } 复制  为了更好的区分和表述,一般将1、2、3、’a’、’b’、true、false、”helloWorld”等称为字面常量,而使用final修饰的PI等称为符号常量。 

  • JS基础三

    1、delete删除对对象的属性和方法的定义。强制解除对它的引用,将其设置为undefined delete运算符不能删除开发者未定义的属性和方法。 2、void运算符对任何值返回undefined。该运算符通常用于避免输出不应该输出的值,没有返回值的函数真正返回的都是undefined。 3、前增量运算符,就是数值上加1,形式是在变量前放两个加号(++): variNum=10; ++iNum; 复制 第二行代码把iNum增加到了11,它实质上等价于: variNum=10; iNum=iNum+1; 复制 同样,前减量运算符是从数值上减1,形式是在变量前放两个减号(--): variNum=10; --iNum;复制 在这个例子中,第二行代码把iNum的值减到9。 在使用前缀式运算符时,注意增量和减量运算符都发生在计算表达式之前。 4、后增量运算符也是给数值上加1,形式是在变量后放两个加号(++):与前缀式运算符不同的是,后缀式运算符是在计算过包含它们的表达式后才进行增量或减量运算的。 5、位运算符是在数字底层(即表示数字的32个数位)进行操作的。 6、整数有两种类型,即有符号整数

  • Ubuntu 上五款搜索工具:Albert、Synapse、Utools、Ulauncher、FSearch

    应用概览 应用/功能 查找应用 查找文件 查找网页 扩展程序 Albert ✓ ✓ ✓ - Synapse ✓ ✓ - - Utools ✓ ✗ ✓ ✓ Ulauncher ✓ ✓ ✓ ✓ FSearch ✗ ✓ ✗ ✗ 简单说,Albert最好用,Ulauncher综合能力强,而FSearch严重偏科。 搜商 在介绍应用前,先谈谈搜商。(详细介绍参看百度百科。) 随着信息时代的来临,知识更新日新月异,我们不得不承认,即使人类拥有再高的智商,再多的大脑容量,再充足的生命时间,也不能满足理解和储存全部人类知识的要求,更何况人类的知识正以几何级数量迅速增长。因此,我们必须在海量知识中快速地搜索出对自己有用的知识。幸运的是,搜索引擎技术的迅猛发展,无疑给人们在海量信息中快速获取自己需要的知识提供了极大的便利,善用搜索技术可能会演变成网络时代人应该具备的一种重要能力,这时候提出“搜商”概念,并把它与智商,情商比照研究,颇有新意和启发。 搜商的本质特征是搜索。广义的“搜商”指人们所有搜索行为的智力。 明白了培养搜商的作用,那就为学习使用搜索工具做了思想铺垫。我

  • 佛洛依德

    这个春节在家粗略看了弗洛伊德的三本书《精神分析引论》,《梦的解析》,《性学三论》,还有一本《改变心理学的40项研究》,总的来说有些观点真的不错,以前没有接触过,下面是一些笔记。 我希望记录下来,以后可以慢慢看。 总的来说,佛洛依德总是把一些心理病归结于性,喜欢把梦里面的东西往器官上面做解析,现在看来,有一部分我是接受的,其次的心理学的一些实验,给我最大的感受就是双胞胎实验,决定人的发展最后很大是靠基因,尽管我们并不喜欢听这个,总有点宿命论在里面,可事实的确如此。so,what'syourchoice? 《精神分析引论》 过失心理学     精神分析有两个信条最足以触怒全人类:其一是它和他们的理性的成见相反;其二则是和他们的道德的或美育的成见相冲突。这些成见是不可轻视的,它们都是人类进化所应有的副产物,是极有势力的,它们有情绪的力量作基础,所以要打破它们,确是难事。    心理过程主要是潜意识的,至于意识的心理过程则仅仅是整个心灵的分离的部分和动作。我们要记得我们从 前常以为心理的就是意识的。意识好象正是心理生活的

  • python基础-常用内建模块

    一、collections :内建集合模块.   1、namedtuple:创建一个自定义的tuple对象   2、deque:为了高效实现插入和删除操作的双向列表,适合用于队列和栈   3、defaultdict:Key不存在时返回默认值   4、OrderedDict:保持Key的顺序   5、Counter:一个简单的计数器 二、base64 : 一种用64个字符来表示任意二进制数据的方法 三、struct : str和其他二进制数据类型的转换 四、hashlib : 提供常见的摘要算法,如MD5,SHA1 五、itertools : 提供非常有用的用于操作迭代对象的函数 六、XML : XML虽然比JSON复杂,在Web中应用也不如以前多了,不过仍有很多地方在用,所以,有必要了解如何操作XML。 七、HTMLParser ---------------------------------------------------------------------------

相关推荐

推荐阅读