HTML和CSS高级

CSS技巧

1.CSS3 calc() 的使用

calc() 用法类似于函数，能够给元素设置动态的值：

/* basic calc */
.simpleBlock {
  width: calc(100% - 100px);
}

/* calc in calc */
.complexBlock {
  width: calc(100% - 50% / 3);
  padding: 5px calc(3% - 2px);
  margin-left: calc(10% + 10px);
}

使用calc()时运算符之间要有空格，否则可能无效

2. 黑白图像

这段代码会让你的彩色照片显示为黑白照片，是不是很酷？

img.desaturate {
    filter: grayscale(100%);
    -webkit-filter: grayscale(100%);
    -moz-filter: grayscale(100%);
    -ms-filter: grayscale(100%);
    -o-filter: grayscale(100%);
}

3. 使用 :not() 在菜单上应用/取消应用边框

先给每一个菜单项添加边框

/* add border */
.nav li {
  border-right: 1px solid #666;
}

……然后再除去最后一个元素……

// remove border /
.nav li:last-child {
  border-right: none;
}

可以直接使用 :not() 伪类来应用元素：

.nav li:not(:last-child) {
  border-right: 1px solid #666;
}

这样代码就干净，易读，易于理解了。
当然，如果你的新元素有兄弟元素的话，也可以使用通用的兄弟选择符（~）：

.nav li:first-child ~ li {
  border-left: 1px solid #666;
}

4. 页面顶部阴影

下面这个简单的 CSS3 代码片段可以给网页加上漂亮的顶部阴影效果：

body:before {
          content: "";
          position: fixed;
          top: -10px;
          left: 0;
          width: 100%;
          height: 10px;

          -webkit-box-shadow: 0px 0px 10px rgba(0,0,0,.8);
          -moz-box-shadow: 0px 0px 10px rgba(0,0,0,.8);
          box-shadow: 0px 0px 10px rgba(0,0,0,.8);

          z-index: 100;
}

5. 继承 box-sizing

让 box-sizing 继承 html：

html {
  box-sizing: border-box;
}

*, *:before, *:after {
  box-sizing: inherit;
}

这样在插件或杠杆其他行为的其他组件中就能更容易地改变 box-sizing 了。
bootstrap就是这样实现的

6. 表格单元格等宽

表格工作起来很麻烦，所以务必尽量使用 table-layout: fixed 来保持单元格的等宽：

.calendar {
  table-layout: fixed;
}

7. 使用属性选择器用于空链接

当a元素没有文本值，但 href 属性有链接的时候显示链接：

a[href^"http"]:empty::before {
  content: attr(href);
}

8. 文本渐变

文本渐变效果很流行，使用 CSS3 能够很简单就实现：

h2[data-text] {
  position: relative;
}
h2[data-text]::after {
  content: attr(data-text);
  z-index: 10;
  color: #e3e3e3;
  position: absolute;
  top: 0;
  left: 0;
  -webkit-mask-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0,0,0,0)), color-stop(50%, rgba(0,0,0,1)), to(rgba(0,0,0,0)));}

9. 禁用鼠标事件

CSS3 新增的 pointer-events 让你能够禁用元素的鼠标事件，例如，一个连接如果设置了下面的样式就无法点击了。

.disabled { pointer-events: none; }

10. 模糊文本

简单但很漂亮的文本模糊效果，简单又好看！

.blur {
   color: transparent;
   text-shadow: 0 0 5px rgba(0,0,0,0.5);
}

11.user-select 禁止用户选中文本

div {
    user-select: none; /* Standard syntax */
}

12.清除手机tap事件后element 时候出现的一个高亮

* {
    -webkit-tap-highlight-color: rgba(0,0,0,0);
}

13.修改浏览器的滚动条样式 ::-webkit-scrollbar-thumb

可以修改浏览器的滚动条样式。IE火狐可能不支持。

14.使用CSS transforms 或者 animations时可能会有页面闪烁的bug

-webkit-backface-visibility: hidden;

15.-webkit-touch-callout 禁止长按链接与图片弹出菜单

-webkit-touch-callout: none;

16.css实现不换行、自动换行、强制换行

//不换行
white-space:nowrap;

//自动换行
word-wrap: break-word; 
word-break: normal; 

//强制换行
word-break:break-all;

17.垂直居中

<div class"box box1"><span>我是垂直居中元素</span></div>
<div class"box box2"><span>我是垂直居中元素</span></div>
<div class"box box3"><span>我是垂直居中元素</span></div>
<div class"box box4"><span>我是垂直居中元素</span></div>
<div class"box box5"><span>我是垂直居中元素</span></div>
<div class"box box6"><span>我是垂直居中元素</span></div>

方法1：dispaly:table-cell

.box1{ text-align:center; display:table-cell; vertical-align:middle; }

方法2：display:flex

.box2{ display:flex; justify-content:center; align-items:center; text-align:center; }

方法3：translate(-50%,-50%)

.box3{ position:relative;} .box3 span{ position:absolute; left:50%; top:50%; -webkit-transform:translate(-50%,-50%); width:100%; text-align:center; }

方法4：display:inline-block

.box4{ text-align:center; font-size:0; } 
.box4 span{ vertical-align:middle; display:inline-block; font-size:16px; } 
.box4:after{ content:''; width:0; height:100%; display:inline-block; vertical-align:middle; }

方法5：margin:auto

.box5{ display:flex; text-align:center; } .box5 span{ margin:auto; }

方法6：display:-webkit-box

.box6{ display:-webkit-box; -webkit-box-pack: center; -webkit-box-align: center; text-align:center; }

18.内容两端对齐

方法一：使用text-align:justify

text-align:justify 属性是全兼容的，使用它实现两端对齐，需要注意在模块之间添加[空格/换行符/制表符]才能起作用，同样，实现文本对齐也是需要在字与字之间添加[空格/换行符/制表符]才能起作用

<div class"demo">
    <a class"link" href="#none">10元</a>
    <a class"link" href="#none">20元</a>
    <a class"link" href="#none">30元</a>
    <a class"link" href="#none">50元</a>
</div>
*{margin:0;padding:0;}
/* 
 说明：
 1.IE中要实现块内单行两端对齐需要使用其私有属性text-align-last:justify配合，text-align-last 要生效，必须先定义text-align 为justify
 2.line-height:0 解决标准浏览器容器底部多余的空白
*/
.demo{
     text-align:justify;
     text-align-last:justify;
     line-height:0;
     height:44px;
}
/*
 说明：
 模块使用[换行符]或[空格符]后，`webkit`浏览器中会引起最后一个模块有多余空白，使用`font-size:0`可清除该空格
*/
@media all and (-webkit-min-device-pixel-ratio:0){
    .demo{
         font-size:0;
    }
}
 /* 
 说明：
 1.text-align-last:justify 目前只有IE支持，标准浏览器需要使用 .demo:after 伪类模拟类似效果 
 2.opera浏览器需要添加 vertical-align:top 才能完全解决底部多余的空白
 */
.demo:after{
     display:inline-block;
     overflow:hidden;
     width:100%;
     height:0;
     content:'';
     vertical-align:top;
}
.demo a{
     width:20%;
     display:inline-block;
     height:44px;
     line-height:44px;
     text-align:center;
     border:1px solid #428cc8;
     color:#666;
     font-size:16px;
     margin-bottom:5px;
     border-radius:3px;
     background-color:#fefefe;
     color:#666;
     text-decoration:none;
}

方法二 使用justify-content:space-between
box-pack是css3的新属性，依赖于display:box(旧版弹性布局)，受box-orient影响，box-pack决定了子标签水平对齐的方式，可选值有start | end | center | justify。使用box-pack:justify来实现两端对齐非常简单，代码量也少。为了向前看齐，把display:flex(新版弹性布局)也一起写进去

<div class"demo">
    <a class"link" href"#none">10元</a>
    <a class"link" href"#none">20元</a>
    <a class"link" href"#none">30元</a>
    <a class"link" href"#none">50元</a>
</div>
*{margin:0;padding:0;}
/*
 说明：
 display:box定义布局为盒模型后，可使用盒模型下的box-pack:justify属性
*/
.demo{
    display:-webkit-box;
    display:-webkit-flex;
    display:-ms-flexbox;
    display:flex;
    -webkit-box-pack:justify;
    -webkit-justify-content:space-between;
    -ms-flex-pack:justify;
    justify-content:space-between;
}

.demo a{
     width:20%;
     display:block;
     height:44px;
     line-height:44px;
     text-align:center;
     border:1px solid #428cc8;
     color:#666;
     font-size:16px;
     margin-bottom:5px;
     border-radius:3px;
     background-color:#fefefe;
     color:#666;
     text-decoration:none;
}

方法三 使用column(多列布局)

<div class"demo">
    <a class"link" href"#none">10元</a>
    <a class"link" href"#none">20元</a>
    <a class"link" href"#none">30元</a>
    <a class"link" href"#none">50元</a>
</div>
*{margin:0;padding:0;}
/* 
 说明：
 1.`column-count`定义了对象的列数,例子中有4个模块，那么定义为4列
 2.`column-gap`定义了对象中列与列的间距，间距不能设置为百分比，显得不够灵活
*/
.demo{
     -webkit-column-count:4;-moz-column-count:4;column-count:4;
     -webkit-column-gap:20px;-moz-column-gap:20px;column-gap:20px; 
}

.demo a{
     display:block;
     height:44px;
     line-height:44px;
     text-align:center;
     border:1px solid #428cc8;
     color:#666;
     font-size:16px;
     margin-bottom:5px;
     border-radius:3px;
     background-color:#fefefe;
     background-image:-webkit-gradient(linear,left top,left bottom,color-stop(0,#fefefe),color-stop(1,#eee));
     color:#666;
     text-decoration:none;
}

19.will-change提高页面滚动、动画等渲染性能

/* 关键字值 */
will-change: auto;
will-change: scroll-position;
will-change: contents;
will-change: transform;        /* <custom-ident>示例 */
will-change: opacity;          /* <custom-ident>示例 */
will-change: left, top;        /* 两个<animateable-feature>示例 */

will-change的使用也要谨慎，遵循最小化影响原则，不要这样直接写在默认状态中，因为will-change会一直挂着：

.will-change {
  will-change: transform;
  transition: transform 0.3s;
}
.will-change:hover {
  transform: scale(1.5);
}

可以让父元素hover的时候，声明will-change，这样，移出的时候就会自动remove，触发的范围基本上是有效元素范围。

.will-change-parent:hover .will-change {
  will-change: transform;
}
.will-change {
  transition: transform 0.3s;
}
.will-change:hover {
  transform: scale(1.5);
}

如果使用JS添加will-change, 事件或动画完毕，一定要及时remove. 比方说点击某个按钮，其他某个元素进行动画。点击按钮(click)，要先按下(mousedown)再抬起才出发。因此，可以mousedown时候打声招呼, 动画结束自带回调，于是（示意，不要在意细节）：

dom.onmousedown  function() {
    target.style.willChange  'transform';
};
dom.onclick  function() {
    // target动画哔哩哔哩...
};
target.onanimationend  function() {
    // 动画结束回调，移除will-change
    this.style.willChange  'auto';
};

20.伪元素实现换行，替代换行标签

《CSS SECRET》 中对 br 标签的描述是，这种方法不仅在可维护性方面是一种糟糕的实践，而且污染了结构层的代码，运用 after 伪元素，可以有一种非常优雅的解决方案

inline-element ::after{
       content:"\A";
       white-space: pre;
}

通过给元素的 after 伪元素添加 content 为 “\A” 的值。这里 \A 表示的是什么呢？有一个 Unicode 字符是专门代表换行符的：0x000A 。 在 CSS 中，这个字符可以写作 “\000A”， 或简化为 “\A”。这里我们用它来作为 ::after 伪元素的内容。也就是在元素末尾添加了一个换行符的意思。而 white-space: pre; 的作用是保留元素后面的空白符和换行符，结合两者，就可以轻松实现在行内级元素末尾实现换行。

21.增强用户体验，使用伪元素实现增大点击热区

    尤其是在移动端，按钮通常都很小，但是有时由于设计稿限制，我们不能直接去改变按钮元素的高宽。那么这个时候有什么办法在不改变按钮原本大小的情况下去增加他的点击热区呢？这里，伪元素也是可以代表其宿主元素来响应的鼠标交互事件的。借助伪元素可以轻松帮我们实现，我们可以这样写：

.btn::befoer{
    content:"";
    position:absolute;
    top:-10px;
    right:-10px;
    bottom:-10px;
    left:-10px;
}

22.clip属性，截取你想要显示的图片

img {
    position: absolute;
    clip: rect(0px,60px,200px,0px);
}

23.设置文字，字母间距，很实用 letter-spacing

h1 {
    letter-spacing: *px; //也可以是负数
}

HTML技巧

1.刷新和跳转

< meta http-equiv“Refresh” Content“30″> 
<!--页面30秒刷新一次-->
< meta http-equiv”Refresh“ Content”5; Urlhttp://www.autohome.com.cn“ />    
<!--5秒后自动跳转到后面地址-->

知识点

1.line-height:150%和line-height:1.5的区别

line-height有单位时，子元素是继承父元素的line-height的，无单位时，其line-height等于无单位的数值乘以子元素本身的字体大小。显然为了不出现意外，还是建议首选无单位的。

2.width：100%

当父容器里有绝对定位的子元素时，子元素设置width:100%实际上指的是相对于父容器的padding+content的宽度。当子元素是非绝对定位的元素时width:100%才是指子元素的content，其等于父元素的content宽度。
将子元素的position改成了relative后，其宽度就变成了parent宽度。

3.top、bottom单位为百分比时

含有定位属性的元素，其top、bottom单位为百分比时，该百分比是相对于父元素的高度的。同理，left、right则是相对于父元素的宽度的。

4.width和height都是相对于父元素的content的宽高

当box-sizing:border-box;时父元素的content的长宽会因为border,padding影响而变小，改变父元素的宽高会改变子元素设置百分比的宽高。