HTML/CSS常用总结

1.主流浏览器及其内核

• IE–trident
• Firefox–Gecko
• Google chrome–blink
• Safari–webkit
• Opera–presto

2.主流浏览器及其内核

• 伪类:hover–不占DOM结构
• 伪元素:before, :after–占DOM结构

3.垂直水平居中

1.块级元素水平居中
margin: 0 auto;
2.块级元素，行级块元素垂直水平居中

• 子元素已知宽度:：父元素设置为：position: relative; 子元素设置为：position: absolute; 利用top50%，left50%，margin-left，margin-top
• 子元素未知宽度：父元素设置为：position: relative; 子元素设置为：position: absolute; 利用top50%，left50%，transform: translate(-50%,-50%);

3.所有元素垂直水平居中
flex布局

display: flex;
justify-content: center;//使子项目水平居中
align-items: center;//使子项目垂直居中
4.两栏布局

• 绝对定位
  .left {position:absolute;left:0; width:200px;}
  .right {margin-left:200px;}
• 浮动布局
  .left {width:300px; float:left;}
  .right { margin-left:300px;}
• flex布局

5.解决margin塌陷

• 触发一个盒子的 bfc//bfc=block format context 块级格式化上下文
  position:absolute；display:inline；float:left/rightoverflow:hidden；

6.清楚浮动
clearfix::after{
content:””；
clear:both；
display:block；}
7.background简写
background: [background-color] [background-image] [background-repeat] [background-attachment] [background-position] / [ background-size] [background-origin] [background-clip];