CSS基础

wo今晚打老虎
176 阅读6分钟

CSS选择器的优先级

CSS选择器的优先级： 内联 > ID选择器 > 类选择器 > 标签选择器

link和@import区别

  • link属于XHTML标签，而@import属于CSS提供的
  • 页面被加载时，link会同时被加载，而@import引用的CSS要等页面加载完 再加载
  • @import兼容IE5以上，link没兼容问题

CSS有哪些方式隐藏页面元素

  • opacity: 0,将透明度设置成0，看起来像是隐藏，但是依然占据空间，可 以点击
  • background: transparent,透明背景
  • visibility: hidden, 和opacity类似，占据空间，但是不能点击
  • display: none 不占据空间,会产生回流和重绘（flow和repaint回流必定会引起 重绘，但重绘不一定引起回流)
  • height:0,overflow:hidden 不占空间，不可点击

px、em、rem的区别

  • px: 绝对单位，页面按照精准像素显示
  • em: 相对单位，基准为父节点的字体的大小
  • rem: 相对单位，基准为html的字体大小
  • vw, vh: 视口宽度和高度

CSS的几种定位方式

  • static: 正常文档流定位，块级元素从上到下排列，行内元素从左到右排列，top、right、bottom、left、z-index属性 无效
  • relative: 相对定位，相对于文档流的位置，和绝对定位absolute配合使用
  • absolute: 绝对定位，绝对定位的元素的位置相对于最近的已定位父元素，如果元素 没有已定位的父元素，那么它的位置 相对于<html>
  • sticky: 粘性定位，基于用户的滚动位置来定位。粘性定位的元素是依赖于用户的滚动，在 position:relative 与 position:fixed 定位之间切换

清除浮动有哪些方法

  • 给父元素设置固定高度(只适用高度固定的布局)
  • 浮动元素后加空的div，并且设置clear:both(当页面浮动元素较多，需要加多的空div)
  • 父级元素通过伪类after和zoom,代码如下
      .clear-float {
      zoom: 1;
  }
  .clear-float:after {
      content: "";
      display: block;
      height: 0;
      clear: both;
      visibility: hidden;
  }
  • 给父元素设置overflow:hidden(不能和position配合使用，因为超出的尺寸的会被隐藏)

如何理解css sprites（雪碧图）,以及它的优缺点

将一些小图标整合到一起后的图片称为雪碧图，通过操作CSS的background属性，控制背景的位置以及大小，来展示需要的部分

  • 优点：通过减少页面的请求数量来加快网页加载速度
  • 缺点：雪碧图维护成本较高，每次改动都需要动到整个图片

对盒模型的理解

参考：牛译伟的文章 盒模型由conten、padding、border、margin组成,分为标准盒模型和怪异盒模型。当元素设置为box-sizing:content-box时，将采用标准模式解析计算（默认模式）；当元素设置为box-sizing:border-box时，将采用怪异模式解析计算

  • 标准盒模型：标准盒模型中width指的是内容区域content的宽度；height指的是内容区域content的高度。标准盒模型下 盒子的大小= content + border + padding + margin。
    标准盒模型
  • 怪异盒模型：怪异盒模型中的width指的是内容、边框、内边距总的宽度（content + border + padding）；height指的 是内容、边框、内边距总的高度。怪异盒模型下盒子的大小=width（content + border + padding） + margin。
    怪异盒模型

对BFC的理解

  • 定义：BFC(块级格式化上下文)是Web页面中盒模型布局的CSS渲染模式,是一个独立的布局环境，其中的元素布局是不受外界的 影响。它具有以下特性
    • 内部的Box会在垂直方向上一个接一个的放置
    • 垂直方向上的距离由margin决定(解决边距重叠问题))
    • bfc的区域不会与float的元素区域重叠
    • 计算bfc的高度时，浮动元素也参与计算（解决高度坍塌问题）
    • bfc就是页面上的一个独立容器，容器里面的子元素不会影响外面元素
  • 创建BFC:
    • 浮动元素，float不为none
    • position的值为absolute或者fixed
    • display 值为inline-block、table-cell、table-caption、flex的其中一个
    • overflow值为hidden、auto、scroll的其中一个
    • body 根元素

伪类和伪元素的区别

  • 定义：
    • 伪类：是一个以冒号(:)作为前缀，被添加到选择器末尾的关键字,用于当已有元素 处于的某个状态时，为其添加对应的样式
        :active —— 样式添加到正在被激活的元素 
  :focus —— 样式添加到获得焦点的元素 
  :hover —— 样式添加到鼠标悬浮的元素 
  :link —— 样式添加到未被访问过的链接 
  :visited —— 样式添加到已经访问过的链接 
  :first-child —— 样式添加到第一个子元素 
  :lang —— 样式添加到指定lang语言的标签
    • 伪元素用于创建一些不在文档树中的元素，并为其添加样式
        :first-letter —— 样式添加到文本首字母
  :first-line —— 样式添加到文本首行
  :before —— 样式添加到元素之前
  :after —— 样式添加到元素之后
  • 区别：
    • 伪类的效果需要元素选择器加入伪类才能改变元素状态，而伪元素需要操作元素来改变状态。
    • 伪类可以同时运用多个，而伪元素只能一次用一个。
    • 在CSS3中，伪类用一个冒号:，伪元素用两个冒号::,为兼容性考虑需要使用一个冒 号的格式。

对媒体查询的理解

  • 定义： 媒体查询可以让我们根据设备显示器的特性（如视口宽度、屏幕比例、设备方向：横向或纵向）为其设定CSS样式,最常 用的查询是处理视口的宽度和高度。
  • 媒体类型：all(适用于所有设备)、print(适用于打印模式)、screen(用于屏幕)、speech(用于语音合成器)
  • 媒体查询常用于以下目的
    • 有条件的通过 @media 和 @import at-rules 用CSS 装饰样式
    • 用media属性为<style>, <link>, <source>和其他HTML元素指定特定的媒体类型
        <link rel="stylesheet" src="styles.css" media="screen" />
    • 使用Window.matchMedia() 和MediaQueryList.addListener() 方法来测试和监控媒体状态
    • 使用媒体查询例子
        /* 兼容移动端 */
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1, minimum-scale=1, user-scalable=no, shrink-to-fit=no">
  /* 安装了chrome,使用webkit引擎，没有的话，优先用最新的IE渲染模式 */
  <meta http-equiv="X-UA-Compatible" content="ie=edge, chrome=1">
  @media screen and (max-width: 375px) {
      body {
          background-color: red;
      }
  }
  @media screen and (-webkit-min-device-pixel-ratio: 3) {
      .flexBox li::after {
          -webkit-transform: scaleY(0.33333);
          transform: scaleY(0.33333);
      }
  }
avatar
文章
阅读
粉丝