官网文档阐明:
依据 W3 规范中的规定, css selector 分为 4 种 type: a, b, c, d. 他们的数目计算规定为:
在比拟不同 css selector 的权重时, 依照 a => b =>c => d 的程序进行比拟.
由第一个 selector type a 的计算规定可知: 写在 html 代码 style 属性中的 css 相较写在 css 选择器中的 css 属性具备最高的优先级。
而 id selector (b) 相较 class selector (c) 有更高的优先级. 这也和咱们平时的教训相吻合。
对于!important:
依照 MDN的说法, !important 是不在 css 选择器的权重计算范畴内的, 而它之所以能让 css 选择器失效是因为浏览器在遇见 !important 时会进行非凡的判断. 当多个 !important 须要进行比拟时, 才会计算其权重再进行比拟.
通常来说, 不提倡应用 !important. 如果你认为肯定要应用, 无妨先自检一下:
块级元素 block:
顾名思义,该元素出现“块”状,所以它有本人的宽度和高度,能够自定义width和height。并且单独占据一行高度(float浮动除外),个别可作为其余容器应用,可包容块级元素和行内元素。
块级元素有以下特点:
常见的块元素:
//定义地址
//定义文档中的分页区或节
//定义列表
- //定义列表中的我的项目
//创立html表单
-->//定义题目
//水平线
- //定义列表我的项目
//定义有序列表 //定义无序列表
//定义段落
//定义html表格//表格主体//定义表格页脚thead>//定义表格表头
//定义表格中规范单元格
//定义表头单元格
< //定义表格中的行
行内元素 inline:
行内元素不能够设置(width)和高(height),但能够与其余行内元素位于同一行,行内元素内个别不跨域蕴含块级元素。行内元素的高度个别由元素外部的字体大小决定,宽度由内容的长度管制。
行内元素有以下特点:
- 每一个行内元素能够和别的行内元素共享一行,相邻的行内元素会排列在同一行里,直到一行排不下,才会换行。
- 行内元素的高度、宽度、行高及顶部和底部边距不可设置。
- 元素的宽度就是它蕴含的文字或图片的宽度,不可扭转
常见的行内元素:
//标签可定义锚
//字体加粗
//大号字体成果 小号字体成果
//换行
//斜体文本成果
//向网页中嵌入一副图画
//输入框
行内块级元素 inline-block:
行内块级元素,它既具备块级元素的特点,也有行内元素的特点,它能够自在设置元素宽度和高度,也能够在一行中搁置多个行内块级元素。比方input,img就是行内块级元素,它能够设置高宽以及,一行多个。
具体特点:
- 和其余行内或行内块级元素搁置在同一行上。
- 元素的高度、宽度、行高以及顶和底边距都可设置。
元素类型转换 display:
- display: block (定义元素为块级元素)
- display: inline(定义元素为行内元素)
- display: inline-block(定义元素为行内块级元素)
css画三角形
利用border属性,在宽高为0的div内
div {
width: 0px;
height: 0px;
border-top: 50px solid transparent;//通明
border-bottom: 50px solid deeppink;//此时显示出三角形
border-left: 50px solid transparent;//通明
border-right: 50px solid transparent;//通明
}
href和src的区别
-
申请资源类型不同
- href:href是Hypertext Reference的缩写,示意超文本援用。用来建设以后元素和文档之间的链接。罕用的有:link a
- src:在申请src资源时会将其指向的资源下载并利用到文档中,罕用的有script,img,iframe
-
作用后果不同
- href:href用于在以后文档和援用资源之间确立分割。
- src:src用于替换以后内容。
-
浏览器解析形式不同
- href:若在文档中增加href,浏览器会辨认该文档为CSS文件,就会并行下载资源并且不会进行对以后文档的解决。这也是为什么倡议应用link形式加载CSS而不是@import
- src:当浏览器解析src,会暂停其余资源的下载和解决,直到将该资源加载、编译、执行结束,图片和框架等也如此,相似于将所指向资源利用到以后内容。这也是为什么倡议把js脚本放在底部而不是头部的起因。
link和@import的区别
两者都是内部援用CSS的形式,然而存在肯定区别:
- link是XHTML标签,除了能加载CSS,还能够定义RSS等其余事物;而@import属于CSS领域,只能够加载CSS。
- link援用CSS时,在页面载入时同时加载;@import须要页面齐全载入当前再加载。
- link是XHTML标签,无兼容问题;@import则是在CSS2.1提出的,低版本的浏览器不反对。
- link反对应用js管制DOM扭转款式;而@import不反对。
position属性四个值的区别和用法
position属性有四个可选值,别离是:static,absolute,fixed,relative
static:
- (动态定位)是默认值,元素呈现在失常的流中。不会受到top,bottom,left,right影响。
relative:
- 绝对定位元素的定位是绝对本人本来的失常地位。根据left,right,top,bottom等属性在失常文档流中偏移地位。
- 能够挪动的绝对定位元素的内容和互相重叠的元素,它本来所占的空间不会扭转
- 绝对定位元素常常被用来作为相对定位元素的容器块。
absolute:
- 将对象从文档流中拖出,应用left,right,top,bottom等属性进行相对定位,而其层叠通过z-index属性定义。
- 此时对象不具备边距,但仍有补白和边框。
- 相对定位的元素的地位绝对于最近的已定位的父元素,如果元素没有已定位的父元素,那么它的地位绝对于
- 应用相对定位的层后面的或者前面的层会认为这个层并不存在,也就是在z方向上,它是绝对独立进去的,丝毫不影响到其余z方向的层
- 设置absolute会使得inline元素被“块”化
- 设置absolute会使得元素已有的float生效,不过float和absolute同时应用的状况不多
- absolute会使元素悬浮在页面之上,如果有多个悬浮元素,层级的确定是“后来者居上”
fixed:
fixed和absolute是一样的,惟一的区别在于:absolute元素是依据最近的定位上下文确定地位,而fixed永远依据浏览器确定地位。即便窗口是滚动的它也不会挪动
- fixed定位使元素的地位与文档流无关,因而不占据空间。
- fixed定位的元素和其余元素重叠
- IE6不反对css中的position:fixed属性
z-index:
垂直定位:z轴方向上的层叠定位
- z-index默认值都是0
- 但默认状况下,后来者会笼罩前者,此时,如果须要扭转层级关系,就要通过扭转z-index值来实现。z-index越大优先级越高
- 如果将position设为relative(绝对定位),absolute(相对定位)或者fixed(固定定位),这样的节点会笼罩没有设置position属性或者属性值为static的节点,阐明前者比后者的默认层级高。例如弹出层时用到最多
- 在position属性值为absolute的同时,如果有一级父对象(无论是父对象还是祖父对象,或者再高的辈分,一样)的position属性值为relative时,则上述的绝对浏览器窗口定位将会变成绝对父对象定位,这对精确定位是很有帮忙的。
head中的meta字段
meta是html语言head区的一个辅助性标签,meta标签共有两个属性,别离是http-equiv属性和name属性,它的作用有:
- 搜索引擎优化
- 定义页面应用语言
- 主动刷新并指向新的页面
- 实现网页转换时的动态效果
- 管制页面缓冲
- 网页定级评估
- 管制网页显示窗口
暗藏元素的办法和区别
- 元素.style.display=&#8221;none&#8221;,设置后元素不占地位
- 元素.visibility=&#8221;hidden&#8221;,设置后元素还占原先的地位
- 元素.opacity=0,齐全通明,还占地位
程度垂直居中计划
1.相对定位元素的居中实现
毛病:须要晓得元素尺寸
-
flex布局(此例在body内div居中)
- transform
- margin:auto 实现相对定位元素的居中
requestAnimationFrame为什么能优化动画性能
- 这个是setInterval的优化
-
与SetTimeout相比
- requestAnimationFrame最大的劣势是由零碎来决定回调函数的执行理论。
-
具体来讲,如果屏幕刷新率是60HZ,那么回调函数就16.7ms被执行一次
- 如果刷新频率是75HZ,那么这个工夫距离就变成了1000/75=13.3ms
- requestAnimationFrame的步调跟着零碎的刷新步调走
- 它能保障回调函数在屏幕第一次的刷新距离中只被执行一次
- 这样就不会引起丢帧景象,也不会导致动画呈现卡顿的问题
-
requestAnimationFrame另外两个劣势
- CPU节能:应用setTimeout实现的动画,当页面被暗藏或最小化时,setTimeout依然在后盾执行动画工作,因为此时页面处于不可见或不可用状态,刷新动画是没有意义的,齐全是节约CPU资源。而requestAnimationFrame则齐全不同,当页面解决未激活的状态下,该页面的屏幕刷新工作也会被零碎暂停,因而跟着零碎步调走的requestAnimationFrame也会进行渲染,当页面被激活时,动画就从上次停留的中央继续执行,无效节俭了CPU开销
- 函数节流:在高频率工夫(risize,scroll)中,为了避免在一个刷新距离内产生屡次函数执行,应用requestAnimationFrame可保障每个刷新距离内,函数只被执行一次,这样既能保障流畅性,也能更好地节俭执行的开销,一个刷新距离内函数执行屡次是没有意义的,因为显示器没16.7ms刷新一次,屡次绘制并不会在屏幕上体现进去
盒子模型
-
W3C盒子模型(规范盒模型):依据W3C标准,元素内容占据的空间是由width属性设置的,而内容四周的padding和border值是另外计算的。
- 内容的宽高=咱们设置的宽高
- 盒子总宽高=width/height+padding+border+margin
-
IE盒模型(怪异盒模型):该模式下,浏览器width属性不是内容的宽度,而是内容,内边距和边框的宽度的总和
- 咱们设置的宽度=盒子的宽度+内边距padding+边框border宽度
- 盒子的总宽高=width/height+margin
- 意思就是咱们设置的宽度蕴含了padding和border
-
两种模式下兼容性问题
- 倡议不要给元素增加具备指定宽度的内边距,而是尝试将内边距或外边距增加到元素的父元素和子元素
- CSS3指定盒子模型品种
-
box-sizing属性容许以特定形式匹配某个区域的特定元素
- box-sizing:content-box(默认属性,规范盒模型);宽高别离利用到元素的内容框,在宽度和高度之外绘制元素的内边距和边框。
- box-sizing:border-box(IE盒模型,怪异盒模型);为元素设定的宽高决定了元素的边框盒,就是说,为元素指定的任何内边距和边框都将在已设定的宽高内进行绘制。通过从已设定的宽度和高度别离减去边框和内边距能力失去内容的宽度和高度。
- box-sizing:inherit;规定应从父元素继承box-sizing属性的值
革除浮动
革除浮动次要是为了解决,父元素因为子级元素浮动引起的外部高度为0的问题
总结一下:
当父元素不给高度的时候,
外部元素不浮动时会撑开
而浮动的时候,父元素变成一条线
办法:
- 对父级设置适宜CSS高度(个别设置高度须要能确定内容高度能力设置)
- clear:both革除浮动(这个css clear革除float产生浮动,能够不必对父级设置高度 也无需技术父级高度,不便实用,但会多加CSS和HTML标签。在最初一个浮动标签后,新加一个标签,给其设置clear:both)
- 父级div定义 overflow:hidden(对父级CSS选择器加overflow:hidden款式,能够革除父级内应用float产生浮动。长处是能够很少CSS代码即可解决浮动产生。通过触发BFC形式,实现革除浮动,毛病:内容增多的时候容易造成不会主动换行导致内容被暗藏掉,无奈显示要溢出的元素)
- 应用before和after双伪元素革除浮动,伪元素是行内元素 失常浏览器革除浮动办法(.clearfix:after{css})
BFC
MDN:一个块格式化上下文(block formatting context) 是Web页面的可视化CSS渲染出的一部分。它是块级盒布局呈现的区域,也是浮动层元素进行交互的区域。
性能:
- 使 BFC 外部浮动元素不会到处乱跑;(就是说内层float或定位后,会脱离文档流,而给外层设置BFC就能够使内存不脱离)
- 和浮动元素产生边界。
- 开启BFC的元素不会被浮动元素所笼罩
如何开启:
- 设置元素浮动 float
- 设置元素相对定位 position: absolute;
- 设置元素为inline-block
- 将元素的overflow设置为一个非visible的值
- 举荐形式:将overflow设置为hidden是副作用最小的开启BFC的形式。
伪类和伪元素:
其中伪类和伪元素的基本区别在于:它们是否发明了新的元素。
伪元素/伪对象:不存在在DOM文档中,是虚构的元素,是创立新元素。代表某个元素的子元素,这个子元素尽管在逻辑上存在,但却并不理论存在于文档树中。
伪类:存在DOM文档中,逻辑上存在但在文档树中却毋庸标识的“幽灵”分类。
伪元素选择符(单双引号为css1/css3区别):
- ::first-letter:设置对象内的第一个字符的款式
- ::first-line:设置对象内第一行的款式
- ::before:设置在对象前(根据对象树的逻辑构造)产生的内容。用来和content属性一起应用
- ::after:设置在对象后(依赖对象树的逻辑构造)产生的内容。用来和content属性一起应用
伪类选择符:
- :hover:设置元素在其鼠标悬停时的款式
- :active:设置元素在被用户激活(鼠标点击与开释之间产生的事件)的款式
- :focus:设置元素在成为输出焦点(该元素onfocus事件产生)时的款式
- first-child:匹配父元素第一个子元素
- last-child:匹配父元素的最初一个子元素
- nth-child(n):匹配父元素第n个子元素
- nth-last-child(n):匹配父元素的倒数第n个子元素
//例子
a
b
//应用伪类让第一个p标签变红
//css
p:first-child{
color:red
}
//不应用伪类怎么做呢?给p加一个class,在class里加款式
a
b
//能够实现同样的成果,但要多写一个类,这时,被润饰的li仍然存在于DOM树中
//伪元素操作(给第一个字母增加款式)
Hello,world
//css
p::first-letter{
color:red
}
//不必伪元素
Hello,world
//css(通过加span 和 类,这时看起来像创立了一个虚构的span元素并为其增加款式,但实际上在DOM数中并不存在这个span元素)
能够看出二者区别了,
伪类的成果能够通过增加理论的类来实现
伪元素的成果能够通过增加理论的元素来实现
所以它们的本质区别就是是否形象发明了新元素
伪类偏重丰盛选择器的抉择语法范畴内元素的抉择能力,伪元素偏重表白或者定义不在语法定义范畴内的形象元素。
伪类和伪元素各自有一些存在的兼容问题。
scrollWidth、clientWidth、offsetWidth、width的区别
scrollWidth
:对象的理论内容的宽度,不包边线宽度,会随对象中内容超过可视区后而变大。
clientWidth
:对象内容的可视区的宽度,不包滚动条等边线,会随对象显示大小的变动而扭转。
offsetWidth
:对象整体的理论宽度,包滚动条等边线,会随对象显示大小的变动而扭转。
-
innerWidth
:
window.innerHeight
=浏览器窗口的外部高度
window.innerWidth
=浏览器窗口的外部宽度
- 元素内无内容或者内容不超过可视区,滚动不呈现或不可用的状况下。
scrollWidth=clientWidth
,两者皆为内容可视区的宽度。
offsetWidth
为元素的理论宽度。
- 元素的内容超过可视区,滚动条呈现和可用的状况下。
scrollWidth>clientWidth
。
scrollWidth
为理论内容的宽度。
clientWidth
是内容可视区的宽度。
offsetWidth
是元素的理论宽度。
- offsetWidth和width区别
offsetWidth
属性能够返回对象的padding+border
+元素width
属性值之和,style.width
返回值就是定义的width
属性值。
offsetWidth
属性仅是可读属性,而style.width
是可读写的。
offsetWidth
属性返回值是整数,而style.width
的返回值是字符串,并且带有单位。
style.width
仅能返回以style
形式定义的外部样式表的width
属性值。
写下你的评论吧 !
推荐阅读
-
本指南详细介绍了如何在CentOS 6.6 64位系统上以root用户身份部署Tomcat 8服务器。系统环境为CentOS 6.6 64位,采用源码安装方式。所需软件为apache-tomcat-8.0.23.tar.gz,建议将软件下载至/root/opt目录。具体下载地址请参见官方资源。本指南涵盖了从环境准备到服务启动的完整步骤,适用于需要在该系统环境下搭建高性能Web应用服务器的技术人员。 ...
[详细]
蜡笔小新 2024-11-08 21:38:15
-
在最近的一个项目中,我们使用了JQuery DataTable进行数据展示,虽然使用起来非常方便,但在测试过程中发现了一个问题:当查询条件改变时,有时查询结果的数据不正确。通过FireBug调试发现,点击搜索按钮时,会发送两次Ajax请求,一次是原条件的请求,一次是新条件的请求。 ...
[详细]
蜡笔小新 2024-11-12 13:59:27
-
-
本文详细介绍了 Java 网站开发的相关资源和步骤,包括常用网站、开发环境和框架选择。 ...
[详细]
蜡笔小新 2024-11-14 22:39:58
-
本文介绍了Java编程语言的基础知识,包括其历史背景、主要特性以及如何安装和配置JDK。此外,还详细讲解了如何编写和运行第一个Java程序,并简要介绍了Eclipse集成开发环境的安装和使用。 ...
[详细]
蜡笔小新 2024-11-14 18:05:41
-
本文将展示如何使用 Bootstrap 实现缩略图效果,并提供详细的代码示例。 ...
[详细]
蜡笔小新 2024-11-14 17:27:35
-
本文详细介绍了Java代码分层的基本概念和常见分层模式,特别是MVC模式。同时探讨了不同项目需求下的分层策略,帮助读者更好地理解和应用Java分层思想。 ...
[详细]
蜡笔小新 2024-11-13 17:03:49
-
本文详细介绍如何使用 Python 进行数据可视化,涵盖从环境搭建到具体实例的全过程。 ...
[详细]
蜡笔小新 2024-11-13 06:03:30
-
前端时间因为项目需要,要对一个产品下所有的附属图片进行分页显示,没考虑ajax一张张请求,所以干脆一次性全部把图片out,然 ...
[详细]
蜡笔小新 2024-11-12 14:58:57
-
秒建一个后台管理系统?用这5个开源免费的Java项目就够了 ...
[详细]
蜡笔小新 2024-11-12 03:21:33
-
Bootstrap 支持用户自定义样式调整。即使长时间未使用 Bootstrap,也可以通过添加新的 CSS 类或覆盖现有类来轻松修改默认样式,以满足特定的设计需求。 ...
[详细]
蜡笔小新 2024-11-11 20:11:31
-
本指南介绍了如何在ASP.NET Web应用程序中利用C#和JavaScript实现基于指纹识别的登录系统。通过集成指纹识别技术,用户无需输入传统的登录ID即可完成身份验证,从而提升用户体验和安全性。我们将详细探讨如何配置和部署这一功能,确保系统的稳定性和可靠性。 ...
[详细]
蜡笔小新 2024-11-09 18:14:37
-
本文将深入解析CSS伪类的定义及其应用场景。CSS伪类通过为已存在的元素在特定状态下添加特殊样式,能够动态响应用户的交互行为,从而提升网页的视觉效果和用户体验。 ...
[详细]
蜡笔小新 2024-11-08 17:49:37
-
多条件联动筛选功能广泛应用于图片展示、装修设计、机械设备和在线商城等场景,通常筛选条件应聚焦于用户最关心的要素,而非涵盖所有可能的选项。在DedeCMS中,多条件筛选的PHP开发并未内置删除已选条件的功能,但通过理解PHP筛选与JS筛选的不同机制,实现这一功能相对简单且易于操作。 ...
[详细]
蜡笔小新 2024-11-01 16:21:47
-
本文介绍了在PHP环境中优化表格列表和表单Label样式的技巧,通过CSS代码提升表单的视觉效果。具体包括为每个标签添加箭头背景,并在标签获得焦点时实现背景高亮的效果。示例代码展示了如何为“姓名”和“邮件”字段应用这些样式,适用于phpStudy开发环境。 ...
[详细]
蜡笔小新 2024-10-31 11:41:45
-
对于软件开发人员而言,随着技术框架的不断演进和成熟,许多高级功能已经被高度封装,使得初级开发者只需掌握基本用法即可迅速完成项目。然而,对于中高级工程师而言,深入了解Java虚拟机(JVM)的核心知识点是必不可少的。这不仅有助于优化性能和解决复杂问题,还能在面试中脱颖而出。本文将全面解析JVM的关键概念和技术细节,帮助读者全面提升技术水平。 ...
[详细]
蜡笔小新 2024-10-31 10:20:42
-
-qone0_784
这个家伙很懒,什么也没留下!
Tags | 热门标签
RankList | 热门文章
-
1java 接口继承抽象类_Java之继承、抽象类、接口篇
-
22017首届中国(无锡)物联网与区块链 产业发展高峰论坛
-
3C#基础入门教程方法
-
4Filter过滤器(1)
-
5有效地记录日志可以简化企业的开发过程
-
6Android Studio 查看类结构和继承关系
-
7《野蛮女友》上映,新娘结婚当天被劈腿,九孔变身最惨反派
-
8福禄克DSX28000/DSX25000 CH 电缆测试仪带了Cat 6A的测试方法: 超6类网线——光明的未来
-
9一个有趣的说法:多层神经网络的致命问题与过拟合
-
10跟着盒子的代码设计示例,一起对面向对象的设计模式之SOLID原则加深理解
-
11常用的js工具函数
-
12SAP License:SAP ECC6安装系列一:安装前硬件和软件准备
-
13高分求解决方法,高手来啊
-
14怎样借助Python爬虫给宝宝起个好名字python 学习
-
15金笛邮件邮件连接数据库专题之oracle数据库
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有