css

CSS3 新增了那些东西？

- 选择器

- 盒子模型属性：border-radius、box-shadow、border-image

- 背景：background-size、background-origin、background-clip

- 文本效果：text-shadow、word-wrap

- 颜色：新增 RGBA，HSLA 模式

- 渐变：线性渐变、径向渐变

- 字体：`@font-face`

- 2D/3D 转换：transform、transform-origin

- 过渡与动画：transition、`@keyframes`、animation

- 多列布局

- 媒体查询

动画

css 中如何开发动画

ransition 过渡动画：

transition-property：指定过渡的 CSS 属性
transition-duration：指定过渡所需的完成时间
transition-timing-function：指定过渡函数
transition-delay：指定过渡的延迟时间

animation 关键帧动画：

animation-name：指定要绑定到选择器的关键帧的名称
animation-duration：动画指定需要多少秒或毫秒完成
animation-timing-function：设置动画将如何完成一个周期
animation-delay：设置动画在启动前的延迟间隔
animation-iteration-count：定义动画的播放次数
animation-direction：指定是否应该轮流反向播放动画
animation-fill-mode：规定当动画不播放时（当动画完成时，或当动画有一个延迟未开始播放时），要应用到元素的样式
animation-play-state：指定动画是否正在运行或已暂停

tranistion 和 animation 的区别

  • 过渡没法精准控制动画每一帧，动画可以
  • 过渡只能触发一次，动画可以无限循环

盒模型

css 中的盒模型有几种

- content-box：clientWidth = width+padding+border
- border-box：clientWidth = width

选择器

css 中的选择器权重大小是怎样的

每种 css 的选择器都有自己的权重值，important>style>id>class>elemnt,当选择器组合起来时，权重值的累加之和最大的选择器起作用。

单位

css 中的响应式单位

  • rem：相对于网页的 html 节点的font-size的大小来计算的，1rem = 100px,可以根据页面视口大小来调整 html 节点font-size的大小，从而控制页面元素的大小。
  • em: 相对于父元素的font-size的大小来计算的。
  • vw: 相对于视口width的1%。
  • vh: 相对于视口height的1%。
  • vmin: 视口的宽度和高度中的较小值
  • vmax: 视口的宽度和高度中的较大值

布局

css 中的布局技术

  • float
  • position
  • flex
  • grid

介绍 Flex 布局

  • 弹性盒子布局：是一种用于按行或按列布局元素的一维布局方法，元素可以膨胀以填充额外的空间，收缩以适应更小的空间。

容器属性

- 如何设置主轴方向：flex-direction
- 如何让子元素换行： flex-wrap
- 说出 space-between 和 space-around 的区别？

这个是 flex 布局的内容，其实就是一个边距的区别，按水平布局来说，space-between 是两端对齐，在左右两侧没有边距，而 space-around 是每个 子项目左右方向的 margin 相等，所以两个 item 中间的间距会比较大

子元素属性

- flex 是什么属性的缩写： flex-grow、flex-shrink 和 flex-basis
- align-self 属性允许单个项目有与其他项目不一样的对齐方式，可覆盖 align-items 属性

实践

CSS 外边距重叠问题及解决办法

  • 只有块级元素(display:block)会发生外边距重叠
  • 外边距叠加存在两种情况：一是父子外边距叠加；二是兄弟外边距叠加。
.box1 {
  height: 300px;
  width: 300px;
  background-color: antiquewhite;
  margin-bottom: 100px;
}
.box2 {
  height: 100px;
  width: 100px;
  background-color: aqua;
}
.box2 {
  margin-top: 100px;
}

<div class="box1">
  <div class="box2"></div>
</div>
  • 解决方案
  1. 给父元素或子元素开启 BFC
  2. 用点东西将父子元素的边缘隔开

水平垂直居中

 {
  display: flex;
  align-items: center;
  justify-content: center;

  poasition: absolte;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  margin: auto;

  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

使用 flex 布局开发一个一行两列，左边固定宽度，不会缩放，右边自适应的布局

.left {
  flex: 0 100px;
}
.right {
  flex: 1;
}

两列等高（使多列布局中的所有列采用相同的高度，即使它们包含的内容量不同）

 {
  align-items: stretch;
}

多行文本溢出省略效果

 {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3; //行数
  overflow: hidden;
}

如何用 CSS 实现一个三角形

<div></div>

div {
  width: 0;
  height: 0;
  border: 10px solid red;
  border-top-color: transparent;
  border-left-color: transparent;
  border-right-color: transparent;
}

如何实现一个自适应的正方形

.square {
  width: 10vw;
  height: 10vw;
  background: red;
}

.square {
  width: 10%;
  padding-bottom: 10%;
  height: 0; // 防止内容撑开多余的高度
  background: red;
}

如果一个元素出现滚动条，你想去掉这个滚动条，你该如何排查

  • 首先查看是否元素中的子元素宽度超出
  • 如果不超出，就看子元素的子元素宽度是否超出

移动端自适应布局方案

  • rem
  • em+%

font-size：10px 不起效果

  • 原因：谷歌浏览器的字体最小限制为 font-size:12px；
  • 解决方案：

手机端设置 rem 为单位：

html {
  font-size: 100px;
}

.a {
  font-size: 0.1rem；;
}

使用 transform:scale(0.8):

.a {
    font-size: transform:scale(0.8)；
}
Last Updated:
Contributors: mingzhuang.ji