一文搞懂所有CSS常见的操作

切片大师
232 阅读7分钟

理解 animation transition 属性

  • animation: 动画名称 持续时间 速度函数 延迟时间 通过 animation 去实现，设定 keyframes 关键帧。

@keyframes

定义一个动画，定义的动画名称用来被animation-name所使用。

div{
    width:50px;
    height:50px;
    background:#f40;
    border-radius:50%;
    animation:mymove 2s;
}

@keyframes mymove{
    0%   {width:50px;height:50px;}	
    50%   {width:100px;height:100px;}	
    100%   {width:50px;height:50px;}
}
  • transition
div {
    width: 140px;
    height: 64px;
    transition: .8s transform linear;
}
div:hover {
    transform: translate(120px, 0);
}
复制代码

和动画类似，每一个过渡都是支持延迟触发的：

div {
    // 延迟 1s 触发过渡，过渡动画的时间为 0.8 秒
    transition: .8s transform 1s linear;
}
div:hover {
    transform: translate(120px, 0);
}
复制代码

清除浮动的方法

为什么要清浮动:清浮动主要是解决子元素浮动导致父元素高度坍塌的问题

image.png

  1. 添加空元素:利用CSS提供的 clear:both;清浮动
<div class="parent">
   <div class="child1"></div>
   <div class="child2" style="clear:both"></div>
</div>
  1. 对父元素添加伪元素
.parent::after {
    content: "";
    display:block;
    height:0;
    clear:both;
 }
  1. 触发父级BFC
.parent {
    overflow:hidden auto;
    display: inline-block;  table-cell;
    position: absolute;  fixed;
    float:left; right;
 }

伪类和伪元素的区别

就是他们是否创建了新元素

伪元素: 不存在 dom 文档中，是虚拟的元素，是创建新元素。代表某个元素的子元素。 伪元素要配合 content 属性使用 伪元素可以使用 : :: 伪元素只能出现一次

伪类: 存在 dom 文档中。 伪类只能使用一个 : 伪类可以出现多次

单行文本溢出和多行文本溢出的写法

单行文本溢出

.box1 {
      width: 200px;
      height: 50px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

多行文本溢出

.box2 {
      width: 200px;
      height: 60px;
      line-height: 20px;
      -webkit-line-clamp: 3;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      overflow: hidden;
    }

image.png

垂直居中的方式有多少种?

flex 布局

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

position + transfrom

position: relative;
子级
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);

flex + margin

display: flex;
margin: auto;

三栏布局

float 布局

父元素 overflow: hidden;
第一个盒子 float: left;
第三个盒子 float: right;
而且第三个盒子要放在第二的位置

Position 布局

父元素 position: relative;
第一个盒子 position: absolute; top: 0; left: 0;
第三个盒子 position: absolute; top: 0; right: 0;

flex 布局

父元素 display: flex;
第二个盒子 flex: 1;

flex 0 1 auto 是什么意思？

flex 是有 flex-grow flex-shrink flexbasis 三者构成分别是 放大比例，缩小比例，分配多余空间。

怎么画一个三角形

.box {
  width: 0;
  height: 0;
  border: 30px solid;
  border-color: #ccc #fff #fff #fff;
}

盒子模型

  1. 盒模型有:标准盒模型 + IE 盒模型
  2. 标准盒模型:width 不包含 border、padding,变成 IE 盒模型是通过 box-sizing:border-box;
  3. IE 盒模型:width 包含 border、padding,变成标准盒模型是通过 box-sizing:content-box;

什么是BFC？

BFC 是块级格式上下文，有自己的渲染规则

  1. 容器内的元素不会影响容器外的元素
  2. 内部的盒子在垂直方向上一个接着一个放置。
  3. 垂直方向上的距离由 margin 决定(解决了外边距重叠的问题)
  4. BFC 区域不会和 float 元素区域重叠(防止浮动文字环绕)
  5. 计算 BFC 的高度时，浮动元素也会计算在内(清除浮动) 主要是解决了 margin 重叠的问题

触发 BFC 的 CSS 属性

  1. display:inline-block,table-cell
  2. float:left right
  3. overflow:hidden,auto,scroll
  4. position:absolute,fixed

display:none visibility:hidden opacity:0 三者的区别

  1. display:none; 不会占据页面空间，不可点击事件,不会被子类继承，会触发重排和重绘。
  2. visibility:hidden; 会占据页面空间，不可点击事件，会被子类继承，visibility:visible;显示元素，通过触发重绘
  3. opacity：0; 会占据页面空间，可点击事件，会被子类继承，但是不能设置 opacity：1;恢复。触发重绘

浏览器的渲染过程？

# 浏览器对页面渲染的过程

10、怎么画一条 0.5px 的线

    .box4 {
      border-top: 1px solid #000;
      transform: scaleY(0.5);
    }

重排和重绘

  • 重排: javascript 计算每个 dom 元素在页面中的大小和位置

  • 重绘: dom 元素外观改变触发浏览器重新渲染页面的行为。

  • 重排必定触发重绘，重绘不一定触发重排。

  • 触发重排的原因:

    1. 页面第一次渲染
    2. 浏览器窗口大小的改变
    3. 删除 dom 元素
    4. dom 元素在页面中的位置改变
    5. 内容发生变化
    6. width/height 变化

  • 触发重绘的原因

    1. 背景颜色的改变
    2. 文字方向的改变
    3. 文字阴影的改变

  • 避免发生重排和重绘

    1. 使用 class 名改变样式
    2. 避免使用内联样式
    3. 避免使用 table 布局
    4. 避免使用 css 表达式

怎么设置文字大小 10px

    .box6 {
      transform: scale(0.8);
    }

CSS3新增了哪些新特性？

  1. 圆角 border-radius
  2. 阴影 box-shadow
  3. 文字特效 text-shadow
  4. 多背景 rgba: red;
  5. (定位,旋转,缩放) transform: translate() rotate() scale();
  6. 媒体查询
  7. transition
  8. animation

transfrom 和 animation 的区别

  1. transfrom 是过度，从一个状态过度到另一个状态。
  2. animation 是动画，有帧的概念，可以设置很多帧，而且 animation 有很多个属性，可以让效果更好。

H5 新增了哪些属性

<header></header>
<footer></footer>
<section></section>
<nav></nav>
<audio></audio>
<video></video>
<canvas></canvas>

移动端有几种方式做自适应呢?

  1. 媒体查询
  2. rem
  3. 百分比
  4. vh,vw

CSS 选择器及优先级

  1. id 选择器(#myid)
  2. 类选择器(.myclass)
  3. 属性选择器(a[rel="external"])
  4. 伪类选择器(a:hover, li:nth-child)
  5. 标签选择器(div, h1,p)
  6. 相邻选择器（h1 + p）
  7. 子选择器(ul > li)
  8. 后代选择器(li a)
  9. 通配符选择器(*)
  • !impotent > 内联样式 > ID 选择器 > 类，伪类，属性>标签，伪元素>继承>通配符
  • !important(无穷大) > 内联样式(权重 1000) > ID 选择器(权重 100) > 类选择器/伪类/属性(权重 10)> 标签/伪元素(权重 1)

说说 em/px/rem/vh/vw

  1. 相对长度单位 em、ex、ch、rem、vw、vh、vmin、vmax、%
  2. 绝对长度单位 cm、mm、in、px、pt、pc
  3. 这里之所以认为 px 为绝对单位，在于 px 的大小和元素的其他属性无关
  4. em 的值并不是固定的,em 会继承父级元素的字体大小
  5. rem，相对单位，相对的只是 HTML 根元素 font-size 的值 html {font-size: 62.5%; } /* 公式16px*62.5%=10px */
  6. vw ，就是根据窗口的宽度，分成 100 等份，100vw 就表示满宽，50vw 就表示一半宽。（vw 始终是针对窗口的宽），同理，vh 则为窗口的高度
  • 总结 px：绝对单位，页面按精确像素展示 em：相对单位，基准点为父节点字体的大小，如果自身定义了 font-size 按自身来计算，整个页面内 1em 不是一个固定的值 rem：相对单位，可理解为 root em, 相对根节点 html 的字体大小来计算 vh、vw：主要用于页面视口大小布局，在页面布局上更加方便简单

em px rem 的区别

  • px: 绝对单位，按像素展示
  • em：相对单位，基准点为⽗节点字体的⼤⼩，如果⾃身定义了 font-size 按⾃身来计算（浏览器默认字体是 16px），整个⻚⾯内 1em 不是⼀个固定的值。
  • rem：相对单位，可理解为”root em”, 相对根节点 html 的字体⼤⼩来计算，CSS3 新加属性，chrome/firefox/IE9+⽀持

Flex 的属性你知道有几个

  • flex-derection
  1. row:起点在左端
  2. row-reverse:起点在右端
  3. column:起点在上方
  4. column-reverse:起点在下方
  • juestify-content
  1. flex-stat: 左边对齐
  2. flex-end:右边对齐
  3. center:中间对齐
  4. space-between:两边对齐
  5. space-around:中间隔开对齐
  • flex 是三个属性 flex-grow + flex-shrink + flex-basis

说一说 Flex 的两个属性 auto none

  • flex:auto 是有三个属性构成的、放大、缩小、位置定位。
  • auto 代表: 1 1 auto 有剩余空间等比放大
  • none 代表: 0 0 auto 有剩余空间等比缩小

块元素、行内元素、行级块元素

块元素：div p ul li h1-h6 dl dd hr 行内元素： a b span img button input

区别：

  1. 默认的情况下，块元素会独占一行，行元素不会
  2. 块元素可以包含行内元素，但是行内元素不可以包含块元素
  3. 块元素 width height margin padding 会生效,行内元素 width height 不生效 margin 的竖直方向不生效，水平方向生效。
  4. 块级元素变成行元素 display:inline 行内元素变成块元素 display:block
avatar
文章
阅读
粉丝