CSS常见问题小结

CSS常见问题小结

一、行内样式、内联样式、外部样式

• 行内样式：代码写在具体网页中的一个元素内；比如：

  <div style="color:#f00"></div>

  • 一般不需要担心样式优先级与样式覆盖
  • 在制作页面的时候需要为很多的标签设置style属性，所以会导致HTML页面不够纯净，文件体积过大
  • 不利于SEO，后期维护成本高。

• 内联样式：在</head>前面写；比如：

  <style type="text/css">.div{color:#F00}</style>

  • 如果文件很少，CSS代码也不多，不考虑样式复用，可以选择这种方式
  • 样式只针对当前页面

• 外部样式：引用外部css文件；比如：

  <link href="css.css" type="text/css" rel="stylesheet" />

  • css与html分离，维护方便，最常用
• 优先级

二、样式优先级与样式覆盖

当我们在讨论CSS选择器优先级的时候，我们在讨论什么？

其实很多人都对此有点模糊，那我换个方式问： 一个CSS属性的最终值是怎么来？

回答: CSS属性的最终值是通过层叠计算得来的。

通俗的理解，其实就是先计算再重叠

层叠是CSS的一个基本特征，它是一个定义了如何合并来自多个源的属性值的算法。它在CSS处于核心地位，CSS的全称层叠样式表正是强调了这一点。

层叠计算过程

在学习css的时候，一定会先认识什么是html element，什么是class，什么是id，什么是css的inline写法。了解了基本的css之后，有一个东西一定要先了解，那就是什么是css权重。

权重影响样式优先级，优先级的计算首先是 选择器权重 的优先级计算，然后是 声明先后顺序 的优先级计算

• 1、先看样式来源。同时结合!important：开发者 + !important > 浏览器 + !important > 开发者 > 浏览器。

• 2、再看规则的权重或者说特异性(specificity)： !important > 内联 > 选择器(ID > Class/psuedo-class(偽類)/attribute（屬性選擇器） > Element)

  W3C文档地址

  A selector’s specificity is calculated for a given element as follows:

  1.count the number of ID selectors in the selector (= A)

  2.count the number of class selectors, attributes selectors, and pseudo-classes in the s elector (= B)

  3.count the number of type selectors and pseudo-elements in the selector (= C)

  4.ignore the universal selector

  

  注意：重复的 css selector, 其权重会被重复计算

• 3、最后看声明顺序

CSS处理属性值的流程

• 1、declared value
  比如一个<div>元素的width属性，可能被很多地方的声明命中
• 2、cascaded value
  通过计算层叠优先级，在第一步的多个值中找到优先级最高的那个
• 3、specified value
  比如color属性，如果在前两步发现没有指定color的值，那么根据默认值的逻辑进行填充。
• 4、computed value
  把80%这种相对值计算为绝对值，比如根据父元素的宽度转换成px单位。
• 5、used value
  多个属性值结合以后，不一定满足规范的约束，需要根据规范规定的方式确定各个属性最后采用的值。
  比如一个绝对定位元素的leftright不可能完全根据指定值来，那么在指定的值过度约束时，需要根据规则进行调整。
• 6、actual value
  浏览器实现时根据硬件、软件环境可能会对最后生效的值进一步进行调整，比如调整小数的精度。

我们常说的优先级其实就是其中 1 到 2 的最初那步，一共就三个层级的规则。

三、选择器类型

• 类型选择器（type selectors）（例如, h1）和 伪元素（pseudo-elements）（例如, ::before）
• 类选择器（class selectors） (例如,.example)，属性选择器（attributes selectors）（例如, [type="radio"]），伪类（pseudo-classes）（例如, :hover）
  css引入伪类和伪元素概念是为了格式化文档树以外的信息。也就是说，伪类和伪元素是用来修饰不在文档树中的部分，比如，一句话中的第一个字母，或者是列表中的第一个元素。
• ID选择器（例如, #example）
• 通配选择符，关系选择符
• !important

四、盒模型

• W3C标准盒模型：width = contentWidth+padding+border+margin。(display: content-box;)

盒子在页面占据的大小包括了margin，border，padding以及content。而盒子的实际大小包括border，padding以及内容区域content，但是不包括margin。另一点需要说明的是，我们通过JavaScript代码获取某一个元素的大小时，所得到的width和height其实是盒子模型中的content的大小。

• IE盒模型：width = contentWidth(包含border+padding)+margin。(display: border-box;)

IE盒模型也包含margin，border，padding以及content这几部分。IE盒模型的content部分包含了border和padding。

• border-box和content-box的区别和使用场景？

• • 特殊场景的布局：假设我们有这样的一个场景，设置子类元素的margin或者border时，可能会撑破父层元素的尺寸，这时我就需要使用box-sizing: border-box来将border包含进元素的尺寸中，这样就不会存在撑破父层元素的情况了。
• 统一风格的表单元素：表单中有一些input元素其实还是展现的是传统IE盒模型，带有一些默认的样式，而且在不同平台或者浏览器下的表现不一，造成了表单展现的差异。此时我们可以通过box-sizing属性来构建一个风格统一的表单元素。

五、块级元素、行内元素、行块元素

• 为什么要区分：

  • display: block/inline/inline-block，不同的值有不同的使用场景

• 表现差异：

  • 块级元素在宽度上会占满其父元素的空间，每个块级元素会独占一行
  • 行内元素在宽度等于其内容宽度，多个行内元素一行排列，超过父元素的宽度则另起一行
  • 行块元素对外的表现像行内元素，对内的表现像块级元素（行内化的块级元素）

• 行内元素特点：

  • 不能设置heightwidthline-height上下margin上下padding
  • 不能容纳块级元素

• 块级元素特点：

  • 默认宽度为容器宽度

• 注意点：

  • 行块元素之间，浏览器会有一个默认的间距，去除inline-block间距的方法？及这个问题未来可能的解决方向

  • • 1.将所有的行内块元素直接设置浮动，个人认为最直接的方法，当然是在适当的场景中，因为过度的浮动会产生需要清除浮动的必要（自己也总结常用的清除浮动的方法，有兴趣可以喵喵看看，大神越过）。
  • 2.在产生边距的行内块的父元素设置属性：font-size：0px;
  • 3.在父元素上设置，word-spacing(词边距)的值设为合适的负值即可
  • 4.在html中将行内块元素在同一行显示，不要进行美观缩进或者换行
• 给设置行内元素 floatabsolute定位fixed定位，则该行内元素转换为块级元素
• vertical-align 只能作用在非块级元素上
• 替换元素就是浏览器根据元素的标签和属性，来决定元素的具体显示内容。大多数元素是不可替换元素，即其内容直接表现给用户端（例如浏览器）

六、React Native中的样式与css的区别

A StyleSheet is an abstraction similar to CSS StyleSheets

• React Native 的样式基本上是实现了 CSS 的一个子集，并且属性名不完全一致，所以当你开始在考虑兼容 React Native 端之前，可以先简要了解一下 React Native 的样式。
• 这些样式名基本上是遵循了 web 上的 CSS 的命名，只是按照 JS 的语法要求使用了驼峰命名法。
• RN使用 JavaScript 来写样式，所有核心组件都接受名为style的属性，相当于css的行内样式。
• 在 React Native 中使用 Flexbox 规则来指定某个组件的子元素的布局。Flexbox 可以在不同屏幕尺寸上提供一致的布局结构。因此，如果你要考虑 React Native 端，那你的样式布局就得采用 Flex 布局。

七、基于flex布局

• 容器属性

  • flex-direction
  • flex-wrap
  • flex-flow
  • justify-content
  • align-items
  • align-content

• 项目属性

  • order
  • flex-grow
  • flex-shrink
  • flex-basis
  • flex
  • align-self
• 常用布局

  

八、定位

relative、absolute、static、fixed的作用，相对谁定位？

• static（静态定位）：occurs where it normally would in the document.

默认值。元素使用正常的布局行为，相对于document，即元素在文档流中当前的布局位置。此时top,bottom, left, right 或者 z-index无效。

• relative（相对定位）：you can use top,bottom... to move the element relative to where it would normally occur in the document.

生成相对定位的元素，相对于本该在文档中的位置。通过top,bottom,left,right的设置相对于其正常（原先本身）位置进行定位。可通过z-index进行层次分级。

• absolute (绝对定位）：the element will removed from the document and placed exactly where you tell it to go.

生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。可通过z-index进行层次分级。绝对定位可以设置margin，且不会与其他元素合并。

• fixed（固定定位）：生成绝对定位的元素，相对于屏幕饰扣进行定位。元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。可通过z-index进行层次分级。打印时，元素会出现在每页的固定位置。
• sticky（粘性定位）：是相对定位和固定定位结合，在跨越阈值之前相对定位，之后固定定位。

九、像素

• dp(device pixel) 设备像素

  • 设备像素（物理像素），顾名思义，显示屏是由一个个物理像素点组成的，通过控制每个像素点的颜色，使屏幕显示出不同的图像，屏幕从工厂出来那天起，它上面的物理像素点就固定不变了，单位pt。

• dpr(device pixels ratio) 设备像素比

  • dpr = 设备像素/CSS像素
  • 1px = (dpr)^2 * 1dp

• dip(device independent pixel) 逻辑像素

  • CSS像素 =设备独立像素 = 逻辑像素

获得设备像素比后，便可得知设备像素与CSS像素之间的比例。当这个比率为1:1时，使用1个设备像素显示1个CSS像素。当这个比率为2:1时，使用4个设备像素显示1个CSS像素，当这个比率为3:1时，使用9（3*3）个设备像素显示1个CSS像素。

注意点

• 写RN样式，避免过多行内样式，通过创建一个样式表，然后利用ID来引用样式，从而减少频繁创建新的样式对象。

  • 从 render 函数中移除具体的样式内容，可以使代码更清晰易懂。
  • 给样式命名也可以对 render 函数中的组件增加语义化的描述。
• 高度最好不要固定