CSS

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

css hack原理及常用hack

link 与 @import 的区别

CSS有哪些继承属性

display,float,position的关系

外边距折叠(collapsing margins)

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

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

CSS优先级算法如何计算？

CSS3新增伪类有那些？

p:first-of-type 选择属于其父元素的首个 <p> 元素的每个 <p> 元素。
p:last-of-type  选择属于其父元素的最后 <p> 元素的每个 <p> 元素。
p:only-of-type  选择属于其父元素唯一的 <p> 元素的每个 <p> 元素。
p:only-child        选择属于其父元素的唯一子元素的每个 <p> 元素。
p:nth-child(2)  选择属于其父元素的第二个子元素的每个 <p> 元素。

:after          在元素之前添加内容,也可以用来做清除浮动。
:before         在元素之后添加内容
:enabled        
:disabled       控制表单控件的禁用状态。
:checked        单选框或复选框被选中

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

div{
    width:200px;
    margin:0 auto;
 }

//确定容器的宽高 宽500 高 300 的层
//设置层的外边距

 .div {
      width:500px ; height:300px;//高度可以不设
      margin: -150px 0 0 -250px;
      position:relative;         //相对定位
      background-color:pink;     //方便看效果
      left:50%;
      top:50%;
 }

  position: absolute;
  width: 1200px;
  background: none;
  margin: 0 auto;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;

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

position的值relative和absolute定位原点是？

CSS3有哪些新特性？

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

// 把上、左、右三条边隐藏掉（颜色设为 transparent）
#demo {
  width: 0;
  height: 0;
  border-width: 20px;
  border-style: solid;
  border-color: transparent transparent red transparent;
}

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

经常遇到的浏览器的兼容性有哪些？原因，解决方法是什么，常用hack的技巧 ？

li与li之间有看不见的空白间隔是什么原因引起的？有什么解决办法？

为什么要初始化CSS样式

对BFC规范(块级格式化上下文：block formatting context)的理解？

css定义的权重

// 以下是权重的规则：标签的权重为1，class的权重为10，id的权重为100，以下/// 例子是演示各种定义的权重值：

/*权重为1*/
div{
}
/*权重为10*/
.class1{
}
/*权重为100*/
#id1{
}
/*权重为100+1=101*/
#id1 div{
}
/*权重为10+1=11*/
.class1 div{
}
/*权重为10+10+1=21*/
.class1 .class2 div{
}

// 如果权重相同，则最后定义的样式会起作用，但是应该避免这种情况出现

display:inline-block 什么时候会显示间隙？(携程)

谈谈浮动和清除浮动

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

box-sizing 常用的属性有哪些？分别有什么作用？

CSS选择器有哪些？

CSS哪些属性可以继承？哪些属性不可以继承？

CSS如何计算选择器优先？

CSS3新增伪类有哪些？

请列举几种隐藏元素的方法

rgba() 和 opacity 的透明效果有什么不同？

css 属性 content 有什么作用？

CSS3有哪些新特性？

请解释一下 CSS3 的 Flexbox（弹性盒布局模型）以及适用场景？

经常遇到的浏览器的JS兼容性有哪些？解决方法是什么？

li与li之间有看不见的空白间隔是什么原因引起的？有什么解决办法？

什么是外边距重叠？ 重叠的结果是什么？

请写出多种等高布局

css垂直居中的方法有哪些？

.vertical {
      height: 100px;
      line-height: 100px;
    }

.container {
  position: relative;
}
.vertical {
  height: 300px;  /*子元素高度*/
  position: absolute;
  top:50%;  /*父元素高度50%*/
  margin-top: -150px; /*自身高度一半*/
}

.container {
      display: table;
    }
    .content {
      display: table-cell;
      vertical-align: middle;
    }



.container {
  height: 100%;/*定义父级高度，作为参考*/
}
.extra .vertical{
  display: inline-block;  /*行内块显示*/
  vertical-align: middle; /*垂直居中*/
}
.extra {
  height: 100%; /*设置新增元素高度为100%*/
}

.vertical {
  position: absolute;
  top:50%;  /*父元素高度50%*/
  transform:translateY(-50%, -50%);
}

.container {
  display:flex;
  justify-content: center; /*子元素水平居中*/
  align-items: center; /*子元素垂直居中*/
}

圣杯布局的实现原理？

  .container {
      padding-left: 150px;
      padding-right: 190px;
  }
  .main {
      float: left;
      width: 100%;
  }
  .left {
      float: left;
      width: 190px;
      margin-left: -100%;
      position: relative;
      left: -150px;
  }
  .right {
      float: left;
      width: 190px;
      margin-left: -190px;
      position: relative;
      right: -190px;
  }

什么是双飞翼布局？实现原理？

.container {
    /*padding-left:150px;*/
    /*padding-right:190px;*/
}
.main-wrap {
    width: 100%;
    float: left;
}
.main {
    margin-left: 150px;
    margin-right: 190px;
}
.left {
    float: left;
    width: 150px;
    margin-left: -100%;
    /*position: relative;*/
    /*left:-150px;*/
}
.right {
    float: left;
    width: 190px;
    margin-left: -190px;
    /*position:relative;*/
    /*right:-190px;*/
}

在CSS样式中常使用 px、em 在表现上有什么区别？

为什么要初始化CSS样式？

解释下什么是浮动和它的工作原理？

浮动元素引起的问题？

列举几种清除浮动的方式？

清除浮动最佳实践（after伪元素闭合浮动）：

.clearfix:after{
    content: "\200B";
    display: table; 
    height: 0;
    clear: both;
  }
  .clearfix{
    *zoom: 1;
  }

什么是 FOUC(Flash of Unstyled Content)？ 如何来避免 FOUC？

介绍使用过的 CSS 预处理器？

CSS优化、提高性能的方法有哪些？

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

在网页中的应该使用奇数还是偶数的字体？

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

抽离样式模块怎么写，说出思路？

元素竖向的百分比设定是相对于容器的高度吗？

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

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

$(window).resize(function () {
  screenRespond();
});
screenRespond();
function screenRespond(){
var screenWidth = $(window).width();
if(screenWidth <= 1800){
  $("body").attr("class", "w1800");
}
if(screenWidth <= 1400){
  $("body").attr("class", "w1400");
}
if(screenWidth > 1800){
  $("body").attr("class", "");
}
}

什么是视差滚动效果，如何给每页做不同的动画？

a标签上四个伪类的执行顺序是怎么样的？

link > visited > hover > active

伪元素和伪类的区别和作用？

p::before {content:"第一章：";}
p::after {content:"Hot!";}
p::first-line {background:red;}
p::first-letter {font-size:30px;}


a:hover {color: #FF00FF}
p:first-child {color: red}

::before 和 :after 中双冒号和单冒号有什么区别？

如何修改Chrome记住密码后自动填充表单的黄色背景？

input [type=search] 搜索框右侧小图标如何美化？

input[type="search"]::-webkit-search-cancel-button{
  -webkit-appearance: none;
  height: 15px;
  width: 15px;
  border-radius: 8px;
  background:url("images/searchicon.png") no-repeat 0 0;
  background-size: 15px 15px;
}

网站图片文件，如何点击下载？而非点击预览？

<a href="logo.jpg" download>下载</a> <a href="logo.jpg" download="网站LOGO" >下载</a>

iOS safari 如何阻止“橡皮筋效果”？

  $(document).ready(function(){
      var stopScrolling = function(event) {
          event.preventDefault();
      }
      document.addEventListener('touchstart', stopScrolling, false);
      document.addEventListener('touchmove', stopScrolling, false);
  });

你对 line-height 是如何理解的？

line-height 三种赋值方式有何区别？（带单位、纯数字、百分比）

设置元素浮动后，该元素的 display 值会如何变化？

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

  .shrink{
    -webkit-transform:scale(0.8);
    -o-transform:scale(1);
    display:inline-block;
  }

让页面里的字体变清晰，变细用CSS怎么做？（IOS手机浏览器字体齿轮设置）

  -webkit-font-smoothing: antialiased;

font-style 属性 oblique 是什么意思？

如果需要手动写动画，你认为最小时间间隔是多久？

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

overflow: scroll 时不能平滑滚动的问题怎么处理？

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