CSSFAQ总结

元素的width属性，可能会在许多地方被声明击中。2.级联值计算级联优先级，在第一步的多个值中找到优先级最高的一个。3、指定值，比如color属性，如果前两步没有指定color的值，则按照默认值的逻辑进行填充。4、计算值将80%的相对值计算为绝对值，比如根据父元素的宽度换算成px单位。5.Usedvalue多个属性值的组合不一定满足规范的约束。需要根据规范规定的方法确定每个属性的最终值。比如绝对定位元素的leftright不能完全根据指定值，所以当指定值被过度约束时，需要根据规则进行调整。6、实际值浏览器实现时，最终的有效值可能会根据软硬件环境做进一步调整，比如调整小数点的精度。我们常说的优先级其实就是从1到2的第一步，一共有三层规则。3.选择器类型类型选择器（eg,h1）和伪元素（pseudo-elements）（eg,::before）类选择器（classselectors）（eg,.example），属性选择器（attributesselectors）（eg,[type="radio"]),pseudo-classes(eg,:hover)css引入了伪类和伪元素的概念来格式化文档树之外的信息。即伪类和伪元素用于修饰不在文档树中的部分，例如句子的第一个字母，或列表的第一个元素。ID选择器（例如#example）通配符选择器，关系选择器!important4.盒模型W3C标准盒模型：width=contentWidth+padding+border+margin。(display:content-box;)页面上框的大小包括margin、border、padding和content。框的实际大小包括内容区域的边框、填充和内容，但不包括边距。还有一点需要说明的是，当我们通过JavaScript代码获取一个元素的大小时，获取到的宽高实际上是盒子模型中内容的大小。IE盒子模型：width=contentWidth（包括border+padding）+margin。(display:border-box;)IE框模型还包括margin、border、padding和content。IE盒模型的内容部分包含边框和填充。border-box和content-box的区别和使用场景？特殊场景的布局：假设我们有这样一个场景，在设置子类元素的边距或边框时，可能会破坏父层元素的尺寸。这时候我就需要使用box-sizing:border-box将border包含到元素的尺寸中，这样就不会出现父层元素被破坏的情况。表单元素样式统一：表单中部分input元素仍然呈现传统的IE框模型，带有一些默认样式，在不同平台或浏览器上表现不同，导致表单呈现差异。此时，我们可以使用box-sizing属性来构建一个样式统一的表单元素。5、为什么要区分块级元素、行内元素、行块元素：显示：block/inline/inline-block，不同的值在不同的使用场景下有不同的性能差异：块级元素会占据其父元素的宽度空间，每个块级元素将独占一行内联元素。内联元素的宽度等于其内容的宽度。多个内联元素排列成一行。如果父元素的宽度超过父元素的宽度，则会创建另一行。块级元素(internalizedblock-levelelements)内联元素的特点：不能设置heightwidthline-height上下边距上下padding不能容纳块级元素块级元素的特点：默认宽度是container注意：行元素和块元素之间，浏览器会不会有一个默认的间距，有办法去掉行内块间距吗？以及以后可能解决这个问题的方法1.直接将所有内联块元素设置为float，个人认为最直接的方法，当然是在合适的场景下，因为过多的float会导致需要清除float（我也是总结一下常用的清浮的方法，有兴趣的可以看看，高手传）。2.在生成边距的内联块的父元素上设置属性：font-size:0px；3、设置在父元素上，设置word-spacing（wordmargin）的值为合适的负值。4.在html中，将内联块元素显示在同一行，不要进行漂亮的缩进或换行。将内联元素的浮动绝对位置设置为固定位置，则内联元素将转换为块级元素。vertical-align只能作用于非块级元素来替换元素，即浏览器根据元素的标签和属性来决定元素的具体显示内容。大多数元素是不可替换元素，即它们的内容直接显示给用户终端（如浏览器）。ReactNative的一个子集，并且属性名称并不完全相同，所以在开始考虑兼容ReactNative之前，可以简单了解一下ReactNative的风格。这些样式名称基本上沿用了网页上CSS的命名方式，只是按照JS的语法要求使用了驼峰命名法。RN使用JavaScript编写样式，所有核心组件都接受一个名为style的属性，相当于css的内联样式。在ReactNative中使用Flexbox规则来指定组件子元素的布局。Flexbox可以在不同的屏幕尺寸上提供一致的布局结构。所以，如果你要考虑ReactNative这边，那么你的样式布局就必须采用Flex布局。7.基于flex布局容器属性flex-directionflex-wrapflex-flowjustify-contentalign-itemsalign-content项属性orderflex-growflex-shrinkflex-basisflexalign-self通用布局8.相对、绝对、静态、固定、相对定位的作用给谁？static（静态定位）：出现在文档中通常出现的位置。默认值。元素使用相对于文档的正常布局行为，文档是元素在文档流中的当前布局位置。此时top、bottom、left、right或z-index均无效。Relative（相对定位）：您可以使用top、bottom...将元素相对于它在文档中通常出现的位置移动。生成相对定位的元素，相对于它们在文档中的位置。通过设置顶部、底部、左侧和右侧，它相对于其正常（原始）位置定位。分层分级可以通过z-index来完成。absolute（绝对定位）：元素将从文档中移除并准确放置在您指定的位置。生成绝对定位的元素，相对于第一个父元素定位而不是静态定位。元素的位置由“left”、“top”、“right”和“bottom”属性指定。分层分级可以通过z-index来完成。绝对定位可以设置margin，不会和其他元素合并。fixed（固定定位）：生成一个绝对定位的元素，相对于屏幕柱定位。元素的位置由“left”、“top”、“right”和“bottom”属性指定。分层分级可以通过z-index来完成。打印时，元素出现在每一页的固定位置。Sticky（粘性定位）：是相对定位和固定定位的结合，越过阈值前相对定位，再固定定位。九、pixeldp(devicepixel)devicepixel设备像素(physicalpixel)，顾名思义，显示屏是由物理像素组成的，通过控制每个像素的颜色，屏幕可以显示不同的图像，屏幕来自出厂那天，上面的物理像素已经固定好，单位是pt。dpr(devicepixelsratio)设备像素比dpr=devicepixel/CSSpixel1px=(dpr)^2*1dpdip(deviceindependentpixel)logicalpixelCSSpixel=deviceindependentpixel=logicalpixel得到设备像素比后，可以了解设备像素和CSS像素之间的比率。当此比例为1:1时，使用1个设备像素显示1个CSS像素。当比例为2:1时，使用4个设备像素来显示1个CSS像素，当比例为3:1时，使用9（3*3）个设备像素来显示1个CSS像素。注意写RN样式，避免过多的内联样式，创建一个样式表，然后用ID引用样式，从而减少频繁创建新样式对象。从render函数中删除特定样式的东西使代码更清晰，更容易理解。命名风格还可以在render函数中为组件添加语义描述。最好不要固定高度