Henry23.
Henry23.

Css Ⅰ

Css Ⅰ

  • 水平居中的方法
  • 垂直居中的方法
  • 如何垂直居中一个``?（用更简便的方法。）
  • CSS 基础与选择器初识
    • CSS 加载方式有几种？
    • @import 有什么作用？如何使用？
    • CSS 选择器常见的有几种？
    • id 选择器和 class 选择器的使用场景分别是什么？
    • @charset 有什么作用？
    • 简述 src 和 href 的区别？
    • 页面导入时，使用 link 和 @import 有什么区别？
    • 在 index.css 和 common.css 中有如下内容，html 里引入 index.css 后发现页面字体的颜色和大小没发生任何变化，原因可能是？（不定项）
  • CSS 选择器详解
    • 伪类选择器有哪些？
      • 静态，动态伪类选择器
      • UI 元素伪类选择器
      • 结构伪类选择器
    • 伪元素和伪类的区别？
      • 相同之处：
      • 不同之处：
    • 单冒号和双冒号的区别、
  • CSS 结构和层叠（继承与优先级）
    • 选择器的优先级是如何计算的？
    • 什么是 CSS 继承？哪些属性能继承，哪些不能？
    • display: none;与visibility: hidden;的区别
    • display:inline-block 什么时候不会显示间隙？(携程)
  • CSS 值和单位(颜色，pt,px,em,rem,vm.....)
    • 你有没有使用过视网膜分辨率的图形？当中使用什么技术？
    • pt，px，dpi，em，rem，vw 有什么区别？
  • CSS 给文本加样式：① 字体属性(阿里iconfont使用原理）
    • 如何实现小于12px的字体效果
  • CSS 给文本加样式：② 文本属性(大小写 阴影 行高 缩进 间隔 空白符)
  • CSS 基本视觉格式化：① “块盒子”格式化（盒与margin，*margin重叠）
  • 块级元素和行内元素分别有哪些？ 空（void）元素有那些？块级元素和行内元素有什么区别？
    • 块级元素
    • 行内元素
    • 空元素
    • 块级元素和行内元素有什么区别？
  • 盒模型
    • IE 盒模型和 W3C 盒模型有什么区别?
    • 在什么场景下会出现外边距合并？如何合并？如何不让相邻元素外边距合并？给个父子外边距合并的范例？
      • 会出现外边距合并的场景：
      • 如何合并：
      • 解决外边距合并的办法：
    • 关于 .item {width: 100%;}，以下说法正确的是：
    • 详解CSS中的百分比的应用
    • CSS给盒子加样式 绘制常见图形 背景图片相关 省略号
    • 让一个元素“看不见”有几种方式？有什么区别？
    • 单行文本溢出加 ... 如何实现？
    • 解释下面代码的作用？字体里 \5b8b\4f53 代表什么？
    • 如何去除列表元素的默认样式前面的点 · ？
    • 浮动与清除浮动
    • 浮动元素有什么特征？对父容器、其他浮动元素、普通元素、文字分别有什么影响？
      • 特征：
      • 影响：
    • 清除浮动指什么？如何清除浮动？两种以上方法。
  • CSS 定位 与 BFC
      • 有几种定位方式？分别是如何实现定位的？参考点是什么？使用场景是什么？
    • z-index 有什么作用？如何使用？
    • BFC 是什么？如何生成 BFC？BFC 有什么作用？举例说明。
      • BFC（块格式化上下文）
      • 下列方式会生成 BFC：
      • BFC 常见的用途：
  • CSS “伪元素”妙用（清楚浮动，替代标签，动态选择）
  • CSS居中
    • 如何让块级元素水平居中？如何让行内元素水平居中？如何让 inline-block 元素水平居中？
    • 垂直上下居中的办法？
  • CSS常用布局
  • CSS响应式布局原理
  • 媒体查询
  • CSS3
    • CSS3新特性
    • CSS3新增伪类有那些？
    • rgba()和opacity的透明效果有什么不同？
    • Canvas 和 SVG 有什么区别？
  • 浏览器兼容
    • 渐进增强和优雅降级分别是什么意思？
    • 什么是 CSS Hack？在哪个网站查看标签（属性）的浏览器兼容情况？
    • E6、7 的 Hack 写法是？
    • 尽可能多的列举浏览器兼容的处理范例？
    • CSS Reset 是什么？CSS 预编译器是什么？后编译器（PostCSS）是什么？
    • CSS Reset 和 Normalize.css 有什么区别？
    • 尽可能多的写出浏览器兼容性问题？
    • 如何让 Chrome 浏览器显示小于 12px 的文字？
    • 如果需要手动写动画，你认为最小时间间隔是多久，为什么？（阿里）
    • CSS 预处理器的比较：Less、Sass？
    • 常见兼容性问题？
  • CSS编码规范

水平居中的方法

元素为行内元素，设置父元素text-align:center
如果元素宽度固定，可以设置左右margin为auto;
如果元素为绝对定位，设置父元素position为relative，元素设left:0;right:0;margin:auto;
绝对定位中固定高度时设置left:50%，margin-left值为高度一半的负值 || transform: translateX(-50%);
使用flex-box布局，指定justify-content属性为center
display设置为tabel-ceil

垂直居中的方法

将显示方式设置为表格，display:table-cell,同时设置vertial-align：middle
使用flex布局，设置为align-item：center
绝对定位中设置bottom:0,top:0,并设置margin:auto
绝对定位中固定高度时设置top:50%，margin-top值为高度一半的负值 || transform: translateY(-50%);
文本垂直居中设置line-height为height值

如何垂直居中一个?（用更简便的方法。）

#container     /**的容器设置如下**/
{
    display:table-cell;
    text-align:center;
    vertical-align:middle;
}

CSS 基础与选择器初识

https://mp.weixin.qq.com/s/OQL8JVDuJopphXqAEp5AWQ

CSS 加载方式有几种？

  1. 外部样式表：通过“链入” CSS；
<link rel="stylesheet" href="style.css">
  1. 外部样式表：通过 @import “导入”样式；
<style>
@import url("index.css");
@import url(index.css);
@import "index2.css"; 
</style>
  1. 内部样式表：放在 head 元素内的