摘要：错误的原因是选择器的权值不能进位。第一个值设置宽度，第二个值设置高度，如果只设置一个值，则第二个值会被设置为。
css样式优先级
!important > 内联样式 > ID 选择器 > 类选择器 = 属性选择器 = 伪类选择器 > 标签选择器 = 伪元素选择器
在学习过程中，你可能发现给选择器加权值的说法，即 ID 选择器权值为 100，类选择器权值为 10，标签选择器权值为 1，当一个选择器由多个 ID 选择器、类选择器或标签选择器组成时，则将所有权值相加，然后再比较权值。这种说法其实是有问题的。比如一个由 11 个类选择器组成的选择器和一个由 1 个 ID 选择器组成的选择器指向同一个标签，按理说 110 > 100，应该应用前者的样式，然而事实是应用后者的样式。错误的原因是：选择器的权值不能进位。还是拿刚刚的例子说明。11 个类选择器组成的选择器的总权值为 110，但因为 11 个均为类选择器，所以其实总权值最多不能超过 100， 你可以理解为 99.99，所以最终应用后者样式。
CSS文本
text-indent
无法将该属性应用于行内元素以及图像之类的替换元素上
该属性可以继承
text-transform
可以处理文本的大小写
小写/大写/首字母大写
white-space
设置如何处理元素内的空白(空格、换行和 tab 字符)
word-break
规定自动换行的处理方法
word-wrap
规定长单词或 URL 地址换行到下一行的规则
CSS 背景
background-color ：默认为transparent，而不是白色,这样其祖先元素的背景才能可见
background-origin ：规定 background-position 属性相对于什么位置来定位，默认为padding-box
border-box：左上角为外边框的左上角
padding-box：左上角为内边框的左上角，即padding-box的左上角
content-box：左上角为padding内边距的左上角
background-position
有background-image属性时才有效，可以改变图像在背景中的位置，
默认在左上角位置（top left; 0% 0%; 0px 0px），下面涉及到的左上角，左边等要考虑background-origin 属性的值而定
关键字设置值
位置关键字可以按任何顺序出现(因为关键字可以直接辨别方向)，只要保证不超过两个关键字，一个对应水平方向(left或"right或center)，另一个对应垂直方向(top或"bottom或center)；
如果只出现一个关键字，则认为另一个关键字是 center。
百分数设置值
百分数值前一个对应水平方向，后一个对应垂直方向，若只有一个则这个对应水平方向，另一个为50%
百分数值同时应用于元素和图像，图像位于 0% 0%，其左上角将放在元素左上角;图像位于 50% 50%，其中心点将与元素的中心点对齐；图像位于 100% 100%，其右下角将放在元素的右下角
水平方向的0%是图像的左边界与元素的左边对齐，100%是图像的右边界与元素的右边对齐；垂直方向的0%是图像的上边界与元素的上边对齐，100%是图像的下边界与元素的下边对齐；
长度值设置值
长度值解释的是元素左上角的偏移，偏移点是图像的左上角，仅应用于图像
图像的左上角与 background-position 声明中指定的点对齐，即0px 0px图像的左上角位于元素的左上角
可以混合使用百分数值和长度值，当志愿一个长度值时它对应水平方向，垂直方向将为50%
background-attachment
声明背景图像相对于可视区是固定(fixed)还是滚动(scroll)的
background-size
在 CSS3 之前，背景图片的尺寸是由图片的实际尺寸决定的。在 CSS3 中，可以规定背景图片的尺寸，这就允许我们在不同的环境中重复使用背景图片。
第一个值设置宽度，第二个值设置高度，如果只设置一个值，则第二个值会被设置为 "auto"。
百分比设置值
以父元素的宽高的百分比来设置背景图像的宽度和高度
长度值设置值
直接设置背景图像的高度和宽度
关键字设置值
cover：把背景图像扩展或缩小，以使背景图像能够完全覆盖背景区域，所以背景图像的某些部分可能无法显示在背景区域中。
contain：把图像图像扩展或缩小，以使其宽度和高度完全适应内容区域，背景区域可能会有空白
background-clip
规定背景的绘制区域，可以裁剪背景到指定区域,默认为border-box
border-box：背景图像在 border-box内的部分才会显示
padding-box：背景图像在 padding-box内的部分才会显示
content-box：背景图像在 content-box内的部分才会显示
box-shadow
box-shadow: h-shadow v-shadow blur spread color inset;
h-shadow v-shadow为必须的，是阴影的位置，正常情况下阴影的左上角相对于元素的"padding-box"的左上角偏移，但是当设置了inset变为内阴影后，阴影成为一个环，内环的左上角相对于元素的"padding-box"的左上角偏移，而外环的左上角与元素的"padding-box"的左上角重合
盒模型与视觉格式化模型
盒模型与视觉格式化模型
待续...
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/113250.html
摘要：提交内容可以是一个提议想法初步描述该阶段是对所提交新特性的正式建议。在这个阶段需具备以下条件指定一名成员作为审阅通过有实现的或者初步编写标准，包括问题描述解决方案示例语法语义关键的算法及抽象实现在的复杂度等该阶段是会出现标准中的第一个版本。 ECMAScript 与 JavaScript ECMAScript 是一套脚本语言的规范，内部编号 ECMA-262 该规范由 Ecma(Eu...
摘要：提交内容可以是一个提议想法初步描述该阶段是对所提交新特性的正式建议。在这个阶段需具备以下条件指定一名成员作为审阅通过有实现的或者初步编写标准，包括问题描述解决方案示例语法语义关键的算法及抽象实现在的复杂度等该阶段是会出现标准中的第一个版本。 ECMAScript 与 JavaScript ECMAScript 是一套脚本语言的规范，内部编号 ECMA-262 该规范由 Ecma(Eu...
摘要：因为在页面加载完成后，引擎维护着两个队列，一个是按页面顺序加载的执行队列，还有一个空闲队列，使用定时函数就是将回调函数加入到空闲队列中，故和其他定时器是并发执行的。 1.window.onload和$(document).ready()的区别： ①执行时间：window.onload会在所有元素，包括图片,引用文件加载完成之后执行，而$(document).ready()则会在HTML...
摘要：酝酿许久之后，笔者准备接下来撰写前端面试题系列文章，内容涵盖浏览器框架分钟搞定常用基础知识前端掘金基础智商划重点在实际开发中，已经非常普及了。 这道题--致敬各位10年阿里的前端开发 - 掘金很巧合，我在认识了两位同是10年工作经验的阿里前端开发小伙伴，不但要向前辈学习，我有时候还会选择另一种方法逗逗他们，拿了网上一道经典面试题，可能我连去阿里面试的机会都没有，但是我感受到了一次面试1...
阅读 3076·2019-08-30 15:56
阅读 1233·2019-08-29 15:20
阅读 1570·2019-08-29 13:19
阅读 1472·2019-08-29 13:10
阅读 3379·2019-08-26 18:27
阅读 3067·2019-08-26 11:46
阅读 2232·2019-08-26 11:45
阅读 3750·2019-08-26 10:12
