摘要：常见问题小结一行内样式内联样式外部样式行内样式代码写在具体网页中的一个元素内比如一般不需要担心样式优先级与样式覆盖在制作页面的时候需要为很多的标签设置属性，所以会导致页面不够纯净，文件体积过大不利于，后期维护成本高。
CSS常见问题小结 一、行内样式、内联样式、外部样式
行内样式：代码写在具体网页中的一个元素内；比如：
一般不需要担心样式优先级与样式覆盖
在制作页面的时候需要为很多的标签设置style属性，所以会导致HTML页面不够纯净，文件体积过大
不利于SEO，后期维护成本高。
内联样式：在前面写；比如：
如果文件很少，CSS代码也不多，不考虑样式复用，可以选择这种方式
样式只针对当前页面
外部样式：引用外部css文件；比如：
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
比如一个
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 函数中的组件增加语义化的描述。
高度最好不要固定
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/114577.html
摘要：自己写一个富文本编辑器。无处不在的坑首先端的富文本编辑器，基本命令参照命令文档，兼容性的问题就不说了，大家都知道，主要说说一些开发了才能知道的坑。 近况 最近由于公司业务上的需求，我们需要一个自己的编辑器来编写我们得到APP里面的订阅文章，为什么需要自己的编辑器，主要是因为用第三方的编辑器很难完成公司定制化的需求，比如：排版上我们想要更好看点，统一，因为各个订阅专栏编辑的人不一样，容易...
摘要：内部样式表内部样式表一般写在头部，在标签内用标签括起来。外部样式表外部样式表是单独将样式写到一个文件中，并在头部引用。使用外部样式表时要注意如果出现多重样式时样式覆盖带来的问题。CSS 引入共有三种方式：内部样式表，内联样式（行内样式）表，外部样式表，当然也可以使用多重样式 内联样式 内联样式表 内联样式 直接把样式卸载html代码行内，一般仅仅在此样式仅仅只在当前元素上应用时使用，其他...
摘要：如何让我们所开发的手机页面能有更好的交互体验，就是这篇文章的主旨移动开发问题和优化小结。关于和鼠标事件的延迟说明，我引用叶小钗大神博客里面的一张图片，如下在手机上，的延迟将近。 1.前言 到目前为止，互联网行业里，手机越来越智能化，移动端占有的比例越来越高，尤其实在电商，新闻，广告，游戏领域。用户要求越来越高，网站功能越来越好，效果越来越炫酷，这就要求我们产品质量越来越高，web前端开...
摘要：如何让我们所开发的手机页面能有更好的交互体验，就是这篇文章的主旨移动开发问题和优化小结。关于和鼠标事件的延迟说明，我引用叶小钗大神博客里面的一张图片，如下在手机上，的延迟将近。 1.前言 到目前为止，互联网行业里，手机越来越智能化，移动端占有的比例越来越高，尤其实在电商，新闻，广告，游戏领域。用户要求越来越高，网站功能越来越好，效果越来越炫酷，这就要求我们产品质量越来越高，web前端开...
阅读 3365·2021-11-24 09:39
阅读 1778·2021-11-17 09:33
阅读 3434·2021-10-12 10:12
阅读 4953·2021-09-22 15:51
阅读 1096·2019-08-30 13:11
阅读 3551·2019-08-30 10:59
阅读 546·2019-08-30 10:48
阅读 1295·2019-08-26 13:48
