当前位置: 首页 > Web前端 > CSS

CSS泄漏检测

时间:2023-03-30 18:51:01 CSS

css样式优先!important>内联样式>ID选择器>类选择器=属性选择器=伪类选择器>标签选择器=伪元素选择器在学习过程中,你可能会发现加权选择器的语句,即ID选择器的权重为100,类选择器的权重为10,标签选择器的权重为1。当一个选择器由多个ID选择器、类选择器或标签选择器组成时,将所有值相加并比较权重。这个说法其实是有问题的。比如一个由11个类选择器组成的选择器和一个由1个ID选择器组成的选择器指向同一个标签。按理说110>100,应该应用前一种风格,但事实是应用了后一种风格。错误原因是:不能承载选择器的重量。还是拿刚才的例子来说吧。11个类选择器组成的选择器总权重为110,但是因为11个都是类选择器,所以总权重最多不能超过100,可以理解为99.99,所以最后采用了后一种风格。CSS文本text-indent不能将此属性应用于内联元素和替换元素,例如图像。该属性可以继承自text-transform,可以处理text的大小写。小写/大写/首字母。Blank(space,newlineandtabcharacters)word-break指定自动换行的处理方式word-wrap指定长词或URL地址换行到下一行的规则CSSbackground-color:默认是透明的,不是白色,所以它的祖先元素的背景只能被看到。background-origin:指定background-position属性的相对位置。默认是padding-boxborder-box:左上角是外边框的左上角。padding-box:左上角是内边框的左上角。即padding-box的左上角content-box:左上角是padding的左上角。background-position只有在有background-image属性时才有效。您可以更改图像在背景中的位置。默认为左上角位置(topleft;0%0%;0px0px),后面涉及到的左上角,leftside等要根据background-origin属性的值来确定。关键字设置值位置关键字可以任意顺序出现(因为关键字可以直接标识方向),只要关键字不超过两个,一个对应水平方向(leftor'rightorcenter),而other对应垂直方向(topor'bottomorcenter);如果只出现一个关键字,则认为另一个关键字是中心。百分比设置值第一个百分比值对应水平方向,后面的百分比值对应垂直方向。如果只有一个,这个对应水平方向,另一个是50%。百分比值适用于元素和图像。图片位于0%0%,它的左上角会被放置在元素的左上角;图像为50%50%,其中心点将与元素的中心点对齐;imageisat100%100%,itsbottomrightcornerwillbeplacedonthebottomrightcornerofhorizo??ntaldirection0%istheimageleftborderalignedwiththeleftsideoftheelement,100%是图像的右边界与元素的右侧对齐;垂直方向0%为图片上边框与元素上边对齐,100%为图片下边框与元素下边对齐;长度值设置值长度值说明元素左上角的偏移量。偏移点是图像的左上角,只作用于图像。角位于元素的左上角。百分比和长度值可以混合使用。选择长度值时,对应水平方向,垂直方向为50%。(scroll)的background-size在CSS3之前,背景图片的大小由图片的实际大小决定。在CSS3中,可以指定背景图片的大小,这使得我们可以在不同的环境中复用背景图片。第一个值设置宽度,第二个值设置高度,如果只设置一个值,第二个值将设置为“auto”。percentage设置值设置背景图的宽高占父元素宽高的百分比length值设置值直接设置背景图的高宽keyword设置值cover:扩展或收缩背景image使背景图片可以完全覆盖背景区域,所以背景图片的某些部分可能不会出现在背景区域中。contain:扩展或缩小图像图像,使其宽度和高度完全适合内容区域。背景区域可能会有一个空白的background-clip,用来指定背景的绘图区域。背景可以裁剪到指定区域。默认为border-boxborder-box:背景图片在border-box中的部分会显示padding-box:背景图片在padding-box中的部分会显示content-box:背景的部分内容框中的图像将显示box-shadowbox-shadow:h-shadowv-shadowblurspreadcolorinset;h-shadowv-shadow是必需的,是阴影的位置。通常情况下,阴影的左上角是从元素的'padding-box'的左上角偏移的,但是当设置inset为内阴影后,阴影变成了一个环,左上角的内环偏移元素'padding-box'左上角,外环左上角偏移元素'padding-box'左上角角重合盒模型和视觉格式化模型盒子模型和视觉格式化模型待续......