CSS知识点整理

时间:2021-10-23 08:29:00

盒子模型

W3C标准/IE盒子模型

标准盒子模型:宽度=内容宽度(content)+ border + padding + margin
IE盒子模型:宽度=内容宽度(content + border + padding)+ margin

box-sizing

用来控制元素的盒子模型的解析模式。默认为content-box
content-box: W3C标准盒子模型,设置元素的width/height属性是指content部分的宽/高。
border-box: IE传统盒子模型,设置元素的width/height属性是指(content + border + paddubg)部分的宽/高

块级/行内元素及其区别

常用块级元素

div/table/h1-h6/p/form/ol等,以及html5新增的section/canvas/audio/video等等。
块级元素:

  1. 会另起一行
  2. 可以设置widthmarginborderpaddingwidth属性
  3. 默认宽度是容器的100%

行内元素

a/input/textarea/button/label/select等等
行内元素:

  1. 和其他元素在同一行
  2. 宽度/高度是内容的宽度/高度
  3. 可以设置margin-left和margin-right属性,无法设置margin-top和margin-bottom属性
  4. border和padding可以设置,但是border-top和padding-top到页面顶部后就不再增加

BFC(块级格式化上下文: block formatting context)

BFC规定了内部的Block Box如何布局.。可参考理解CSS的BFC
特征:

  1. 内部的Box会在垂直方向上一个接一个放置
  2. Box垂直方向的距离由margin决定,属于同一个BFC的两个相邻Box的margin会发生重叠
  3. 每个元素的margin box 的左边,与包含块border box的左边相接触
  4. BFC的区域不会与float box重叠
  5. BFC是页面上的一个隔离的独立容器,容器里面的子元素不会影响到外面的元素
  6. 计算BFC的高度时,浮动元素也会参与计算

触发BFC条件:

  1. float的值不为none
  2. position的值不为static或者relative
  3. display的值为inline-blocktable-celltable-captioninline-flex或者flex其中之一
  4. overflow的值不为visiabl

::before和:before中双冒号和单冒号区别

  1. 单冒号:用于CSS3中的伪类,双冒号::用于CSS3中的伪元素
  2. ::brfore就是一个子元素的存在,定义在元素主体内容之前的一个伪元素,并不存在于DOM中。

:before 和 :after 这两个伪元素,是在CSS2.1里新出现的。起初,伪元素的前缀使用的是单冒号语法,但随着Web的进化,在CSS3的规范里,伪元素的语法被修改成使用双冒号,成为::before ::after

常见兼容性问题

  • 渐进识别的方式,从总体中逐渐排除局部。首先,巧妙的使用“9”这一标记,将IE浏览器从所有情况中分离出来。接着,再次使用“+”将IE8和IE7、IE6分离开来,这样IE8已经独立识别。
    div {
        background-color: #ffffff; /* 所有识别 */
        background-color: #fbfbfb; /* IE6、7、8识别 */
        +background-color: #fcfcfc; /* IE7识别 */
        _background-color: #fdfdfd; /* IE6识别 */
    }
  • Chrome支持小于12px 的文字
p { font-size10px-webkit-transformscale(0.8); } //0.8是缩放比例
  • position: flxed在android下无效
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no"/>