盒模型
CSS盒模型本质是一个盒子，封装周围的HTML元素，包括margin，border，padding，和content。
根据盒子大小的计算方式不同，盒模型分为两种：
1. 标准盒模型：box-sizing: content-box。设置 width 和 height 设置的是 content 的大小。盒子实际的宽度需要加上两边的 border 和 padding。
2. 怪异盒模型（IE盒模型）：box-sizing: border-box。设置 width 和 height 设置的是盒子的大小，如果有 padding 和 border 会压缩 content 区域。
HTML语义化
HTML语义化简单呢来说就是正确的标签做正确的事。给某个内容使用恰当的标签，能使页面拥有良好清晰的结构。
常见的语义化标签：
header、footer、main、h1-h6等。
优点：
1. 在没有 css 的情况下，页面也能呈现出清晰的结构。
2. 有助于SEO和搜索引擎建立良好的沟通，有助于爬虫抓取更多的有效信息。（爬虫是依赖于标签来确定上下文和关键词的权重的。）
3. 增强代码的可读性，方便团队开发和维护。
对浮动的理解
浮动的作用：
1. 对于图片，浮动可以实现文字环绕图片。
2. 对于块级元素，浮动可以使块级元素横向排列。
3. 对于行内元素，浮动可以设置宽度，同时可以对齐排列盒子。
浮动的特点：
浮动会脱离文档流，当父元素不设置高度的时候，需要子元素撑开，而子元素浮动就会导致父元素高度塌陷的问题。
解决塌陷问题：(2, 3, 4也是清除浮动的方法)
1. 给父元素设置高度。
2. 给父元素设置overflow: hidden。
3. 在下方创建一个空白元素，添加样式clear: both。
4. 给父级元素添加伪类::after: {content: ”, clear: both, display: table}
样式优先级规则
!import > 行内 > id > class选择器/伪类选择器 > 元素选择器/伪元素
!import：10000
行内：1000
id选择器：100
class选择器/伪类选择器：10
元素选择器/伪元素：1
继承/通配符：0
CSS尺寸设置单位
共有五个单位，px，rem，em，vw，vh。除了px为绝对单位其余都是相对的。
px: 绝对长度单位。大小取决于屏幕分辨率。
rem: 相对长度，相对于根元素像素。
em: 相对长度，相对于当前元素字体大小的倍数，自己没有设置font-size时相对于父类。
vw: 视口宽度。
vh: 视口高度。
对BFC的理解
BFC全称：block Formatting Content，块级格式化上下文。简单来说BFC是页面中的一个隔离的独立容器，让空间里的子元素不会影响到外面的元素布局。
BFC可以解决什么问题：
1. 使用浮动，父元素高度塌陷的问题。（最常见给父元素设置：overflow: hidden)
2. 解决上下相邻两个元素外边距折叠。（可以给其中一个元素加上display: inline-block)
怎样触发BFC：
* 浮动
* overflow: hidden
* disply: flex / inline-block
* position: absolute / fixed
元素水平垂直居中方法
1. 绝对定位：position: absolute; left: -50%; top: -50%; transform: translate(-50%, -50%)
2. flex布局：display: flex; align-items: center; justif服务器托管网y-content: center
3. table-cell：父元素{ display: table-cell; vertical-align: middle; text-align: center }，子元素{ display: inline-block }。
4. display: grid网格布局（和flex布局类似，只是把 display: flex 改为 display: grid。兼容性ie10以上。）
三栏布局实现方案
三栏布局是什么：两端固定，中间自适应。
方案：
1. flex布局：display:flex，左右定宽，中间flex:1
2. 绝对定位：两边定宽分别定位到两边，中间宽度100%-两边宽度，中间margin-left: 左边宽度。
3. 圣杯布局：
利用浮动和负边距来实现。父元素设置左右padding，中间内容元素需要放在前面。三列都设置float: left。再给左边元素margin-left: -100%，右边元素margin-left: 负数元素宽度，再利用相对定位定位到两边。（需要注意的是，当中间宽度小于两边宽度时，布局会错乱，双飞翼没有这个问题）
.father{
padding: 0 120px; /*对整体div设置内边距，之后将两边div移到内容区以外*/
}
.col{
float: left; /*使用浮动，使用margin-left就可以移到上一行*/
height: 200px;
position: relative; /*采用相对定位，相对自己的位置挪出去*/
}
.left,.right{
width: 120px; /*设置两边的宽度*/
}
.left{
background-color: blue;
margin-left: -100%;
right: 120px; /*把图像的右边缘设置在其包含元素右边缘向左 120 像素的位置*/
}
.right{
background-color: green;
margin-left: -120px;
left: 120px;
}
.main{
width: 100%;
background-color: pink;
}4. 双飞翼布局：
跟圣杯模式写法类似，左右位置的保留不需要用过父元素padding，给中间元素再加一个子元素加margin预留左右位置。
.father{
overflow: hidden; // 去除父元素浮动
}
.col{
float: left; 服务器托管网/*使用浮动，使用margin-left就可以移到上一行*/
height: 200px;
}
.left,.right{
width: 120px; /*设置两边的宽度*/
}
.left{
background-color: blue;
margin-left: -100%;
}
.right{
background-color: green;
margin-left: -120px;
}
.main{
width: 100%;
background-color: pink;
}服务器托管，北京服务器托管，服务器租用 http://www.fwqtg.net
相关推荐: 数据分析基础之《pandas（7）—高级处理2》
四、合并 如果数据由多张表组成，那么有时候需要将不同的内容合并在一起分析 1、先回忆下numpy中如何合并 水平拼接 np.hstack() 竖直拼接 np.vstack() 两个都能实现 np.concatenate((a, b), axis=) 2、pd.…
