摘抄自:刘宁Leo

box-sizing属性

用来控制元素的盒子模型的解析模式,默认为content-box
context-box:设置元素的 height/width 属性指的是content部分的高/宽
border-box:设置元素的height/width属性指的是border + padding + content部分的高/宽

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

css优先级和算法

!important > id > class > tag
!important 比内联优先级高

元素选择符: 1
class选择符: 10
id选择符:100
元素标签:1000
!important声明的样式优先级最高,如果冲突再进行计算。
如果优先级相同,则选择最后出现的样式。
继承得到的样式的优先级最低。

如何居中div?如何居中一个浮动元素?如何让绝对定位的div居中?

div:

{
    border: 1px solid red;
    margin: 0 auto; 
    height: 50px;
    width: 80px;
}

浮动元素的上下左右居中:

{
    border: 1px solid red;
    float: left;
    position: absolute;
    width: 200px;
    height: 100px;
    left: 50%;
    top: 50%;
    margin: -50px 0 0 -100px; 
}

绝对定位的左右居中:

{
    border: 1px solid black;
    position: absolute;
    width: 200px;
    height: 100px;
    margin: 0 auto;
    left: 0;
    right: 0; 
}

flex居中:Flex 布局教程

css画三角形

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

display:none与visibility:hidden的区别?

display:none 不显示对应的元素,在文档布局中不再分配空间(回流+重绘)
visibility:hidden 隐藏对应元素,在文档布局中仍保留原来的空间(重绘)

清除浮动的方式

父级div定义height
最后一个浮动元素后加空div标签 并添加样式clear:both。
包含浮动元素的父标签添加样式overflow为hidden或auto。
父级div定义zoom

浏览器是怎样解析CSS选择器的?

CSS选择器的解析是从右向左解析的。若从左向右的匹配,发现不符合规则,需要进行回溯,会损失很多性能。若从右向左匹配,先找到所有的最右节点,对于每一个节点,向上寻找其父节点直到找到根元素或满足条件的匹配规则,则结束这个分支的遍历。两种匹配规则的性能差别很大,是因为从右向左的匹配在第一步就筛选掉了大量的不符合条件的最右节点(叶子节点),而从左向右的匹配规则的性能都浪费在了失败的查找上面。
而在 CSS 解析完毕后,需要将解析的结果与 DOM Tree 的内容一起进行分析建立一棵 Render Tree,最终用来进行绘图。在建立 Render Tree 时(WebKit 中的「Attachment」过程),浏览器就要为每个 DOM Tree 中的元素根据 CSS 的解析结果(Style Rules)来确定生成怎样的 Render Tree。

在网页中的应该使用奇数还是偶数的字体?为什么呢?

使用偶数字体。偶数字号相对更容易和 web 设计的其他部分构成比例关系。Windows 自带的点阵宋体(中易宋体)从 Vista 开始只提供 12、14、16 px 这三个大小的点阵,而 13、15、17 px时用的是小一号的点。(即每个字占的空间大了 1 px,但点阵没变),于是略显稀疏。

margin和padding分别适合什么场景使用?

何时使用margin:
需要在border外侧添加空白
空白处不需要背景色
上下相连的两个盒子之间的空白,需要相互抵消时。

何时使用padding:
需要在border内侧添加空白
空白处需要背景颜色
上下相连的两个盒子的空白,希望为两者之和。

全屏滚动的原理是什么?用到了CSS的哪些属性?

原理:有点类似于轮播,整体的元素一直排列下去,假设有5个需要展示的全屏页面,那么高度是500%,只是展示100%,剩下的可以通过transform进行y轴定位,也可以通过margin-top实现

overflow:hidden;transition:all 1000ms ease;

视差滚动效果?

视差滚动(Parallax Scrolling)通过在网页向下滚动的时候,控制背景的移动速度比前景的移动速度慢来创建出令人惊叹的3D效果。

CSS3实现
优点:开发时间短、性能和开发效率比较好,缺点是不能兼容到低版本的浏览器

jQuery实现
通过控制不同层滚动速度,计算每一层的时间,控制滚动效果。
优点:能兼容到各个版本的,效果可控性好
缺点:开发起来对制作者要求高

插件实现方式
例如:parallax-scrolling,兼容性十分好

::before 和 :after中双冒号和单冒号有什么区别?解释一下这2个伪元素的作用

单冒号(:)用于CSS3伪类,双冒号(::)用于CSS3伪元素。

::before就是以一个子元素的存在,定义在元素主体内容之前的一个伪元素。并不存在于dom之中,只存在在页面之中
:before 和 :after 这两个伪元素,是在CSS2.1里新出现的。起初,伪元素的前缀使用的是单冒号语法,但随着Web的进化,在CSS3的规范里,伪元素的语法被修改成使用双冒号,成为::before ::after

怎么让Chrome支持小于12px 的文字?

p{font-size:10px;-webkit-transform:scale(0.8);} //0.8是缩放比例

让页面里的字体变清晰,变细用CSS怎么做?

-webkit-font-smoothing在window系统下没有起作用,但是在IOS设备上起作用-webkit-font-smoothing:antialiased是最佳的,灰度平滑。

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"/>

如果需要手动写动画,你认为最小时间间隔是多久,为什么?

多数显示器默认频率是60Hz,即1秒刷新60次,所以理论上最小间隔为1/60*1000ms = 16.7ms。

display:inline-block 什么时候会显示间隙?

有空格时候会有间隙 解决:移除空格
margin正值的时候 解决:margin使用负值
使用font-size时候 解决:font-size:0、letter-spacing、word-spacing

持续更新中