CSS - 简书

https://www.sohu.com/a/223556954_655394
https://baijiahao.baidu.com/s?id=1623975588566710307&wfr=spider&for=pc

display:none和visibility:hidden的区别

display:none 
隐藏对应元素，文档布局中不再给他分配空间；
visibility:hidden
隐藏对应元素，空间保留；

link和@import 的区别

1、link属于html标签，@import属于css范畴，只能加载CSS。
2、link引用CSS时，在页面载入时同时加载；@import会等到页面完全载入后再加载。
3、link无兼容问题；@import在低版本浏览器里不支持。

介绍一下标准的CSS的盒子模型？与低版本IE的盒子模型有什么不同的？

标准盒子模型：宽度=内容的宽度（content）+ border + padding + margin

低版本IE盒子模型：宽度=内容宽度（content+border+padding）+ margin

css3特性

圆角、阴影、过度、transform（旋转、定位、缩放、倾斜）、动画

子元素填满父元素

//父元素设置
display:flex;
//子元素设置
flex:1;

flex布局

常用属性
justify-content:flex-start;flex-end; center;
align-items:center
如何换行
flex-wrap:wrap;

position 都有哪些值，具体介绍下

relative（相对定位）：不脱离文档流，
参考自身静态位置通过 top, bottom, left, right 定位；

absolute(绝对定位)：参考距其最近一个不为static的父级元素
通过top, bottom, left, right 定位；

fixed(固定定位)：所固定的参照对像是可视窗口。

absolute：生成绝对定位的元素，相对于 static 定位以外的第一个祖先元素进行定位

fixed：生成绝对定位的元素，相对于浏览器窗口进行定位。 （IE6不支持）

relative：生成相对定位的元素，相对于其在普通流中的位置进行定位

static：默认值。没有定位，元素出现在正常的流中

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

外层div使用position：relative；
高度要求自适应的div使用
position: absolute; 
top: 100px; 
bottom: 0; 
left: 0

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

CSS选择器：id选择器(#myid)、类选择器(.myclassname)、标签选择器(div, h1, p)、相邻选择器(h1 + p)、子选择器（ul > li）、后代选择器（li a）、通配符选择器（*）、属性选择器（a[rel="external"]）、伪类选择器（a:hover, li:nth-child）

可继承的属性：font-size, font-family, color

不可继承的样式：border, padding, margin, width, height

优先级（就近原则）：!important > [ id > class > tag ]

!important 比内联优先级高

如何给表格中的某一行中的奇数和偶数td分别加加不同背景色

nth-child 相对父元素中的第n个子元素
第一个子元素下表是1
odd 奇数
tr>td:nth-child(odd)
even 偶数
tr>td:nth-child(even)

设置元素浮动后，该元素的display值是多少

自动变成display:block

为什么会出现浮动和什么时候需要清除浮动？清除浮动的方式？

.clearfix:after{
  context:'';
  display:block;
  clear:both;
}

父元素最后一个元素增加div 样式 clear:both;

文字垂直居中（单行、多行）

单行文本垂直居中：
把line-height值设置为height一样大小的值可以实现单行文字的垂直居中，
其实也可以把height删除。

多行文本垂直居中：
需要设置display属性为inline-block。

div水平垂直居中

雪碧图，有什么好处

将一个页面涉及到的所有图片都包含到一张大图中去，
然后利用CSS的 background-image，background- repeat，
background-position 的组合进行背景定位。
利用CSS Sprites能很好地减少网页的http请求，
从而大大的提高页面的性能；CSS Sprites能减少图片的字节。

position:fixed;在android下无效怎么处理？

<meta name="viewport"
content="width=device-width,

initial-scale=1.0,

maximum-scale=1.0,

minimum-scale=1.0,

user-scalable=no"/>

什么是响应式设计？响应式设计的基本原理是什么？如何兼容低版本的IE？

响应式网站设计(Responsive Web design)是一个网站能够兼容多个终端，
而不是为每一个终端做一个特定的版本。

基本原理是通过媒体查询检测不同的设备屏幕尺寸做处理。

页面头部必须有meta声明的viewport。

使用 CSS 预处理器吗？

Less sass

用css3实现一个div顺时针旋转30度

div{
  transform:rotate(30deg);
}

css3 translate 实现div向右下各移动50px

div{
  transform:translate(50px,50px)
}
* css3 scale实现宽度增加两倍，高度增加4倍
div{
  transform:scale(2,4);
}

用css3动画实现一个div背景色1s时间内由红变黄

@keyframs colorChange
{
  from {background:red;}
  to {background:yellow}
}
div{
  animation: colorChange 1s;
}

用css3实现一个过度效果，一个div鼠标移到其上时，宽度2秒时间内由100px逐渐变为300px，过度多个属性时，用逗号隔开。

div{
  width:100px;
  heigth:100px;
  background:yellow;
  transition:width 2s;
}
div:hover{
  width:300px;
}