知识总结[CSS篇]1. css布局，实现顶部高固定，左侧导航宽固定，右侧自适应 2. 三大定位，相对定位放在固定定位产

1. css布局，实现顶部高固定，左侧导航宽固定，右侧自适应

2. 三大定位，相对定位放在固定定位产生什么影响？

fixed、relative、absolute

相对定位和固定定位，都会使块级元素产生BFC，下面通过步骤检测一下

设置父元素为固定定位，不设置高度，内部box设置高度和宽度，根据BFC内部box垂直排列的特征，效果如下

<div class="sj">
    <div>1</div>
</div>

.sj{
    position: fixed;
    top: 0;
    left: 0;
    width: 200px;
    background-color: #ccc;
  }
  .sj>div{
    height: 20px;
    width: 100px;
    background-color: #2db7f5;
  }

若将内部box设为绝对定位，即内部box会产生BFC，根据BFC与外部互不影响的特征，内部box将无法撑起父元素高度，如下

.sj>div{
    height: 20px;
    width: 100px;
    position: absolute;
    background-color: #2db7f5;
}

3. 伪类和伪元素

伪类：向某些选择器设置特殊效果，用于选择器选择不到的元素

伪元素：向某些选择器添加特殊效果

伪类本质为了弥补选择器的不足，以此获取更多信息
伪元素创建一个新的虚拟容器，该容器内不包含dom节点，但可以添加内容，并且可对伪元素追加样式
伪类“:”，伪元素“::”
可以同时使用多个伪类，但同时只能使用一个伪元素

4. 纯css画三角形

👉 详解

5. CSS BFC是什么？

Block Formatting Context 块级可视化上下文

BFC是一个独立的块级渲染容器，拥有自己的渲染规则，不受外部影响，不影响外部

特征

内部box垂直往下排列
内部块元素受maigin特征的影响，上下外边距会塌陷
BFC区域不会遮盖浮动元素区域
计算BFC高度时，浮动元素高度也计算在内
BFC是独立渲染容器，外部元素不影响内部，反之亦然

产生条件

固定定位和绝对定位
float除了none外
overflow除了visible外（hidden、auto、scroll）
display为以下其一（inline-block、table-cell、table-caption）

作用

清除浮动
消除margin重叠
布局（左浮动，右BFC自适应）

6. 清除浮动的方式

1. 父元素设置伪类：clear:both + zoom:1

设置zomm为了兼容IE

<div class="parent1 clearFloat">
    <div class="left"></div>
</div>
<div class="parent2"></div>

.parent1{
    border: 1px solid red;
}
.parent2{
    height: 100px;
    border: 1px solid blue;
}
.left{
    width: 200px;
    height: 200px;
    background-color: #5cadff;
    float: left;
}
.clearfloat::after{
    display: block;
    clear: both;
    content: '';
    visibility: hidden;
    height: 0;
}
.clearfloat {
    zoom: 1
}

2. 结尾处添加空白标签：claer:both

<div class="parent1">
    <div class="left"></div>
    <div class="clearfloat"></div>
</div>
<div class="parent2"></div>

.clearfloat{
    clear: both;
}

3. 父元素产生BFC

BFC内浮动元素高度计算在内

7. 水平垂直居中的实现方式，尽可能多

margin参照父元素进行位置移动；transform参照自身
当不确定元素本身高度或者宽度时，则需使用transform属性
思考？哪些元素参考自身，哪些参考其他元素？

方法一、定位 + transform

.parent{
    height: 500px;
    width: 500px;
    border: 1px solid red;
    position: relative;
 }
 .child{
    height: 80px;
    width: 80px;
    background-color: #515A6E;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
 }

方法二、margin + transform

.parent{
    height: 500px;
    width: 500px;
    border: 1px solid red;
 }
 .child{
    height: 80px;
    width: 80px;
    background-color: #515A6E;
    margin: 50% 0 0 50%;
    transform: translate(-50%, -50%);
 }

方法三、定位 + 负margin

.parent{
    height: 500px;
    width: 500px;
    border: 1px solid red;
    position: relative;
 }
 .child{
    height: 80px;
    width: 80px;
    background-color: #515A6E;
    position: absolute;
    top: 50%;
    left: 50%;
    margin: -40px 0 0 -40px;
 }

方法四、flex

.parent{
    height: 500px;
    width: 500px;
    border: 1px solid red;
    display: flex;
    align-items: center;
    justify-content: center;
 }
 .child{
    height: 80px;
    width: 80px;
    background-color: #515A6E;
 }

方法五、table-cell

.parent{
    height: 500px;
    width: 500px;
    border: 1px solid red;
    display: table-cell;
    text-align: center;
    vertical-align: middle;
 }
 .child{
    display: inline-block;
    height: 80px;
    width: 80px;
    background-color: #515A6E;
 }

8. 盒模型

标准盒子模型

box-sizing: content-box;

width = content

IE盒子模型

box-sizing: border-box;

width = border + padding + content

9. 块级元素和行内元素的区别？img可设置宽高吗？

块级元素

独占一行，在默认情况下，其宽度自动填满其父元素的宽度
块级元素可以设置width、height属性
块级元素即使设置了宽度也是独占一行，块级元素可以设置margin、padding属性

行内元素

行内元素不会独占一行，相邻的行内元素会排列在同一行里，直到行排不下，就自动换行，其宽度随内容而变化
行内元素的width、height属性则无效
水平方向的padding、margin会产生边距效果，竖直方向的padding、margin不会产生边距效果

行内置换元素

浏览器依据元素的标签和属性来决定元素的具体显示内容

img、input、textarea、select、object属于行内置换元素，具有块级元素的特征（除宽度外）

10. absolute定位不设置top、right、bottom、left有什么效果？

元素脱离文档流，但因为没有设置属性导致无法具体定位，紧跟在上个元素之后，但下个元素排列时会忽略此元素

11. css权重

<div id="a">
  <span class="b">222</span> // 红色
</div>

div span{
  color: blue;
}
#a {
  color: red;
}

!important(10000) > 内联样式(1000) > id(100) > class|伪类|属性选择(10) > 标签|伪元素(1) > 通配符(0) > 继承(无)

12 盒模型层级关系

13 移动端适配

设置meta标签

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

通过根元素的font-size转换rem
- 将屏幕等分成10份，1份所对应的宽度设为根元素的font-size，并且将根元素的font-size设为1rem
- 确定了等份数，在不同分辨率下通过下面公式即可转换根元素的大小
转换公式：document.documentElement.style.fontSize = document.documentElement.clientWidth / 10 + 'px'

14 flex布局，两个子元素靠左，一个元素靠右

html
<div>
  <span class="s1">1</span>
  <span class="s2">2</span>
  <span class="s3">3</span>
</div>

css
span {
  width: 30px;
  height: 30px;
  border: 1px solid red;
}
div {
  display: flex;
  border: 1px solid blue;
}
.s3 {
  margin-left: auto;
}

原因：在flex上下文，margin:auto会填补空白区域

15 1px解决方案

👉 详情点击

知识总结[CSS篇]