CSS base-优快云博客

本文围绕CSS展开，介绍了CSS选择器从右往左的解析方式，阐述了盒模型、选择器类型及优先级等知识。还提及CSS属性继承情况、新增伪类、display和position属性值等。此外，探讨了布局、兼容性问题、优化方向，以及图片格式、元素居中、flex布局等内容。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

浏览器是怎么解析CSS选择器的？为什么？
- 从右往左，例如 #a .b，是先找.b，然后找其祖先元素，匹配 #a 的
- 样式系统从关键选择器开始匹配，然后左移查找规则选择器的祖先元素。只要选择器的子树一直在工作，样式系统就会持续左移，直到和规则匹配，或者是因为不匹配而放弃该规则。
css盒模型
- 标准盒子模型box-sizing：context-box。宽度不包括border/padding等。
- 怪异盒模型box-sizing: border-box：content+border+padding，宽度包括border/padding。
css选择器有哪些？
- 选择器：
  - id（100）,
  - class（10）,
  - 标签（1）（div, h1, p），
  - 通配符（），
  - 相邻选择器（h1 + p）
  - 子选择器（ul > li）
  - 后代选择器（li a）
  - 属性选择器（a[rel = "external"]）
  - 伪类选择器(a:hover, li:nth-child)
  - X:first-child：伪类，选择满足X选择器的元素，且这个元素是其父节点的第一个子元素。兼容性IE7+
  - X:last-child：伪类，选择满足X选择器的元素，且这个元素是其父节点的最后一个子元素。兼容性IE9+
  - X:only-child：伪类，选择满足X选择器的元素，且这个元素是其父元素的唯一子元素。兼容性IE9+
  - X:only-of-type：伪类，选择X选择的元素，解析得到元素标签，如果该元素没有相同类型的兄弟节点时选中它。兼容性IE9+
- 优先级：！import>内联样式 > ID 选择器 > 类选择器 = 属性选择器 = 伪类选择器 > 标签选择器 = 伪元素选择器
- 继承的样式优先级最低；，
css熟悉哪些可以继承？哪些不可以继承？
- 可继承：
  - 字体性属性： font-size；font-family；font-weight；
  - 文本系列属性：text-indent；text-align；line-height；word-spacing（字间隔）；letter-spacing（字符间空白）；direction：文本方向；color；
  - 元素可见性：visibility
  - 表格布局：border-collapse：collapse（合并border）；border-spacing：（相邻距离）；
  - 光标属性：cursor；
  - 声音样式属性；页面样式属性；
- 不可继承：
  - display 。
  - 文本属性：vertical-align;text-decoration;text-shadow;
  - 盒模型的属性；
  - 背景属性；定位属性；等
- CSS3新增伪类有那些?
  - p:first-of-type 选择属于其父元素的首个元素
  - p:last-of-type 选择属于其父元素的最后元素
  - p:only-of-type 选择属于其父元素唯一的元素
  - p:only-child 选择属于其父元素的唯一子元素
  - p:nth-child(2) 选择属于其父元素的第二个子元素
  - :enabled :disabled 表单控件的禁用状态。
  - :checked 单选框或复选框被选中。
  - :after 在元素之前添加内容,也可以用来做清除浮动。
  - :before 在元素之后添加内容
  - :disabled 控制表单控件的禁用状态。
- display有哪些属性？
  - inline 默认，内联；
  - none 隐藏；
  - block 块元素；
  - inline-block 行内样式；
  - table 表格；
  - list-item 列表；
  - inherit 规定应该从父元素继承 display 属性的值
- position有哪些属性值？
  - static 默认，它的父元素的内容框（即去掉padding的部分），正常文档流；
  - relative 相对定位不脱离文档流，参考自身的静态位置；
  - absolute 绝对定位参考距离最近一个父级元素（position），属性值为static 除外。
  - fixed 固定定位，参照的是可视的窗口html/body。
- css3的新属性有哪些？
  - RGBA和透明度
  - background-image background-origin(content-box/padding-box/border-box) background-size background-repeat
  - word-wrap（对长的不可分割单词换行）word-wrap：break-word
  - 文字阴影：text-shadow： 5px 5px 5px #FF0000;（水平阴影，垂直阴影，模糊距离，阴影颜色）
  - font-face属性：定义自己的字体
  - border-radius 属性用于创建圆角
  - border-image: url(border.png) 30 30 round，边框图片。
  - box-shadow: 10px 10px 5px #888888 盒阴影。
  - 媒体查询：定义两套css，当浏览器的尺寸变化时会采用不同的属性
- 解释下flexbox弹性盒布局模型，以及适用场景
  - 弹性布局适合于移动前端开发，在Android和ios上也完美支持。页面自适应？
- 常见的兼容性问题？
  - 不同浏览器的标签默认的margin和padding不一样。
```
{margin:0;padding:0;}
复制代码
```
  - IE6双边距bug:块属性标签float后，又有横行的margin情况下，在IE6显示margin比设置的大。hack：display:inline;将其转化为行内属性。
  - ie background:
```
{background-color:#f1ee18;
    /*所有识别*/
    
    .background-color:#00deff9;
    
    /*IE6、7、8识别*/
    
    +background-color:#a200ff;
    
    /*IE6、7识别*/
    
    _background-color:#1e0bd1;
    
    /*IE6识别*/}
            
复制代码
```
  - Firefox;仅仅可以通过getAttribute获得属性，不可以用其它属性获取。解决方法:统一通过getAttribute()获取自定义属性。
  - Chrome，默认最小字体为12px,如果想更小：-webkit-text-size-adjust: none; 解决。
  - 被点击过的超链接，没有了hover功能了，解决方法是改变CSS属性的排列顺序:L-V-H-A ( love hate ): a:link {} a:visited {} a:hover {} a:active {}
  - 其它样式问题： webpack,less设置。
- css中visibility属性有格collapse属性值，不同浏览器下有什么区别？
  - Chrome，使用collapse值和hidden没有区别。
  - firefox,opera,ie,和使用display：none没有区别。
- display:none与visibility：hidden的区别？
  - display：none 不显示对应的元素，在文档布局中不再分配空间（回流+重绘）
  - visibility：hidden 隐藏对应元素，在文档布局中仍保留原来的空间（重绘）
position、display、overflow、float这些特性互相叠加后会怎么样？
- 有position在的时候，float不起作用，
- float或者position：absolute，只能用display：block或者表格等块元素。
BFC就是block formatting context（块级格式化上下文）
- 特性
  - 内部的Box会在垂直方向，从顶部开始一个接一个地放置。
  - Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生叠加
  - 每个元素的margin box的左边，与包含块border box的左边相接触(对于从左往右的格式化，否则相反)。即使存在浮动也是如此。
  - BFC的区域不会与float box叠加。
  - BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素，反之亦然。
  - 计算BFC的高度时，浮动元素也参与计算。
- 触发条件：
  - float不为none；
  - overflow不为visible；
  - display：inline-block、table-cell、table-caption。
  - position为absolute、fixed、
- 使用场景：
  - 解决margin问题
  - 用于布局
  - 用于清楚浮动，计算bfc高度
为什么会出现浮动？浮动代来的危害？如何清除浮动？
- 原因：使用了float，浮动元素碰到了包含它的边框，脱离了文档流。
- 带来的问题：
  - 高度塌陷。当父元素没有设置高度时候，也不是bfc模型时候，如果给子元素添加浮动，父元素会高度塌陷。解决办法
    - 1、父元素变成bfc，添加overflow:hidden或者float：left。或者
```
.father-box{
    zoom:''
}
   .father-box::after {
       content: '';
       display: table;
       clear: both;
   }
复制代码
```
    - 2、最后一个浮动元素后加空div标签并添加样式clear:both。
清楚浮动
- 1、父级div定义height。
- 2、结尾处加空div标签clear：both。
- 3、父级div定义伪类：after和zoom。(比较好)
- 4、父级div定义overflow：hidden。
- 5、父级div定义overflow：auto。
- 6、父级div也浮动，需要定义宽度。
- 7、父级div定义display：table。
- 8、结尾处加br标签clear:both。
margin重合的问题
- 外层包一层，并触发该容器生成一个BFC,加个overflow:hidden;或者zoom：1
- 外层改为padding；
- 外层元素透明边框 border:1px solid transparent;
- 内部，加float:left;display:inline;
- 内层绝对定位。
设置元素浮动后，改元素display值为block；

移动端的布局用过媒体查询吗

可以定义不同尺寸大小的css适应相应的设备显示。

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

@media(min-width : 768 px) {
.container {
       width:100%；
 }
}

@media(min-width : 1024 px) {
    .container {
           width: 1024px
     }
}

复制代码

css优化、提高性能的方向
- 避免过度约束；避免后代选择符；避免链式选择符；避免不必要的命名空间；避免不必要的重复；语义的名字；避免！important；尽可能的精简规则，
浏览器如何解析css选择器的？
- 从右到左，因为此算法，第一步就筛选掉了大量不符合条件的最右节点，而从左到右的规则浪费了大量查找事件。建立render tree。
margin和padding分别适应什么样的场景？
- margin：需要再border外层添加空白，空白处不需要颜色；上下两个盒子margin互相抵消。
- padding：在border内侧添加空白，需要背景颜色，上下俩个盒子为两者和。
元素竖向百分比设定是相对于容器的高度吗？
- 横向是依据父元素的宽度，但是padding-top , padding-bottom , margin-top , margin-bottom，依据的是父容器的宽度。

怎么让Chrome支持小于12px 的文字？

p{
font-size:10px;

-webkit-transform:scale(0.8);

}
复制代码

如果需要手动写动画，你认为最小时间间隔是多久，为什么？
- 多数显示器默认频率是60Hz，即1秒刷新60次，所以理论上最小间隔为1/60＊1000ms ＝ 16.7ms。
png、jpg、gif 这些图片格式解释一下，分别什么时候用。有没有了解过webp？
- png 无损数据压缩位图文件格式，压缩比高，色彩好，大多数都可使用。
- JPG 针对相片的一种失真压缩方法，是一种破坏性压缩，
- GIF 位图文件格式，8位色真，可以实现动画效果。
- webp 谷歌退出的图片格式，压缩率只有JPG的2/3，大小比png小了几乎一半，仅仅支持谷歌和欧朋。
style标签写在body后与body前有什么区别？
- 页面是自上而下加载的，先加载样式。，如果写到后边会出现样式失效导致页面闪烁的问题。
行内元素有哪些？块级元素有哪些？
- 行内元素：和其它元素都在一行上，高度、行高和内边距都不可改变，文字图片的宽度不可改变，只能容纳文本或者其它行内元素。
- 行内：span/a/label/input/img/strong/em.
- 块元素：总是在新行开始，高度、行高等其它属性都可以控制。
- 块元素：div/p/form/ul/li
px,em,rem的区别
- px像素，相对于显示器屏幕分辨率的，是一个虚拟单位。
- em是相对长度单位。会继承父级元素的字体大小，相对于当前对象内文本的字体尺寸。如果行内文本字体没有被人设置，则是浏览器的默认字体。
- rem是css3的单位。相对于HTML根元素。
- 区别：ie无法缩放px。可以调用em和rem缩放。
前端页面有哪三层构成，分别是什么？作用是什么？
- 结构层、表示层、行为层。
link 与 @import 的区别
- link HTML方式、最大支持并行下载、rel=‘alternate stylesheet’指定候选样式。
- @import css方式、过多嵌套出现串行下载、可以在css文件中引用其他文件
- link优于@import。
ul下的li不设置宽度，如何让li的宽度一样？
- 父元素设置 display：table；
- 子元素设置 display：table-cell;text-align:center;
transform 有几种变化方式？分别是哪些？
- 共有5种。分别是：旋转（rotate）、扭曲(skew)、缩放(scale)、移动(translste)、矩阵变形(matrix)。
```
 transform: rotate | scale | skew | translate |matrix;
复制代码
```
- 旋转rotate
  - transform:rotate(30deg)；
- 缩放scale
  - scale(X,Y)；
  - transform:scaleX(2)；
  - transform:scaleY(2)；
- 扭曲(skew)
  - transform:skew(30deg,10deg)；
  - transform:skewX(30deg)；
  - transform:skewY（10deg）；
- 移动(translste)
  - transform:translate(100px,20px)；
  - transform:translateX(100px)；
  - transform:translateY(20px)；
- 矩阵变形(matrix)
  - 2D变换，括号里就是6个值得矩阵
  - 如果是3D变换，括号里就是4乘以4的16值得矩阵

如何居中某个元素？

水平居中：设置宽度，margin：0 auto；
不知道高度绝对定位水平垂直居中：

div {
  position: absolute;
  width: 300px;
  height: 300px;
  margin: auto;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background-color: pink; /* 方便看效果 */
 }
复制代码

水平垂直居中一

确定容器的宽高 宽500 高 300 的层
 设置层的外边距

 div {
  position: relative;   /* 相对定位或绝对定位均可 */
  width:500px;
  height:300px;
  top: 50%;
  left: 50%;
  margin: -150px 0 0 -250px;      /* 外边距为自身宽高的一半 */
  background-color: pink;   /* 方便看效果 */
  }
复制代码

水平垂直居中二

未知容器的宽高，利用 `transform` 属性

 div {
  position: absolute;   /* 相对定位或绝对定位均可 */
  width:500px;
  height:300px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%); //平移
  background-color: pink;   /* 方便看效果 */
 }
复制代码

水平垂直居中三

利用 flex 布局
 实际使用时应考虑兼容性

 .container {
  display: flex;
  align-items: center;    /* 垂直居中 */
  justify-content: center;  /* 水平居中 */
 }
 .container div {
  width: 100px;
  height: 100px;
  background-color: pink;   /* 方便看效果 */
 }
复制代码

zoom:1的清除浮动原理?

清除浮动，触发hasLayout；
  Zoom属性是IE浏览器的专有属性，它可以设置或检索对象的缩放比例。解决ie下比较奇葩的bug。
  譬如外边距（margin）的重叠，浮动清除，触发ie的haslayout属性等。

  来龙去脉大概如下：
  当设置了zoom的值之后，所设置的元素就会就会扩大或者缩小，高度宽度就会重新计算了，这里一旦改变zoom值时其实也会发生重新渲染，运用这个原理，也就解决了ie下子元素浮动时候父元素不随着自动扩大的问题。

  Zoom属是IE浏览器的专有属性，火狐和老版本的webkit核心的浏览器都不支持这个属性。然而，zoom现在已经被逐步标准化，出现在 CSS 3.0 规范草案中。

  目前非ie由于不支持这个属性，它们又是通过什么属性来实现元素的缩放呢？
  可以通过css3里面的动画属性scale进行缩放。
复制代码

隐藏元素有哪些方法？
- display/visibility/opacity/height/width/position。
link与@import的区别
- link是HTML的方式，@import是css的方式。
- link支持最大限度的下载，，@import过多导致串行下载，出现fouc（阻塞）。
- link可以通过rel=‘alternate stylesheet’指定候选样式。
- 浏览器对link的支持早于@import，可以使用@import对老浏览器隐藏样式。
- @import可以在css文件中引用其它文件。
- link优于@import。
什么是FOUC?如何避免？
- Flash Of Unstyled Content：用户定义样式表加载之前浏览器使用默认样式显示文档，用户样式加载渲染之后再从新显示文档，造成页面闪烁。解决方法：把样式表放到文档的head
flex 布局是什么？
- 行内元素： display: inline-flex;
- 任何容器：display：flex；
- 父元素6个属性：
  - flex-direction:row(默认水平)|row-reverse(水平右起点)|column（垂直）|column-reverse（垂直起点最后一个）
  - flex-wrap；nowrap(不换行)|wrap(换行第一行上方)|wrap-reverse(换行第一行下方)
  - flex-flow： (方向和是否换行简写)
  - justify-content：对齐方式flex-start|flex-end|center|space-between(两端对齐)|space-around（居中对齐） * align-items：flex-start（交叉轴起点对齐）|flex-end（交叉轴终点对齐）|center（中点对齐）|baseline(内部第一行文字基线对齐)|stretch（默认如果没有高度沾满整个容器高度）
  - align-content：定义多个轴线（如果一个不起作用）。flex-start（交叉轴起点）|flex-end（交叉轴终点）|center（交叉轴中点）|space-between（两端，轴线间隔平均分布）|space-around（每根轴线两侧都对齐）|stretch（默认值）轴线占满整个交叉轴。
```
.box{
    display: -webkit-flex; /* Safari */
     display: flex;
     flex-direction：row;
     
}
复制代码
```
- 子元素的属性
- order: number(数值越小，排名越排前默认为0)
- flex-grow:number（拉伸占几份）。
- flex-shrink：number（缩小比例）。
- flex-basis：<~px>|auto(default)收缩基数分配多余项目之前，占据的主轴空间。
- flex：none|
- align-self: auto|flex-start|flex-end|center|baseline|stretch;(允许单个项目与其他项目不一样的对齐方式，)
CSS 命名冲突如何解决？
- 细化选择符，多加一个父元素。
- ！import或者加id多个类名。

flex 如何未知高度的水平垂直居中

.box{
    display: flex;
    justify-content: center;
    align-items: center
}
复制代码

如何实现垂直居中？
- 父子固定大小，绝对定位，手动计算然后设置top和left；
- 父不固定，子固定，绝对定位，top 50%，然后margin-top设置为负的子的高度的一半；
- 父子都不固定大小，绝对定位，top 50%，再transform: translateY(-50%)；
- line-height，但是只支持inline元素；
- js手动计算宽高，然后js写style样式；

如何用css创建一个三角形？

把上、左、右三条边隐藏掉（颜色设为 transparent）

#demo {
        width: 0;
        height: 0;
        border-width: 20px;
        border-style: solid;
        border-color: transparent transparent red transparent; // 浅色 红色
      }
复制代码

如何实现CSS多边框实现

// border/box-shadow多边框/outline/outline-offset/background/ 实框虚框)
<!DOCTYPE html>
<html lang="en">
<head>
  <title>多边框</title>
  <style>
    .multi {
      margin: 100px;
      width: 100px;
      height: 100px;
      /* TODO */
    }
  </style>
</head>
<body>
  <div class="multi"></div>
</body>
</html>
复制代码

请填写选择器

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <style>
            
        </style>
    </head>
    <body>
    <!--题目说明-->
    <!--将children下，第3个div子元素，背景颜色置为红色-->
    <!--将children下，第2个子元素，文字颜色置为蓝色-->
    <!--将children下，lang属性包含bcd，文字颜色置为绿色-->
    <div>
        <div class="children">
            <div>test</div>
            <p >test</p>
            <div>test</div>
            <p>test</p>
            <div lang="abc">test</div>
            <div lang="abcd">test</div>
            <div>test</div>
            <div>test</div>
        </div>
    </div>
    </body>
    </html>
复制代码