css总结

1、盒子模型

• W3C标准盒子模型：width = content的宽度，盒子总width = width + padding +border + margin
• IE盒子模型：width = content + padding + border的宽度，盒子总width = width + margin

box-sizing：content-box | border-box | inherit

• content-box 默认值，元素的width/height不包含padding，border，与W3C标准盒子模型一致
• border-box,元素的width/height包含padding，border，与IE盒子模型一致
• inherit，从父元素继承 

 2、BFC

BFC是块级格式上下文，是页面中的一块渲染区域

触发条件：

• 根元素（HTML元素）
• float: left | right
• overflow：auto | scroll | hidden
• display：inline-block | flex | inline-flex | grid | inline-grid
• position：absolute | fixed

应用场景：

•  防止margin重叠：两个p元素发生margin重叠，以最大的为准，可以在p元素外面加个容器，overflow：hidden触发这个容器生成一个BFC，那么两个p元素就不属于同一个BFC，就会解决margin重叠问题
• 父元素高度没有：一个父元素下面有两个子元素，两个子元素都设置了浮动，导致父元素高度为0，BFC在计算高度时，浮动的元素也会参与，所以我们可以设置父元素overflow：hidden触发BFC，内部浮动的元素也会计算高度，就是解决父元素高度为0问题
• 自适应多栏布局：body设置了固定宽度，里有两个元素，第一个元素设置了左浮动和宽度，两个元素重叠，BFC区域不会与浮动元素重叠，我们给第二个元素设置overflow：hidden触发生成BFC，会使第二个元素宽度自适应变窄

3、响应式设计

响应式设计：可以适配PC+平板+手机等各种设备下的页面设计布局

原理：通过媒体查询检测不同的设备屏幕尺寸进行适配页面布局，移动端，需要在页面头部加

<meta name="viewport" content="width=device-width, initial-scale=1, maximum
-scale=1, user-scalable=no”>

实现响应式布局方式：

• 媒体查询
• 百分比
• vw | vh
• rem

4、元素宽高不固定水平垂直居中的方法

• 定位+margin:auto

.father {
    position: relative;
}

.son {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
}

•  定位+margin: 负值

.father {
    position: relative;
}

.son {
    width: 100px;
    height: 100px;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-left: -50px;
    margin-top: -50px;
}

• 定位+transform 

.father {
    position: relative;
}

.son {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

•  table布局

.father {
    display: table-cell;
}

.son {
    display: inline-block;
}

• flex布局、grid布局

.father {
    display: flex:
    // display: grid;
    align-items: center;
    justify-content: center;
}

 5、实现两栏布局右侧自适应？三栏布局中间自适应

 两栏布局右侧自适应

// 方案一：
.father {
    overflow: hidden; // 父元素添加BFC区域
}

.left: {
    width: 100px;
    float: left; // 左边元素添加浮动
}

.right {
    margin-left: 110px;
}

// 方案二：
.father {
    display: flex;
}

.left {
    width: 100px;
}

.right {
    flex: 1;
}

 三栏布局中间自适应

// 方案一：两边float，中间margin
.father {
    overflow: hidden; // 生成BFC区域，计算高度时考虑浮动元素
}

.left {
    width: 100px;
    float: left;
}

.right {
    width: 120px;
    float: right;
}

.middle {
    margin-left: 120px;
    margin-right: 140px;
}

// 方案二：两边absolute，中间margin
.father {
    position: relative;
}

.left {
    position: absolute;
    top: 0;
    left: 0;
    width: 100px;
}

.right {
    position: absolute;
    top: 0;
    right: 0;
    width: 100px;
}

.middle {
    margin: 0 120px;
}

 6、继承属性

• 字体系列属性：font，font-family，font-weight，font-size，font-style，font-variant；
• 文本系列属性：text-indent，text-align，line-height，word-spacing，letter-spacing，text-transform，direction，color 

7、哪些方式可以隐藏页面元素 

• display：none;
• visibility：hidden;
• opacity：0;
• 设置width，height为0
• position：absolute
• clip-path 

8、实现单行 | 多行文本溢出省略号显示 

// 单行文本溢出省略号
p {
    width: 100px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

// 多行文本溢出省略号
p {
    width: 100px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

9、画一个三角形

// 实心三角
.border {
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 50px 50px;
    border-color: transparent transparent red;
}

// 空心三角
.border {
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 50px 50px;
    border-color: transparent transparent red;
    position: relative;
}

.border::after {
    content: '‘;
    border-style: solid;
    border-width: 0 40px 40px;
    border-color: transparent transparent #fff;
    position: absolute;
    top: 14px;
    left: 18px;
}

10、css3新增了哪些新特性

• 选择器：:first-of-type，:last-of-type，:nth-child(n)等
• flex弹性布局、grid栅格布局、媒体查询
• border-radius，box-shadow，border-image 
• background-clip，background-origin，background-size
• word-wrap，text-overflow，text-shadow
• transition(过渡)、transform(转换)、animation(动画)
• linear-gradient(线性渐变)，radial-gradient(径向渐变)

11、em|px|rem|vh|vw区别 

相对长度单位：em|rem|vw|vh|%;

绝对长度单位：px 

• 1em = 16px；为了简化fonti-size的换算，在body选择器中声明font-size = 62.5%，这就使em值为 16px * 62.5% = 10px；
• rem 与 em的区别：rem总是相对于根元素，em相对于级联的方式来计算尺寸

12、chrome如何支持小于12px的文字 

• zoom：50% | 0.5; // 缩小到原来的一半
• -webkit-transform：scale(0.8)；// 只对可以定义宽高的元素生效