今日面试题？睡前小甜点！！！

前部分是我自己写的，后半部分是正确答案

display: none; 与 visibility: hidden; 的区别

display:none是页面渲染到这个块的时候，选择不渲染，没这个块了会影响其他元素的位置
visibility:hidden是块内的一个属性，只是块选择隐藏，但是他还在

相同： 它们都能让元素不可见

区别：

display:none;会让元素完全从渲染树中消失，渲染的时候不占据任何空间；visibility:
hidden;不会让元素从渲染树消失，渲染师元素继续占据空间，只是内容不可见 display:
none;是非继承属性，子孙节点消失由于元素从渲染树消失造成，通过修改子孙节点属性无法显示；visibility:hidden;是继承属性，子孙节点消失由于继承了
hidden，通过设置 visibility: visible;可以让子孙节点显式 修改常规流中元素的 display
通常会造成文档重排。修改 visibility 属性只会造成本元素的重绘 读屏器不会读取 display: none;元素内容；会读取
visibility: hidden 元素内容

link 与 @import 的区别

link是html的引入外部文件的方式
@import是css的方式

link 是 HTML 方式， @import 是 CSS 方式
link 最大限度支持并行下载，@import 过多嵌套导致串行下载，出现 FOUC
link 可以通过 rel=“alternate stylesheet” 指定候选样式
浏览器对 link 支持早于@import ，可以使用 @import 对老浏览器隐藏样式
@import 必须在样式规则之前，可以在 css 文件中引用其他文件
总体来说：link 优于@import

CSS 有哪些继承属性

font,text-align,line=height,color,visibility,cursor,

关于文字排版的属性如：
font
word-break
letter-spacing
text-align
text-rendering
word-spacing
white-space
text-indent
text-transform
text-shadow
line-height
color
visibility
cursor

display,float,position 的关系

display可以用来定义这个块的渲染方式
float半脱离标准文档流，会导致父元素坍塌，浮动元素改为block
position脱离标准文档流

如果 display 为 none，那么 position 和 float 都不起作用，这种情况下元素不产生框
否则，如果 position 值为 absolute 或者 fixed，框就是绝对定位的，float 的计算值为 none，display 根据下面的表格进行调整
否则，如果 float 不是 none，框是浮动的，display 根据下表进行调整
否则，如果元素是根元素，display 根据下表进行调整
其他情况下 display 的值为指定值 总结起来：绝对定位、浮动、根元素都需要调整 display

外边距折叠(collapsing margins)

就是两个相邻的元素的margin值取最大值

外边距重叠就是 margin-collapse
相邻的两个盒子（可能是兄弟关系也可能是祖先关系）的外边距可以结合成一个单独的外边距。 这种合并外边距的方式被称为折叠，结合而成的外边距称为折叠外边距
折叠结果遵循下列计算规则：
两个相邻的外边距都是正数时，折叠结果是它们两者之间较大的值
两个相邻的外边距都是负数时，折叠结果是两者绝对值的较大值
两个外边距一正一负时，折叠结果是两者的相加的和

CSS 选择符有哪些？

星号 id class 属性选择器 类型选择器 后代选择器 子选择器 伪类选择器

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

CSS3 新增伪类有那些？

::after
::before

p:first-of-type 选择属于其父元素的首个

元素的每个

元素。

p:last-of-type 选择属于其父元素的最后

元素的每个

元素。

p:only-of-type 选择属于其父元素唯一的

元素的每个

元素。

p:only-child 选择属于其父元素的唯一子元素的每个

元素。

p:nth-child(2) 选择属于其父元素的第二个子元素的每个

元素。

:after 在元素之前添加内容,也可以用来做清除浮动。

:before 在元素之后添加内容

:enabled 选择器匹配每个已启用的元素（大多用在表单元素上）。

:disabled 控制表单控件的禁用状态。

:checked 单选框或复选框被选中

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

div{
	margin:(爹-儿子)/2 auto 0
}
floatDiv{
	float: left;
	position: relative;
	left:50%;
    top: 50%;
    transform: translate(-50%,-50%);
}
absoluteDiv{
	position:absolute;
	top:50%;
	left:50%
	transfrom:translate(-50% -50%);
}

如何竖直居中一个元素

div{
	margin-top:(爹-儿子)/2;
}
div{
  position:relative;
  top:50%;
  transfrom:translateY(-50%)
}

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

block,变成块级元素
inline-block：变成行内块元素
none：不渲染这个块
grild：GFC布局

block 象块类型元素一样显示。
none 缺省值。象行内元素类型一样显示。
inline-block 象行内元素一样显示，但其内容象块类型元素一样显示。
list-item 象块类型元素一样显示，并添加样式列表标记。
table 此元素会作为块级表格来显示
inherit 规定应该从父元素继承 display 属性的值

position 有哪些值 relative 和 absolute 定位原点是

reletive: 正常位置定位
absolute：爹左上角
static：不定位

absolute 生成绝对定位的元素，相对于值不为 static 的第一个父元素进行定位。
fixed （老 IE 不支持） 生成绝对定位的元素，相对于浏览器窗口进行定位。
relative 生成相对定位的元素，相对于其正常位置进行定位。
static 默认值。没有定位，元素出现在正常的流中（忽略 top, bottom, left, right - z-index 声明）。
inherit 规定从父元素继承 position 属性的值

CSS3 有哪些新特性？

弹性盒
动画
定位
各种效果，阴影之类
transfrom系列
transition系列

新增选择器 p:nth-child(n){color: rgba(255, 0, 0, 0.75)}
弹性盒模型 display: flex;
多列布局 column-count: 5;
媒体查询 @media (max-width: 480px) {.box: {column-count: 1;}}
个性化字体 @font-face{font-family: BorderWeb; src:url(BORDERW0.eot);}
颜色透明度 color: rgba(255, 0, 0, 0.75);
圆角 border-radius: 5px;
渐变 background:linear-gradient(red, green, blue);
阴影 box-shadow:3px 3px 3px rgba(0, 64, 128, 0.3);
倒影 box-reflect: below 2px;
文字装饰 text-stroke-color: red;
文字溢出 text-overflow:ellipsis;
背景效果 background-size: 100px 100px;
边框效果 border-image:url(bt_blue.png) 0 10;
平滑过渡 transition: all .3s ease-in .1s;
动画 @keyframes anim-1 {50% {border-radius: 50%;}} animation: anim-1 1s;
转换
旋转 transform: rotate(20deg);
倾斜 transform: skew(150deg, -10deg);
位移 transform: translate(20px, 20px);
缩放 transform: scale(.5);

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

利用边框

	width:0;
    height:0;
    border-top: 100px solid red;
    border-bottom:100px solid white;
    border-left: 100px solid  white;
    border-right: 100px solid  white;

一个满屏品字布局如何设计?

上面的 div 宽 100%，
下面的两个 div 分别宽 50%，
然后用 float 或者 inline 使其不换行即可

li 与 li 之间有看不见的空白间隔是什么原因引起的？有什么解决办法？(也称幽灵字符)

html中并排写
利用注释
fontSize:0

行框的排列会受到中间空白（回车\空格）等的影响，因为空格也属于字符,这些空白也会被应用样式，占据空间，所以会有间隔，把字符大小设为 0，就没有空格了

display:inline-block 间隙问题怎么解决？(携程)

html中并排写
利用注释
fontSize:0

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

相邻的

相邻的 inline-block 元素之间有换行或空格分隔的情况下会产生间距
非 inline-block 水平元素设置为 inline-block 也会有水平间距
可以借助 vertical-align:top; 消除垂直间隙
可以在父级加 font-size：0; 在子元素里设置需要的字体大小，消除垂直间隙
把 li 标签写到同一行可以消除垂直间隙，但代码可读性差

css 定义的权重

id100 class10 星号0.5 标签1

网上有声称诸如id权重100，class权重10等计算方法，这是不正确的。 实际上应该如下：

如果一个声明来自style属性而不是选择器，计作1或者a=1（在一个html文档中，元素“style”的值是样式表规则，这个规则中没有选择器，所以a=1, b=0, c=0, and d=0）
选择器中id属性的个数,计作b
选择器中其他属性以及伪类的个数，计作c
选择器中元素及伪元素的个数，计作d

CSS 优先级算法如何计算？

就近原则

优先级就近原则，同权重情况下样式定义最近者为准
载入样式以最后载入的为准
优先级为: !important > id > class > tag important 比 内联优先级高