一些样式总结

1.css宽度不够时不换行且隐藏 

overflow: hidden;         
white-space: nowrap;

2.加了标签</br>后发现间距过宽 可能是行高设置大了

3.z-index 失效原因可能是因为

1. 父标签 position属性为relative；
2. 问题标签无position属性（不包括static）；
3. 问题标签含有浮动(float)属性。
4. 加了overflow:hidden

4.阴影

background-color: #ffffff;

box-shadow: -3px -1px 20px 2px rgba(0, 0, 0, 0.2);

效果图：

5.1 让内容居中

（1）针对inline, 内联块inline-block, 内联表inline-table, inline-flex元素及img,span,button等元素
 

.text_div{
    text-align:center;
}

（2）不定宽块状元素居中（且需要设置父级宽度）

.text_div{
    margin:0 auto;
}

（3）通过给父元素设置 float，然后给父元素设置 position:relative 和 left:50%，子元素设置 position:relative 和 left: -50% 来实现水平居中。

.wrap{
    float:left;
    position:relative;
    left:50%;
    clear:both;
}
.wrap-center{
    left:-50%;
}

5.2垂直居中
 

（1）单行内联(inline-)元素垂直居中 

通过设置内联元素的高度(height)和行高(line-height)相等，从而使元素垂直居中。

.text_div{
    height: 120px;
    line-height: 120px;
}

（2）利用表布局

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

（3）flex布局

.center-flex {
    display: flex;
    flex-direction: column;//上下排列
    justify-content: center;
}

（4）绝对布局方式
         已知高度

.parent {
  position: relative;
}
.child {
  position: absolute;
  top: 50%;
  height: 100px;
  margin-top: -50px; 
}

      未知高度

.parent {
    position: relative;
}
.child {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}

（5）垂直水平居中根据上方结合

        flex方式

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

      grid方式 

.parent {
  height: 140px;
  display: grid;
}
.child { 
  margin: auto;
}

 

6.pc页面居中

max-width: 960px;
margin: 0 auto;
padding-top: 20px;
display: flex;
justify-content: center;
//flex-wrap: wrap;

7.几种获得宽高的方式

dom.style.width/height该种方法获取dom的宽高只能获取到html中的行内样式

dom.offsetWidth/offsetHeight可以获取dom的实际宽高

拓展 各种获得宽高的方式

• 获取屏幕的高度和宽度（屏幕分辨率）： window.screen.height/width
• 获取屏幕工作区域的高度和宽度（去掉状态栏）： window.screen.availHeight/availWidth
• 网页全文的高度和宽度： document.body.scrollHeight/Width
• 滚动条卷上去的高度和向右卷的宽度： document.body.scrollTop/scrollLeft
• 网页可见区域的高度和宽度（不加边线）： document.body.clientHeight/clientWidth
• 网页可见区域的高度和宽度（加边线）： document.body.offsetHeight/offsetWidth

8.css中“~”和“>”是什么意思:

• css中“~”是:为所有相同的父元素中位于 p 元素之后的所有 ul 元素设置背景：

 

8.边距重叠解决方案(BFC) BFC原理

9.css reset 和 normalize.css 有什么区别

Normalize.css 只是一个很小的CSS文件，但它在默认的HTML元素样式上提供了跨浏览器的高度一致性。相比于传统的CSS reset，Normalize.css是一种现代的、为HTML5准备的优质替代方案。