CSS常见问题小结

栏目: CSS · 发布时间: 4年前

内容简介:当我们在讨论CSS选择器优先级的时候,我们在讨论什么?其实很多人都对此有点模糊,那我换个方式问: 一个CSS属性的最终值是怎么来?回答: 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常见问题小结

    注意:重复的 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

四、盒模型

CSS常见问题小结

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

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

CSS常见问题小结

  • 为什么要区分:

    • 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
  • 常用布局

    CSS常见问题小结

八、定位

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

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,也希望大家多多支持 码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

Web Analytics 2.0

Web Analytics 2.0

Avinash Kaushik / Sybex / 2009-10-26 / USD 39.99

The bestselling book Web Analytics: An Hour A Day was the first book in the analytics space to move beyond clickstream analysis. Web Analytics 2.0 will significantly evolve the approaches from the fir......一起来看看 《Web Analytics 2.0》 这本书的介绍吧!

JS 压缩/解压工具
JS 压缩/解压工具

在线压缩/解压 JS 代码

JSON 在线解析
JSON 在线解析

在线 JSON 格式化工具

SHA 加密
SHA 加密

SHA 加密工具