CSS3 新增了哪些特性？

1.选择器

  1. 例如 ： 属性选择器 ， 子代选择器

  2. 布局： flex grid

  3. 边框：

    • border-radius: 创建圆角边框
    • box-shadow: 为元素添加阴影
    • border-image:使用图片来绘制边框

  5. 背景：

  6. background-clip：用于确定背景画区

  7. 过渡：transtition 过渡

BFC 是什么

  • 即为 块级格式化上下文，它是页面中的一块渲染区域，

  • BFC 目的是形成一个现对于外界完全独立的空间，让内部的子元素不会影响到外部的元素

应用场景：

  • 防止margin 重叠
  • 清楚内部浮动

请你说说对盒子模型的理解

一个盒子由四部分组成：content、padding、margin、border、

在CSS中，盒子模型可以分成 ：

W3C标准盒模型 它的宽高只包含了 content

IE怪异盒子模型 它的宽高包含了 border margin padding

回流 与 重绘

在html中，每个元素都可以理解成一个盒子，在浏览器解析的过程中，会涉及回流与重绘

回流：布局引擎 会根据各种样式计算每个盒子在页面上的大小 与 位置

重绘：当计算好盒模型的位置，大小，其他属性后，浏览器会根据每个元素进行渲染

Css中，有哪些方式可以隐藏页面元素 ？

  • display：none

    将元素设置为display:none后，元素在页面上将彻底的消失

    元素本身的空间就会被挤掉，也就是会导致浏览器 会回流 与 重绘

  • visibility：hidden

    页面上仅仅是隐藏了该元素，DOM结构还是存在，还是会占据页面原来空间

  • opacity：0

    表示元素的透明度，将元素的透明度设置为0之后，在用户眼中元素也是隐藏的

如何实现单行/多行文本溢出的省略样式 ？

单行文本溢出省略；即文本在一行内显示，超出部分以省略号的形式展示

text-overflow: hidden;
overflow: ellipsis;
white-space: nowrap

多行文本溢出省略

display:-webkit-box;
-webkit-line-clamp:2;
-webkit-box-orient:vertival;
overflow:hidden;
text-overflow:ellipsis;

上述使用了webkit的CSS属性扩展，所以兼容浏览器范围是PC端的webkit内核的浏览器

单位 可以分为 长度单位，绝对单位，

主要将 ： px 、em 、rem、 vh 、vw

px： 绝对单位，页面按精确像素展示

em： 相对单位，基准点为父节点字体的大小，如果自身定义了font-size按自身来计算，整个页面内的1em 不是一个固定的值

rem： 相对单位， 可以理解为root em 相当于根节点 html 的字体大小来计算

vh、vw： 主要用于页面视口大小布局，

link和@import有什么区别

1. link属于html标签，除了引入css样式以外还可以定义RSS等其他事物，@import是css提供的，只能引入css
2. link在页面加载的时候会同时加载，@import引用的css要等页面加载结束后再加载
3. link是html标签，没有兼容性，@import只有ie5以上才能识别

如何利用 Css 制作三角形

.Container{
    width:0;
    height:0;
    border-top...
    border-left...
    border-right..
}

清除浮动的方式有哪些？

  1. 给父元素单独定义高度
  2. 父级定义 overflow:hidden
  3. clear:both

flex：1 代表什么

  • flex-grow: 1;
  • flex-shrink: 1;
  • flex-basis: 0%;

意思就是： 元素占据剩余宽度的 1 份，收缩比例为 1，因为 flex-basis 具有最高优先级，元素首次分配宽度（flex-direction: colunm; 则为高度）如果父元素有设置宽度，则为 0%；父元素没有设置宽度，则和 auto效果一致。

meta 标签由 name 和 content 属性定义

用来描述网页文档的属性，比如 网页作者 网站描述，关键词

常用的meta标签有 charest keywords