响应式布局

弹性布局flex-grow用法

给左边设宽度后,右边的平分剩余空间

.left {
      width:260px;
      }
.right {
flex-grow:1;
}

伪类选择器加图片方法

.chat dd p:before {
        content:url()
}

响应式布局

1. 宽度百分比
2. 高度自适应
3. 区分不同屏幕大小

媒体查询

/*手机端*/
@media screen and (max-width:767px) {

}
/*平板*/
@media screen and (min-width:768px) and (max-width:1200px) {

}
/*pc端*/
@media screen and (min-width:1201px and (max-width:12000px) {

}

1. 高度可以写固定值，宽度不可
2. 给标签价上s1属性，可以实现单行省略

pc端版心

.xw {
    max-width:1200px;
    margin:auto;

给li加边框内边距怎么保证盒子不被撑下去？

box-sizing:border-box;

怎么强制盒子不收缩？

flex-shrink:0;