CSS 基本知识点梳理

1.介绍下CSS的盒子模型？

通过box-sizing设置
box-sizing:context-box
标准盒子模型：宽度=内容的宽度（content）+ border + padding + margin
box-sizing:border-box
怪异盒模型：宽度=内容宽度（content+border+padding）+ margin

2. CSS选择器有哪些？哪些属性可以继承？

CSS 选择器

id选择器：#id
类选择器：.className
标签选择器：div h3 p 
相邻选择器：div+h3
子选择器：ul>li 
后代选择器：li a 
通配符：*
属性选择器：div[name="active"]
伪类选择器： a:hover,li:nth-child

可继承的属性

font-size, font-family, color

3.CSS优先级算法如何计算？

元素选择符： 1
class选择符： 10
id选择符：100
元素标签：1000

1. !important声明的样式优先级最高，如果冲突再进行计算。
2. 如果优先级相同，则选择最后出现的样式。
3. 继承得到的样式的优先级最低。

4.display有哪些值？说明他们的作用?

inline（默认）–内联
none–隐藏
block–块显示
table–表格显示
list-item–项目列表
inline-block (行内块)
flex (弹性盒模型)

5.position的值？

static（默认）：按照正常文档流进行排列；
relative（相对定位）：不脱离文档流，参考自身静态位置通过 top, bottom, left, right 定位；
absolute(绝对定位)：参考距其最近一个不为static的父级元素通过top, bottom, left, right 定位；
fixed(固定定位)：所固定的参照对像是可视窗口。

6.用纯CSS创建一个三角形的原理是什么？

三角形均分原理：需要把元素的宽度、高度设为0。然后设置边框样式。

width: 0;
height: 0;
border-top: 20px solid transparent;
border-left: 20px solid transparent;
border-right: 20px solid transparent;
border-bottom: 20px solid #ff0000;

7.为什么要初始化CSS样式

不同浏览器对有些标签的默认值是不同的,样式重置解决浏览器样式差异

8.display:none与visibility：hidden的区别？

display：none 不显示对应的元素，在文档流中不再分配空间（回流+重绘）
visibility：hidden 隐藏对应元素，在文档流中仍保留原来的空间（重绘）

9.浮动可能造成的问题？清除浮动的方式？

浮动带来的问题：

1. 高度塌陷，父元素的高度无法被撑开

解决浮动的方式

1. 设置父容器高度
2. 设置 overflow 为 hidden 或者 auto
3. clear: both

.clearfix:after{content: ".";display: block;height: 0;clear: both;visibility: hidden;}

10.什么是响应式设计？响应式设计的基本原理是什么？

响应式网站设计(Responsive Web design)是一个网站能够兼容多个终端，而不是为每一个终端做一个特定的版本。
基本原理是通过媒体查询检测不同的设备屏幕尺寸做处理。
页面头部必须有meta声明的viewport。

<meta name=’viewport’ content=”width=device-width, initial-scale=1. maximum-scale=1,user-scalable=no”>

11.有一个高度自适应的div，里面有两个div，一个高度100px，希望另一个填满剩下的高度

方法1 position定位

父容器
  position: relative;
自适应div
	position: absolute;
    width: 100%;
    top: 100px;
    bottom: 0;
    left: 0;
    background:lightcyan;

方法2 flex

父容器
  display: flex;
  flex-direction: column;
子div
   flex:1;
   width: 100%;
   background:lightcyan;

方法3 calc 计算
calc有一定兼容性，建议兼容低版本浏览器项目慎用

子div
  height: calc(100% - 100px);

12. png、jpg、gif 这些图片格式解释一下，分别什么时候用。有没有了解过webp？

png 是便携式网络图片（Portable Network Graphics）是一种无损数据压缩位图文件格式.优点是：压缩比高，色彩好。 大多数地方都可以用。
jpg 是一种针对相片使用的一种失真压缩方法，是一种破坏性的压缩，在色调及颜色平滑变化做的不错。在www上，被用来储存和传输照片的格式。
gif 是一种位图文件格式，以8位色重现真色彩的图像。可以实现动画效果.
webp格式 是谷歌在2010年推出的图片格式，压缩率只有jpg的2/3，大小比png小了45%。缺点是压缩的时间更久了，兼容性不好，目前谷歌和opera支持。

13.画一条0.5px的直线？

height: 1px;
transform: scale(0.5);

14.单行文本溢出隐藏

div
{
    width:200px; 
    border:1px solid #000000;
    overflow:hidden;
    white-space:nowrap; 
    text-overflow:ellipsis;
}

如何快速水平垂直居中一个div

已知div宽高
未知div宽高

CSS3有哪些新特性？

见另一篇文章总结CSS 常见的兼容性问题

常见的兼容性问题

见另一篇文章总结CSS 常见的兼容性问题

参考链接

css 基础面试题
持续更新中，未完待续…