官网文档阐明:
依据 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
属性值。
写下你的评论吧 !
推荐阅读
-
本文介绍了在开发Android新闻App时,搭建本地服务器的步骤。通过使用XAMPP软件,可以一键式搭建起开发环境,包括Apache、MySQL、PHP、PERL。在本地服务器上新建数据库和表,并设置相应的属性。最后,给出了创建new表的SQL语句。这个教程适合初学者参考。 ...
[详细]
蜡笔小新 2023-12-14 17:15:19
-
本文讨论了微软的STL容器类是否线程安全。根据MSDN的回答,STL容器类包括vector、deque、list、queue、stack、priority_queue、valarray、map、hash_map、multimap、hash_multimap、set、hash_set、multiset、hash_multiset、basic_string和bitset。对于单个对象来说,多个线程同时读取是安全的。但如果一个线程正在写入一个对象,那么所有的读写操作都需要进行同步。 ...
[详细]
蜡笔小新 2023-12-11 11:53:23
-
-
本文介绍了Python语言程序设计中文件和数据格式化的操作,包括使用np.savetext保存文本文件,对文本文件和二进制文件进行统一的操作步骤,以及使用Numpy模块进行数据可视化编程的指南。同时还提供了一些关于Python的测试题。 ...
[详细]
蜡笔小新 2023-12-10 17:02:16
-
本文介绍了如何通过修改织梦DedeCms源代码来实现全站伪静态,以提高管理和SEO效果。全站伪静态可以避免重复URL的问题,同时通过使用mod_rewrite伪静态模块和.htaccess正则表达式,可以更好地适应搜索引擎的需求。文章还提到了一些相关的技术和工具,如Ubuntu、qt编程、tomcat端口、爬虫、php request根目录等。 ...
[详细]
蜡笔小新 2023-12-14 19:45:47
-
本文介绍了在Python3中如何使用选择文件对话框的格式打开和保存图片的方法。通过使用tkinter库中的filedialog模块的asksaveasfilename和askopenfilename函数,可以方便地选择要打开或保存的图片文件,并进行相关操作。具体的代码示例和操作步骤也被提供。 ...
[详细]
蜡笔小新 2023-12-14 17:46:55
-
本文分享了一个关于在C#中使用异步代码的问题,作者在控制台中运行时代码正常工作,但在Windows窗体中却无法正常工作。作者尝试搜索局域网上的主机,但在窗体中计数器没有减少。文章提供了相关的代码和解决思路。 ...
[详细]
蜡笔小新 2023-12-14 15:56:00
-
本文介绍了Android中高级面试的必知必会内容,并总结了相关经验。文章指出,如今的Android市场对开发人员的要求更高,需要更专业的人才。同时,文章还给出了针对Android岗位的职责和要求,并提供了简历突出的建议。 ...
[详细]
蜡笔小新 2023-12-14 14:53:02
-
本文介绍了使用PHP实现断点续传乱序合并文件的方法和源码。由于网络原因,文件需要分割成多个部分发送,因此无法按顺序接收。文章中提供了merge2.php的源码,通过使用shuffle函数打乱文件读取顺序,实现了乱序合并文件的功能。同时,还介绍了filesize、glob、unlink、fopen等相关函数的使用。阅读本文可以了解如何使用PHP实现断点续传乱序合并文件的具体步骤。 ...
[详细]
蜡笔小新 2023-12-14 04:33:19
-
本文主要讨论串匹配算法的性能评估,包括模式匹配、字符种类数量、算法复杂度等内容。通过借助C++中的头文件和库,可以实现对串的匹配操作。其中蛮力算法的复杂度为O(m*n),通过随机取出长度为m的子串作为模式P,在文本T中进行匹配,统计平均复杂度。对于成功和失败的匹配分别进行测试,分析其平均复杂度。详情请参考相关学习资源。 ...
[详细]
蜡笔小新 2023-12-13 16:16:05
-
本文介绍了Java的集合及其实现类,包括数据结构、抽象类和具体实现类的关系,详细介绍了List接口及其实现类ArrayList的基本操作和特点。文章通过提供相关参考文档和链接,帮助读者更好地理解和使用Java的集合类。 ...
[详细]
蜡笔小新 2023-12-13 14:12:18
-
本文介绍了在Docker容器技术中限制容器对CPU的使用的方法,包括使用-c参数设置容器的内存限额,以及通过设置工作线程数量来充分利用CPU资源。同时,还介绍了容器权重分配的情况,以及如何通过top命令查看容器在CPU资源紧张情况下的使用情况。 ...
[详细]
蜡笔小新 2023-12-12 18:31:07
-
This article discusses the efficiency of using char str[] and char *str and whether there is any reason to prefer one over the other. It explains the difference between the two and provides an example to illustrate their usage. ...
[详细]
蜡笔小新 2023-12-12 10:13:35
-
本文介绍了如何给正方体添加环境光以使其显示更真实。通过在代码中加入环境光的计算,可以让物体的背光部分不再完全黑色,从而增加物体的真实感。代码中使用了顶点属性、光照颜色、光照方向、环境光等参数来计算物体的漫反射,并将计算结果与顶点颜色相乘得到最终的颜色。通过调整环境光的参数,可以达到不同的光照效果。 ...
[详细]
蜡笔小新 2023-12-11 20:36:05
-
-qone0_784
这个家伙很懒,什么也没留下!
Tags | 热门标签
RankList | 热门文章
-
1测牛学堂:学好sql语句,成为优秀的软件测试开发工程师的基础!(三)
-
2获取文件夹所有及其所有目录的修改时间
-
3交叉编译场景分析(armlinux)(八)编译glib
-
4ORACLE常用傻瓜問題1000問(之四) (转)
-
5用VisualSutdio2015制作一款简单的小游戏
-
6未来 新媒体互动艺术 媒介与形式
-
7wordpress修改固定链接后404
-
8Linux下查看控制环境变量的方法
-
9j2se 5.0 hotspot 垃圾回收器的自动选择/优化机制
-
10python可以同时打开两个文件吗在python中使用with打开多个文件的方法
-
11怎么在pyqt5中设置窗体透明控件
-
12安卓弹性刷新通用版—支持任何view上下刷新均有弹性效果
-
13BUUDragon Quest
-
14org.apache.commons.httpclient.auth.AuthState.getRealm()方法的使用及代码示例
-
15JS之AJAX篇FormData对象
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved |
京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有