面试BAT，你凭什么说你掌握了CSS

摘要：控制表单控件的禁用状态。老不支持生成绝对定位的元素，相对于浏览器窗口进行定位。生成相对定位的元素，相对于其正常位置进行定位。由于浮动框不在文档的普通流中，所以文档的普通流的块框表现得就像浮动框不存在一样。

项目已经开源：https://github.com/nanhupatar... 欢迎PR

关注我们的公众号

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

区别：

display:none;会让元素完全从渲染树中消失，渲染的时候不占据任何空间；visibility: hidden;不会让元素从渲染树消失，渲染师元素继续占据空间，只是内容不可见

display: none;是非继承属性，子孙节点消失由于元素从渲染树消失造成，通过修改子孙节点属性无法显示；visibility:hidden;是继承属性，子孙节点消失由于继承了 hidden，通过设置 visibility: visible;可以让子孙节点显式

修改常规流中元素的 display 通常会造成文档重排。修改 visibility 属性只会造成本元素的重绘

读屏器不会读取 display: none;元素内容；会读取 visibility: hidden 元素内容

原理：利用不同浏览器对 CSS 的支持和解析结果不一样编写针对特定浏览器样式。常见的 hack 有 1）属性 hack。2）选择器 hack。3）IE 条件注释

IE 条件注释：适用于[IE5, IE9]常见格式如下

选择器 hack：不同浏览器对选择器的支持不一样

/***** Selector Hacks ******/

/* IE6 and below */
* html #uno  { color: red }

/* IE7 */
*:first-child+html #dos { color: red }

/* IE7, FF, Saf, Opera  */
html>body #tres { color: red }

/* IE8, FF, Saf, Opera (Everything but IE 6,7) */
html>/**/body #cuatro { color: red }

/* Opera 9.27 and below, safari 2 */
html:first-child #cinco { color: red }

/* Safari 2-3 */
html[xmlns*=""] body:last-child #seis { color: red }

/* safari 3+, chrome 1+, opera9+, ff 3.5+ */
body:nth-of-type(1) #siete { color: red }

/* safari 3+, chrome 1+, opera9+, ff 3.5+ */
body:first-of-type #ocho {  color: red }

/* saf3+, chrome1+ */
@media screen and (-webkit-min-device-pixel-ratio:0) {
 #diez  { color: red  }
}

/* iPhone / mobile webkit */
@media screen and (max-device-width: 480px) {
 #veintiseis { color: red  }
}

/* Safari 2 - 3.1 */
html[xmlns*=""]:root #trece  { color: red  }

/* Safari 2 - 3.1, Opera 9.25 */
*|html[xmlns*=""] #catorce { color: red  }

/* Everything but IE6-8 */
:root *> #quince { color: red  }

/* IE7 */
*+html #dieciocho {  color: red }

/* Firefox only. 1+ */
#veinticuatro,  x:-moz-any-link  { color: red }

/* Firefox 3.0+ */
#veinticinco,  x:-moz-any-link, x:default  { color: red  }

属性 hack：不同浏览器解析 bug 或方法

/* IE6 */
#once { _color: blue }

/* IE6, IE7 */
#doce { *color: blue; /* or #color: blue */ }

/* Everything but IE6 */
#diecisiete { color/**/: blue }

/* IE6, IE7, IE8 */
#diecinueve { color: blue9; }

/* IE7, IE8 */
#veinte { color/***/: blue9; }

/* IE6, IE7 -- acts as an !important */
#veintesiete { color: blue !ie; } /* string after ! can be anything */

link 是 HTML 方式， @import 是 CSS 方式

link 最大限度支持并行下载，@import 过多嵌套导致串行下载，出现 FOUC

link 可以通过 rel="alternate stylesheet" 指定候选样式

浏览器对 link 支持早于@import ，可以使用 @import 对老浏览器隐藏样式

@import 必须在样式规则之前，可以在 css 文件中引用其他文件

总体来说：link 优于@import

关于文字排版的属性如：

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 为 none，那么 position 和 float 都不起作用，这种情况下元素不产生框

否则，如果 position 值为 absolute 或者 fixed，框就是绝对定位的，float 的计算值为 none，display 根据下面的表格进行调整

否则，如果 float 不是 none，框是浮动的，display 根据下表进行调整

否则，如果元素是根元素，display 根据下表进行调整

其他情况下 display 的值为指定值 总结起来：绝对定位、浮动、根元素都需要调整 display

外边距重叠就是 margin-collapse

相邻的两个盒子（可能是兄弟关系也可能是祖先关系）的外边距可以结合成一个多带带的外边距。 这种合并外边距的方式被称为折叠，结合而成的外边距称为折叠外边距

折叠结果遵循下列计算规则：

两个相邻的外边距都是正数时，折叠结果是它们两者之间较大的值

两个相邻的外边距都是负数时，折叠结果是两者绝对值的较大值

两个外边距一正一负时，折叠结果是两者的相加的和

有两种， IE 盒子模型、W3C 盒子模型；

盒模型： 内容(content)、填充(padding)、边界(margin)、 边框(border)；

标准(W3C)盒模型：元素宽度 = width + padding + border + margin

怪异(IE)盒模型：元素宽度 = width + margin

区 别： IE 的 content 部分把 border 和 padding 计算了进去;

标准浏览器通过设置 css3 的 box-sizing: border-box 属性，触发“怪异模式”解析计算宽高

id 选择器（ # myid）

类选择器（.myclassname）

标签选择器（div, h1, p）

相邻选择器（h1 + p）

子选择器（ul > li）

后代选择器（li a）

通配符选择器（ * ）

属性选择器（a[rel = "external"]）

伪类选择器（a:hover, li:nth-child）

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

元素的每个

元素。

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

元素的每个

元素。

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

元素的每个

元素。

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

元素。

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

元素。

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

:before 在元素之后添加内容

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

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

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

如果需要居中的元素为常规流中 inline 元素，为父元素设置 text-align: center;即可实现

如果需要居中的元素为常规流中 block 元素，1）为元素设置宽度，2）设置左右 margin 为 auto。3）IE6 下需在父元素上设置 text-align: center;,再给子元素恢复需要的值

    

    aaaaaa aaaaaa a a a a a a a a
    

如果需要居中的元素为浮动元素，1）为元素设置宽度，2）position: relative;，3）浮动方向偏移量（left 或者 right）设置为 50%，4）浮动方向上的 margin 设置为元素宽度一半乘以-1

    

    aaaaaa aaaaaa a a a a a a a a
    

如果需要居中的元素为绝对定位元素，1）为元素设置宽度，2）偏移量设置为 50%，3）偏移方向外边距设置为元素宽度一半乘以-1

    

    aaaaaa aaaaaa a a a a a a a a
    

如果需要居中的元素为绝对定位元素，1）为元素设置宽度，2）设置左右偏移量都为 0,3）设置左右外边距都为 auto

    

    aaaaaa aaaaaa a a a a a a a a
    

绝对定位居中

如果居中的是行内元素，可以设置父级 height 与 line-height 相等

设置 margin/padding 居中

相对位置偏移居中

flex 居中 设置 align-items:center 即可

block 象块类型元素一样显示。

none 缺省值。象行内元素类型一样显示。

inline-block 象行内元素一样显示，但其内容象块类型元素一样显示。

list-item 象块类型元素一样显示，并添加样式列表标记。

table 此元素会作为块级表格来显示

inherit 规定应该从父元素继承 display 属性的值

absolute 生成绝对定位的元素，相对于值不为 static 的第一个父元素进行定位。

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

relative 生成相对定位的元素，相对于其正常位置进行定位。

static 默认值。没有定位，元素出现在正常的流中（忽略 top, bottom, left, right - z-index 声明）。

inherit 规定从父元素继承 position 属性的值

新增选择器 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);

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

简单的方式：

上面的 div 宽 100%，

下面的两个 div 分别宽 50%，

然后用 float 或者 inline 使其不换行即可

png24 位的图片在 iE6 浏览器上出现背景，解决方案是做成 PNG8.

浏览器默认的 margin 和 padding 不同。解决方案是加一个全局的*{margin:0;padding:0;}来统一

IE 下,可以使用获取常规属性的方法来获取自定义属性,也可以使用 getAttribute()获取自定义属性;

Firefox 下,只能使用 getAttribute()获取自定义属性。解决方法:统一通过 getAttribute()获取自定义属性

IE 下,even 对象有 x,y 属性,但是没有 pageX,pageY 属性

Firefox 下,event 对象有 pageX,pageY 属性,但是没有 x,y 属性

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

移除空格、使用 margin 负值、使用 font-size:0、letter-spacing、word-spacing

相邻的 inline-block 元素之间有换行或空格分隔的情况下会产生间距

非 inline-block 水平元素设置为 inline-block 也会有水平间距

可以借助 vertical-align:top; 消除垂直间隙

可以在父级加 font-size：0; 在子元素里设置需要的字体大小，消除垂直间隙

把 li 标签写到同一行可以消除垂直间隙，但代码可读性差

// 以下是权重的规则：标签的权重为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{}

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

优先级就近原则，同权重情况下样式定义最近者为准

载入样式以最后载入的为准

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

浮动的框可以向左或向右移动，直到他的外边缘碰到包含框或另一个浮动框的边框为止。由于浮动框不在文档的普通流中，所以文档的普通流的块框表现得就像浮动框不存在一样。浮动的块框会漂浮在文档普通流的块框上

解决方法

父级 div 定义伪类：after 和 zoom (推荐使用，建议定义公共类，以减少 CSS 代码)

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

   .clearfloat{zoom:1}

在结尾处添加空 div 标签 clear:both

    
Left
    
Right
    



.left {float:left}
.clearfloat{clear:both}

父级 div 定义 height

父级 div 定义 overflow:auto

父级 div 定义 overflow:hidden

父级 div 也一起浮动

父级 div 定义 display:table

结尾处加 br 标签 clear:both

参考链接几种常用的清除浮动方法

box-sizing: content-box; // 默认的标准(W3C)盒模型元素效果

box-sizing: border-box; // 触发怪异(IE)盒模型元素的效果

box-sizing: inherit; // 继承父元素 box-sizing 属性的值

visibility: hidden; 这个属性只是简单的隐藏某个元素，但是元素占用的空间任然存在

opacity: 0; CSS3 属性，设置 0 可以使一个元素完全透明

position: absolute; 设置一个很大的 left 负值定位，使元素定位在可见区域之外

display: none; 元素会变得不可见，并且不会再占用文档的空间。

transform: scale(0); 将一个元素设置为缩放无限小，元素将不可见，元素原来所在的位置将被保留

  .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;*/
}

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    font-size: 100%;
    vertical-align: baseline;
    background: transparent;
}
body {
    line-height: 1;
}
ol, ul {
    list-style: none;
}
blockquote, q {
    quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
    content: "";
    content: none;
}
/* remember to define focus styles! */
:focus {
    outline: 0;
}
/* remember to highlight inserts somehow! */
ins {
    text-decoration: none;
}
del {
    text-decoration: line-through;
}
/* tables still need ‘cellspacing=”0″‘ in the markup */
table {
    border-collapse: collapse;
    border-spacing: 0;
}

$(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", "");
    }
}

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}

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;
}

下载 下载

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

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

  -webkit-font-smoothing: antialiased;

• 上一篇：图解一下啥是CSS堆叠上下文，啥是CSS堆叠层叠顺序，让你对css的疑惑少一点?
• 下一篇：前端进阶系列(六):盒模型