sialvsic的Tech空间

# CSS

# 两栏布局

分析：

  • float + padding-left:200px
  • width + width: calc(100% - 200px);
  • Flex 布局
  • Grid 布局

# 三栏布局

分析：

  • 圣杯布局是什么
  • 双飞翼布局是什么
  • Flex 布局
  • Grid 布局

圣杯 左、中、右三个盒子在一个同一个盒子中，设置外侧盒子的padding，从而留出两侧盒子位置，并清除浮动，内部元素全部float:left，左侧盒子margin-left: -100px; 右侧盒子margin-right: -100px;

双飞翼 左、中、右三个盒子同级，在中间盒子里放一个小盒子，设置小盒子的margin，从而留出两侧盒子位置，两侧盒子float补齐

参考：CSS 布局

# 元素垂直居中的方式

分析：CSS 对齐

# CSS样式优先级

!important > style > id > class > 属性

# 移动端宽度适配，有哪些单位

  • rem: 相对长度单位，这个单位代表跟随元素（通常html元素）的font-size大小，点那个用跟元素的font-size是，它表示它的初始值
  • em: 相对长度单位，em在设置自身字体大小的时候是相对于父元素的字体大小; 在用em设置其他属性单位的时候, 是相对于自身的字体属性大小
  • vw,vh： 视口初始包含块的宽度，高度
  • vmax：视口高度vh和视口宽度vw两值之间的最小值
  • vmin：视口高度vh和视口宽度vw两值之间的最大值

# transform: translate(30px, 0) rotate(45deg) 和 transform: rotate(45deg) translate(30px, 0) 有区别吗？

有区别：transform的转换，在没有改变远点的情况下，是以元素的中心点为transform-origin。（默认样下）水平发方向为x轴，竖直方向为y轴。 transform的原点默认是50% 50%

css-translate-001

# transform的rotate属性是顺时针还是逆时针?

顺时针

# 什么是BFC

Block Formatting Context: 块级格式化上下文

BFC 独立的一块区域，这块区域内部的元素和外部互不影响，内部按照从上到下依次排放，上下的间距由margin决定。计算BFC的高度时，浮动子元素也参与计算。

# BFC的布局规则

  • 内部的Box会在垂直方向上一个接一个的放置
  • 垂直方向的距离由margin决定(属于同一个BFC的两个相邻Box的margin会发生重叠，与方向无关)
  • BFC的区域不会与float的元素区域重叠
  • 计算BFC的高度时，浮动子元素也参与计算
  • BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面元素，反之亦然
  • 每个元素的margin box的左边，与包含块border box的左边相接触(对于从左往右的格式化，否则相反)。即使存在浮动也是如此

# 如何能够形成BFC

  • 根元素
  • 浮动 (元素的float不为none)；
  • 绝对定位元素 (元素的position为absolute或fixed)；
  • 行内块inline-blocks(元素的 display: inline-block)；
  • 表格单元格(元素的display: table-cell，HTML表格单元格默认属性)；
  • overflow的值不为visible的元素；（hidden、auto、scroll）
  • 弹性盒 flex boxes (元素的display: flex或inline-flex)；

# BFC的应用

  • 去除边距重叠现象
  • 清除浮动（让父元素的高度包含子浮动元素）
  • 避免某元素被浮动元素覆盖
  • 避免多列布局由于宽度计算四舍五入而自动换行

# rem和vw的方案的各自的优缺点

  1. rem可以动态的根据root元素(基于html的font-size)
  2. vw根据视口大小

vw不适合在pc端使用，因为是根据vw来的

# CSS的选择器都有哪些

  • id选择器 #id
  • 类选择器 #class
  • 属性选择器 a[ref="eee"]
  • 伪类选择器 li:last-child
  • 标签选择器 div
  • 相邻兄弟选择器 h1+p
  • 子选择器 ul>li
  • 后代选择器 li a
  • 通配符选择器 *

# 选择器的优先级

  • 标签选择器、伪元素选择器：1
  • 类选择器、伪类选择器、属性选择器：10
  • id 选择器：100
  • 内联样式：1000

# display的属性

  • none
  • table
  • inherit
  • block
  • inline
  • inline-block
  • flex
  • inline-flex
  • grid
  • inline-grid

# display的block、inline和inline-block的区别

  • block： 会独占一行，多个元素会另起一行，可以设置width、height、margin和padding属性；
  • inline： 元素不会独占一行，设置width、height属性无效。但可以设置水平方向的margin和padding属性，不能设置垂直方向的padding和margin
  • inline-block： 将对象设置为inline对象，但对象的内容作为block对象呈现，之后的内联对象会被排列在同一行内

# 隐藏元素的方式有哪些，各有什么不同

  • display: none;
  • visibility: hidden;
  • opacity: 0;
  • 定位到窗口之外;
  • transform: scale(0,0) 缩放为0;

display: none 渲染树不会包含该渲染对象，因此该元素不会在页面中占据位置，也不会响应绑定的监听事件

visibility: hidden; 元素在页面中仍占据空间，但是不会响应绑定的监听事件

opacity: 0： 将元素的透明度设置为 0，以此来实现元素的隐藏。元素在页面中仍然占据空间，并且能够响应元素绑定的监听事件

# position属性的值，各个值的意义

  • static: 默认值，没有定位，元素出现在正常的文档流中，会忽略 top, bottom, left, right 或者 z-index 声明，块级元素从上往下纵向排布，⾏级元素从左向右排列
  • relative: 生成相对定位的元素，相对于其原来的位置进行定位。元素的位置通过left、top、right、bottom属性进行规定
  • absolute: 生成绝对定位的元素，相对于static定位以外的一个父元素进行定位。元素的位置通过left、top、right、bottom属性进行规定
  • fixed: 生成绝对定位的元素，指定元素相对于屏幕视⼝（viewport）的位置来指定元素位置。元素的位置在屏幕滚动时不会改变，⽐如回到顶部的按钮⼀般都是⽤此定位⽅式
  • sticky: 粘贴定位，基于用户的滚动位置来定位

# CSS3中有哪些新特性

  • 新增各种CSS选择器 （: not(.input)：所有 class 不是“input”的节点）
  • 圆角 border-radius
  • 阴影 文字阴影，边框阴影
  • 过渡 transform
  • 动画 animation
  • 增加了旋转,缩放,定位,倾斜,动画,多背景

# 物理像素(设备像素)、逻辑像素

物理像素(设备像素)：真实设备的屏幕像素，显示器的最小物理单位

设备独立像素(device independent pixels)：设备独立像素也称为密度无关像素，可以认为是计算机坐标系统中的一个点，这个点代表一个可以由程序使用的虚拟像素(比如说CSS像素)，然后由相关系统转换为物理像素

CSS像素 CSS像素是一个抽像的单位，主要使用在浏览器上，用来精确度量Web页面上的内容，一般情况下（页面缩放比为1），1个CSS像素 等于 1个设备独立像素。

设备像素比dpr ＝ 物理像素 / 设备独立像素

# Sass、Less 是什么？为什么要使用他们？

他们都是 CSS 预处理器，是 CSS 上的一种抽象层。他们是一种特殊的语法/语言编译成 CSS。 例如 Less 是一种动态样式语言，将 CSS 赋予了动态语言的特性，如变量，继承，运算， 函数，LESS 既可以在客户端上运行 (支持 IE 6+, Webkit, Firefox)，也可以在服务端运行 (借助 Node.js)

# transform有哪些属性

  • translate()/translate3d() 平移
  • rotate()/rotate3d 旋转
  • scale()/scale3d() 缩放
  • skew()/skew3d() 倾斜
  • matrix()/matrix3d() 矩阵

# 清除浮动的方式

  • 给父级div定义height属性
  • 最后一个浮动元素之后添加一个空的div标签或者伪类元素，并添加clear:both样式
  • 包含浮动元素的父级标签添加overflow:hidden或者overflow:auto 触发BFC

# 什么是margin重叠问题？如何解决

两个块级元素的上外边距和下外边距可能会合并（折叠）为一个外边距，其大小会取其中外边距值大的那个，这种行为就是外边距折叠。需要注意的是，浮动的元素和绝对定位这种脱离文档流的元素的外边距不会折叠。重叠只会出现在垂直方向

# 对 sticky 定位的理解

sticky 英文字面意思是粘贴，所以可以把它称之为粘性定位。语法：position: sticky; 基于用户的滚动位置来定位

粘性定位的元素是依赖于用户的滚动，在 position:relative 与 position:fixed 定位之间切换。它的行为就像 position:relative; 而当页面滚动超出目标区域时，它的表现就像 position:fixed; 它会固定在目标位置。元素定位表现为在跨越特定阈值前为相对定位，之后为固定定位。

这个特定阈值指的是 top, right, bottom 或 left 之一，换言之，指定 top, right, bottom 或 left 四个阈值其中之一，才可使粘性定位生效。否则其行为与相对定位相同。

# 画一条0.5px的线

  • 方法一： transform: scale(0.5, 0.5)
  • 方法二： <meta name="viewport" content="width=device-width, initial-scale=0.5, minimum-scale=0.5, maximum-scale=0.5"/>

# 如何解决 1px 问题

移动端 1px 的问题简单的说，就是我们在 pc 的浏览器上设置的 1px 的边框，在移动端的浏览器上看上去会“更粗” 一些

  • 方法一: 判断dpr大于1时 直接写0.5px 但是安卓不兼容
  • 方法二: 伪元素 + transform: scale(0.5, 0.5)
  • 方法三: 使用border-image 设置一个透明到边框色的线性渐变

方法1：

border: 0.5px solid red;

方法2：

@media (-webkit-min-device-pixel-ratio:2),(min-device-pixel-ratio:2){
  .border-bt-1px{
    position: relative;
    :before{
      content: '';
      position: absolute;
      left:0;           
      bottom: 0;
      width: 100%;
      height: 1px;
      background: #ee2c2c;
      transform: scaleY(0.5);
    }
  }
}

方法3：

border-image: linear-gradient(to bottom, transparent 50%, red 50%) 0 0 100%/1px 0;

# CSS 盒模型

盒子模型：每个元素，都会形成一个矩形块，主要包括四部分：

content(Element) -> padding -> border -> margin

盒子模型：每个元素，都会形成一个矩形块，主要包括四部分：content(内容)+padding(内边距)+border(边框)+margin(外边距)

标准盒子模型，可以看到width的长度等于content的宽度； 而当将box-sizing的属性值设置成border-box时，盒子模型的width=content + padding + border的总和

注意：背景色 覆盖的是 content + padding border 的颜色可以由 border-color 指定，默认为黑色，如果设置为transparent，则也会显示背景色

  • 标准盒模型 box-sizing: content-box; width = content
  • 怪异盒模型 box-sizing: border-box; width = content + padding + border

# flex 布局和 grid 布局

  • flex 一维布局
  • grid 二维布局
display: flex;

display: grid;
grid-template-columns: 300px 设定宽 300px
grid-template-rows: 100px 设定高 100px
grid-gap：行列间距

grid-template-areas: 指定宽高

← JavaScript →

陕ICP备20004732号-3