CSS常见问题小结

时间 2019-12-05

标签 css 常见问题小结栏目 CSS 繁體版

原文原文链接

CSS常见问题小结

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

行内样式：代码写在具体网页中的一个元素内；好比：css
```
<div style="color:#f00"></div>
```
- 通常不须要担忧样式优先级与样式覆盖
- 在制做页面的时候须要为不少的标签设置style属性，因此会致使HTML页面不够纯净，文件体积过大
- 不利于SEO，后期维护成本高。
内联样式：在</head>前面写；好比：html
```
<style type="text/css">.div{color:#F00}</style>
```
- 若是文件不多，CSS代码也很少，不考虑样式复用，能够选择这种方式
- 样式只针对当前页面
外部样式：引用外部css文件；好比：web
```
<link href="css.css" type="text/css" rel="stylesheet" />
```
- css与html分离，维护方便，最经常使用
优先级

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

当咱们在讨论CSS选择器优先级的时候，咱们在讨论什么？
其实不少人都对此有点模糊，那我换个方式问：一个CSS属性的最终值是怎么来？
回答: CSS属性的最终值是经过层叠计算得来的。
通俗的理解，其实就是先计算再重叠算法

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

层叠计算过程

在学习css的时候，必定会先认识什么是html element，什么是class，什么是id，什么是css的inline写法。了解了基本的css以后，有一个东西必定要先了解，那就是什么是css权重。
权重影响样式优先级，优先级的计算首先是选择器权重的优先级计算，而后是声明前后顺序的优先级计算浏览器

一、先看样式来源。同时结合!important：开发者 + !important > 浏览器 + !important > 开发者 > 浏览器。
二、再看规则的权重或者说特异性(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)flex

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

4.ignore the universal selector

注意：重复的 css selector, 其权重会被重复计算
三、最后看声明顺序

CSS处理属性值的流程

一、declared value
好比一个<div>元素的width属性，可能被不少地方的声明命中
二、cascaded value
经过计算层叠优先级，在第一步的多个值中找到优先级最高的那个
三、specified value
好比color属性，若是在前两步发现没有指定color的值，那么根据默认值的逻辑进行填充。
四、computed value
把80%这种相对值计算为绝对值，好比根据父元素的宽度转换成px单位。
五、used value
多个属性值结合之后，不必定知足规范的约束，须要根据规范规定的方式肯定各个属性最后采用的值。
好比一个绝对定位元素的leftright不可能彻底根据指定值来，那么在指定的值过分约束时，须要根据规则进行调整。
六、actual value
浏览器实现时根据硬件、软件环境可能会对最后生效的值进一步进行调整，好比调整小数的精度。

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

3、选择器类型

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

4、盒模型

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属性来构建一个风格统一的表单元素。

5、块级元素、行内元素、行块元素

为何要区分：
- display: block/inline/inline-block，不一样的值有不一样的使用场景
表现差别：
- 块级元素在宽度上会占满其父元素的空间，每一个块级元素会独占一行
- 行内元素在宽度等于其内容宽度，多个行内元素一行排列，超过父元素的宽度则另起一行
- 行块元素对外的表现像行内元素，对内的表现像块级元素（行内化的块级元素）
行内元素特色：
- 不能设置heightwidthline-height上下margin上下padding
- 不能容纳块级元素
块级元素特色：
- 默认宽度为容器宽度
注意点：
- 行块元素之间，浏览器会有一个默认的间距，去除inline-block间距的方法？及这个问题将来可能的解决方向
- - 1.将全部的行内块元素直接设置浮动，我的认为最直接的方法，固然是在适当的场景中，由于过分的浮动会产生须要清除浮动的必要（本身也总结经常使用的清除浮动的方法，有兴趣能够喵喵看看，大神越过）。
给设置行内元素 floatabsolute定位fixed定位，则该行内元素转换为块级元素
vertical-align只能做用在非块级元素上
替换元素就是浏览器根据元素的标签和属性，来决定元素的具体显示内容。大多数元素是不可替换元素，即其内容直接表现给用户端（例如浏览器）

6、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 布局。

7、基于flex布局

容器属性
- flex-direction
- flex-wrap
- flex-flow
- justify-content
- align-items
- align-content
项目属性
- order
- flex-grow
- flex-shrink
- flex-basis
- flex
- align-self
经常使用布局

8、定位

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（粘性定位）：是相对定位和固定定位结合，在跨越阈值以前相对定位，以后固定定位。

9、像素

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 函数中的组件增长语义化的描述。
高度最好不要固定