半山烟雨的博客

em 和 rem

查看详情

em 单位的意思是父元素字体大小
rem 单位的意思是根元素字体大小
- 当浏览器解析 HTML 文档时，创建了一个用来代表页面元素的集合，叫做 DOM（文档对象模型，Document Object Model）。树状结构，每一个节点代表一个元素。<html>就是顶层节点（根节点），在下面的是它的子节点<head>和<body>，再往下就是它们的子节点，还有后代节点，如此类推。
em 会根据父元素的字体大小计算当前元素的尺寸。rem 会根据根节点的字体大小计算当前元素的尺寸。

css 盒模型

查看详情

CSS 盒模型包括 margin、border、padding 和 content
标准盒模型
- box-sizing: content-box
- width === content width
- 背景颜色会显示在 padding 和 content 区域
怪异盒模型（IE 盒模型）
- box-sizing: border-box
- width === content width + padding left + padding right + border left + border right
- 背景颜色会显示在 border、padding 和 content 区域

css 选择器有哪些？权重是什么？

查看详情

选择器
- 7 中基础选择器
  - ID 选择器，如 #id{}
  - 类选择器，如 .class{}
  - 属性选择器，如 a[href="segmentfault.com"]{}
  - 伪类选择器，如 :hover{}
  - 伪元素选择器，如 ::before{}
  - 标签选择器，如 span{}
  - 通配选择器，如 *{}
- 3 种组合选择器
  - 后代选择符： .father .child{}
  - 子选择符： .father > .child{}
  - 相邻选择符: .bro1 + .bro2{}
权重：important > 行内样式 > ID 选择器 > 类选择器 = 属性选择器 = 伪类选择器 > 标签选择器 = 伪元素选择器

什么是伪类？什么是伪元素？

查看详情

CSS 伪类是添加到选择器的关键字，指定要选择的元素的特殊状态、鼠标的位置以及外部因素来应用样式，一个选择器中可以同时写多个伪类
伪元素是一个附加至选择器末的关键字，允许对被选择元素的特定部分修改样式，一个选择器只能使用一个伪元素。伪元素必须紧跟在语句中的简单选则器/基础选择器之后。

`::after` 和`:after` 的区别是什么

查看详情

按照规范，伪元素应该使用双冒号（::）而不是单个冒号（:），以便区分伪类和伪元素。但是，由于旧版本的 W3C 规范并未对此进行特别区分，因此目前绝大多数的浏览器都同时支持使用这两种方式来表示伪元素。

css 新特性

查看详情

calc() 函数
transition 过渡
transform 旋转、缩放、移动、倾斜
animation 动画
gradient 渐变
shadow 阴影
text-shadow 文字阴影
border-radius 圆角

行内元素和块级元素的区别

查看详情

行内元素
- display: inline
- 高度和宽度是由内容决定的，与其他行内元素共占一行
块级元素
- display: block
- 默认宽度由父容器决定，默认高度由内容决定，独占一行

绝对定位，相对定位和固定定位的区别

查看详情

绝对定位
- position: absolute
- 相对于元素最近的已定位的祖先元素，无已定位的祖先元素时，以 body 元素为偏移参照的基准
- 完全脱离了标准文档流
相对定位
- position: relative
- 相对于元素在文档中的初始位置
- 未脱离文档流
- position:relative 对 table-*-group, table-row, table-column, table-cell, table-caption 元素无效。
固定定位
- position: fixed
- 相对于视口来定位（当元素祖先的 transform, perspective 或 filter 属性非 none 时，容器由视口改为该祖先。）
- 脱离文档流

什么是 BFC？如何产生 BFC？作用是什么？

查看详情

Block formatting contexts 块级格式化上下文，简称 BFC，它是一个独立的渲染区域，让处于 BFC 内部的元素和外部的元素相互隔离，使内外元素的定位不会相互影响
产生
- 根元素
- 浮动元素（元素的 float 不是 none）
- 绝对/固定定位元素（元素的 position 为 absolute 或 fixed）
- 行内块元素（元素的 display 为 inline-block）
- overflow 值不为 visible 的块元素
- 弹性元素（display 为 flex 或 inline-flex 元素的直接子元素）
作用
- 自适应两（三）栏布局
- 可以阻止元素被浮动快元素覆盖
- 可以清除浮动
- 分属不同 BFC 时可以阻止 margin 重叠

实现三栏布局，左右宽度固定，中间自适应

查看详情

CSS 浮动：第一个 float:left，第二个 float:right，第三个设置 margin-left 和 margin-right
BFC：第一个 float:left，第二个 float:right，第三个设置 overflow: hidden
绝对定位：第一个定位到 left，第二个定位到 right，第三个设置 margin-left 和 margin-right
flex 布局：父元素设置 display: flex，第一个、第三个设置宽度，第二个设置 flex: 1
grid 布局：父元素设置 display: grid; grid-template-columns: 100px 1fr 200px;

清除浮动的方法？

查看详情

额外标签法：在最后一个浮动标签后新加一个标签，给其设置 clear: both（不推荐）
- 通俗易懂，较方便
- 添加无意义的标签，语义化比较差
父级添加 overflow 属性法：父级添加 overflow 属性（不推荐）
- 代码简洁
- 内容增多的时候容易造成不会自动换行导致内容被隐藏掉，无法显示要溢出的元素
after 伪元素法：使用 after 伪元素清除浮动，给父元素添加（推荐）
- 符合闭合浮动思想，结构语义化正确
- ie6-7 不支持伪元素：after，使用 zoom:1 触发 hasLayout.

css

.clearfix:after {
  /*伪元素是行内元素 正常浏览器清除浮动方法*/
  content: '';
  display: block;
  height: 0;
  clear: both;
  visibility: hidden;
}
.clearfix {
  *zoom: 1; /*ie6清除浮动的方式 *号只有IE6-IE7执行，其他浏览器不执行*/
}

before 和 after 双伪元素清除浮动
- 代码简洁
- 使用 zoom: 1 触发 hasLayout

css

.clearfix:after,
.clearfix:before {
  content: '';
  display: table;
}
.clearfix:after {
  clear: both;
}
.clearfix {
  *zoom: 1;
}

什么是 CSS 层叠上下文？形成条件？层叠等级？

查看详情

假定用户正面向视窗或网页，而 HTML 元素沿着其相对于用户的一条虚构的 Z 轴排开，层叠上下文就是对这些 HTML 元素的三维构想。其中 HTML 元素基于其元素的属性按照优先级顺序占据这个空间。
形成条件
- 文档根元素 html
- position 值为 absolute、relative 且 z-index 值不为 auto 的元素
- position 值为 fixed、sticky 的元素
- flex(flexbox)容器的子元素且 z-index 不为 auto
- grid(grid)容器的子元素且 z-index 值不为 auto
- opacity 属性值小于 1 的元素
- transform 属性不为 none 的元素
- filter 属性不为 none 的元素
层叠等级
- 在同一层叠上下文中，层叠等级才有意义
- z-index 的优先级最高

垂直水平居中

查看详情

css

/*1：须知道子元素宽高*/
.child {
  width: 200px;
  height: 200px;
  position: absolute;
  left: 50%;
  top: 50%;
  margin-left: -100px;
  margin-top: -100px;
}

/*2：须知道子元素宽高*/
.child {
  width: 200px;
  height: 200px;
  position: absolute;
  left: calc(50% - 100px);
  top: calc(50% - 100px);
}

/*3：不须知道子元素宽高*/
.child {
  width: 200px;
  height: 200px;
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  margin: auto;
}

/*4：不须知道子元素宽高*/
.child {
  width: 200px;
  height: 200px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

/*5：不须知道子元素宽高*/
.parent {
  display: flex;
  justify-content: center;
  align-items: center;
}

/*6：不须知道子元素宽高*/
.parent {
  display: table-cell;
  vertical-align: middle;
}
.child {
  width: 200px;
  height: 200px;
  margin: auto;
}

/*7：不须知道子元素宽高*/
.parent {
  display: grid;
}
.child {
  align-self: center;
  justify-self: center;
}

link 与@import 的区别

查看详情

从属关系区别：link 是 HTML 提供的标签，不仅可以加载 css 文件，而且还可以定义 RSS，rel 连接属性等；@import 是 css 提供的语法规则，只能导入样式表；
加载顺序区别：link 标签在加载页面时同时加载 css；@import 则是在页面加载完毕后加载；
兼容性区别：link 作为 HTML 的标签不存在兼容性；@import 是在 CSS2.1 才有的语法；
DOM 可控性区别：link 可以通过 JS 动态插入；@import 不行

单行文本省略

查看详情

css

div {
  overflow: hidden; /*文字长度超过限定的宽度则隐藏超出的内容*/
  white-space: nowrap; /*设置文字在一行显示，不能换行*/
  text-overflow: ellipsis; /*规定当文本溢出时，显示省略号来代表被修剪的文本*/
}

多行元素文本省略

查看详情

css

div {
  -webkit-line-clamp: 2; /* 限制一个块级元素显示文本的行数 */
  display: -webkit-box; /* 将对象作为弹性伸缩盒子模型显示 */
  -webkit-box-orient: vertical; /* 设置或者检索伸缩盒对象的子元素的排列方式 */
  overflow: hidden;
  text-overflow: ellipsis;
}

如何让元素消失？

查看详情

完全消失：元素从渲染树中消失，不占据空间
- display: none，该元素隐藏起来了，但是会改变页面布局，可以理解为吧该元素删掉了
- hidden 属性
视觉上消失：屏幕中不可见，占据空间
- 利用 position 将元素移出可视区范围
- 利用 transfrom，缩放、移动、旋转元素
- 设置宽高为 0，字体为 0 或者超出隐藏
- opacity: 0，该元素隐藏起来了，但是不会改变页面布局，如果元素已经绑定了一些事件也能够触发
- visibility: hidden，该元素隐藏起来了，但不会改变页面的布局，但是不会触发已绑定的事件
- z-index: -1 需要先定位，将 z-index 值小的藏在 z-index 大的下面
语义上消失：读屏软件不可读，但正常占据空间
- aria-hidden="true"属性：占据空间，可见，但读屏软件不可读取

calc 函数

查看详情

calc()函数是 CSS3 新增的功能，可以使用 calc 计算 border,margin,padding,width,font-size 等属性
注意：
- calc()函数只支持加减乘除运算
- 运算符前后要保留一个空格
- 对于不支持的浏览器来说，整个属性运算表达式会被忽略

CSS 画半圆、扇形、三角形、梯形

查看详情

css

/* 半圆 */
.half-circle {
  width: 100px;
  height: 50px;
  border-radius: 50px 50px 0 0;
  background: red;
}
/* 扇形 */
.sector {
  width: 0px;
  height: 0px;
  background: none;
  border: 50px solid red;
  border-color: red transparent transparent transparent;
  border-radius: 50px 50px 0 0;
}
/* 三角 */
.triangle {
  width: 0px;
  height: 0px;
  background: none;
  border: 50px solid red;
  border-color: red transparent transparent transparent;
}
/* 梯形 */
.ladder {
  width: 100px;
  height: 0px;
  background: none;
  border: 50px solid red;
  border-color: red transparent transparent transparent;
}

transition 和 animation 的区别

查看详情

它们的大部分属性是相同的，都是随时间改变元素的属性值
transition 需要触发一个事件才能改变属性，而 animation 不需要触发任何事件就能随时间改变属性值
transition 只能定义两帧（from...to），而 animation 可以定义多帧

flex 布局

TODO:

查看详情

flex 布局

grid 布局

TODO:

查看详情

grid 布局

em 和 rem ​

css 盒模型 ​

css 选择器有哪些？权重是什么？ ​

什么是伪类？什么是伪元素？ ​

::after 和:after 的区别是什么 ​

css 新特性 ​

行内元素和块级元素的区别 ​

绝对定位，相对定位和固定定位的区别 ​

什么是 BFC？如何产生 BFC？作用是什么？ ​

实现三栏布局，左右宽度固定，中间自适应 ​

清除浮动的方法？ ​

什么是 CSS 层叠上下文？形成条件？层叠等级？ ​

垂直水平居中 ​

link 与@import 的区别 ​

单行文本省略 ​

多行元素文本省略 ​

如何让元素消失？ ​

calc 函数 ​

CSS 画半圆、扇形、三角形、梯形 ​

transition 和 animation 的区别 ​

flex 布局 ​

grid 布局 ​

em 和 rem

css 盒模型

css 选择器有哪些？权重是什么？

什么是伪类？什么是伪元素？

`::after` 和`:after` 的区别是什么

css 新特性

行内元素和块级元素的区别

绝对定位，相对定位和固定定位的区别

什么是 BFC？如何产生 BFC？作用是什么？

实现三栏布局，左右宽度固定，中间自适应

清除浮动的方法？

什么是 CSS 层叠上下文？形成条件？层叠等级？

垂直水平居中

link 与@import 的区别

单行文本省略

多行元素文本省略

如何让元素消失？

calc 函数

CSS 画半圆、扇形、三角形、梯形

transition 和 animation 的区别

flex 布局

grid 布局