CSS常见问题


link 和 @import

引入外部CSS 有2种方式:link标签和@import,两者区别如下:

  1. 从属关系:@import是CSS提供的语法规则,只能导入样式表;link是HTML提供的标签,还可以定义 RSS、rel 、引入网站图标等;
  2. 加载顺序:加载页面时,link引入的 CSS 会被同时加载;@import引入的 CSS 在页面加载完毕后才被加载;
  3. 兼容性区别:@import是 CSS2.1 才有的语法,故只可在 IE5+ 才能识别;

强烈建议使用link,这样可以避免考虑@import语法规则和注意事项,避免产生资源文件下载顺序混乱和http请求过多的烦恼。

vue中还可以使用style标签引入样式,如下:

<style scoped src="./pc.css"></style>

通过style引入的样式支持scopedscoped是通过vue-loader插件实现的;




常见浏览器内核

  • Trident:IE 浏览器内核;
  • Gecko:Firefox 浏览器内核;
  • Presto:Opera 浏览器内核;
  • Webkit:Safari 浏览器内核;
  • Blink:谷歌浏览器内核,属于 Webkit 的一个分支,与 Opera 一起在研发;


form 的自动完成

autocomplete 属性规定输入字段是否应该启用自动完成功能,默认为启用,设置为 autocomplete=off 可以关闭该功能。

自动完成允许浏览器预测对字段的输入。在用户在字段开始键入时,浏览器基于之前键入过的值,应该显示出在字段中填写的选项


多标签页之间的通信

标签页之间没办法直接通信,因此需要找一个中介者来实现通信:

方式一:使用 Websocket,标签页连接同一个服务器,发送消息到服务器后,服务器推送消息给所有连接的客户端;

方式二:使用localStorage,在localStorage里添加、修改或删除数据时,都会触发一个 storage 事件,可以通过监听 storage 事件来实现页面信息通信;

方式二:使用postMessage,如果能够获得对应标签页的引用,通过 postMessage 方法也是可以实现多个标签页通信的;


简述前端性能优化

  1. 通过文件合并、css雪碧图、使用base64 等方式来减少 HTTP 请求数,避免过多的请求造成等待的情况;
  2. 通过 DNS 缓存等机制来减少 DNS 的查询次数;
  3. 通过设置缓存策略,对常用不变的资源进行缓存;
  4. 通过延迟加载的方式,来减少页面首屏加载时需要请求的资源,延迟加载的资源当用户需要访问时,再去请求加载;
  5. 通过用户行为,对某些资源使用预加载的方式,来提高用户需要访问资源时的响应速度;
  6. 使用 CDN 服务,来提高用户对于资源请求时的响应速度;
  7. 服务器端使用 Gzip、Deflate 等方式对于传输的资源进行压缩,减少传输文件的体积;
  8. 尽可能减小 cookie 的大小,并且通过将静态资源分配到其他域名下,来避免对静态资源请求时携带不必要的 cookie;


webP

WebP 是谷歌开发的一种新图片格式,它是支持有损和无损两种压缩方式的点阵图。使用webp格式最大优的点是在相同质量下文件体积更小,因此它非常适合于网络图片的传输。

浏览器如何判断是否支持 webp 格式图片?

通过创建 Image 对象,将其 src 属性设置为 webp 格式的图片,然后在 onload 事件中获取图片的宽高,如果能够获取,则说明浏览器支持 webp 格式图片。如果不能获取或者触发了 onerror 函数,那么就说明浏览器不支持 webp 格式的图片。


让 div 水平/垂直居中

<div class="parent">
  <div class="child"></div>
</div>

<!-- 1. 使用flex -->
div.parent {
  display: flex;
  justify-content: center;
  align-items: center;
}

<!-- 2. 使用绝对定位 -->
div.parent {
  position: relative;
}
div.child {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

<!-- 3. 使用justify-self -->
div.parent {
  display: grid;
}
div.child {
  justify-self: center;
  align-self: center;
}

<!-- 4. 其它 -->


opacity: 0、visibility: hidden、display: none 优劣

  1. display: none - 不占空间,不能点击,会引起回流,子元素不影响
  2. visibility: hidden - 占据空间,不能点击,引起重绘,子元素可设置 visible 进行显示
  3. opacity: 0 - 占据空间,可以点击,引起重绘,子元素不影响


Rem 及其转换原理

rem 是 CSS3 新增的相对长度单位,是指相对于根元素 html 的 font-size 计算值的大小。默认根元素的 font-size 都是 16px的。

如果想要设置 16px 的字体大小也就是: 16px/16px = 1rem

如果想要设置 12px 的字体大小也就是: 12px/16px = 0.75rem


移动端视口配置

<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />
  • initial-scale: 初始的缩放比例;
  • minimum-scale: 允许用户缩放到的最小比例;
  • maximum-scale: 允许用户缩放到的最大比例;
  • user-scalable: 用户是否可以手动缩放;


伪类和伪元素

伪类: 用于当已有元素处于某种状态时,为其添加对应的样式,这个状态是根据用户行为变化而变化的,如:hover。它只有处于 dom 树无法描述的状态才能为元素添加样式,所以称为伪类。

伪元素: 用于创建一些原本不在文档树中的元素,并为其添加样式,比如说 ::before。虽然用户可以看到这些内容,但是其实他不在文档树中。

区别: 伪类的操作对象是文档树中已存在的元素,伪元素是创建一个文档树外的元素。


行内元素

不能设置宽、高和垂直方向上的margin、padding


CSS可以继承的属性

字体系列属性

  • font-family
  • font-size
  • font-weight
  • font-style

文本系列属性

  • text-indent
  • text-align
  • line-hight
  • word-spacing
  • letter-spacing
  • color

其他

  • cursor
  • visibility



CSS3 新增的伪类

  • elem:nth-child(n): 选中父元素下的第 n 个标签名为 elem 的元素;
  • elem:nth-last-child(n): 作用同上,从后开始查找;
  • elem:last-child:最后一个子元素
  • elem:only-child:如果 elem 是父元素下唯一的子元素,则选中;
  • elem:nth-of-type(n):选择父元素下第 n 个 elem 类型元素;
  • elem:empty:选中不包含子元素和内容的 elem 类型元素;
  • :not(elem):选择非 elem 元素的每个元素;
  • :enabled:启用状态的表单组件


用纯 CSS 创建一个三角形

a. 利用border边框样式绘制三角形,例如设置4条边的边框为40px:

#demo{
   width:0px;  
   height:0px;  
   border: 40px solid;  
   border-color: red blue red blue; 
}

b. 如果将只显示底边边框,并将宽度设为80px:

#demo{
   width:0px;  
   height:0px;  
   border:40px solid transparent;
   border-bottom:80px solid red;
}



min-width/max-width 和 min-height/max-height 属性间的覆盖规则?

  1. max-width 会覆盖 width,即使 width 是行内样式或 !important。
  2. min-width 会覆盖 max-width,此规则发生在 min-width 和 max-width 冲突时;


举报

© 著作权归作者所有


0